feat(observability): persist standalone stack data and expose ports via env
- Switch docker-compose.observability.yml from named volumes to host bind mounts under OBSERVABILITY_DATA_ROOT, defaulting to ./observability-data. - Make all service ports configurable via environment variables (PROMETHEUS_PORT, LOKI_PORT, ALLOY_PORT, GRAFANA_PORT, ALERTMANAGER_PORT, NODE_EXPORTER_PORT). - Add VITE_GRAFANA_URL handling to ObservabilityPage so Grafana links point to the configured standalone instance. - Update docs/observability-runbooks.md with the env variable table, reachable-web-UI table, and backup/restore instructions for the new host-directory layout.
This commit is contained in:
Developer
@@ -37,9 +37,14 @@ 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";
|
||||
const GRAFANA_BASE_URL =
|
||||
import.meta.env.VITE_GRAFANA_URL || "http://localhost:3000";
|
||||
|
||||
function severityVariant(
|
||||
severity: string,
|
||||
@@ -112,7 +117,9 @@ 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>
|
||||
);
|
||||
@@ -150,7 +157,9 @@ 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>
|
||||
@@ -168,7 +177,8 @@ 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,7 +255,12 @@ function GrafanaLinkCard({
|
||||
<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">
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="gap-1"
|
||||
>
|
||||
Open in Grafana
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
@@ -283,7 +298,8 @@ 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],
|
||||
);
|
||||
|
||||
@@ -295,7 +311,8 @@ export function ObservabilityPage() {
|
||||
|
||||
const logsUrl = useMemo(() => {
|
||||
if (!selectedMachine) return "";
|
||||
const container = selectedMachine.mode === "local" ? "backend" : selectedMachine.name;
|
||||
const container =
|
||||
selectedMachine.mode === "local" ? "backend" : selectedMachine.name;
|
||||
return `${GRAFANA_BASE_URL}/explore?orgId=1&left=${encodeURIComponent(
|
||||
JSON.stringify({
|
||||
datasource: "Loki",
|
||||
@@ -352,7 +369,13 @@ 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}
|
||||
@@ -383,16 +406,32 @@ 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>
|
||||
|
||||
@@ -400,7 +439,8 @@ 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>
|
||||
)}
|
||||
@@ -434,8 +474,12 @@ 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>
|
||||
)}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user