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.
This commit is contained in:
Developer
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user