fix: Grafana monitoring page iframe embedding and dynamic cluster configuration

This commit resolves multiple issues with Grafana integration in the dashboard:

1. **Fixed 405 Method Not Allowed on Grafana login**
   - Updated router.go to properly detect Grafana login requests
   - Added Content-Type header checking for POST login requests
   - Grafana uses application/json while ChatUI uses form data

2. **Fixed localhost redirect loop after Grafana login**
   - Added comprehensive Grafana server configuration
   - Set GF_SERVER_ROOT_URL to Grafana's own route
   - Added GF_SERVER_PROTOCOL=http to prevent HTTPS redirect loop
   - Enabled anonymous access to avoid login redirects in iframe

3. **Fixed frontend iframe redirect loop**
   - Removed two-step load process causing infinite redirects
   - Load dashboard directly via goto endpoint
   - Eliminated automatic redirect logic from useEffect

4. **Made Grafana configuration cluster-agnostic**
   - Changed deployment.yaml to use DYNAMIC_GRAFANA_ROUTE_URL placeholder
   - Updated deploy-to-openshift.sh to dynamically substitute route URL
   - Configuration now works across different OpenShift clusters

Changes:
- dashboard/backend/router/router.go: Enhanced login routing logic
- dashboard/frontend/src/pages/MonitoringPage.tsx: Direct dashboard loading
- deploy/openshift/observability/grafana/deployment.yaml: Dynamic URL configuration
- deploy/openshift/deploy-to-openshift.sh: Added dynamic route URL substitution

Signed-off-by: szedan <szedan@redhat.com>

Author: szedan-rh

dashboard/frontend/src/pages/MonitoringPage.tsx

@@ -31,38 +31,15 @@ const MonitoringPage: React.FC = () => {
     return () => observer.disconnect()
   }, [theme])
 
-  // Build initial Grafana URL - load the root path first
-  const buildInitialGrafanaUrl = () => {
-    // Start with Grafana root path
-    const url = `/embedded/grafana/?orgId=1&theme=${theme}`
-    console.log('Initial Grafana URL:', url)
-    return url
-  }
-
-  // Build dashboard URL using goto endpoint - this is what Grafana uses internally
-  const buildDashboardUrl = () => {
-    // Use Grafana's goto endpoint to navigate by UID
-    // This mimics the internal navigation when clicking Home
+  // Build Grafana dashboard URL directly
+  const buildGrafanaUrl = () => {
+    // Load the dashboard directly using the goto endpoint
+    // This is the cleanest approach and avoids redirect loops
     const url = `/embedded/grafana/goto/llm-router-metrics?orgId=1&theme=${theme}&refresh=30s`
-    console.log('Dashboard goto URL:', url)
+    console.log('Grafana URL:', url)
     return url
   }
 
-  // Add effect to handle automatic redirect to dashboard
-  useEffect(() => {
-    // After initial page load, wait a bit then redirect to dashboard using goto
-    const timer = setTimeout(() => {
-      if (iframeRef.current) {
-        console.log('Redirecting to dashboard using goto...')
-        // Use goto endpoint to navigate to dashboard (mimics clicking Home)
-        iframeRef.current.src = buildDashboardUrl()
-      }
-      setLoading(false)
-    }, 100) // Wait 0.1 seconds after initial load
-
-    return () => clearTimeout(timer)
-  }, [theme])
-
 
 
   const handleIframeLoad = () => {
@@ -95,7 +72,7 @@ const MonitoringPage: React.FC = () => {
         <iframe
           ref={iframeRef}
           key={`grafana-${theme}`}
-          src={buildInitialGrafanaUrl()}
+          src={buildGrafanaUrl()}
           className={styles.iframe}
           title="Grafana Dashboard"
           allowFullScreen

deploy/openshift/deploy-to-openshift.sh

@@ -336,10 +336,51 @@ EOF
     oc apply -f "$SCRIPT_DIR/openwebui/route.yaml" -n "$NAMESPACE"
     success "OpenWebUI deployed"
 
-    # Deploy Grafana
+    # Deploy Grafana with dynamic route URL
     log "Deploying Grafana..."
-    oc apply -f "$SCRIPT_DIR/observability/grafana/" -n "$NAMESPACE"
-    success "Grafana deployed"
+
+    # First apply Grafana resources to create the route
+    oc apply -f "$SCRIPT_DIR/observability/grafana/pvc.yaml" -n "$NAMESPACE" 2>/dev/null || true
+    oc apply -f "$SCRIPT_DIR/observability/grafana/service.yaml" -n "$NAMESPACE" 2>/dev/null || true
+    oc apply -f "$SCRIPT_DIR/observability/grafana/route.yaml" -n "$NAMESPACE" 2>/dev/null || true
+    oc apply -f "$SCRIPT_DIR/observability/grafana/configmaps.yaml" -n "$NAMESPACE" 2>/dev/null || true
+
+    # Wait for route to be created and get its URL
+    log "Waiting for Grafana route to be created..."
+    for i in {1..30}; do
+        GRAFANA_ROUTE_URL=$(oc get route grafana -n "$NAMESPACE" -o jsonpath='{.spec.host}' 2>/dev/null || echo "")
+
+        if [[ -n "$GRAFANA_ROUTE_URL" ]]; then
+            GRAFANA_ROUTE_URL="https://$GRAFANA_ROUTE_URL"
+            success "Grafana route URL: $GRAFANA_ROUTE_URL"
+            break
+        fi
+
+        if [[ $i -eq 30 ]]; then
+            error "Timeout waiting for Grafana route"
+            exit 1
+        fi
+
+        sleep 2
+    done
+
+    # Generate Grafana deployment with dynamic route URL
+    log "Generating Grafana deployment with dynamic route URL..."
+    TEMP_GRAFANA_DEPLOYMENT="/tmp/grafana-deployment-dynamic.yaml"
+    sed "s|DYNAMIC_GRAFANA_ROUTE_URL|$GRAFANA_ROUTE_URL|g" \
+        "$SCRIPT_DIR/observability/grafana/deployment.yaml" > "$TEMP_GRAFANA_DEPLOYMENT"
+
+    # Verify the URL was substituted
+    if ! grep -q "$GRAFANA_ROUTE_URL" "$TEMP_GRAFANA_DEPLOYMENT"; then
+        error "Grafana route URL substitution failed!"
+        exit 1
+    fi
+
+    # Apply Grafana deployment with dynamic URL
+    oc apply -f "$TEMP_GRAFANA_DEPLOYMENT" -n "$NAMESPACE"
+    rm -f "$TEMP_GRAFANA_DEPLOYMENT"
+
+    success "Grafana deployed with dynamic route URL: $GRAFANA_ROUTE_URL"
 
     # Deploy Prometheus
     log "Deploying Prometheus..."

deploy/openshift/observability/grafana/deployment.yaml

@@ -51,11 +51,15 @@ spec:
         - name: GF_SERVER_SERVE_FROM_SUB_PATH
           value: "true"
         - name: GF_SERVER_ROOT_URL
-          value: "%(protocol)s://%(domain)s/embedded/grafana"
+          value: "DYNAMIC_GRAFANA_ROUTE_URL"
+        - name: GF_SERVER_PROTOCOL
+          value: "http"
         - name: GF_SECURITY_ALLOW_EMBEDDING
           value: "true"
         - name: GF_AUTH_ANONYMOUS_ENABLED
-          value: "false"
+          value: "true"
+        - name: GF_AUTH_ANONYMOUS_ORG_ROLE
+          value: "Viewer"
         volumeMounts:
         - name: storage
           mountPath: /var/lib/grafana