Developer
0c5698c903
Slice 3 of observability-service-registry (frontend). The Observability
page discovers Grafana from the service registry instead of env vars,
adds Grafana + Prometheus health cards, and ships an alertmanager
active_alerts dashboard widget.
- types: added GrafanaStatus + PrometheusStatus; added optional
service_id/error to AlertmanagerStatus.
- api/client.ts + hooks/useObservability.ts: fetchGrafanaStatus,
fetchPrometheusStatus, useGrafanaStatus, usePrometheusStatus.
- widgets/AlertmanagerAlertsWidget.tsx (new): presentational widget
consuming the active_alerts summary shape (total/by_severity/alerts);
exported from widgets/index.ts.
- integrations/registry.ts: alertmanager binding (active_alerts kind,
30s refresh, optional severity_filter); registry.test.ts updated to
6 service types incl alertmanager + a resolve test.
- components/ObservabilityPage.tsx: removed
import.meta.env.VITE_GRAFANA_URL; derive GRAFANA_BASE_URL from the
first enabled grafana service via useServiceInstances("grafana");
added Grafana + Prometheus HealthCards (up/not-configured/unreachable)
with QueryError retry blocks; machine dashboard shows a "No Grafana
service configured" empty-state linking to /services when none is set.
npm run build (tsc -b + vite) clean; 0 lint errors; 72 frontend tests
pass. Reviewed fresh-context (read-only): no blockers.
70 lines
1.5 KiB
TypeScript
70 lines
1.5 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import {
|
|
fetchAlertmanagerAlerts,
|
|
fetchAlertmanagerStatus,
|
|
fetchGrafanaStatus,
|
|
fetchPrometheusStatus,
|
|
fetchPrometheusTargets,
|
|
fetchMonitoringMachines,
|
|
} from "../api/client";
|
|
|
|
export function useAlertmanagerAlerts() {
|
|
return useQuery({
|
|
queryKey: ["observability", "alerts"],
|
|
queryFn: fetchAlertmanagerAlerts,
|
|
retry: 2,
|
|
staleTime: 10_000,
|
|
refetchInterval: 15_000,
|
|
});
|
|
}
|
|
|
|
export function useAlertmanagerStatus() {
|
|
return useQuery({
|
|
queryKey: ["observability", "alertmanager-status"],
|
|
queryFn: fetchAlertmanagerStatus,
|
|
retry: 2,
|
|
staleTime: 10_000,
|
|
refetchInterval: 30_000,
|
|
});
|
|
}
|
|
|
|
export function useGrafanaStatus() {
|
|
return useQuery({
|
|
queryKey: ["observability", "grafana-status"],
|
|
queryFn: fetchGrafanaStatus,
|
|
retry: 2,
|
|
staleTime: 10_000,
|
|
refetchInterval: 30_000,
|
|
});
|
|
}
|
|
|
|
export function usePrometheusStatus() {
|
|
return useQuery({
|
|
queryKey: ["observability", "prometheus-status"],
|
|
queryFn: fetchPrometheusStatus,
|
|
retry: 2,
|
|
staleTime: 10_000,
|
|
refetchInterval: 30_000,
|
|
});
|
|
}
|
|
|
|
export function usePrometheusTargets() {
|
|
return useQuery({
|
|
queryKey: ["observability", "prometheus-targets"],
|
|
queryFn: fetchPrometheusTargets,
|
|
retry: 2,
|
|
staleTime: 10_000,
|
|
refetchInterval: 30_000,
|
|
});
|
|
}
|
|
|
|
export function useMonitoringMachines() {
|
|
return useQuery({
|
|
queryKey: ["monitoring", "machines"],
|
|
queryFn: fetchMonitoringMachines,
|
|
retry: 2,
|
|
staleTime: 10_000,
|
|
refetchInterval: 30_000,
|
|
});
|
|
}
|