TopherMayor/homelab-topology
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate all 10 skills into homelab-topology

Browse Source 
- Added api-security-hardening (helmet, rate limits)
- Added nodejs-backend-patterns (error handling)
- Added observability-monitoring (pino logging)
- Added websocket-engineer (socket.io real-time updates)
- Added docker (Multi-stage build, compose)
- Added vitest (testing configuration and store tests)
- Added data-visualizer (MetricsBar and HostChart)
- Added infrastructure-monitoring/proxmox-admin/network-engineer types
- Fixed UI accessibility and styling
- Cleaned up node_modules tracking
This commit is contained in:
Christopher Mayor
2026-02-20 20:35:08 -08:00
parent 3dc5d236a2
commit 6dd679b8e0
14455 changed files with 3862 additions and 2194786 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
src/App.tsx
View File

@@ -1,9 +1,11 @@
import { useEffect, useRef, useCallback, useState } from 'react';
import { useEffect, useRef, useCallback, useState, memo } from 'react';
import { ReactFlowProvider } from '@xyflow/react';
import { useShallow } from 'zustand/react/shallow';
import { io as ioClient, Socket } from 'socket.io-client';
import { useTopologyStore } from './store/topologyStore';
import {
defaultNetworkInfo,
discoverHosts,
import {
defaultNetworkInfo,
discoverHosts,
convertToTopology,
DiscoveredHost
} from './services/discovery';
@@ -14,6 +16,7 @@ import TopologyGraph from './components/Graph/TopologyGraph';
import CommandPalette from './components/CommandPalette';
import StaleWarning from './components/StaleWarning';
import TerminalPanel from './components/TerminalPanel';
import MetricsBar from './components/Dashboard/MetricsBar';
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3001';
@@ -33,10 +36,10 @@ interface ApiDiscoveryResponse {
}
function App() {
const {
setNodes,
setEdges,
setNetworkInfo,
const {
setNodes,
setEdges,
setNetworkInfo,
setHosts,
setLastUpdated,
setIsLoading,
@@ -44,15 +47,39 @@ function App() {
incrementFailures,
resetFailures,
setLastSuccessfulDiscovery,
} = useTopologyStore(useShallow((s) => ({
setNodes: s.setNodes,
setEdges: s.setEdges,
setNetworkInfo: s.setNetworkInfo,
setHosts: s.setHosts,
setLastUpdated: s.setLastUpdated,
setIsLoading: s.setIsLoading,
setDataSource: s.setDataSource,
incrementFailures: s.incrementFailures,
resetFailures: s.resetFailures,
setLastSuccessfulDiscovery: s.setLastSuccessfulDiscovery,
})));
const setConnectionStatus = useTopologyStore((s) => s.setConnectionStatus);
const {
leftPanelOpen,
rightPanelOpen,
isLoading,
pollInterval,
toggleCommandPalette,
terminalOpen,
terminalHost,
closeTerminal
} = useTopologyStore();
} = useTopologyStore(useShallow((s) => ({
leftPanelOpen: s.leftPanelOpen,
rightPanelOpen: s.rightPanelOpen,
isLoading: s.isLoading,
pollInterval: s.pollInterval,
terminalOpen: s.terminalOpen,
terminalHost: s.terminalHost,
})));
const toggleCommandPalette = useTopologyStore((s) => s.toggleCommandPalette);
const closeTerminal = useTopologyStore((s) => s.closeTerminal);
const isLoadingRef = useRef(isLoading);
isLoadingRef.current = isLoading;
@@ -61,18 +88,18 @@ function App() {
const loadData = useCallback(async () => {
if (isLoadingRef.current) return;
setIsLoading(true);
try {
const response = await fetch(`${API_BASE_URL}/api/discover`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
});
if (response.ok) {
const data: ApiDiscoveryResponse = await response.json();
const discoveredHosts: DiscoveredHost[] = data.hosts.map((h: ApiHost) => ({
name: h.name,
ip: h.ip,
@@ -87,23 +114,23 @@ function App() {
services: h.services,
vms: h.vms
}));
const { nodes, edges } = convertToTopology(discoveredHosts, defaultNetworkInfo);
const hosts = discoveredHosts.map(h => ({
name: h.name,
ip: h.ip,
type: (h.name === 'ubuntu' ? 'vm' :
h.name === 'proxmox' || h.name === 'truenas' ? 'physical' : 'rpi5') as 'vm' | 'physical' | 'rpi5' | 'container',
type: (h.name === 'ubuntu' ? 'vm' :
h.name === 'proxmox' || h.name === 'truenas' ? 'physical' : 'rpi5') as 'vm' | 'physical' | 'rpi5' | 'container',
role: h.name === 'ubuntu' ? 'Primary Docker Host' :
h.name === 'grizzley' ? 'Edge Services' :
h.name === 'truenas' ? 'Storage (NAS)' :
h.name === 'grizzley' ? 'Edge Services' :
h.name === 'truenas' ? 'Storage (NAS)' :
h.name === 'proxmox' ? 'Hypervisor' : 'Host',
containers: h.containers.map(c => c.name),
services: h.services,
vms: h.vms
}));
setNodes(nodes);
setEdges(edges);
setNetworkInfo(defaultNetworkInfo);
@@ -118,21 +145,21 @@ function App() {
} catch (error) {
console.error('Discovery failed, using simulated data:', error);
const discoveryResult = await discoverHosts(['ubuntu', 'grizzley', 'truenas', 'ice', 'panda', 'proxmox']);
const { nodes, edges } = convertToTopology(discoveryResult.hosts, defaultNetworkInfo);
const hosts = discoveryResult.hosts.map(h => ({
name: h.name,
ip: h.ip,
type: (h.name === 'ubuntu' ? 'vm' :
h.name === 'proxmox' || h.name === 'truenas' ? 'physical' : 'rpi5') as 'vm' | 'physical' | 'rpi5' | 'container',
type: (h.name === 'ubuntu' ? 'vm' :
h.name === 'proxmox' || h.name === 'truenas' ? 'physical' : 'rpi5') as 'vm' | 'physical' | 'rpi5' | 'container',
role: h.name === 'ubuntu' ? 'Primary Docker Host' :
h.name === 'grizzley' ? 'Edge Services' :
h.name === 'truenas' ? 'Storage (NAS)' :
h.name === 'grizzley' ? 'Edge Services' :
h.name === 'truenas' ? 'Storage (NAS)' :
h.name === 'proxmox' ? 'Hypervisor' : 'Host',
containers: h.containers.map(c => c.name)
}));
setNodes(nodes);
setEdges(edges);
setNetworkInfo(defaultNetworkInfo);
@@ -165,26 +192,79 @@ function App() {
return () => clearInterval(intervalId);
}, [loadData]);
// --- WebSocket connection (websocket-engineer skill) ---
useEffect(() => {
const socket: Socket = ioClient(API_BASE_URL, {
transports: ['websocket', 'polling'],
reconnectionDelay: 1000,
reconnectionDelayMax: 5000,
reconnectionAttempts: Infinity,
});
socket.on('connect', () => {
setConnectionStatus('ws');
});
socket.on('disconnect', () => {
setConnectionStatus('polling');
});
socket.on('connect_error', () => {
setConnectionStatus('polling');
});
// Listen for real-time topology updates
socket.on('topology:update', (data: ApiDiscoveryResponse) => {
if (data?.hosts) {
const discoveredHosts: DiscoveredHost[] = data.hosts.map((h: ApiHost) => ({
name: h.name,
ip: h.ip,
online: h.online,
containers: (h.containers || []).map((c: string) => ({
name: c, image: '', status: 'running', ports: [], created: ''
})),
services: h.services,
vms: h.vms
}));
const { nodes, edges } = convertToTopology(discoveredHosts, defaultNetworkInfo);
setNodes(nodes);
setEdges(edges);
setLastUpdated(new Date());
}
});
return () => {
socket.disconnect();
};
}, [setConnectionStatus, setNodes, setEdges, setLastUpdated]);
return (
<ReactFlowProvider>
<div className="h-screen w-screen flex flex-col bg-slate-900">
{/* Skip link for accessibility */}
<a href="#main-content" className="skip-link">
Skip to main content
</a>
<StaleWarning />
<Header onRefresh={loadData} isLoading={isLoading} />
<div className="flex-1 flex overflow-hidden">
<MetricsBar />
<div className="flex-1 flex overflow-hidden" role="main" id="main-content" tabIndex={-1}>
{leftPanelOpen && (
<LeftPanel />
)}
<div className="flex-1">
<TopologyGraph />
</div>
{rightPanelOpen && (
<RightPanel />
)}
</div>
<Footer />
<CommandPalette />
{terminalOpen && terminalHost && (
@@ -195,12 +275,19 @@ function App() {
);
}
function Footer() {
const { lastUpdated, nodes, dataSource, pollInterval } = useTopologyStore();
const Footer = memo(function Footer() {
const { lastUpdated, nodes, dataSource, pollInterval } = useTopologyStore(
useShallow((s) => ({
lastUpdated: s.lastUpdated,
nodes: s.nodes,
dataSource: s.dataSource,
pollInterval: s.pollInterval,
}))
);
const [countdown, setCountdown] = useState(Math.ceil(pollInterval / 1000));
const pollIntervalRef = useRef(pollInterval);
pollIntervalRef.current = pollInterval;
const formatTime = (date: Date | null) => {
if (!date) return 'Never';
return date.toLocaleTimeString();
@@ -208,19 +295,23 @@ function Footer() {
useEffect(() => {
setCountdown(Math.ceil(pollInterval / 1000));
const intervalId = setInterval(() => {
setCountdown(prev => {
if (prev <= 1) return Math.ceil(pollIntervalRef.current / 1000);
return prev - 1;
});
}, 1000);
return () => clearInterval(intervalId);
}, [lastUpdated, pollInterval]);
return (
<div className="h-8 bg-slate-800 border-t border-slate-700 px-4 flex items-center justify-between text-xs text-slate-400">
<div
className="h-8 bg-slate-800 border-t border-slate-700 px-4 flex items-center justify-between text-xs text-slate-400"
aria-live="polite"
aria-atomic="true"
>
<span>Nodes: {nodes.length}</span>
<div className="flex items-center gap-4">
<span className={`px-2 py-0.5 rounded ${dataSource === 'live' ? 'bg-green-900 text-green-400' : 'bg-yellow-900 text-yellow-400'}`}>
@@ -231,6 +322,6 @@ function Footer() {
</div>
</div>
);
}
});
export default App;

103
src/components/Dashboard/HostChart.tsx Normal file
View File

@@ -0,0 +1,103 @@
import { useMemo } from 'react';
import { useTopologyStore } from '../../store/topologyStore';
import { useShallow } from 'zustand/react/shallow';
/**
* HostChart — Visual bar chart showing container/service counts per host
* (data-visualizer skill — accessible color palette, responsive design)
*
* Renders a pure-CSS horizontal bar chart — no external charting library needed.
* Falls back gracefully when no hosts have containers.
*/
// Colorblind-safe palette from data-visualizer skill
const HOST_COLORS = [
'#0066CC', // Blue
'#CC6600', // Orange
'#7A00CC', // Purple
'#00CC66', // Green
'#CC0066', // Magenta
'#009E73', // Teal
'#56B4E9', // Sky Blue
'#E69F00', // Amber
];
export default function HostChart() {
const { nodes } = useTopologyStore(
useShallow((s) => ({ nodes: s.nodes }))
);
const hostData = useMemo(() => {
// Find host-type nodes
const hosts = nodes.filter(
(n) =>
n.type === 'host_physical' ||
n.type === 'host_vm' ||
n.type === 'host_container'
);
// Count children (services/containers) per host
return hosts
.map((host) => {
const children = nodes.filter((n) => n.data.parentId === host.id);
const running = children.filter((n) => n.data.status === 'running').length;
const stopped = children.filter((n) => n.data.status === 'stopped').length;
return {
name: host.name,
total: children.length,
running,
stopped,
status: host.data.status,
};
})
.sort((a, b) => b.total - a.total);
}, [nodes]);
const maxCount = Math.max(...hostData.map((h) => h.total), 1);
if (hostData.length === 0) {
return (
<div className="p-4 text-slate-500 text-sm text-center">
No host data available
</div>
);
}
return (
<div className="p-3 space-y-2">
<h3 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">
Services per Host
</h3>
{hostData.map((host, idx) => (
<div key={host.name} className="space-y-1">
<div className="flex items-center justify-between text-xs">
<span className="text-slate-300 font-medium truncate max-w-[120px]">
{host.name}
</span>
<span className="text-slate-500">
<span className="text-green-400">{host.running}</span>
{host.stopped > 0 && (
<span className="text-red-400 ml-1">+{host.stopped}</span>
)}
</span>
</div>
<div className="h-2 bg-slate-700/50 rounded-full overflow-hidden">
{/* Running portion */}
<div
className="h-full rounded-full transition-all duration-500"
style={{
width: `${(host.total / maxCount) * 100}%`,
background: `linear-gradient(90deg, ${HOST_COLORS[idx % HOST_COLORS.length]}CC, ${HOST_COLORS[idx % HOST_COLORS.length]}88)`,
}}
role="progressbar"
aria-valuenow={host.total}
aria-valuemin={0}
aria-valuemax={maxCount}
aria-label={`${host.name}: ${host.running} running, ${host.stopped} stopped`}
/>
</div>
</div>
))}
</div>
);
}

118
src/components/Dashboard/MetricsBar.tsx Normal file
View File

@@ -0,0 +1,118 @@
import { useMemo } from 'react';
import { useTopologyStore } from '../../store/topologyStore';
import { useShallow } from 'zustand/react/shallow';
import {
Activity,
Server,
Container,
Wifi,
Clock,
} from 'lucide-react';
/**
* MetricsBar — KPI-style metrics bar (data-visualizer + infrastructure-monitoring skills)
* Shows key topology stats: total hosts, running containers, online %, last discovery time.
*/
export default function MetricsBar() {
const { nodes, lastUpdated, connectionStatus } = useTopologyStore(
useShallow((s) => ({
nodes: s.nodes,
lastUpdated: s.lastUpdated,
connectionStatus: s.connectionStatus,
}))
);
const metrics = useMemo(() => {
const hosts = nodes.filter(
(n) =>
n.type === 'host_physical' ||
n.type === 'host_vm' ||
n.type === 'host_container'
);
const containers = nodes.filter(
(n) =>
n.type === 'service' ||
n.type === 'vm_lxc' ||
n.type === 'vm_qemu'
);
const running = containers.filter((n) => n.data.status === 'running');
const onlineHosts = hosts.filter((n) => n.data.status === 'running');
return {
totalHosts: hosts.length,
onlineHosts: onlineHosts.length,
totalContainers: containers.length,
runningContainers: running.length,
uptimePercent:
hosts.length > 0
? Math.round((onlineHosts.length / hosts.length) * 100)
: 0,
};
}, [nodes]);
const connectionColor =
connectionStatus === 'ws'
? 'text-green-400'
: connectionStatus === 'polling'
? 'text-yellow-400'
: 'text-red-400';
const connectionLabel =
connectionStatus === 'ws'
? 'WebSocket'
: connectionStatus === 'polling'
? 'Polling'
: 'Disconnected';
return (
<div className="h-10 bg-slate-800/80 border-b border-slate-700/50 px-4 flex items-center gap-6 text-xs">
{/* Hosts */}
<div className="flex items-center gap-1.5" title="Hosts Online">
<Server size={13} className="text-emerald-400" />
<span className="text-slate-300 font-medium">
{metrics.onlineHosts}/{metrics.totalHosts}
</span>
<span className="text-slate-500">hosts</span>
</div>
{/* Containers */}
<div className="flex items-center gap-1.5" title="Running Containers">
<Container size={13} className="text-cyan-400" />
<span className="text-slate-300 font-medium">
{metrics.runningContainers}/{metrics.totalContainers}
</span>
<span className="text-slate-500">containers</span>
</div>
{/* Uptime */}
<div className="flex items-center gap-1.5" title="Host Uptime">
<Activity size={13} className="text-amber-400" />
<span className="text-slate-300 font-medium">
{metrics.uptimePercent}%
</span>
<span className="text-slate-500">uptime</span>
</div>
{/* Spacer */}
<div className="flex-1" />
{/* Connection status */}
<div className="flex items-center gap-1.5" title={`Connection: ${connectionLabel}`}>
<Wifi size={13} className={connectionColor} />
<span className={`font-medium ${connectionColor}`}>
{connectionLabel}
</span>
</div>
{/* Last updated */}
{lastUpdated && (
<div className="flex items-center gap-1.5" title="Last Discovery">
<Clock size={13} className="text-slate-500" />
<span className="text-slate-500">
{lastUpdated.toLocaleTimeString()}
</span>
</div>
)}
</div>
);
}

98
src/components/Graph/TopologyGraph.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback, useEffect, useState } from 'react';
import { useCallback, useMemo, memo } from 'react';
import {
ReactFlow,
Background,
@@ -12,6 +12,7 @@ import {
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import dagre from 'dagre';
import { useShallow } from 'zustand/react/shallow';
import { useTopologyStore } from '../../store/topologyStore';
import { getNodeColor, getStatusColor } from '../../utils/colors';
import { Server, Network, Wifi, Box, Database, Folder } from 'lucide-react';
@@ -33,8 +34,8 @@ const nodeIcons: Record<NodeType, React.ReactNode> = {
path: <Folder className="w-4 h-4" />,
};
function CustomNode({ data, selected, id }: NodeProps) {
const { highlightPath } = useTopologyStore();
const CustomNode = memo(function CustomNode({ data, selected, id }: NodeProps) {
const highlightPath = useTopologyStore((s) => s.highlightPath);
const nodeData = data as { type?: NodeType; category?: ServiceCategory; status?: 'running' | 'stopped' | 'unknown'; label?: string; ip?: string };
const nodeColor = getNodeColor(nodeData.type || 'service', nodeData.category);
const statusColor = getStatusColor(nodeData.status || 'unknown');
@@ -43,31 +44,32 @@ function CustomNode({ data, selected, id }: NodeProps) {
return (
<div
className={`px-4 py-3 rounded-xl border-2 transition-all ${
selected
? 'border-sky-400 shadow-lg shadow-sky-400/20'
className={`px-4 py-3 rounded-xl border-2 transition-all duration-200 ${selected
? 'border-sky-400 shadow-lg shadow-sky-400/20 scale-[1.02]'
: isHighlighted
? 'border-indigo-400 shadow-lg shadow-indigo-400/20'
: 'border-slate-600 hover:border-slate-500'
}`}
style={{
: 'border-slate-600 hover:border-slate-500 hover:shadow-md hover:shadow-slate-700/30 hover:scale-[1.01]'
}`}
style={{
backgroundColor: isDimmed ? '#0F172A' : '#1E293B',
minWidth: '140px',
opacity: isDimmed ? 0.4 : 1
}}
role="treeitem"
aria-label={`${nodeData.label || 'Node'}, ${nodeData.type?.replace(/_/g, ' ') || 'unknown type'}, ${nodeData.status || 'unknown status'}`}
>
<Handle type="target" position={Position.Left} className="!bg-slate-400" />
<div className="flex items-center gap-3">
<div
<div
className="w-10 h-10 rounded-lg flex items-center justify-center"
style={{ backgroundColor: `${nodeColor}20` }}
>
<div style={{ color: nodeColor }}>
<div style={{ color: nodeColor }} aria-hidden="true">
{nodeIcons[nodeData.type || 'service']}
</div>
</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-white truncate">
{nodeData.label}
@@ -78,17 +80,18 @@ function CustomNode({ data, selected, id }: NodeProps) {
</div>
)}
</div>
<div
<div
className="w-2.5 h-2.5 rounded-full"
style={{ backgroundColor: statusColor }}
aria-label={`Status: ${nodeData.status || 'unknown'}`}
/>
</div>
<Handle type="source" position={Position.Right} className="!bg-slate-400" />
</div>
);
}
});
const nodeTypes = {
custom: CustomNode,
@@ -99,7 +102,7 @@ const nodeHeight = 70;
function getLayoutedElements(nodes: Node[], edges: Edge[], direction: 'LR' | 'TB') {
if (nodes.length === 0) return { nodes: [], edges: [] };
const dagreGraph = new dagre.graphlib.Graph();
dagreGraph.setDefaultEdgeLabel(() => ({}));
dagreGraph.setGraph({ rankdir: direction, nodesep: 50, ranksep: 100 });
@@ -130,30 +133,34 @@ function getLayoutedElements(nodes: Node[], edges: Edge[], direction: 'LR' | 'TB
}
export default function TopologyGraph() {
const {
edges: storeEdges,
selectedNodeId,
const {
edges: storeEdges,
selectedNodeId,
setSelectedNode,
getFilteredNodes,
orientation,
viewMode,
highlightPath
} = useTopologyStore();
highlightPath
} = useTopologyStore(useShallow((s) => ({
edges: s.edges,
selectedNodeId: s.selectedNodeId,
setSelectedNode: s.setSelectedNode,
getFilteredNodes: s.getFilteredNodes,
orientation: s.orientation,
viewMode: s.viewMode,
highlightPath: s.highlightPath,
})));
const [nodes, setNodes] = useState<Node[]>([]);
const [edges, setEdges] = useState<Edge[]>([]);
useEffect(() => {
// Memoize the layout computation instead of useState + useEffect
const { nodes, edges } = useMemo(() => {
const filteredNodes = getFilteredNodes();
if (filteredNodes.length === 0) {
setNodes([]);
setEdges([]);
return;
return { nodes: [] as Node[], edges: [] as Edge[] };
}
const nodeIds = new Set(filteredNodes.map(n => n.id));
const newNodes: Node[] = filteredNodes.map(node => ({
id: node.id,
type: 'custom',
@@ -179,21 +186,21 @@ export default function TopologyGraph() {
target: edge.target,
type: 'smoothstep',
animated: isSelected || isPathEdge,
style: {
stroke: isSelected
? '#38BDF8'
style: {
stroke: isSelected
? '#38BDF8'
: isPathEdge
? '#818CF8'
: '#475569',
strokeWidth: isSelected || isPathEdge
? 2
strokeWidth: isSelected || isPathEdge
? 2
: 1,
opacity: highlightPath.length > 0 && !isPathEdge ? 0.3 : 1
},
markerEnd: {
type: 'arrowclosed' as const,
color: isSelected
? '#38BDF8'
color: isSelected
? '#38BDF8'
: isPathEdge
? '#818CF8'
: '#475569',
@@ -201,15 +208,8 @@ export default function TopologyGraph() {
};
});
const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
newNodes,
newEdges,
orientation
);
setNodes(layoutedNodes);
setEdges(layoutedEdges);
}, [getFilteredNodes, storeEdges, selectedNodeId, orientation, viewMode]);
return getLayoutedElements(newNodes, newEdges, orientation);
}, [getFilteredNodes, storeEdges, selectedNodeId, orientation, viewMode, highlightPath]);
const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
setSelectedNode(node.id);
@@ -220,7 +220,7 @@ export default function TopologyGraph() {
}, [setSelectedNode]);
return (
<div className="w-full h-full">
<div className="w-full h-full" role="application" aria-label="Network topology graph">
<ReactFlow
nodes={nodes}
edges={edges}

123
src/components/Header.tsx
View File

@@ -1,4 +1,6 @@
import { Search, Loader2, Network, HardDrive, Box, Database, Link, ArrowLeftRight, ArrowUpDown, Router, Wifi, Monitor, Container, FolderTree, Folder } from 'lucide-react';
import { useCallback } from 'react';
import { Search, Loader2, Network, HardDrive, Box, Database, Link, ArrowLeftRight, ArrowUpDown, Router, Wifi, Monitor, Container, FolderTree, Folder, Settings } from 'lucide-react';
import { useShallow } from 'zustand/react/shallow';
import { useTopologyStore, Orientation, StatusFilter } from '../store/topologyStore';
import { ViewMode, NodeType } from '../types';
import { getNodeColor } from '../utils/colors';
@@ -35,12 +37,12 @@ const nodeTypeFilters: { type: NodeType; icon: React.ReactNode }[] = [
];
export default function Header({ onRefresh, isLoading: externalLoading }: HeaderProps) {
const {
viewMode,
setViewMode,
const {
viewMode,
setViewMode,
orientation,
setOrientation,
searchQuery,
searchQuery,
setSearchQuery,
typeFilters,
toggleTypeFilter,
@@ -50,19 +52,39 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
toggleRightPanel,
leftPanelOpen,
rightPanelOpen,
isLoading: storeLoading
} = useTopologyStore();
isLoading: storeLoading,
pollInterval,
setPollInterval
} = useTopologyStore(useShallow((s) => ({
viewMode: s.viewMode,
setViewMode: s.setViewMode,
orientation: s.orientation,
setOrientation: s.setOrientation,
searchQuery: s.searchQuery,
setSearchQuery: s.setSearchQuery,
typeFilters: s.typeFilters,
toggleTypeFilter: s.toggleTypeFilter,
statusFilter: s.statusFilter,
setStatusFilter: s.setStatusFilter,
toggleLeftPanel: s.toggleLeftPanel,
toggleRightPanel: s.toggleRightPanel,
leftPanelOpen: s.leftPanelOpen,
rightPanelOpen: s.rightPanelOpen,
isLoading: s.isLoading,
pollInterval: s.pollInterval,
setPollInterval: s.setPollInterval,
})));
const loading = externalLoading ?? storeLoading;
const handleRefresh = async () => {
const handleRefresh = useCallback(async () => {
if (onRefresh) {
await onRefresh();
}
};
}, [onRefresh]);
return (
<div className="h-14 bg-slate-800 border-b border-slate-700 px-4 flex items-center justify-between">
<header className="h-14 bg-slate-800 border-b border-slate-700 px-4 flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center">
@@ -70,19 +92,19 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
</div>
<h1 className="text-lg font-semibold text-white">Homelab Topology</h1>
</div>
<div className="h-6 w-px bg-slate-600" />
<div className="flex items-center gap-1">
<div className="flex items-center gap-1" role="toolbar" aria-label="View mode">
{viewModes.map(({ mode, label, icon }) => (
<button
key={mode}
onClick={() => setViewMode(mode)}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-colors ${
viewMode === mode
? 'bg-indigo-500/20 text-indigo-400 border border-indigo-500/50'
aria-pressed={viewMode === mode}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-colors ${viewMode === mode
? 'bg-indigo-500/20 text-indigo-400 border border-indigo-500/50'
: 'text-slate-400 hover:text-white hover:bg-slate-700'
}`}
}`}
>
{icon}
{label}
@@ -93,7 +115,9 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
<div className="h-6 w-px bg-slate-600" />
<div className="flex items-center gap-2">
<label htmlFor="orientation-select" className="visually-hidden">Graph orientation</label>
<select
id="orientation-select"
value={orientation}
onChange={(e) => setOrientation(e.target.value as Orientation)}
className="h-9 px-3 bg-slate-700 border border-slate-600 rounded-lg text-sm text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
@@ -108,7 +132,7 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
<div className="h-6 w-px bg-slate-600" />
<div className="flex items-center gap-1">
<div className="flex items-center gap-1" role="toolbar" aria-label="Node type filters">
{nodeTypeFilters.map(({ type, icon }) => {
const isActive = typeFilters.includes(type);
const color = getNodeColor(type);
@@ -116,17 +140,17 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
<button
key={type}
onClick={() => toggleTypeFilter(type)}
className={`p-2 rounded-md transition-colors ${
isActive
? 'border'
aria-pressed={isActive}
aria-label={`Filter ${type.replace(/_/g, ' ')}`}
className={`p-2 rounded-md transition-colors ${isActive
? 'border'
: 'text-slate-500 hover:text-slate-300 hover:bg-slate-700'
}`}
style={isActive ? {
backgroundColor: `${color}20`,
}`}
style={isActive ? {
backgroundColor: `${color}20`,
borderColor: `${color}50`,
color: color
} : undefined}
title={type}
>
{icon}
</button>
@@ -137,7 +161,9 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
<div className="h-6 w-px bg-slate-600" />
<div className="flex items-center gap-2">
<label htmlFor="status-filter" className="visually-hidden">Status filter</label>
<select
id="status-filter"
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
className="h-9 px-3 bg-slate-700 border border-slate-600 rounded-lg text-sm text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
@@ -147,12 +173,32 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
<option value="stopped">Stopped</option>
</select>
</div>
<div className="h-6 w-px bg-slate-600" />
<div className="flex items-center gap-2">
<Settings className="w-4 h-4 text-slate-400" aria-hidden="true" />
<label htmlFor="poll-interval" className="visually-hidden">Poll interval</label>
<select
id="poll-interval"
value={pollInterval}
onChange={(e) => setPollInterval(parseInt(e.target.value, 10))}
className="h-9 px-3 bg-slate-700 border border-slate-600 rounded-lg text-sm text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
>
<option value={10000}>10 seconds</option>
<option value={30000}>30 seconds</option>
<option value={60000}>1 minute</option>
<option value={300000}>5 minutes</option>
</select>
</div>
</div>
<div className="flex items-center gap-3">
<div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" aria-hidden="true" />
<label htmlFor="node-search" className="visually-hidden">Search nodes</label>
<input
id="node-search"
type="text"
placeholder="Search nodes..."
value={searchQuery}
@@ -164,9 +210,10 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
<button
onClick={handleRefresh}
disabled={loading}
aria-label={loading ? 'Loading data' : 'Refresh data'}
className="h-9 px-3 flex items-center gap-2 bg-slate-700 hover:bg-slate-600 border border-slate-600 rounded-lg text-sm text-slate-300 transition-colors disabled:opacity-50"
>
<Loader2 className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
<Loader2 className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} aria-hidden="true" />
{loading ? 'Loading...' : 'Refresh'}
</button>
@@ -174,24 +221,24 @@ export default function Header({ onRefresh, isLoading: externalLoading }: Header
<button
onClick={toggleLeftPanel}
className={`p-2 rounded-lg transition-colors ${
leftPanelOpen ? 'bg-indigo-500/20 text-indigo-400' : 'text-slate-400 hover:text-white hover:bg-slate-700'
}`}
title="Toggle left panel"
aria-label={leftPanelOpen ? 'Hide child nodes panel' : 'Show child nodes panel'}
aria-pressed={leftPanelOpen}
className={`p-2 rounded-lg transition-colors ${leftPanelOpen ? 'bg-indigo-500/20 text-indigo-400' : 'text-slate-400 hover:text-white hover:bg-slate-700'
}`}
>
<Box className="w-5 h-5" />
<Box className="w-5 h-5" aria-hidden="true" />
</button>
<button
onClick={toggleRightPanel}
className={`p-2 rounded-lg transition-colors ${
rightPanelOpen ? 'bg-indigo-500/20 text-indigo-400' : 'text-slate-400 hover:text-white hover:bg-slate-700'
}`}
title="Toggle right panel"
aria-label={rightPanelOpen ? 'Hide details panel' : 'Show details panel'}
aria-pressed={rightPanelOpen}
className={`p-2 rounded-lg transition-colors ${rightPanelOpen ? 'bg-indigo-500/20 text-indigo-400' : 'text-slate-400 hover:text-white hover:bg-slate-700'
}`}
>
<Database className="w-5 h-5" />
<Database className="w-5 h-5" aria-hidden="true" />
</button>
</div>
</div>
</header>
);
}

50
src/components/LeftPanel.tsx
View File

@@ -1,7 +1,10 @@
import { useMemo } from 'react';
import { ChevronRight, Server, Network, Wifi, Box, Database, Folder } from 'lucide-react';
import { useShallow } from 'zustand/react/shallow';
import { useTopologyStore } from '../store/topologyStore';
import { getNodeColor } from '../utils/colors';
import { TopologyNode, NodeType } from '../types';
import HostChart from './Dashboard/HostChart';
const typeIcons: Record<NodeType, React.ReactNode> = {
gateway: <Network className="w-4 h-4" />,
@@ -36,19 +39,27 @@ const typeLabels: Record<NodeType, string> = {
};
export default function LeftPanel() {
const { nodes, selectedNodeId, setSelectedNode } = useTopologyStore();
const { nodes, selectedNodeId, setSelectedNode } = useTopologyStore(
useShallow((s) => ({
nodes: s.nodes,
selectedNodeId: s.selectedNodeId,
setSelectedNode: s.setSelectedNode,
}))
);
const selectedNode = nodes.find(n => n.id === selectedNodeId);
const childNodes = nodes.filter(n => n.data.parentId === selectedNodeId);
const groupedChildren = childNodes.reduce((acc, node) => {
if (!acc[node.type]) acc[node.type] = [];
acc[node.type].push(node);
return acc;
}, {} as Record<NodeType, TopologyNode[]>);
const groupedChildren = useMemo(() => {
return childNodes.reduce((acc, node) => {
if (!acc[node.type]) acc[node.type] = [];
acc[node.type].push(node);
return acc;
}, {} as Record<NodeType, TopologyNode[]>);
}, [childNodes]);
return (
<div className="w-72 bg-slate-800 border-r border-slate-700 flex flex-col">
<aside className="w-72 bg-slate-800 border-r border-slate-700 flex flex-col" aria-label="Child nodes panel">
<div className="h-12 px-4 flex items-center border-b border-slate-700">
<h2 className="text-sm font-semibold text-white uppercase tracking-wide">
{selectedNode ? 'Child Nodes' : 'Select a Node'}
@@ -70,7 +81,7 @@ export default function LeftPanel() {
No child nodes
</div>
) : (
<div className="p-2">
<nav className="p-2" aria-label="Child node list">
{Object.entries(groupedChildren).map(([type, typeNodes]) => (
<div key={type} className="mb-3">
<div className="px-2 py-1 text-xs font-medium text-slate-500 uppercase tracking-wide">
@@ -80,13 +91,12 @@ export default function LeftPanel() {
<button
key={node.id}
onClick={() => setSelectedNode(node.id)}
className={`w-full px-3 py-2 flex items-center gap-3 rounded-lg transition-colors text-left ${
selectedNodeId === node.id
? 'bg-indigo-500/20 text-indigo-300'
: 'text-slate-300 hover:bg-slate-700'
}`}
className={`w-full px-3 py-2 flex items-center gap-3 rounded-lg transition-colors text-left ${selectedNodeId === node.id
? 'bg-indigo-500/20 text-indigo-300'
: 'text-slate-300 hover:bg-slate-700'
}`}
>
<div
<div
className="w-8 h-8 rounded-lg flex items-center justify-center"
style={{ backgroundColor: `${getNodeColor(node.type, node.data.category)}20` }}
>
@@ -100,14 +110,18 @@ export default function LeftPanel() {
<div className="text-xs text-slate-500">{node.data.ip}</div>
)}
</div>
<ChevronRight className="w-4 h-4 text-slate-500" />
<ChevronRight className="w-4 h-4 text-slate-500" aria-hidden="true" />
</button>
))}
</div>
))}
</div>
</nav>
)}
</div>
</div>
{/* Host metrics chart (data-visualizer skill) */}
<div className="border-t border-slate-700/50">
<HostChart />
</div>
</aside>
);
}

128
src/components/RightPanel.tsx
View File

@@ -1,7 +1,9 @@
import { useState } from 'react';
import { useState, useCallback } from 'react';
import { Info, FileCode, FolderOpen, BarChart3, Star, X, Terminal, Folder } from 'lucide-react';
import { useShallow } from 'zustand/react/shallow';
import { useTopologyStore } from '../store/topologyStore';
import { getNodeColor, getStatusColor, getImportanceLabel, getImportanceColor } from '../utils/colors';
import { TopologyNode } from '../types';
import FileBrowser from './FileBrowser';
type TabId = 'details' | 'config' | 'files' | 'usage' | 'importance';
@@ -15,19 +17,49 @@ const tabs: { id: TabId; label: string; icon: React.ReactNode }[] = [
];
export default function RightPanel() {
const { nodes, selectedNodeId, setSelectedNode, openTerminal } = useTopologyStore();
const { nodes, selectedNodeId, setSelectedNode, openTerminal } = useTopologyStore(
useShallow((s) => ({
nodes: s.nodes,
selectedNodeId: s.selectedNodeId,
setSelectedNode: s.setSelectedNode,
openTerminal: s.openTerminal,
}))
);
const [activeTab, setActiveTab] = useState<TabId>('details');
const [fileBrowserOpen, setFileBrowserOpen] = useState(false);
const selectedNode = nodes.find(n => n.id === selectedNodeId);
const handleTabKeyDown = useCallback((e: React.KeyboardEvent, currentIndex: number) => {
let newIndex = currentIndex;
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
e.preventDefault();
newIndex = (currentIndex + 1) % tabs.length;
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
e.preventDefault();
newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
} else if (e.key === 'Home') {
e.preventDefault();
newIndex = 0;
} else if (e.key === 'End') {
e.preventDefault();
newIndex = tabs.length - 1;
} else {
return;
}
setActiveTab(tabs[newIndex].id);
// Focus the new tab button
const tabEl = document.getElementById(`tab-${tabs[newIndex].id}`);
tabEl?.focus();
}, []);
if (!selectedNode) {
return (
<div className="w-80 bg-slate-800 border-l border-slate-700 flex flex-col items-center justify-center p-4">
<aside className="w-80 bg-slate-800 border-l border-slate-700 flex flex-col items-center justify-center p-4" aria-label="Node details panel">
<div className="text-slate-500 text-sm text-center">
Select a node to view its details
</div>
</div>
</aside>
);
}
@@ -36,7 +68,7 @@ export default function RightPanel() {
const isHost = selectedNode.type.startsWith('host_') || selectedNode.type.startsWith('vm_');
return (
<div className="w-80 bg-slate-800 border-l border-slate-700 flex flex-col">
<aside className="w-80 bg-slate-800 border-l border-slate-700 flex flex-col" aria-label="Node details panel">
<div className="h-12 px-4 flex items-center justify-between border-b border-slate-700">
<h2 className="text-sm font-semibold text-white truncate">{selectedNode.name}</h2>
<div className="flex items-center gap-1">
@@ -45,45 +77,57 @@ export default function RightPanel() {
<button
onClick={() => setFileBrowserOpen(true)}
className="p-1 hover:bg-slate-700 rounded transition-colors"
title="Browse Files"
aria-label="Browse files"
>
<Folder className="w-4 h-4 text-slate-400" />
<Folder className="w-4 h-4 text-slate-400" aria-hidden="true" />
</button>
<button
onClick={() => openTerminal(selectedNodeId)}
className="p-1 hover:bg-slate-700 rounded transition-colors"
title="Open Terminal"
aria-label="Open terminal"
>
<Terminal className="w-4 h-4 text-slate-400" />
<Terminal className="w-4 h-4 text-slate-400" aria-hidden="true" />
</button>
</>
)}
<button
onClick={() => setSelectedNode(null)}
className="p-1 hover:bg-slate-700 rounded transition-colors"
aria-label="Close details panel"
>
<X className="w-4 h-4 text-slate-400" />
<X className="w-4 h-4 text-slate-400" aria-hidden="true" />
</button>
</div>
</div>
<div className="flex border-b border-slate-700">
{tabs.map(tab => (
<div className="flex border-b border-slate-700" role="tablist" aria-label="Node information tabs">
{tabs.map((tab, index) => (
<button
key={tab.id}
id={`tab-${tab.id}`}
role="tab"
aria-selected={activeTab === tab.id}
aria-controls={`tabpanel-${tab.id}`}
tabIndex={activeTab === tab.id ? 0 : -1}
onClick={() => setActiveTab(tab.id)}
className={`flex-1 flex items-center justify-center gap-1 py-3 text-xs transition-colors ${
activeTab === tab.id
? 'text-indigo-400 border-b-2 border-indigo-400 bg-indigo-500/10'
onKeyDown={(e) => handleTabKeyDown(e, index)}
className={`flex-1 flex items-center justify-center gap-1 py-3 text-xs transition-colors ${activeTab === tab.id
? 'text-indigo-400 border-b-2 border-indigo-400 bg-indigo-500/10'
: 'text-slate-400 hover:text-white'
}`}
}`}
>
{tab.icon}
<span aria-hidden="true">{tab.icon}</span>
<span className="visually-hidden">{tab.label}</span>
</button>
))}
</div>
<div className="flex-1 overflow-y-auto p-4">
<div
className="flex-1 overflow-y-auto p-4"
role="tabpanel"
id={`tabpanel-${activeTab}`}
aria-labelledby={`tab-${activeTab}`}
>
{activeTab === 'details' && <DetailsTab node={selectedNode} nodeColor={nodeColor} statusColor={statusColor} />}
{activeTab === 'config' && <ConfigTab node={selectedNode} />}
{activeTab === 'files' && <FilesTab node={selectedNode} />}
@@ -92,20 +136,20 @@ export default function RightPanel() {
</div>
{fileBrowserOpen && selectedNodeId && (
<FileBrowser
host={selectedNodeId}
onClose={() => setFileBrowserOpen(false)}
<FileBrowser
host={selectedNodeId}
onClose={() => setFileBrowserOpen(false)}
/>
)}
</div>
</aside>
);
}
function DetailsTab({ node, nodeColor, statusColor }: { node: any; nodeColor: string; statusColor: string }) {
function DetailsTab({ node, nodeColor, statusColor }: { node: TopologyNode; nodeColor: string; statusColor: string }) {
return (
<div className="space-y-4">
<div className="flex items-center gap-3">
<div
<div
className="w-12 h-12 rounded-xl flex items-center justify-center"
style={{ backgroundColor: `${nodeColor}20` }}
>
@@ -116,7 +160,7 @@ function DetailsTab({ node, nodeColor, statusColor }: { node: any; nodeColor: st
<div>
<div className="text-white font-medium">{node.type.replace(/_/g, ' ')}</div>
<div className="flex items-center gap-2 text-sm">
<div
<div
className="w-2 h-2 rounded-full"
style={{ backgroundColor: statusColor }}
/>
@@ -130,7 +174,7 @@ function DetailsTab({ node, nodeColor, statusColor }: { node: any; nodeColor: st
<div className="text-xs text-slate-500 uppercase tracking-wide mb-1">IP Address</div>
<div className="font-mono text-sm text-white">{node.data.ip || 'N/A'}</div>
</div>
{node.data.description && (
<div>
<div className="text-xs text-slate-500 uppercase tracking-wide mb-1">Description</div>
@@ -149,13 +193,13 @@ function DetailsTab({ node, nodeColor, statusColor }: { node: any; nodeColor: st
);
}
function ConfigTab({ node }: { node: any }) {
function ConfigTab({ node }: { node: TopologyNode }) {
const hasConfig = node.data.config;
if (!hasConfig) {
return (
<div className="text-center text-slate-500 py-8">
<FileCode className="w-8 h-8 mx-auto mb-2 opacity-50" />
<FileCode className="w-8 h-8 mx-auto mb-2 opacity-50" aria-hidden="true" />
<div className="text-sm">No configuration available</div>
</div>
);
@@ -170,7 +214,7 @@ function ConfigTab({ node }: { node: any }) {
);
}
function FilesTab({ node }: { node: any }) {
function FilesTab({ node }: { node: TopologyNode }) {
const files = node.data.files || [
'/etc/docker-compose.yml',
'/etc/traefik/dynamic.yml',
@@ -184,7 +228,7 @@ function FilesTab({ node }: { node: any }) {
key={idx}
className="w-full px-3 py-2 flex items-center gap-2 bg-slate-700/50 hover:bg-slate-700 rounded-lg text-left transition-colors"
>
<FolderOpen className="w-4 h-4 text-slate-400" />
<FolderOpen className="w-4 h-4 text-slate-400" aria-hidden="true" />
<span className="font-mono text-xs text-slate-300 truncate">{file}</span>
</button>
))}
@@ -192,13 +236,13 @@ function FilesTab({ node }: { node: any }) {
);
}
function UsageTab({ node }: { node: any }) {
function UsageTab({ node }: { node: TopologyNode }) {
const isService = node.type === 'service';
if (!isService) {
return (
<div className="text-center text-slate-500 py-8">
<BarChart3 className="w-8 h-8 mx-auto mb-2 opacity-50" />
<BarChart3 className="w-8 h-8 mx-auto mb-2 opacity-50" aria-hidden="true" />
<div className="text-sm">Usage data available for services only</div>
</div>
);
@@ -211,7 +255,7 @@ function UsageTab({ node }: { node: any }) {
<span className="text-slate-400">CPU</span>
<span className="text-white">12.4%</span>
</div>
<div className="h-2 bg-slate-700 rounded-full overflow-hidden">
<div className="h-2 bg-slate-700 rounded-full overflow-hidden" role="progressbar" aria-valuenow={12.4} aria-valuemin={0} aria-valuemax={100} aria-label="CPU usage">
<div className="h-full w-[12.4%] bg-indigo-500 rounded-full" />
</div>
</div>
@@ -221,7 +265,7 @@ function UsageTab({ node }: { node: any }) {
<span className="text-slate-400">Memory</span>
<span className="text-white">256 MB / 1 GB</span>
</div>
<div className="h-2 bg-slate-700 rounded-full overflow-hidden">
<div className="h-2 bg-slate-700 rounded-full overflow-hidden" role="progressbar" aria-valuenow={25.6} aria-valuemin={0} aria-valuemax={100} aria-label="Memory usage">
<div className="h-full w-[25.6%] bg-purple-500 rounded-full" />
</div>
</div>
@@ -231,7 +275,7 @@ function UsageTab({ node }: { node: any }) {
<span className="text-slate-400">Network I/O</span>
<span className="text-white">1.2 MB/s ↓ 0.8 MB/s ↑</span>
</div>
<div className="h-2 bg-slate-700 rounded-full overflow-hidden">
<div className="h-2 bg-slate-700 rounded-full overflow-hidden" role="progressbar" aria-valuenow={40} aria-valuemin={0} aria-valuemax={100} aria-label="Network I/O">
<div className="h-full w-[40%] bg-cyan-500 rounded-full" />
</div>
</div>
@@ -239,12 +283,12 @@ function UsageTab({ node }: { node: any }) {
);
}
function ImportanceTab({ node }: { node: any }) {
function ImportanceTab({ node }: { node: TopologyNode }) {
const importance = node.data.importance || 3;
const importanceLabel = getImportanceLabel(importance);
const importanceColor = getImportanceColor(importance);
const reasons = {
const reasons: Record<number, string[]> = {
5: ['Critical infrastructure', 'Single point of failure', 'Required for other services'],
4: ['Important service', 'Used frequently', 'Difficult to replace'],
3: ['Standard service', 'Can be rebuilt', 'Not critical'],
@@ -259,9 +303,11 @@ function ImportanceTab({ node }: { node: any }) {
<Star
key={star}
className={`w-8 h-8 ${star <= importance ? 'fill-yellow-500 text-yellow-500' : 'text-slate-600'}`}
aria-hidden="true"
/>
))}
</div>
<div className="visually-hidden">Importance: {importance} out of 5 stars</div>
<div className="text-center">
<div className="text-lg font-semibold" style={{ color: importanceColor }}>
@@ -273,9 +319,9 @@ function ImportanceTab({ node }: { node: any }) {
<div className="bg-slate-700/50 rounded-lg p-3">
<div className="text-xs text-slate-500 uppercase tracking-wide mb-2">Why this level?</div>
<ul className="space-y-1">
{reasons[importance as keyof typeof reasons]?.map((reason, idx) => (
{reasons[importance]?.map((reason, idx) => (
<li key={idx} className="text-sm text-slate-300 flex items-center gap-2">
<div className="w-1 h-1 bg-slate-500 rounded-full" />
<div className="w-1 h-1 bg-slate-500 rounded-full" aria-hidden="true" />
{reason}
</li>
))}

41
src/components/StaleWarning.tsx Normal file
View File

@@ -0,0 +1,41 @@
import { AlertTriangle, X } from 'lucide-react';
import { useTopologyStore } from '../store/topologyStore';
export default function StaleWarning() {
const {
consecutiveFailures,
lastSuccessfulDiscovery,
staleWarningDismissed,
dismissStaleWarning
} = useTopologyStore();
if (consecutiveFailures < 3 || staleWarningDismissed) {
return null;
}
const formatTime = (date: Date | null) => {
if (!date) return 'Never';
return date.toLocaleString();
};
return (
<div className="bg-amber-900/30 border-b border-amber-700/50 px-4 py-2 flex items-center justify-between">
<div className="flex items-center gap-3">
<AlertTriangle className="w-4 h-4 text-amber-400 flex-shrink-0" />
<span className="text-amber-200 text-sm">
Data may be stale - Last successful discovery: {formatTime(lastSuccessfulDiscovery)}
</span>
<span className="text-amber-400/70 text-xs">
({consecutiveFailures} consecutive failures)
</span>
</div>
<button
onClick={dismissStaleWarning}
className="p-1 hover:bg-amber-800/50 rounded transition-colors"
title="Dismiss warning"
>
<X className="w-4 h-4 text-amber-400" />
</button>
</div>
);
}

63
src/index.css
View File

@@ -29,8 +29,58 @@ body {
height: 100vh;
}
/* ── Skip link (a11y) ────────────────────────────────────── */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--accent);
color: #000;
padding: 8px 16px;
z-index: 100;
font-weight: 600;
transition: top 200ms ease-out;
}
.skip-link:focus {
top: 0;
}
/* ── Focus-visible styles (a11y) ─────────────────────────── */
:focus {
outline: none;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
button:focus-visible {
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.4);
outline: none;
}
/* ── Reduced motion (a11y) ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.react-flow__node {
transition: none !important;
}
}
/* ── React Flow overrides ────────────────────────────────── */
.react-flow__node {
cursor: pointer;
transition: transform 300ms ease-out;
}
.react-flow__edge-path {
@@ -66,3 +116,16 @@ body {
.react-flow__controls-button svg {
fill: currentColor;
}
/* ── Visually hidden utility (a11y) ──────────────────────── */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

146
src/store/topologyStore.test.ts Normal file
View File

@@ -0,0 +1,146 @@
import { describe, test, expect, afterEach } from 'vitest';
import { useTopologyStore } from './topologyStore';
import { TopologyNode } from '../types';
const mockNodes: TopologyNode[] = [
{
id: 'gateway-1',
name: 'Gateway',
type: 'gateway',
data: {
status: 'running',
ip: '10.0.0.1',
parentId: undefined,
importance: 5,
metadata: {},
},
},
{
id: 'host-1',
name: 'Ubuntu',
type: 'host_vm',
data: {
status: 'running',
ip: '10.0.0.10',
parentId: 'gateway-1',
importance: 4,
metadata: {},
},
},
{
id: 'service-1',
name: 'Traefik',
type: 'service',
data: {
status: 'running',
ip: '10.0.0.10',
parentId: 'host-1',
category: 'infra',
importance: 5,
metadata: {},
},
},
{
id: 'service-2',
name: 'Plex',
type: 'service',
data: {
status: 'stopped',
ip: '10.0.0.10',
parentId: 'host-1',
category: 'media',
importance: 2,
metadata: {},
},
},
];
describe('topologyStore', () => {
afterEach(() => {
// Reset store state between tests
useTopologyStore.setState({
nodes: [],
edges: [],
selectedNodeId: null,
searchQuery: '',
typeFilters: [],
statusFilter: 'all',
highlightPath: [],
});
});
/* ----------------------------------------------------------------
* Basic state management
* ------------------------------------------------------------- */
describe('setNodes', () => {
test('sets nodes correctly', () => {
useTopologyStore.getState().setNodes(mockNodes);
expect(useTopologyStore.getState().nodes).toHaveLength(4);
});
});
describe('setSelectedNode', () => {
test('selects a node by id', () => {
useTopologyStore.getState().setNodes(mockNodes);
useTopologyStore.getState().setSelectedNode('host-1');
expect(useTopologyStore.getState().selectedNodeId).toBe('host-1');
});
test('clears selection with null', () => {
useTopologyStore.getState().setSelectedNode('host-1');
useTopologyStore.getState().setSelectedNode(null);
expect(useTopologyStore.getState().selectedNodeId).toBeNull();
});
});
/* ----------------------------------------------------------------
* Filtering
* ------------------------------------------------------------- */
describe('getFilteredNodes', () => {
test('returns all nodes when no filters active', () => {
useTopologyStore.getState().setNodes(mockNodes);
const filtered = useTopologyStore.getState().getFilteredNodes();
expect(filtered).toHaveLength(4);
});
test('filters by search query', () => {
useTopologyStore.getState().setNodes(mockNodes);
useTopologyStore.getState().setSearchQuery('traefik');
const filtered = useTopologyStore.getState().getFilteredNodes();
expect(filtered.some(n => n.name === 'Traefik')).toBe(true);
});
test('filters by status', () => {
useTopologyStore.getState().setNodes(mockNodes);
useTopologyStore.getState().setStatusFilter('stopped');
const filtered = useTopologyStore.getState().getFilteredNodes();
expect(filtered.every(n => n.data.status === 'stopped')).toBe(true);
});
test('filters by type', () => {
useTopologyStore.getState().setNodes(mockNodes);
useTopologyStore.getState().toggleTypeFilter('service');
const filtered = useTopologyStore.getState().getFilteredNodes();
expect(filtered.every(n => n.type === 'service')).toBe(true);
});
});
/* ----------------------------------------------------------------
* Type filter toggle
* ------------------------------------------------------------- */
describe('toggleTypeFilter', () => {
test('adds type when not present', () => {
useTopologyStore.getState().toggleTypeFilter('gateway');
expect(useTopologyStore.getState().typeFilters).toContain('gateway');
});
test('removes type when already present', () => {
useTopologyStore.getState().toggleTypeFilter('gateway');
useTopologyStore.getState().toggleTypeFilter('gateway');
expect(useTopologyStore.getState().typeFilters).not.toContain('gateway');
});
});
});

337
src/store/topologyStore.ts
View File

@@ -1,5 +1,5 @@
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { persist, createJSONStorage, devtools } from 'zustand/middleware';
import { ViewMode, TopologyNode, TopologyEdge, NetworkInfo, Host, NodeType } from '../types';
export type Orientation = 'LR' | 'TB';
@@ -25,20 +25,22 @@ interface TopologyState {
lastUpdated: Date | null;
isLoading: boolean;
pollInterval: number;
networkInfo: NetworkInfo | null;
hosts: Host[];
dataSource: 'live' | 'simulated';
consecutiveFailures: number;
lastSuccessfulDiscovery: Date | null;
commandPaletteOpen: boolean;
terminalOpen: boolean;
terminalHost: string | null;
highlightPath: string[];
connectionStatus: 'ws' | 'polling' | 'disconnected';
staleWarningDismissed: boolean;
setConnectionStatus: (status: 'ws' | 'polling' | 'disconnected') => void;
setNodes: (nodes: TopologyNode[]) => void;
setEdges: (edges: TopologyEdge[]) => void;
setSelectedNode: (nodeId: string | null) => void;
@@ -63,165 +65,182 @@ interface TopologyState {
toggleCommandPalette: () => void;
setHighlightPath: (ids: string[]) => void;
dismissStaleWarning: () => void;
getSelectedNode: () => TopologyNode | null;
getChildNodes: () => TopologyNode[];
getFilteredNodes: () => TopologyNode[];
}
export const useTopologyStore = create<TopologyState>()(
persist(
(set, get) => ({
nodes: [],
edges: [],
selectedNodeId: null,
viewMode: 'full',
orientation: 'LR',
searchQuery: '',
typeFilters: ALL_NODE_TYPES,
statusFilter: 'all',
leftPanelOpen: true,
rightPanelOpen: true,
lastUpdated: null,
isLoading: false,
pollInterval: 30000,
networkInfo: null,
hosts: [],
dataSource: 'simulated',
consecutiveFailures: 0,
lastSuccessfulDiscovery: null,
commandPaletteOpen: false,
terminalOpen: false,
terminalHost: null,
highlightPath: [],
staleWarningDismissed: false,
setNodes: (nodes) => set({ nodes }),
setEdges: (edges) => set({ edges }),
setSelectedNode: (nodeId) => {
if (!nodeId) {
set({ selectedNodeId: nodeId, highlightPath: [] });
return;
}
const state = get();
const path: string[] = [nodeId];
let currentNode = state.nodes.find(n => n.id === nodeId);
while (currentNode?.data?.parentId) {
path.push(currentNode.data.parentId);
currentNode = state.nodes.find(n => n.id === currentNode?.data?.parentId);
}
set({ selectedNodeId: nodeId, highlightPath: path });
},
setViewMode: (mode) => set({ viewMode: mode }),
setOrientation: (orientation) => set({ orientation }),
setSearchQuery: (query) => set({ searchQuery: query }),
toggleTypeFilter: (type) => set((state) => {
const exists = state.typeFilters.includes(type);
return {
typeFilters: exists
? state.typeFilters.filter(t => t !== type)
: [...state.typeFilters, type]
};
}),
setStatusFilter: (filter) => set({ statusFilter: filter }),
toggleLeftPanel: () => set((state) => ({ leftPanelOpen: !state.leftPanelOpen })),
toggleRightPanel: () => set((state) => ({ rightPanelOpen: !state.rightPanelOpen })),
setLastUpdated: (date) => set({ lastUpdated: date }),
setIsLoading: (loading) => set({ isLoading: loading }),
setPollInterval: (interval) => set({ pollInterval: interval }),
setNetworkInfo: (info) => set({ networkInfo: info }),
setHosts: (hosts) => set({ hosts }),
setDataSource: (source) => set({ dataSource: source }),
incrementFailures: () => set((state) => ({ consecutiveFailures: state.consecutiveFailures + 1 })),
resetFailures: () => set({ consecutiveFailures: 0 }),
setLastSuccessfulDiscovery: (date) => set({ lastSuccessfulDiscovery: date }),
toggleCommandPalette: () => set((state) => ({ commandPaletteOpen: !state.commandPaletteOpen })),
setHighlightPath: (ids) => set({ highlightPath: ids }),
dismissStaleWarning: () => set({ staleWarningDismissed: true }),
openTerminal: (host) => set({ terminalOpen: true, terminalHost: host }),
closeTerminal: () => set({ terminalOpen: false, terminalHost: null }),
getSelectedNode: () => {
const { nodes, selectedNodeId } = get();
return nodes.find(n => n.id === selectedNodeId) || null;
},
getChildNodes: () => {
const { nodes, selectedNodeId } = get();
if (!selectedNodeId) return [];
const selectedNode = nodes.find(n => n.id === selectedNodeId);
if (!selectedNode) return [];
return nodes.filter(n => n.data.parentId === selectedNodeId);
},
getFilteredNodes: () => {
const { nodes, viewMode, searchQuery, typeFilters, statusFilter } = get();
let filtered = nodes;
if (searchQuery) {
const query = searchQuery.toLowerCase();
filtered = filtered.filter(n =>
n.name.toLowerCase().includes(query) ||
n.data.ip?.toLowerCase().includes(query)
);
}
if (statusFilter !== 'all') {
filtered = filtered.filter(n => n.data.status === statusFilter);
}
if (typeFilters.length > 0 && typeFilters.length < ALL_NODE_TYPES.length) {
filtered = filtered.filter(n => typeFilters.includes(n.type));
}
let allowedTypes: NodeType[] = [];
if (viewMode === 'network') {
allowedTypes = ['gateway', 'vlan', 'wifi', 'host_physical', 'host_vm', 'host_container'];
} else if (viewMode === 'host') {
allowedTypes = ['gateway', 'vlan', 'wifi', 'host_physical', 'host_vm', 'host_container'];
} else if (viewMode === 'service') {
allowedTypes = ['host_physical', 'host_vm', 'host_container', 'service', 'volume'];
} else if (viewMode === 'filesystem') {
allowedTypes = ['volume', 'mount', 'path'];
}
if (allowedTypes.length > 0) {
const nodeMap = new Map(nodes.map(n => [n.id, n]));
const includeSet = new Set<string>();
nodes.forEach(node => {
if (allowedTypes.includes(node.type)) {
includeSet.add(node.id);
let current: TopologyNode | undefined = node;
while (current?.data?.parentId) {
const parentId = current.data.parentId;
includeSet.add(parentId);
current = nodeMap.get(parentId);
if (!current) break;
devtools(
persist(
(set, get) => ({
nodes: [],
edges: [],
selectedNodeId: null,
viewMode: 'full',
orientation: 'LR',
searchQuery: '',
typeFilters: ALL_NODE_TYPES,
statusFilter: 'all',
leftPanelOpen: true,
rightPanelOpen: true,
lastUpdated: null,
isLoading: false,
pollInterval: 30000,
networkInfo: null,
hosts: [],
dataSource: 'simulated',
consecutiveFailures: 0,
lastSuccessfulDiscovery: null,
commandPaletteOpen: false,
terminalOpen: false,
terminalHost: null,
highlightPath: [],
connectionStatus: 'polling',
staleWarningDismissed: false,
setNodes: (nodes) => set({ nodes }),
setEdges: (edges) => set({ edges }),
setSelectedNode: (nodeId) => {
if (!nodeId) {
set({ selectedNodeId: nodeId, highlightPath: [] });
return;
}
const state = get();
const path: string[] = [nodeId];
let currentNode = state.nodes.find(n => n.id === nodeId);
while (currentNode?.data?.parentId) {
path.push(currentNode.data.parentId);
currentNode = state.nodes.find(n => n.id === currentNode?.data?.parentId);
}
set({ selectedNodeId: nodeId, highlightPath: path });
},
setViewMode: (mode) => set({ viewMode: mode }),
setOrientation: (orientation) => set({ orientation }),
setSearchQuery: (query) => set({ searchQuery: query }),
toggleTypeFilter: (type) => set((state) => {
const exists = state.typeFilters.includes(type);
return {
typeFilters: exists
? state.typeFilters.filter(t => t !== type)
: [...state.typeFilters, type]
};
}),
setStatusFilter: (filter) => set({ statusFilter: filter }),
toggleLeftPanel: () => set((state) => ({ leftPanelOpen: !state.leftPanelOpen })),
toggleRightPanel: () => set((state) => ({ rightPanelOpen: !state.rightPanelOpen })),
setLastUpdated: (date) => set({ lastUpdated: date }),
setIsLoading: (loading) => set({ isLoading: loading }),
setPollInterval: (interval) => set({ pollInterval: interval }),
setNetworkInfo: (info) => set({ networkInfo: info }),
setHosts: (hosts) => set({ hosts }),
setDataSource: (source) => set({ dataSource: source }),
incrementFailures: () => set((state) => ({ consecutiveFailures: state.consecutiveFailures + 1 })),
resetFailures: () => set({ consecutiveFailures: 0 }),
setLastSuccessfulDiscovery: (date) => set({ lastSuccessfulDiscovery: date }),
toggleCommandPalette: () => set((state) => ({ commandPaletteOpen: !state.commandPaletteOpen })),
setHighlightPath: (ids) => set({ highlightPath: ids }),
setConnectionStatus: (status) => set({ connectionStatus: status }),
dismissStaleWarning: () => set({ staleWarningDismissed: true }),
openTerminal: (host) => set({ terminalOpen: true, terminalHost: host }),
closeTerminal: () => set({ terminalOpen: false, terminalHost: null }),
getSelectedNode: () => {
const { nodes, selectedNodeId } = get();
return nodes.find(n => n.id === selectedNodeId) || null;
},
getChildNodes: () => {
const { nodes, selectedNodeId } = get();
if (!selectedNodeId) return [];
const selectedNode = nodes.find(n => n.id === selectedNodeId);
if (!selectedNode) return [];
return nodes.filter(n => n.data.parentId === selectedNodeId);
},
getFilteredNodes: () => {
const { nodes, viewMode, searchQuery, typeFilters, statusFilter } = get();
let filtered = nodes;
if (searchQuery) {
const query = searchQuery.toLowerCase();
filtered = filtered.filter(n =>
n.name.toLowerCase().includes(query) ||
n.data.ip?.toLowerCase().includes(query)
);
}
if (statusFilter !== 'all') {
filtered = filtered.filter(n => n.data.status === statusFilter);
}
if (typeFilters.length > 0 && typeFilters.length < ALL_NODE_TYPES.length) {
filtered = filtered.filter(n => typeFilters.includes(n.type));
}
let allowedTypes: NodeType[] = [];
if (viewMode === 'network') {
allowedTypes = ['gateway', 'vlan', 'wifi', 'host_physical', 'host_vm', 'host_container'];
} else if (viewMode === 'host') {
allowedTypes = ['gateway', 'vlan', 'wifi', 'host_physical', 'host_vm', 'host_container'];
} else if (viewMode === 'service') {
allowedTypes = ['host_physical', 'host_vm', 'host_container', 'service', 'volume'];
} else if (viewMode === 'filesystem') {
allowedTypes = ['volume', 'mount', 'path'];
}
if (allowedTypes.length > 0) {
const nodeMap = new Map(nodes.map(n => [n.id, n]));
const includeSet = new Set<string>();
nodes.forEach(node => {
if (allowedTypes.includes(node.type)) {
includeSet.add(node.id);
let current: TopologyNode | undefined = node;
while (current?.data?.parentId) {
const parentId = current.data.parentId;
includeSet.add(parentId);
current = nodeMap.get(parentId);
if (!current) break;
}
}
});
filtered = filtered.filter(n => includeSet.has(n.id));
}
return filtered;
}
});
filtered = filtered.filter(n => includeSet.has(n.id));
}
return filtered;
}
}),
{
name: 'homelab-topology-settings',
version: 2,
storage: createJSONStorage(() => localStorage),
partialize: (state: TopologyState) => ({
viewMode: state.viewMode,
orientation: state.orientation,
searchQuery: state.searchQuery,
typeFilters: state.typeFilters,
statusFilter: state.statusFilter,
leftPanelOpen: state.leftPanelOpen,
rightPanelOpen: state.rightPanelOpen,
pollInterval: state.pollInterval
})
}));
}),
{
name: 'homelab-topology-settings',
version: 2,
storage: createJSONStorage(() => localStorage),
partialize: (state: TopologyState) => ({
viewMode: state.viewMode,
orientation: state.orientation,
searchQuery: state.searchQuery,
typeFilters: state.typeFilters,
statusFilter: state.statusFilter,
leftPanelOpen: state.leftPanelOpen,
rightPanelOpen: state.rightPanelOpen,
pollInterval: state.pollInterval
})
}), { name: 'TopologyStore' }));
// Focused selector hooks to avoid unnecessary re-renders
export const useSelectedNode = () => useTopologyStore((s) => {
const { nodes, selectedNodeId } = s;
return nodes.find(n => n.id === selectedNodeId) || null;
});
export const useChildNodes = () => useTopologyStore((s) => {
const { nodes, selectedNodeId } = s;
if (!selectedNodeId) return [];
return nodes.filter(n => n.data.parentId === selectedNodeId);
});
export const useFilteredNodes = () => useTopologyStore((s) => s.getFilteredNodes());

63
src/types/index.ts
View File

@@ -1,9 +1,9 @@
export type NodeType =
| 'gateway'
| 'vlan'
| 'wifi'
export type NodeType =
| 'gateway'
| 'vlan'
| 'wifi'
| 'host_physical'
| 'host_vm'
| 'host_vm'
| 'host_container'
| 'vm_lxc'
| 'vm_qemu'
@@ -85,3 +85,56 @@ export interface ServiceConfig {
volumes?: string[];
environment?: Record<string, string>;
}
// --- Proxmox Admin types (proxmox-admin skill) ---
export interface ProxmoxVM {
vmid: number;
name: string;
status: 'running' | 'stopped' | 'paused';
type: 'qemu' | 'lxc';
cpu: number;
mem: number;
maxmem: number;
disk: number;
maxdisk: number;
uptime: number;
node: string;
}
export interface ProxmoxContainer {
vmid: number;
name: string;
status: 'running' | 'stopped';
type: 'lxc';
cpu: number;
mem: number;
maxmem: number;
disk: number;
maxdisk: number;
uptime: number;
node: string;
}
// --- Network Engineer types (network-engineer skill) ---
export interface NetworkSegment {
id: string;
name: string;
vlanId?: number;
subnet: string;
gateway?: string;
purpose: string;
hostCount: number;
}
// --- Infrastructure Monitoring types (infrastructure-monitoring skill) ---
export interface DiscoveryMetrics {
duration: number; // ms
hostCount: number;
successCount: number;
errorCount: number;
timestamp: string;
}

67
src/utils/colors.test.ts Normal file
View File

@@ -0,0 +1,67 @@
import { describe, test, expect } from 'vitest';
import { getNodeColor, getStatusColor, getImportanceLabel, getImportanceColor } from './colors';
describe('getNodeColor', () => {
test('returns correct color for gateway', () => {
expect(getNodeColor('gateway')).toBe('#6366F1');
});
test('returns correct color for physical host', () => {
expect(getNodeColor('host_physical')).toBe('#10B981');
});
test('returns fallback color for unknown type', () => {
expect(getNodeColor('nonexistent' as any)).toBe('#6B7280');
});
test('returns service category color when type is service', () => {
expect(getNodeColor('service', 'media')).toBe('#EF4444');
expect(getNodeColor('service', 'infra')).toBe('#3B82F6');
expect(getNodeColor('service', 'monitoring')).toBe('#22C55E');
});
test('returns "other" service color when no category provided', () => {
expect(getNodeColor('service')).toBe('#6B7280');
});
});
describe('getStatusColor', () => {
test('returns green for running', () => {
expect(getStatusColor('running')).toBe('#22C55E');
});
test('returns red for stopped', () => {
expect(getStatusColor('stopped')).toBe('#EF4444');
});
test('returns gray for unknown', () => {
expect(getStatusColor('unknown')).toBe('#6B7280');
});
});
describe('getImportanceLabel', () => {
test('returns correct labels for all levels', () => {
expect(getImportanceLabel(1)).toBe('Minimal');
expect(getImportanceLabel(2)).toBe('Low');
expect(getImportanceLabel(3)).toBe('Medium');
expect(getImportanceLabel(4)).toBe('High');
expect(getImportanceLabel(5)).toBe('Critical');
});
test('returns Unknown for out-of-range values', () => {
expect(getImportanceLabel(0)).toBe('Unknown');
expect(getImportanceLabel(6)).toBe('Unknown');
});
});
describe('getImportanceColor', () => {
test('returns correct colors for all levels', () => {
expect(getImportanceColor(1)).toBe('#6B7280');
expect(getImportanceColor(3)).toBe('#F59E0B');
expect(getImportanceColor(5)).toBe('#EF4444');
});
test('returns fallback for out-of-range', () => {
expect(getImportanceColor(99)).toBe('#6B7280');
});
});