From e783d2c07be426dfb1253274a07b4ade13d12dc9 Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Tue, 16 Jun 2026 15:20:26 +0000
Subject: [PATCH] refactor(observability): decouple Grafana from Manage

- Replace embedded Grafana iframes in ObservabilityPage with external
  Grafana link cards. Grafana URL is configurable via VITE_GRAFANA_URL
  (frontend) or GRAFANA_URL (backend env exposed to frontend build).
- Remove the grafana scrape job from monitoring/prometheus/prometheus.yml
  so the main Prometheus stack no longer depends on Grafana.
- Pass GRAFANA_URL through docker-compose.yml and docker-compose.dev.yml.
---
 docker-compose.dev.yml                        |   1 +
 docker-compose.yml                            |   1 +
 frontend/src/components/ObservabilityPage.tsx | 267 ++++--------------
 monitoring/prometheus/prometheus.yml          |   5 -
 4 files changed, 52 insertions(+), 222 deletions(-)

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 53902c7..29190a0 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -16,6 +16,7 @@ services:
       SSH_KNOWN_HOSTS_PATH: /app/backend/.cache/known_hosts
       PROMETHEUS_FILE_SD_DIR: /app/backend/.cache/prometheus-file-sd
       ALERTMANAGER_URL: ${ALERTMANAGER_URL:-http://alertmanager:9093}
+      GRAFANA_URL: ${GRAFANA_URL:-http://grafana:3000}
     ports:
       - "8000:8000"
     volumes:
diff --git a/docker-compose.yml b/docker-compose.yml
index a2a4cc9..72e2ee5 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -27,6 +27,7 @@ services:
       SSH_KNOWN_HOSTS_PATH: /app/backend/.cache/known_hosts
       PROMETHEUS_FILE_SD_DIR: ${PROMETHEUS_FILE_SD_DIR:-/app/backend/.cache/prometheus-file-sd}
       ALERTMANAGER_URL: ${ALERTMANAGER_URL:-http://alertmanager:9093}
+      GRAFANA_URL: ${GRAFANA_URL:-http://grafana:3000}
     volumes:
       - ${BACKEND_CACHE_DIR:-./backend-cache}:/app/backend/.cache
     restart: unless-stopped
diff --git a/frontend/src/components/ObservabilityPage.tsx b/frontend/src/components/ObservabilityPage.tsx
index 652e39b..60e845a 100644
--- a/frontend/src/components/ObservabilityPage.tsx
+++ b/frontend/src/components/ObservabilityPage.tsx
@@ -1,13 +1,4 @@
-import {
-	Component,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-	type ElementType,
-	type ErrorInfo,
-	type ReactNode,
-} from "react";
+import { useMemo, useState, type ElementType, type ReactNode } from "react";
 import { Link } from "react-router-dom";
 import {
 	Activity,
@@ -17,7 +8,6 @@ import {
 	ChevronDown,
 	ExternalLink,
 	Inbox,
-	PanelTop,
 	Radio,
 	RefreshCw,
 	Server,
@@ -47,11 +37,9 @@ import {
 	CollapsibleContent,
 	CollapsibleTrigger,
 } from "@/components/ui/collapsible";
-import type {
-	AlertmanagerAlert,
-	MonitoringMachine,
-	PrometheusTarget,
-} from "../types";
+import type { AlertmanagerAlert, MonitoringMachine, PrometheusTarget } from "../types";
+
+const GRAFANA_BASE_URL = import.meta.env.VITE_GRAFANA_URL || "http://localhost:3000";
 
 function severityVariant(
 	severity: string,
@@ -124,9 +112,7 @@ function EmptyState({
 		<div className="flex h-full min-h-[160px] flex-col items-center justify-center gap-2 rounded-md border p-6 text-center">
 			<Icon className="h-8 w-8 text-muted-foreground" />
 			<div className="font-medium">{title}</div>
-			<div className="max-w-md text-sm text-muted-foreground">
-				{description}
-			</div>
+			<div className="max-w-md text-sm text-muted-foreground">{description}</div>
 			{action ? <div className="mt-2">{action}</div> : null}
 		</div>
 	);
@@ -164,9 +150,7 @@ function AlertItem({ alert }: { alert: AlertmanagerAlert }) {
 					<div className="flex items-start justify-between gap-2">
 						<div className="font-medium text-sm">{alert.name}</div>
 						<div className="flex items-center gap-1">
-							<Badge variant={severityVariant(alert.severity)}>
-								{alert.severity}
-							</Badge>
+							<Badge variant={severityVariant(alert.severity)}>{alert.severity}</Badge>
 							<ChevronDown className="h-4 w-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
 						</div>
 					</div>
@@ -184,8 +168,7 @@ function AlertItem({ alert }: { alert: AlertmanagerAlert }) {
 				<div className="space-y-2 rounded-b-lg border-x border-b p-3 text-sm">
 					{alert.description && (
 						<div>
-							<span className="font-medium">Description:</span>{" "}
-							{alert.description}
+							<span className="font-medium">Description:</span> {alert.description}
 						</div>
 					)}
 					<div className="grid grid-cols-2 gap-2 text-xs">
@@ -245,119 +228,30 @@ function TargetsTable({ targets }: { targets: PrometheusTarget[] }) {
 	);
 }
 
-class GrafanaErrorBoundary extends Component<
-	{ children: ReactNode; fallback: ReactNode },
-	{ hasError: boolean }
-> {
-	constructor(props: { children: ReactNode; fallback: ReactNode }) {
-		super(props);
-		this.state = { hasError: false };
-	}
-
-	static getDerivedStateFromError() {
-		return { hasError: true };
-	}
-
-	componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-		console.error("Grafana panel error:", error, errorInfo);
-	}
-
-	render() {
-		if (this.state.hasError) {
-			return this.props.fallback;
-		}
-		return this.props.children;
-	}
-}
-
-function GrafanaPanel({ src, title }: { src: string; title: string }) {
-	const [loaded, setLoaded] = useState(false);
-	const [failed, setFailed] = useState(false);
-	const [iframeKey, setIframeKey] = useState(0);
-	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-	useEffect(() => {
-		timerRef.current = setTimeout(() => setFailed(true), 10_000);
-		return () => {
-			if (timerRef.current) clearTimeout(timerRef.current);
-		};
-	}, [iframeKey]);
-
-	const handleLoad = () => {
-		if (timerRef.current) clearTimeout(timerRef.current);
-		setLoaded(true);
-		setFailed(false);
-	};
-
-	const handleError = () => {
-		if (timerRef.current) clearTimeout(timerRef.current);
-		setFailed(true);
-	};
-
-	const reload = () => {
-		setLoaded(false);
-		setFailed(false);
-		setIframeKey((k) => k + 1);
-	};
-
-	if (!src) {
-		return (
-			<EmptyState
-				icon={PanelTop}
-				title="No Grafana URL"
-				description="Select a machine to load a Grafana panel."
-			/>
-		);
-	}
-
-	const fallback = (
-		<EmptyState
-			icon={PanelTop}
-			title="Grafana panel unavailable"
-			description="The panel did not load in time or Grafana is unreachable."
-			action={
-				<div className="flex flex-wrap justify-center gap-2">
-					<Button variant="outline" size="sm" onClick={reload}>
-						<RefreshCw className="mr-1 h-3 w-3" />
-						Reload
-					</Button>
-					<Button variant="outline" size="sm" asChild>
-						<a href={src} target="_blank" rel="noopener noreferrer">
-							<ExternalLink className="mr-1 h-3 w-3" />
-							Open in Grafana
-						</a>
-					</Button>
-				</div>
-			}
-		/>
-	);
-
+function GrafanaLinkCard({
+	title,
+	description,
+	href,
+}: {
+	title: string;
+	description: string;
+	href: string;
+}) {
 	return (
-		<GrafanaErrorBoundary key={iframeKey} fallback={fallback}>
-			<div className="relative h-full min-h-[320px] w-full overflow-hidden rounded-md border">
-				{!loaded && !failed && (
-					<div className="absolute inset-0 z-10 p-4">
-						<Skeleton className="h-full w-full" />
-					</div>
-				)}
-				{failed ? (
-					<div className="absolute inset-0 z-10 bg-background p-2">
-						{fallback}
-					</div>
-				) : (
-					<iframe
-						key={iframeKey}
-						title={title}
-						src={src}
-						className="h-full min-h-[320px] w-full"
-						allow="fullscreen"
-						sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
-						onLoad={handleLoad}
-						onError={handleError}
-					/>
-				)}
+		<div className="rounded-md border p-4">
+			<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+				<div>
+					<div className="font-medium">{title}</div>
+					<div className="text-sm text-muted-foreground">{description}</div>
+				</div>
+				<Button variant="outline" size="sm" asChild>
+					<a href={href} target="_blank" rel="noopener noreferrer" className="gap-1">
+						Open in Grafana
+						<ExternalLink className="h-3 w-3" />
+					</a>
+				</Button>
 			</div>
-		</GrafanaErrorBoundary>
+		</div>
 	);
 }
 
@@ -389,24 +283,20 @@ export function ObservabilityPage() {
 	const [selectedMachineId, setSelectedMachineId] = useState<string>("");
 
 	const selectedMachine = useMemo<MonitoringMachine | null>(
-		() =>
-			machines.find((m) => m.id === selectedMachineId) ?? machines[0] ?? null,
+		() => machines.find((m) => m.id === selectedMachineId) ?? machines[0] ?? null,
 		[machines, selectedMachineId],
 	);
 
-	const grafanaBase = "/grafana";
-
 	const nodeExporterDashboardUrl = useMemo(() => {
 		if (!selectedMachine) return "";
 		const instance = `${selectedMachine.host || "localhost"}:9100`;
-		return `${grafanaBase}/d/node-exporter-overview/node-exporter-overview?kiosk&var-instance=${encodeURIComponent(instance)}`;
+		return `${GRAFANA_BASE_URL}/d/node-exporter-overview/node-exporter-overview?kiosk&var-instance=${encodeURIComponent(instance)}`;
 	}, [selectedMachine]);
 
 	const logsUrl = useMemo(() => {
 		if (!selectedMachine) return "";
-		const container =
-			selectedMachine.mode === "local" ? "backend" : selectedMachine.name;
-		return `${grafanaBase}/explore?orgId=1&left=${encodeURIComponent(
+		const container = selectedMachine.mode === "local" ? "backend" : selectedMachine.name;
+		return `${GRAFANA_BASE_URL}/explore?orgId=1&left=${encodeURIComponent(
 			JSON.stringify({
 				datasource: "Loki",
 				queries: [{ refId: "A", expr: `{container="${container}"}` }],
@@ -453,8 +343,8 @@ export function ObservabilityPage() {
 			<div className="space-y-1">
 				<h1 className="text-2xl font-bold tracking-tight">Observability</h1>
 				<p className="text-sm text-muted-foreground">
-					Unified view of metrics, logs, and alerts from Prometheus, Grafana,
-					Loki, and Alertmanager.
+					Unified view of metrics, logs, and alerts from Prometheus, Loki, and
+					Alertmanager. Deep dashboards live in Grafana.
 				</p>
 			</div>
 
@@ -462,13 +352,7 @@ export function ObservabilityPage() {
 				<HealthCard
 					title="Alertmanager"
 					status={
-						statusError
-							? "error"
-							: alertmanagerStatus?.up
-								? "ok"
-								: statusLoading
-									? "unknown"
-									: "error"
+						statusError ? "error" : alertmanagerStatus?.up ? "ok" : statusLoading ? "unknown" : "error"
 					}
 					detail={alertmanagerStatusDetail}
 					icon={Bell}
@@ -499,32 +383,16 @@ export function ObservabilityPage() {
 
 			<div className="space-y-3">
 				{statusError && (
-					<QueryError
-						label="Alertmanager status"
-						error={statusError}
-						refetch={refetchStatus}
-					/>
+					<QueryError label="Alertmanager status" error={statusError} refetch={refetchStatus} />
 				)}
 				{alertsError && (
-					<QueryError
-						label="Active alerts"
-						error={alertsError}
-						refetch={refetchAlerts}
-					/>
+					<QueryError label="Active alerts" error={alertsError} refetch={refetchAlerts} />
 				)}
 				{targetsError && (
-					<QueryError
-						label="Prometheus targets"
-						error={targetsError}
-						refetch={refetchTargets}
-					/>
+					<QueryError label="Prometheus targets" error={targetsError} refetch={refetchTargets} />
 				)}
 				{machinesError && (
-					<QueryError
-						label="Monitoring machines"
-						error={machinesError}
-						refetch={refetchMachines}
-					/>
+					<QueryError label="Monitoring machines" error={machinesError} refetch={refetchMachines} />
 				)}
 			</div>
 
@@ -532,8 +400,7 @@ export function ObservabilityPage() {
 				<Alert variant="destructive">
 					<AlertTitle>Alertmanager unreachable</AlertTitle>
 					<AlertDescription>
-						The UI cannot reach Alertmanager right now. Alerts shown here may be
-						stale.
+						The UI cannot reach Alertmanager right now. Alerts shown here may be stale.
 					</AlertDescription>
 				</Alert>
 			)}
@@ -567,12 +434,8 @@ export function ObservabilityPage() {
 									))}
 									{alertsSummary.total > alertsSummary.alerts.length && (
 										<div className="text-center text-xs text-muted-foreground">
-											{alertsSummary.total - alertsSummary.alerts.length} more
-											alert
-											{alertsSummary.total - alertsSummary.alerts.length === 1
-												? ""
-												: "s"}{" "}
-											in Alertmanager
+											{alertsSummary.total - alertsSummary.alerts.length} more alert
+											{alertsSummary.total - alertsSummary.alerts.length === 1 ? "" : "s"} in Alertmanager
 										</div>
 									)}
 								</>
@@ -637,52 +500,22 @@ export function ObservabilityPage() {
 					<CardContent className="space-y-4">
 						{selectedMachine ? (
 							<>
-								<div className="flex items-center justify-between">
-									<div className="text-sm font-medium">
-										{selectedMachine.name} metrics
-									</div>
-									<Button variant="outline" size="sm" asChild>
-										<a
-											href={nodeExporterDashboardUrl}
-											target="_blank"
-											rel="noopener noreferrer"
-											className="gap-1"
-										>
-											Open in Grafana
-											<ExternalLink className="h-3 w-3" />
-										</a>
-									</Button>
-								</div>
-								<GrafanaPanel
-									key={nodeExporterDashboardUrl}
-									src={nodeExporterDashboardUrl}
+								<GrafanaLinkCard
 									title={`${selectedMachine.name} metrics`}
+									description="Open the Node Exporter overview dashboard for this machine in Grafana."
+									href={nodeExporterDashboardUrl}
 								/>
-								<div className="flex items-center justify-between pt-2">
-									<div className="text-sm font-medium">Recent logs</div>
-									<Button variant="outline" size="sm" asChild>
-										<a
-											href={logsUrl}
-											target="_blank"
-											rel="noopener noreferrer"
-											className="gap-1"
-										>
-											Explore in Grafana
-											<ExternalLink className="h-3 w-3" />
-										</a>
-									</Button>
-								</div>
-								<GrafanaPanel
-									key={logsUrl}
-									src={logsUrl}
+								<GrafanaLinkCard
 									title={`${selectedMachine.name} logs`}
+									description="Explore Loki logs for this machine in Grafana."
+									href={logsUrl}
 								/>
 							</>
 						) : (
 							<EmptyState
 								icon={ServerOff}
 								title="No machine selected"
-								description="Add monitoring machines in Settings to embed Grafana dashboards."
+								description="Add monitoring machines in Settings to see Grafana drill-down links."
 								action={
 									<Button variant="outline" size="sm" asChild>
 										<Link to="/settings">Open Settings</Link>
diff --git a/monitoring/prometheus/prometheus.yml b/monitoring/prometheus/prometheus.yml
index 324fecf..1c02edc 100644
--- a/monitoring/prometheus/prometheus.yml
+++ b/monitoring/prometheus/prometheus.yml
@@ -41,11 +41,6 @@ scrape_configs:
       - targets:
           - alertmanager:9093
 
-  - job_name: grafana
-    static_configs:
-      - targets:
-          - grafana:3000
-
   - job_name: node-exporter-remote
     file_sd_configs:
       - files: