@@ -330,6 +370,8 @@ export default function IntegrationsPage() {
onEdit={handleEdit}
onSync={syncIntegration}
syncingIntegrations={syncingIntegrations}
+ onValidateSignals={validateSignals}
+ validatingIntegrations={validatingIntegrations}
/>
) : (
// Empty state with tiles
diff --git a/ui/src/pages/NamespaceGraphPage.tsx b/ui/src/pages/NamespaceGraphPage.tsx
index bd300f4..5a85449 100644
--- a/ui/src/pages/NamespaceGraphPage.tsx
+++ b/ui/src/pages/NamespaceGraphPage.tsx
@@ -132,8 +132,8 @@ export default function NamespaceGraphPage() {
}
}, [urlNamespace, persistedNamespace, sortedNamespaces, setSearchParams]);
- // Get default kinds from settings
- const { defaultKinds } = useSettings();
+ // Get settings
+ const { defaultKinds, hideInactiveReplicaSets } = useSettings();
// Use persisted filters for kind selection
const { kinds: selectedKinds, setKinds } = usePersistedFilters(availableKinds, [], defaultKinds);
@@ -177,10 +177,10 @@ export default function NamespaceGraphPage() {
autoLoad: true,
});
- // Filter graph data by selected kinds (client-side)
+ // Filter graph data by selected kinds and settings (client-side)
const filteredData = useMemo(() => {
if (!data) return null;
-
+
// Get UIDs of nodes in the selected causal path (if any)
// When a causal path is selected, we want to show all nodes in the path
// regardless of the kind filter
@@ -191,30 +191,50 @@ export default function NamespaceGraphPage() {
causalPathNodeUids = new Set(path.steps.map(step => step.node.resource.uid));
}
}
-
+
// Filter nodes by selected kinds, but always include nodes in the selected causal path
- const filteredNodes = selectedKinds.length > 0
- ? data.graph.nodes.filter(node =>
+ let filteredNodes = selectedKinds.length > 0
+ ? data.graph.nodes.filter(node =>
selectedKinds.includes(node.kind) || causalPathNodeUids?.has(node.uid)
)
: [];
-
+
// If no kinds are selected OR selected kinds don't match any graph nodes,
// show ALL nodes from the graph data (graceful fallback instead of empty state)
- const nodesToShow = filteredNodes.length > 0 ? filteredNodes : data.graph.nodes;
+ let nodesToShow = filteredNodes.length > 0 ? filteredNodes : data.graph.nodes;
+
+ // Filter out inactive ReplicaSets (spec.replicas = 0) if setting is enabled
+ // Always include ReplicaSets that are part of the selected causal path
+ if (hideInactiveReplicaSets) {
+ nodesToShow = nodesToShow.filter(node => {
+ // Always show nodes in causal path
+ if (causalPathNodeUids?.has(node.uid)) return true;
+ // For ReplicaSets, check if spec.replicas > 0
+ if (node.kind === 'ReplicaSet') {
+ const replicas = node.latestEvent?.specReplicas;
+ // If specReplicas is undefined, we don't know the replica count - show the node
+ // If specReplicas is 0, hide the node
+ // If specReplicas > 0, show the node
+ return replicas === undefined || replicas > 0;
+ }
+ // Non-ReplicaSet nodes are always shown
+ return true;
+ });
+ }
+
const nodeUids = new Set(nodesToShow.map(n => n.uid));
-
+
// Filter edges to only include those between visible nodes
const filteredEdges = data.graph.edges.filter(edge =>
nodeUids.has(edge.source) && nodeUids.has(edge.target)
);
-
+
return {
...data,
graph: { nodes: nodesToShow, edges: filteredEdges },
metadata: { ...data.metadata, nodeCount: nodesToShow.length, edgeCount: filteredEdges.length }
};
- }, [data, selectedKinds, selectedCausalPathId]);
+ }, [data, selectedKinds, selectedCausalPathId, hideInactiveReplicaSets]);
// Get anomalies for the selected node
const selectedNodeAnomalies = useMemo(() => {
diff --git a/ui/src/pages/ObservatoryPage.tsx b/ui/src/pages/ObservatoryPage.tsx
new file mode 100644
index 0000000..8eebfe7
--- /dev/null
+++ b/ui/src/pages/ObservatoryPage.tsx
@@ -0,0 +1,340 @@
+import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import {
+ ObservatoryGraph,
+ ObservatoryGraphHandle,
+ ObservatoryZoomControls,
+ ObservatoryNodeDetail,
+ ObservatoryLegend,
+} from '../components/Observatory';
+import { useObservatoryGraph } from '../hooks/useObservatoryGraph';
+import { D3ObservatoryNode, ObservatoryNodeType } from '../types/observatoryGraph';
+import { SelectDropdown } from '../components/SelectDropdown';
+import { useSettings, OBSERVATORY_NODE_TYPES } from '../hooks/useSettings';
+
+// All available node types for the filter (use the same list as settings)
+const NODE_TYPE_OPTIONS: ObservatoryNodeType[] = OBSERVATORY_NODE_TYPES as ObservatoryNodeType[];
+
+/**
+ * Observatory page for visualizing SignalAnchors, Alerts, Dashboards, and their relationships
+ */
+export default function ObservatoryPage() {
+ const { defaultObservatoryNodeTypes } = useSettings();
+ const [selectedNode, setSelectedNode] = useState
(null);
+ const [nodeSearch, setNodeSearch] = useState('');
+ const [namespace, setNamespace] = useState(null);
+ const [workload, setWorkload] = useState(null);
+ const [includeBaselines, setIncludeBaselines] = useState(false);
+ const [selectedNodeTypes, setSelectedNodeTypes] = useState(defaultObservatoryNodeTypes);
+ const graphRef = useRef(null);
+
+ // Track if this is the initial data load (to trigger fit-to-view)
+ const initialLoadRef = useRef(true);
+
+ const { data, isLoading, error, refetch } = useObservatoryGraph({
+ namespace: namespace || undefined,
+ workload: workload || undefined,
+ includeBaselines,
+ limit: 200,
+ });
+
+ // Extract available namespaces from Workload nodes
+ const availableNamespaces = useMemo(() => {
+ if (!data?.graph?.nodes) return [];
+ const namespaces = new Set();
+ for (const node of data.graph.nodes) {
+ if (node.type === 'Workload' && node.properties?.namespace) {
+ namespaces.add(node.properties.namespace as string);
+ }
+ }
+ return Array.from(namespaces).sort();
+ }, [data]);
+
+ // Extract available workloads for the selected namespace from Workload nodes
+ const availableWorkloads = useMemo(() => {
+ if (!data?.graph?.nodes) return [];
+ const workloads = new Set();
+ for (const node of data.graph.nodes) {
+ if (node.type === 'Workload' && node.label) {
+ // If namespace is selected, only show workloads for that namespace
+ if (!namespace || node.properties?.namespace === namespace) {
+ workloads.add(node.label);
+ }
+ }
+ }
+ return Array.from(workloads).sort();
+ }, [data, namespace]);
+
+ // Reset workload when namespace changes and trigger fit-to-view
+ const handleNamespaceChange = useCallback((value: string | string[] | null) => {
+ const newNamespace = value as string | null;
+ setNamespace(newNamespace);
+ // Reset workload filter when namespace changes
+ setWorkload(null);
+ }, []);
+
+ // Handle workload change
+ const handleWorkloadChange = useCallback((value: string | string[] | null) => {
+ setWorkload(value as string | null);
+ }, []);
+
+ // Auto fit-to-view when data changes due to filter changes
+ // Use a ref to track previous values and detect actual changes
+ const prevFiltersRef = useRef({ namespace, workload });
+ useEffect(() => {
+ const filtersChanged =
+ prevFiltersRef.current.namespace !== namespace ||
+ prevFiltersRef.current.workload !== workload;
+
+ if (filtersChanged && data && !isLoading) {
+ // Small delay to allow the graph to render first
+ const timeoutId = setTimeout(() => {
+ graphRef.current?.fitToView();
+ }, 100);
+ prevFiltersRef.current = { namespace, workload };
+ return () => clearTimeout(timeoutId);
+ }
+ prevFiltersRef.current = { namespace, workload };
+ }, [namespace, workload, data, isLoading]);
+
+ // Auto fit-to-view on initial data load
+ useEffect(() => {
+ if (initialLoadRef.current && data && !isLoading) {
+ initialLoadRef.current = false;
+ // Small delay to allow the graph to render first
+ const timeoutId = setTimeout(() => {
+ graphRef.current?.fitToView();
+ }, 200);
+ return () => clearTimeout(timeoutId);
+ }
+ }, [data, isLoading]);
+
+ const handleNodeClick = useCallback((node: D3ObservatoryNode | null) => {
+ setSelectedNode(node);
+ }, []);
+
+ // Filter graph data based on selected node types and search query
+ const filteredData = useMemo(() => {
+ if (!data) return null;
+
+ const searchLower = nodeSearch.toLowerCase().trim();
+ const hasTypeFilter = selectedNodeTypes.length > 0;
+ const hasSearchFilter = searchLower.length > 0;
+
+ // If no filters, show all
+ if (!hasTypeFilter && !hasSearchFilter) {
+ return data;
+ }
+
+ // Filter nodes by type and/or search query
+ const visibleNodes = data.graph.nodes.filter(node => {
+ const matchesType = !hasTypeFilter || selectedNodeTypes.includes(node.type);
+ const matchesSearch = !hasSearchFilter || node.label.toLowerCase().includes(searchLower);
+ return matchesType && matchesSearch;
+ });
+ const visibleNodeIds = new Set(visibleNodes.map(n => n.id));
+
+ // Filter edges to only include those between visible nodes
+ const visibleEdges = data.graph.edges.filter(edge =>
+ visibleNodeIds.has(edge.source) && visibleNodeIds.has(edge.target)
+ );
+
+ return {
+ ...data,
+ graph: {
+ nodes: visibleNodes,
+ edges: visibleEdges,
+ },
+ metadata: {
+ ...data.metadata,
+ nodeCount: visibleNodes.length,
+ edgeCount: visibleEdges.length,
+ },
+ };
+ }, [data, selectedNodeTypes, nodeSearch]);
+
+ return (
+
+ {/* Control bar */}
+
+
+ {/* Main content */}
+
+ {/* Graph area */}
+
+ {/* Loading state - shown when loading and no data yet */}
+ {isLoading && !filteredData && !error && (
+
+
+
+
Loading Observatory Graph
+
Fetching signal anchors, alerts, and dashboards...
+
+
+ )}
+ {error && (
+
+
+
Error loading graph
+
{error.message}
+
+
+
+ )}
+ {/* Fallback for unexpected null data after loading */}
+ {!isLoading && !error && !filteredData && (
+
+
+
⚠️
+
Unable to load data
+
+ The Observatory data could not be loaded. This might be a temporary issue.
+
+
+
+
+ )}
+ {!error && filteredData && filteredData.graph.nodes.length === 0 && (
+
+
+
🔭
+ {(selectedNodeTypes.length > 0 || nodeSearch.trim()) ? (
+ <>
+
No matching nodes
+
+ No nodes match the current filters. Try adjusting your search or type selection.
+
+
+ ) : (
+ <>
+
No Observatory data found
+
+ No SignalAnchors, Dashboards, or Alerts have been synced yet.
+ Configure a Grafana integration and run a sync to populate the graph.
+
+
+ )}
+
+
+ )}
+ {!error && filteredData && filteredData.graph.nodes.length > 0 && (
+ <>
+
+
graphRef.current?.zoomIn()}
+ onZoomOut={() => graphRef.current?.zoomOut()}
+ onFitToView={() => graphRef.current?.fitToView()}
+ onResetZoom={() => graphRef.current?.resetZoom()}
+ />
+
+
+
+
+ )}
+
+
+ {/* Detail panel */}
+ {selectedNode && (
+
setSelectedNode(null)}
+ />
+ )}
+
+
+ {/* Footer */}
+
+
+ {filteredData && (
+ <>
+ {filteredData.metadata.nodeCount} nodes, {filteredData.metadata.edgeCount} edges
+ {(selectedNodeTypes.length > 0 || nodeSearch.trim()) && data && (
+
+ (filtered from {data.metadata.nodeCount} total)
+
+ )}
+
+ )}
+
+
+ {data && (
+ <>Query: {data.metadata.queryExecutionMs}ms
+ )}
+
+
+