fix: Grafana monitoring page iframe embedding and dynamic cluster configuration (#642)

szedan-rh · rootfs · JaredforReal · web-flow · commit 4e2ee29555cc · 2025-11-18T01:03:49.000+08:00
Fixes multiple Grafana integration issues in the dashboard: 405 login errors, localhost redirects, iframe reload loops, and hardcoded cluster URLs.

Changes:
- dashboard/backend/router/router.go: Enhanced login routing to detect Grafana requests via Content-Type/Referer headers
- dashboard/frontend/src/pages/MonitoringPage.tsx: Removed two-step load causing redirect loops, direct dashboard loading via goto endpoint
- deploy/openshift/observability/grafana/deployment.yaml: Added proper server config with dynamic route URL placeholder
- deploy/openshift/deploy-to-openshift.sh: Dynamic route URL substitution for cluster-agnostic deployments

Signed-off-by: Senan Zedan &lt;szedan@redhat.com&gt;
Co-authored-by: Huamin Chen &lt;rootfs@users.noreply.github.com&gt;
Co-authored-by: Jared &lt;w13431838023@gmail.com&gt;
diff --git a/dashboard/backend/router/router.go b/dashboard/backend/router/router.go
@@ -201,7 +201,25 @@ func Setup(cfg *config.Config) *http.ServeMux {
 			if middleware.HandleCORSPreflight(w, r) {
 				return
 			}
-			log.Printf("Proxying Chat UI login: %s %s", r.Method, r.URL.Path)
+			// Check if this is a Grafana login request by:
+			// 1. Query parameter redirectTo with "goto" (GET requests)
+			// 2. Referer header containing "/embedded/grafana" or "/monitoring"
+			// 3. Content-Type: application/json (Grafana uses JSON for login POST)
+			redirectTo := r.URL.Query().Get("redirectTo")
+			referer := r.Header.Get("Referer")
+			contentType := r.Header.Get("Content-Type")
+
+			isGrafanaRequest := (redirectTo != "" && strings.Contains(redirectTo, "goto")) ||
+				strings.Contains(referer, "/embedded/grafana") ||
+				strings.Contains(referer, "/monitoring") ||
+				strings.Contains(contentType, "application/json")
+
+			if isGrafanaRequest && grafanaStaticProxy != nil {
+				log.Printf("Proxying Grafana login: %s %s (redirectTo=%s, referer=%s, contentType=%s)", r.Method, r.URL.Path, redirectTo, referer, contentType)
+				grafanaStaticProxy.ServeHTTP(w, r)
+				return
+			}
+			log.Printf("Proxying Chat UI login: %s %s (contentType=%s)", r.Method, r.URL.Path, contentType)
 			chatUIProxy.ServeHTTP(w, r)
 		})
 		mux.HandleFunc("/logout", func(w http.ResponseWriter, r *http.Request) {
diff --git a/dashboard/frontend/src/pages/MonitoringPage.tsx b/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
diff --git a/deploy/openshift/dashboard/dashboard-deployment.yaml b/deploy/openshift/dashboard/dashboard-deployment.yaml
@@ -12,7 +12,6 @@ data:
   TARGET_ROUTER_METRICS_URL: "http://semantic-router:9190/metrics"
   TARGET_OPENWEBUI_URL: "http://openwebui:3000"
   TARGET_CHATUI_URL: "http://chatui:3000"
-  TARGET_JAEGER_URL: "http://jaeger:16686"
   ROUTER_CONFIG_PATH: "/app/config/config.yaml"
 
 ---
diff --git a/deploy/openshift/deploy-to-openshift.sh b/deploy/openshift/deploy-to-openshift.sh
@@ -204,6 +204,7 @@ success "Dynamic config generated with IPs: Model-A=$MODEL_A_IP, Model-B=$MODEL_
 log "Creating ConfigMaps with dynamic IPs..."
 oc create configmap semantic-router-config \
     --from-file=config.yaml="$TEMP_CONFIG" \
+    --from-file=tools_db.json="$SCRIPT_DIR/tools_db.json" \
     -n "$NAMESPACE" --dry-run=client -o yaml | oc apply -f -
 
 oc create configmap envoy-config \
@@ -346,10 +347,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..."
diff --git a/deploy/openshift/observability/grafana/deployment.yaml b/deploy/openshift/observability/grafana/deployment.yaml
@@ -48,6 +48,18 @@ spec:
           value: ""
         - name: GF_PATHS_PROVISIONING
           value: /etc/grafana/provisioning
+        - name: GF_SERVER_SERVE_FROM_SUB_PATH
+          value: "true"
+        - name: GF_SERVER_ROOT_URL
+          value: "DYNAMIC_GRAFANA_ROUTE_URL"
+        - name: GF_SERVER_PROTOCOL
+          value: "http"
+        - name: GF_SECURITY_ALLOW_EMBEDDING
+          value: "true"
+        - name: GF_AUTH_ANONYMOUS_ENABLED
+          value: "true"
+        - name: GF_AUTH_ANONYMOUS_ORG_ROLE
+          value: "Viewer"
         volumeMounts:
         - name: storage
           mountPath: /var/lib/grafana
diff --git a/deploy/openshift/tools_db.json b/deploy/openshift/tools_db.json
@@ -0,0 +1,143 @@
+[
+  {
+    "tool": {
+      "type": "function",
+      "function": {
+        "name": "get_weather",
+        "description": "Get current weather information for a location",
+        "parameters": {
+          "type": "object",
+          "properties": {
+            "location": {
+              "type": "string",
+              "description": "The city and state, e.g. San Francisco, CA"
+            },
+            "unit": {
+              "type": "string",
+              "enum": ["celsius", "fahrenheit"],
+              "description": "Temperature unit"
+            }
+          },
+          "required": ["location"]
+        }
+      }
+    },
+    "description": "Get current weather information, temperature, conditions, forecast for any location, city, or place. Check weather today, now, current conditions, temperature, rain, sun, cloudy, hot, cold, storm, snow",
+    "category": "weather",
+    "tags": ["weather", "temperature", "forecast", "climate"]
+  },
+  {
+    "tool": {
+      "type": "function",
+      "function": {
+        "name": "search_web",
+        "description": "Search the web for information",
+        "parameters": {
+          "type": "object",
+          "properties": {
+            "query": {
+              "type": "string",
+              "description": "The search query"
+            },
+            "num_results": {
+              "type": "integer",
+              "description": "Number of results to return",
+              "default": 5
+            }
+          },
+          "required": ["query"]
+        }
+      }
+    },
+    "description": "Search the internet, web search, find information online, browse web content, lookup, research, google, find answers, discover, investigate",
+    "category": "search",
+    "tags": ["search", "web", "internet", "information", "browse"]
+  },
+  {
+    "tool": {
+      "type": "function",
+      "function": {
+        "name": "calculate",
+        "description": "Perform mathematical calculations",
+        "parameters": {
+          "type": "object",
+          "properties": {
+            "expression": {
+              "type": "string",
+              "description": "Mathematical expression to evaluate"
+            }
+          },
+          "required": ["expression"]
+        }
+      }
+    },
+    "description": "Calculate mathematical expressions, solve math problems, arithmetic operations, compute numbers, addition, subtraction, multiplication, division, equations, formula",
+    "category": "math",
+    "tags": ["math", "calculation", "arithmetic", "compute", "numbers"]
+  },
+  {
+    "tool": {
+      "type": "function",
+      "function": {
+        "name": "send_email",
+        "description": "Send an email message",
+        "parameters": {
+          "type": "object",
+          "properties": {
+            "to": {
+              "type": "string",
+              "description": "Recipient email address"
+            },
+            "subject": {
+              "type": "string",
+              "description": "Email subject"
+            },
+            "body": {
+              "type": "string",
+              "description": "Email body content"
+            }
+          },
+          "required": ["to", "subject", "body"]
+        }
+      }
+    },
+    "description": "Send email messages, email communication, contact people via email, mail, message, correspondence, notify, inform",
+    "category": "communication",
+    "tags": ["email", "send", "communication", "message", "contact"]
+  },
+  {
+    "tool": {
+      "type": "function",
+      "function": {
+        "name": "create_calendar_event",
+        "description": "Create a new calendar event or appointment",
+        "parameters": {
+          "type": "object",
+          "properties": {
+            "title": {
+              "type": "string",
+              "description": "Event title"
+            },
+            "date": {
+              "type": "string",
+              "description": "Event date in YYYY-MM-DD format"
+            },
+            "time": {
+              "type": "string",
+              "description": "Event time in HH:MM format"
+            },
+            "duration": {
+              "type": "integer",
+              "description": "Duration in minutes"
+            }
+          },
+          "required": ["title", "date", "time"]
+        }
+      }
+    },
+    "description": "Schedule meetings, create calendar events, set appointments, manage calendar, book time, plan meeting, organize schedule, reminder, agenda",
+    "category": "productivity",
+    "tags": ["calendar", "event", "meeting", "appointment", "schedule"]
+  }
+]
+
