Minor UI Rework + Introduction of Operations view.

This commit is contained in:
2GT-Rich
2026-05-11 16:46:36 -07:00
parent 176c3d85ec
commit 3a7ac1d023
14 changed files with 1995 additions and 1546 deletions
+1 -1
View File
@@ -2,7 +2,7 @@
A self-hosted, full-stack network management platform for MikroTik devices. Monitor, configure, and manage your entire MikroTik infrastructure — routers, switches, and wireless access points — from a single web interface. A self-hosted, full-stack network management platform for MikroTik devices. Monitor, configure, and manage your entire MikroTik infrastructure — routers, switches, and wireless access points — from a single web interface.
![Version](https://img.shields.io/badge/version-0.10.8_Beta-blue) ![Version](https://img.shields.io/badge/version-0.10.9_Beta-blue)
![License](https://img.shields.io/badge/license-AGPLv3-blue) ![License](https://img.shields.io/badge/license-AGPLv3-blue)
![Docker](https://img.shields.io/badge/docker-compose-2496ED?logo=docker&logoColor=white) ![Docker](https://img.shields.io/badge/docker-compose-2496ED?logo=docker&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-5.3-3178C6?logo=typescript&logoColor=white) ![TypeScript](https://img.shields.io/badge/TypeScript-5.3-3178C6?logo=typescript&logoColor=white)
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "mikrotik-manager-backend", "name": "mikrotik-manager-backend",
"version": "0.10.8-beta", "version": "0.10.9-beta",
"description": "Mikrotik Network Management Platform - Backend API", "description": "Mikrotik Network Management Platform - Backend API",
"main": "dist/index.js", "main": "dist/index.js",
"scripts": { "scripts": {
+3
View File
@@ -6,6 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mikrotik Manager</title> <title>Mikrotik Manager</title>
<meta name="description" content="Self-hosted Mikrotik network management platform" /> <meta name="description" content="Self-hosted Mikrotik network management platform" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "mikrotik-manager-frontend", "name": "mikrotik-manager-frontend",
"version": "0.10.8-beta", "version": "0.10.9-beta",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
+2 -2
View File
@@ -8,7 +8,7 @@ export default function AppLayout() {
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
return ( return (
<div className="flex h-screen bg-gray-50 dark:bg-slate-900 overflow-hidden"> <div className="flex h-screen overflow-hidden" style={{ background: 'var(--bg)' }}>
{/* Mobile backdrop */} {/* Mobile backdrop */}
{sidebarOpen && ( {sidebarOpen && (
<div <div
@@ -22,7 +22,7 @@ export default function AppLayout() {
<div className="flex-1 flex flex-col min-w-0 overflow-hidden"> <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
<TopBar onMenuClick={() => setSidebarOpen((o) => !o)} /> <TopBar onMenuClick={() => setSidebarOpen((o) => !o)} />
<SecurityBanners /> <SecurityBanners />
<main className="flex-1 overflow-auto p-3 sm:p-6"> <main className="flex-1 overflow-auto" style={{ padding: '22px 28px' }}>
<Outlet /> <Outlet />
</main> </main>
</div> </div>
+188 -205
View File
@@ -49,6 +49,43 @@ interface SidebarProps {
onMobileClose: () => void; onMobileClose: () => void;
} }
function NavItem({
to,
icon: Icon,
label,
isCollapsed,
onClick,
end,
}: {
to: string;
icon: React.ElementType;
label: string;
isCollapsed: boolean;
onClick: () => void;
end?: boolean;
}) {
return (
<NavLink
to={to}
end={end}
title={isCollapsed ? label : undefined}
onClick={onClick}
className={({ isActive }) =>
clsx(
'flex items-center gap-[10px] rounded-[6px] text-[13px] font-medium transition-colors duration-150 relative',
isCollapsed ? 'md:justify-center md:px-2 px-[10px] py-[7px]' : 'px-[10px] py-[7px]',
isActive
? 'bg-surface-3 text-ink font-semibold border-l-2 border-accent pl-[8px]'
: 'text-ink-2 hover:bg-surface-3 hover:text-ink border-l-2 border-transparent'
)
}
>
<Icon className="w-[15px] h-[15px] flex-shrink-0" />
<span className={clsx(isCollapsed && 'md:hidden')}>{label}</span>
</NavLink>
);
}
export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) { export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const location = useLocation(); const location = useLocation();
@@ -63,6 +100,8 @@ export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
const hasRouters = devices.some(d => d.device_type === 'router'); const hasRouters = devices.some(d => d.device_type === 'router');
const hasWireless = devices.some(d => d.device_type === 'wireless_ap'); const hasWireless = devices.some(d => d.device_type === 'wireless_ap');
const onlineCount = devices.filter(d => d.status === 'online').length;
const switchesActive = location.pathname.startsWith('/switches'); const switchesActive = location.pathname.startsWith('/switches');
const [switchesOpen, setSwitchesOpen] = useState(switchesActive); const [switchesOpen, setSwitchesOpen] = useState(switchesActive);
const effectiveSwitchesOpen = switchesOpen || switchesActive; const effectiveSwitchesOpen = switchesOpen || switchesActive;
@@ -79,77 +118,90 @@ export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
const [networkServicesOpen, setNetworkServicesOpen] = useState(networkServicesActive); const [networkServicesOpen, setNetworkServicesOpen] = useState(networkServicesActive);
const effectiveNetworkServicesOpen = networkServicesOpen || networkServicesActive; const effectiveNetworkServicesOpen = networkServicesOpen || networkServicesActive;
// On mobile the sidebar is always expanded (never icon-only)
const isCollapsed = collapsed; const isCollapsed = collapsed;
const handleNavClick = () => { const handleNavClick = () => {
// Close mobile drawer when navigating
onMobileClose(); onMobileClose();
}; };
// Group header button (Switches / Routers / Wireless / Network Services)
const GroupHeader = ({
icon: Icon,
label,
isActive,
isOpen,
onToggle,
}: {
icon: React.ElementType;
label: string;
isActive: boolean;
isOpen: boolean;
onToggle: () => void;
}) => (
<button
onClick={onToggle}
className={clsx(
'w-full flex items-center gap-[10px] px-[10px] py-[7px] rounded-[6px] text-[13px] font-medium transition-colors duration-150 border-l-2 border-transparent',
isActive ? 'text-accent' : 'text-ink-2 hover:bg-surface-3 hover:text-ink'
)}
>
<Icon className="w-[15px] h-[15px] flex-shrink-0" />
<span className="flex-1 text-left">{label}</span>
<ChevronDown className={clsx('w-3.5 h-3.5 transition-transform', isOpen ? 'rotate-0' : '-rotate-90')} />
</button>
);
return ( return (
<aside <aside
className={clsx( className={clsx(
// Base styles 'flex-shrink-0 flex flex-col transition-all duration-200',
'flex-shrink-0 bg-slate-100 dark:bg-slate-900 border-r border-gray-200 dark:border-slate-700 flex flex-col transition-all duration-200',
// Mobile: fixed drawer that slides in/out
'fixed inset-y-0 left-0 z-50', 'fixed inset-y-0 left-0 z-50',
mobileOpen ? 'translate-x-0' : '-translate-x-full', mobileOpen ? 'translate-x-0' : '-translate-x-full',
// Desktop: static in flex layout, normal collapse behaviour
'md:relative md:translate-x-0', 'md:relative md:translate-x-0',
isCollapsed ? 'md:w-14' : 'md:w-56', isCollapsed ? 'md:w-14' : 'md:w-56',
// Mobile always full width
'w-64', 'w-64',
)} )}
style={{ background: 'var(--surface)', borderRight: '1px solid var(--line)' }}
> >
{/* Logo */} {/* Brand block */}
<div <div
className={clsx( className={clsx(
'flex items-center border-b border-gray-200 dark:border-slate-700 py-5', 'flex items-center py-[22px]',
isCollapsed ? 'md:justify-center md:px-2 px-4 gap-3' : 'gap-3 px-4' isCollapsed ? 'md:justify-center md:px-2 px-4 gap-[10px]' : 'gap-[10px] px-4',
'border-b'
)} )}
style={{ borderColor: 'var(--line)' }}
> >
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center flex-shrink-0"> <div
<Network className="w-4 h-4 text-white" /> className="w-[30px] h-[30px] rounded-[7px] flex items-center justify-center flex-shrink-0"
style={{ background: 'linear-gradient(135deg, var(--accent), var(--accent-2))' }}
>
<Network className="w-4 h-4" style={{ color: 'var(--accent-fg)' }} />
</div> </div>
{/* Always show text on mobile; respect collapsed on desktop */}
<div className={clsx(isCollapsed && 'md:hidden')}> <div className={clsx(isCollapsed && 'md:hidden')}>
<div className="text-sm font-bold text-gray-900 dark:text-white leading-none">Mikrotik</div> <div className="text-[14px] font-semibold leading-none" style={{ color: 'var(--ink)' }}>Mikrotik Manager</div>
<div className="text-xs text-gray-500 dark:text-slate-400 mt-0.5 leading-none">Manager</div> <div className="text-[11px] leading-none mt-[3px]" style={{ color: 'var(--ink-3)' }}>{APP_VERSION}</div>
<div className="text-[10px] text-gray-400 dark:text-slate-500 mt-1 leading-none">{APP_VERSION}</div>
</div> </div>
{/* Mobile close button */}
<button <button
onClick={onMobileClose} onClick={onMobileClose}
className="ml-auto p-1.5 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-slate-300 md:hidden" className="ml-auto p-1.5 rounded-lg md:hidden"
style={{ color: 'var(--ink-4)' }}
> >
<X className="w-4 h-4" /> <X className="w-4 h-4" />
</button> </button>
</div> </div>
{/* Navigation */} {/* Navigation */}
<nav className="flex-1 px-2 py-3 space-y-0.5 overflow-y-auto"> <nav className="flex-1 px-[14px] py-3 space-y-[1px] overflow-y-auto">
{navItems.map(({ to, icon: Icon, label }) => ( {navItems.map(({ to, icon, label }) => (
<NavLink <NavItem key={to} to={to} icon={icon} label={label} isCollapsed={isCollapsed} onClick={handleNavClick} />
key={to}
to={to}
title={isCollapsed ? label : undefined}
onClick={handleNavClick}
className={({ isActive }) =>
clsx(
'flex items-center rounded-lg text-sm font-medium transition-colors duration-150',
isCollapsed ? 'md:justify-center md:px-2 px-3 py-2.5 gap-3' : 'gap-3 px-3 py-2.5',
isActive
? 'bg-blue-600 text-white shadow-sm'
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
)
}
>
<Icon className="w-4 h-4 flex-shrink-0" />
<span className={clsx(isCollapsed && 'md:hidden')}>{label}</span>
</NavLink>
))} ))}
{/* Divider before device-type groups */}
{(hasSwitches || hasRouters || hasWireless) && !isCollapsed && (
<div className="my-[6px] mx-2" style={{ height: 1, background: 'var(--line)' }} />
)}
{/* Switches group */} {/* Switches group */}
{hasSwitches && ( {hasSwitches && (
isCollapsed ? ( isCollapsed ? (
@@ -159,50 +211,28 @@ export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
onClick={handleNavClick} onClick={handleNavClick}
className={({ isActive }) => className={({ isActive }) =>
clsx( clsx(
'hidden md:flex items-center justify-center rounded-lg text-sm font-medium transition-colors duration-150 px-2 py-2.5', 'hidden md:flex items-center justify-center rounded-[6px] text-[13px] font-medium transition-colors duration-150 px-2 py-[7px] border-l-2',
isActive || switchesActive isActive || switchesActive
? 'bg-blue-600 text-white shadow-sm' ? 'bg-surface-3 text-ink border-accent'
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100' : 'text-ink-2 hover:bg-surface-3 hover:text-ink border-transparent'
) )
} }
> >
<Layers className="w-4 h-4 flex-shrink-0" /> <Layers className="w-[15px] h-[15px] flex-shrink-0" />
</NavLink> </NavLink>
) : ( ) : (
<> <>
<button <GroupHeader
onClick={() => setSwitchesOpen(o => !o)} icon={Layers}
className={clsx( label="Switches"
'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-150', isActive={switchesActive}
switchesActive isOpen={effectiveSwitchesOpen}
? 'text-blue-600 dark:text-blue-400' onToggle={() => setSwitchesOpen(o => !o)}
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100' />
)}
>
<Layers className="w-4 h-4 flex-shrink-0" />
<span className="flex-1 text-left">Switches</span>
<ChevronDown className={clsx('w-3.5 h-3.5 transition-transform', effectiveSwitchesOpen ? 'rotate-0' : '-rotate-90')} />
</button>
{effectiveSwitchesOpen && ( {effectiveSwitchesOpen && (
<div className="ml-4 pl-3 border-l border-gray-300 dark:border-slate-600 space-y-0.5"> <div className="ml-4 pl-3 space-y-[1px]" style={{ borderLeft: '1px solid var(--line)' }}>
{switchSubItems.map(({ to, icon: Icon, label }) => ( {switchSubItems.map(({ to, icon, label }) => (
<NavLink <NavItem key={to} to={to} end icon={icon} label={label} isCollapsed={false} onClick={handleNavClick} />
key={to}
to={to}
end
onClick={handleNavClick}
className={({ isActive }) =>
clsx(
'flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm font-medium transition-colors duration-150',
isActive
? 'bg-blue-600 text-white shadow-sm'
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
)
}
>
<Icon className="w-3.5 h-3.5 flex-shrink-0" />
{label}
</NavLink>
))} ))}
</div> </div>
)} )}
@@ -219,50 +249,28 @@ export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
onClick={handleNavClick} onClick={handleNavClick}
className={({ isActive }) => className={({ isActive }) =>
clsx( clsx(
'hidden md:flex items-center justify-center rounded-lg text-sm font-medium transition-colors duration-150 px-2 py-2.5', 'hidden md:flex items-center justify-center rounded-[6px] text-[13px] font-medium transition-colors duration-150 px-2 py-[7px] border-l-2',
isActive || routersActive isActive || routersActive
? 'bg-blue-600 text-white shadow-sm' ? 'bg-surface-3 text-ink border-accent'
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100' : 'text-ink-2 hover:bg-surface-3 hover:text-ink border-transparent'
) )
} }
> >
<Router className="w-4 h-4 flex-shrink-0" /> <Router className="w-[15px] h-[15px] flex-shrink-0" />
</NavLink> </NavLink>
) : ( ) : (
<> <>
<button <GroupHeader
onClick={() => setRoutersOpen(o => !o)} icon={Router}
className={clsx( label="Routers"
'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-150', isActive={routersActive}
routersActive isOpen={effectiveRoutersOpen}
? 'text-blue-600 dark:text-blue-400' onToggle={() => setRoutersOpen(o => !o)}
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100' />
)}
>
<Router className="w-4 h-4 flex-shrink-0" />
<span className="flex-1 text-left">Routers</span>
<ChevronDown className={clsx('w-3.5 h-3.5 transition-transform', effectiveRoutersOpen ? 'rotate-0' : '-rotate-90')} />
</button>
{effectiveRoutersOpen && ( {effectiveRoutersOpen && (
<div className="ml-4 pl-3 border-l border-gray-300 dark:border-slate-600 space-y-0.5"> <div className="ml-4 pl-3 space-y-[1px]" style={{ borderLeft: '1px solid var(--line)' }}>
{routerSubItems.map(({ to, icon: Icon, label }) => ( {routerSubItems.map(({ to, icon, label }) => (
<NavLink <NavItem key={to} to={to} end icon={icon} label={label} isCollapsed={false} onClick={handleNavClick} />
key={to}
to={to}
end
onClick={handleNavClick}
className={({ isActive }) =>
clsx(
'flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm font-medium transition-colors duration-150',
isActive
? 'bg-blue-600 text-white shadow-sm'
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
)
}
>
<Icon className="w-3.5 h-3.5 flex-shrink-0" />
{label}
</NavLink>
))} ))}
</div> </div>
)} )}
@@ -279,57 +287,38 @@ export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
onClick={handleNavClick} onClick={handleNavClick}
className={({ isActive }) => className={({ isActive }) =>
clsx( clsx(
'hidden md:flex items-center justify-center rounded-lg text-sm font-medium transition-colors duration-150 px-2 py-2.5', 'hidden md:flex items-center justify-center rounded-[6px] text-[13px] font-medium transition-colors duration-150 px-2 py-[7px] border-l-2',
isActive || wirelessActive isActive || wirelessActive
? 'bg-blue-600 text-white shadow-sm' ? 'bg-surface-3 text-ink border-accent'
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100' : 'text-ink-2 hover:bg-surface-3 hover:text-ink border-transparent'
) )
} }
> >
<Wifi className="w-4 h-4 flex-shrink-0" /> <Wifi className="w-[15px] h-[15px] flex-shrink-0" />
</NavLink> </NavLink>
) : ( ) : (
<> <>
<button <GroupHeader
onClick={() => setWirelessOpen(o => !o)} icon={Wifi}
className={clsx( label="Wireless"
'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-150', isActive={wirelessActive}
wirelessActive isOpen={effectiveWirelessOpen}
? 'text-blue-600 dark:text-blue-400' onToggle={() => setWirelessOpen(o => !o)}
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100' />
)}
>
<Wifi className="w-4 h-4 flex-shrink-0" />
<span className="flex-1 text-left">Wireless</span>
<ChevronDown className={clsx('w-3.5 h-3.5 transition-transform', effectiveWirelessOpen ? 'rotate-0' : '-rotate-90')} />
</button>
{effectiveWirelessOpen && ( {effectiveWirelessOpen && (
<div className="ml-4 pl-3 border-l border-gray-300 dark:border-slate-600 space-y-0.5"> <div className="ml-4 pl-3 space-y-[1px]" style={{ borderLeft: '1px solid var(--line)' }}>
{wirelessSubItems.map(({ to, icon: Icon, label }) => ( {wirelessSubItems.map(({ to, icon, label }) => (
<NavLink <NavItem key={to} to={to} end icon={icon} label={label} isCollapsed={false} onClick={handleNavClick} />
key={to}
to={to}
end
onClick={handleNavClick}
className={({ isActive }) =>
clsx(
'flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm font-medium transition-colors duration-150',
isActive
? 'bg-blue-600 text-white shadow-sm'
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
)
}
>
<Icon className="w-3.5 h-3.5 flex-shrink-0" />
{label}
</NavLink>
))} ))}
</div> </div>
)} )}
</> </>
) )
)} )}
{/* Network Services group — always shown */}
{/* Network Services group */}
<div className="mt-[6px]" style={{ height: 1, background: 'var(--line)', marginInline: '8px' }} />
<div className="mt-[6px]">
{isCollapsed ? ( {isCollapsed ? (
<NavLink <NavLink
to="/network-services" to="/network-services"
@@ -337,90 +326,84 @@ export default function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
onClick={handleNavClick} onClick={handleNavClick}
className={({ isActive }) => className={({ isActive }) =>
clsx( clsx(
'hidden md:flex items-center justify-center rounded-lg text-sm font-medium transition-colors duration-150 px-2 py-2.5', 'hidden md:flex items-center justify-center rounded-[6px] text-[13px] font-medium transition-colors duration-150 px-2 py-[7px] border-l-2',
isActive || networkServicesActive isActive || networkServicesActive
? 'bg-blue-600 text-white shadow-sm' ? 'bg-surface-3 text-ink border-accent'
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100' : 'text-ink-2 hover:bg-surface-3 hover:text-ink border-transparent'
) )
} }
> >
<Network className="w-4 h-4 flex-shrink-0" /> <Network className="w-[15px] h-[15px] flex-shrink-0" />
</NavLink> </NavLink>
) : ( ) : (
<> <>
<button <GroupHeader
onClick={() => setNetworkServicesOpen(o => !o)} icon={Network}
className={clsx( label="Network Services"
'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-150', isActive={networkServicesActive}
networkServicesActive isOpen={effectiveNetworkServicesOpen}
? 'text-blue-600 dark:text-blue-400' onToggle={() => setNetworkServicesOpen(o => !o)}
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100' />
)}
>
<Network className="w-4 h-4 flex-shrink-0" />
<span className="flex-1 text-left">Network Services</span>
<ChevronDown className={clsx('w-3.5 h-3.5 transition-transform', effectiveNetworkServicesOpen ? 'rotate-0' : '-rotate-90')} />
</button>
{effectiveNetworkServicesOpen && ( {effectiveNetworkServicesOpen && (
<div className="ml-4 pl-3 border-l border-gray-300 dark:border-slate-600 space-y-0.5"> <div className="ml-4 pl-3 space-y-[1px]" style={{ borderLeft: '1px solid var(--line)' }}>
{networkServicesSubItems.map(({ to, icon: Icon, label }) => ( {networkServicesSubItems.map(({ to, icon, label }) => (
<NavLink <NavItem key={to} to={to} end icon={icon} label={label} isCollapsed={false} onClick={handleNavClick} />
key={to}
to={to}
end
onClick={handleNavClick}
className={({ isActive }) =>
clsx(
'flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm font-medium transition-colors duration-150',
isActive
? 'bg-blue-600 text-white shadow-sm'
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
)
}
>
<Icon className="w-3.5 h-3.5 flex-shrink-0" />
{label}
</NavLink>
))} ))}
</div> </div>
)} )}
</> </>
)} )}
</div>
</nav> </nav>
{/* Settings + collapse toggle */} {/* Footer: poll status card + settings + collapse */}
<div className="px-2 py-3 border-t border-gray-200 dark:border-slate-700 space-y-0.5"> <div className="px-[14px] pb-3 space-y-1">
<NavLink {/* Poll status card */}
to="/settings" {!isCollapsed && devices.length > 0 && (
title={isCollapsed ? 'Settings' : undefined} <div
onClick={handleNavClick} className="px-3 py-[10px] rounded-[8px] mb-2 text-[11.5px] leading-[1.45]"
className={({ isActive }) => style={{ background: 'var(--surface-2)', color: 'var(--ink-3)' }}
clsx(
'flex items-center rounded-lg text-sm font-medium transition-colors duration-150',
isCollapsed ? 'md:justify-center md:px-2 px-3 py-2.5 gap-3' : 'gap-3 px-3 py-2.5',
isActive
? 'bg-blue-600 text-white shadow-sm'
: 'text-gray-600 dark:text-slate-400 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-900 dark:hover:text-slate-100'
)
}
> >
<Settings className="w-4 h-4 flex-shrink-0" /> <div className="flex items-center gap-[6px] mb-1">
<span className={clsx(isCollapsed && 'md:hidden')}>Settings</span> <span
</NavLink> className="w-[6px] h-[6px] rounded-full flex-shrink-0"
style={{
background: 'var(--good)',
boxShadow: '0 0 0 2px rgba(141,224,138,0.2), 0 0 8px rgba(141,224,138,0.5)',
}}
/>
<span className="font-semibold text-[11.5px]" style={{ color: 'var(--ink-2)' }}>
{onlineCount === devices.length ? 'All polls healthy' : `${onlineCount}/${devices.length} reachable`}
</span>
</div>
<span className="mono text-[10.5px]">{onlineCount}/{devices.length} online</span>
</div>
)}
{/* Settings link */}
<NavItem
to="/settings"
icon={Settings}
label="Settings"
isCollapsed={isCollapsed}
onClick={handleNavClick}
/>
{/* Collapse toggle — desktop only */} {/* Collapse toggle — desktop only */}
<button <button
onClick={() => setCollapsed(c => !c)} onClick={() => setCollapsed(c => !c)}
title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'} title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
className={clsx( className={clsx(
'hidden md:flex w-full items-center rounded-lg text-sm font-medium transition-colors duration-150 text-gray-500 dark:text-slate-500 hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-700 dark:hover:text-slate-300', 'hidden md:flex w-full items-center rounded-[6px] text-[13px] font-medium transition-colors duration-150',
isCollapsed ? 'justify-center px-2 py-2.5' : 'gap-3 px-3 py-2.5' isCollapsed ? 'justify-center px-2 py-[7px]' : 'gap-[10px] px-[10px] py-[7px]',
'border-l-2 border-transparent hover:bg-surface-3'
)} )}
style={{ color: 'var(--ink-4)' }}
> >
{isCollapsed ? ( {isCollapsed ? (
<ChevronRight className="w-4 h-4 flex-shrink-0" /> <ChevronRight className="w-[15px] h-[15px] flex-shrink-0" />
) : ( ) : (
<><ChevronLeft className="w-4 h-4 flex-shrink-0" />Collapse</> <><ChevronLeft className="w-[15px] h-[15px] flex-shrink-0" />Collapse</>
)} )}
</button> </button>
</div> </div>
+48 -15
View File
@@ -1,5 +1,5 @@
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Sun, Moon, LogOut, User, Menu } from 'lucide-react'; import { Sun, Moon, LogOut, Menu } from 'lucide-react';
import { useAuthStore } from '../../store/authStore'; import { useAuthStore } from '../../store/authStore';
import { useThemeStore } from '../../store/themeStore'; import { useThemeStore } from '../../store/themeStore';
import GlobalSearch from './GlobalSearch'; import GlobalSearch from './GlobalSearch';
@@ -18,37 +18,69 @@ export default function TopBar({ onMenuClick }: TopBarProps) {
navigate('/login'); navigate('/login');
}; };
const initial = (user?.username?.[0] ?? 'A').toUpperCase();
return ( return (
<header className="h-14 flex-shrink-0 flex items-center gap-2 sm:gap-4 px-3 sm:px-6 bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700"> <header
className="h-[54px] flex-shrink-0 flex items-center gap-3 px-[22px]"
style={{ background: 'var(--bg)', borderBottom: '1px solid var(--line)' }}
>
{/* Hamburger — mobile only */} {/* Hamburger — mobile only */}
<button <button
onClick={onMenuClick} onClick={onMenuClick}
className="md:hidden p-2 rounded-lg text-gray-500 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors flex-shrink-0" className="md:hidden p-2 rounded-lg transition-colors flex-shrink-0"
style={{ color: 'var(--ink-3)' }}
aria-label="Open menu" aria-label="Open menu"
> >
<Menu className="w-5 h-5" /> <Menu className="w-5 h-5" />
</button> </button>
{/* Search */}
<div className="flex-1">
<GlobalSearch /> <GlobalSearch />
</div>
<div className="flex items-center gap-2 flex-shrink-0">
{/* Live indicator */}
<span
className="hidden sm:flex items-center gap-[6px] px-[10px] py-[4px] rounded-full text-[11px] mono"
style={{ color: 'var(--ink-3)', border: '1px solid var(--line)' }}
>
<span
className="w-[6px] h-[6px] rounded-full flex-shrink-0"
style={{
background: 'var(--good)',
boxShadow: '0 0 0 2px rgba(141,224,138,0.2), 0 0 6px rgba(141,224,138,0.5)',
}}
/>
live
</span>
<div className="flex items-center gap-1 sm:gap-2 flex-shrink-0 ml-auto">
{/* Theme toggle */} {/* Theme toggle */}
<button <button
onClick={toggleTheme} onClick={toggleTheme}
className="p-2 rounded-lg text-gray-500 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors" className="p-[7px] rounded-lg transition-colors"
style={{ color: 'var(--ink-3)' }}
title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`} title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
> >
{theme === 'light' ? ( {theme === 'light' ? <Moon className="w-4 h-4" /> : <Sun className="w-4 h-4" />}
<Moon className="w-4 h-4" />
) : (
<Sun className="w-4 h-4" />
)}
</button> </button>
{/* User info — hide label on very small screens */} {/* User chip */}
<div className="flex items-center gap-2 px-2 sm:px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-slate-700"> <div
<User className="w-3.5 h-3.5 text-gray-500 dark:text-slate-400 flex-shrink-0" /> className="flex items-center gap-[8px] px-[10px] py-[4px] rounded-[6px]"
<span className="hidden sm:inline text-sm font-medium text-gray-700 dark:text-slate-200"> style={{ background: 'var(--surface-2)' }}
>
<div
className="w-[22px] h-[22px] rounded-full flex items-center justify-center text-[11px] font-bold flex-shrink-0"
style={{
background: 'linear-gradient(135deg, var(--accent), var(--accent-2))',
color: 'var(--accent-fg)',
}}
>
{initial}
</div>
<span className="hidden sm:inline text-[13px] font-medium" style={{ color: 'var(--ink-2)' }}>
{user?.username} {user?.username}
</span> </span>
</div> </div>
@@ -56,7 +88,8 @@ export default function TopBar({ onMenuClick }: TopBarProps) {
{/* Logout */} {/* Logout */}
<button <button
onClick={handleLogout} onClick={handleLogout}
className="p-2 rounded-lg text-gray-500 dark:text-slate-400 hover:bg-gray-100 dark:hover:bg-slate-700 hover:text-red-500 dark:hover:text-red-400 transition-colors" className="p-[7px] rounded-lg transition-colors hover:text-bad"
style={{ color: 'var(--ink-4)' }}
title="Logout" title="Logout"
> >
<LogOut className="w-4 h-4" /> <LogOut className="w-4 h-4" />
@@ -49,20 +49,49 @@ interface BondEditForm {
members: string[]; members: string[];
} }
function portColor(port: SwitchPort, selected: boolean): string { function portState(port: SwitchPort): 'up' | 'down' | 'disabled' {
if (selected) return '#3b82f6'; if (port.disabled) return 'disabled';
if (port.disabled) return '#64748b'; if (port.running) return 'up';
if (!port.running) return '#ef4444'; return 'down';
if (port.type === 'bond') return '#d97706'; // amber for bond logical interface
return '#22c55e';
} }
function portBorderColor(port: SwitchPort, selected: boolean): string { function PortTile({
if (selected) return '#1d4ed8'; port, selected, hovered, isMember,
if (port.disabled) return '#475569'; onClick, onMouseEnter, onMouseLeave, onDoubleClick,
if (!port.running) return '#dc2626'; }: {
if (port.type === 'bond') return '#b45309'; port: SwitchPort; selected: boolean; hovered: boolean; isMember?: boolean;
return '#16a34a'; onClick: (e: React.MouseEvent) => void;
onMouseEnter: () => void; onMouseLeave: () => void; onDoubleClick: () => void;
}) {
const state = portState(port);
const bg = selected ? 'var(--accent)' : state === 'up' ? 'var(--port-up-bg)' : state === 'down' ? 'var(--port-down-bg)' : 'var(--surface-3)';
const border = isMember && !selected ? 'var(--warn)' : selected ? 'var(--accent)' : state === 'up' ? 'var(--port-up-border)' : state === 'down' ? 'var(--port-down-border)' : 'var(--line)';
const textColor = selected ? '#ffffff' : state === 'up' ? 'var(--good)' : state === 'down' ? 'var(--bad)' : 'var(--ink-4)';
const ledBg = selected ? '#ffffff' : state === 'up' ? 'var(--good)' : 'transparent';
return (
<div
onClick={onClick}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onDoubleClick={onDoubleClick}
title={`${port.name}${port.comment ? ` — ${port.comment}` : ''}${port.speed ? ` · ${port.speed}` : ''}`}
style={{
width: 46, height: 46, borderRadius: 4, position: 'relative', flexShrink: 0,
background: bg, border: `1px solid ${border}`,
display: 'flex', alignItems: 'center', justifyContent: 'center',
cursor: 'pointer', color: textColor,
fontFamily: 'Geist Mono, monospace', fontSize: 10, fontWeight: 600,
opacity: hovered ? 0.8 : 1, transition: 'opacity 0.1s',
}}
>
<div style={{
position: 'absolute', top: 4, right: 4, width: 5, height: 5, borderRadius: 999,
background: ledBg,
boxShadow: state === 'up' && !selected ? '0 0 6px var(--accent)' : 'none',
}} />
<span>{portLabel(port.name)}</span>
</div>
);
} }
function portLabel(name: string): string { function portLabel(name: string): string {
@@ -167,26 +196,31 @@ function PortTrafficGraph({
tx: Math.round(p.tx), tx: Math.round(p.tx),
})); }));
const rxPeak = trafficData.length > 0 ? Math.max(...trafficData.map(d => d.rx)) : 0;
const txPeak = trafficData.length > 0 ? Math.max(...trafficData.map(d => d.tx)) : 0;
return ( return (
<div className="card p-5 flex flex-col h-full"> <div className="card p-5 flex flex-col h-full">
<div className="flex flex-wrap items-center justify-between gap-3 mb-4 shrink-0"> <div className="flex flex-wrap items-center justify-between gap-3 mb-3 shrink-0">
<div className="flex items-center gap-2"> <div>
<Activity className="w-4 h-4 text-blue-500" /> <div className="text-[13px] font-semibold" style={{ color: 'var(--ink)' }}>
<h3 className="text-sm font-semibold text-gray-900 dark:text-white"> {portName} · throughput
{portName} — Throughput
</h3>
</div> </div>
<div className="flex gap-1"> <div className="mono text-[11px] mt-[2px]" style={{ color: 'var(--ink-3)' }}>
{range} · 30s buckets
</div>
</div>
<div className="flex gap-[4px]">
{TRAFFIC_RANGES.map((r) => ( {TRAFFIC_RANGES.map((r) => (
<button <button
key={r} key={r}
onClick={() => onRangeChange(r)} onClick={() => onRangeChange(r)}
className={clsx( className="mono text-[11px] px-[8px] py-[4px] rounded-[5px] transition-colors"
'px-2 py-1 text-xs rounded font-medium transition-colors', style={{
range === r background: range === r ? 'var(--surface-3)' : 'transparent',
? 'bg-blue-600 text-white' color: range === r ? 'var(--ink)' : 'var(--ink-3)',
: 'bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-slate-300 hover:bg-gray-200 dark:hover:bg-slate-600' border: '1px solid var(--line)',
)} }}
> >
{r} {r}
</button> </button>
@@ -194,33 +228,45 @@ function PortTrafficGraph({
</div> </div>
</div> </div>
<div className="flex gap-6 mb-3 shrink-0">
<div>
<div className="mono text-[10px] uppercase tracking-widest" style={{ color: 'var(--ink-4)' }}>RX peak</div>
<div className="mono num-tab text-[18px] font-semibold" style={{ color: 'var(--accent)' }}>{formatBps(rxPeak)}</div>
</div>
<div>
<div className="mono text-[10px] uppercase tracking-widest" style={{ color: 'var(--ink-4)' }}>TX peak</div>
<div className="mono num-tab text-[18px] font-semibold" style={{ color: 'var(--violet)' }}>{formatBps(txPeak)}</div>
</div>
</div>
{isLoading ? ( {isLoading ? (
<div className="flex-1 min-h-[200px] flex items-center justify-center text-gray-400 dark:text-slate-500 text-sm"> <div className="flex-1 min-h-[160px] flex items-center justify-center mono text-[12px]" style={{ color: 'var(--ink-4)' }}>
Loading traffic data… Loading traffic data…
</div> </div>
) : trafficData.length === 0 ? ( ) : trafficData.length === 0 ? (
<div className="flex-1 min-h-[200px] flex items-center justify-center text-gray-400 dark:text-slate-500 text-sm"> <div className="flex-1 min-h-[160px] flex items-center justify-center mono text-[12px]" style={{ color: 'var(--ink-4)' }}>
No traffic data yet for {portName} in the selected range No traffic data for {portName} in this range
</div> </div>
) : ( ) : (
<div className="flex-1 min-h-[200px]"> <div className="flex-1 min-h-[160px]">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<LineChart data={trafficData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}> <LineChart data={trafficData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" opacity={0.3} /> <CartesianGrid strokeDasharray="3 3" stroke="var(--line)" opacity={0.5} />
<XAxis dataKey="time" tick={{ fontSize: 10 }} interval="preserveStartEnd" /> <XAxis dataKey="time" tick={{ fontSize: 10, fill: 'var(--ink-4)' }} interval="preserveStartEnd" />
<YAxis tickFormatter={formatBps} tick={{ fontSize: 10 }} width={72} /> <YAxis tickFormatter={formatBps} tick={{ fontSize: 10, fill: 'var(--ink-4)' }} width={72} />
<Tooltip <Tooltip
formatter={(v) => formatBps(v as number)} formatter={(v) => formatBps(v as number)}
contentStyle={{ contentStyle={{
background: 'var(--color-surface)', background: 'var(--surface)',
border: '1px solid var(--color-border)', border: '1px solid var(--line)',
borderRadius: '8px', borderRadius: '8px',
fontSize: '12px', fontSize: '12px',
color: 'var(--ink)',
}} }}
/> />
<Legend wrapperStyle={{ fontSize: 12 }} /> <Legend wrapperStyle={{ fontSize: 11 }} />
<Line type="monotone" dataKey="rx" stroke="#3b82f6" name="RX (download)" dot={false} strokeWidth={2} /> <Line type="monotone" dataKey="rx" stroke="var(--accent)" name="RX" dot={false} strokeWidth={1.6} />
<Line type="monotone" dataKey="tx" stroke="#10b981" name="TX (upload)" dot={false} strokeWidth={2} /> <Line type="monotone" dataKey="tx" stroke="var(--violet)" name="TX" dot={false} strokeWidth={1.6} />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
@@ -343,24 +389,23 @@ function PortInfoCard({ deviceId, portName }: { deviceId: number; portName: stri
const isSfp = d['sfp-module-present'] === 'true'; const isSfp = d['sfp-module-present'] === 'true';
const infoRow = (label: string, value: string | undefined) => { const infoRow = (label: string, value: string | undefined, valueColor?: string) => {
if (!value || value === '' || value === 'none' || value === '0') return null; if (!value || value === '' || value === 'none' || value === '0') return null;
const isStatus = label === 'Status';
const statusColor = isStatus ? (value.includes('ok') || value === 'true' ? 'var(--good)' : value.includes('err') ? 'var(--bad)' : 'var(--ink-2)') : undefined;
return ( return (
<div key={label} className="flex justify-between items-start py-1 border-b border-gray-100 dark:border-slate-700 last:border-0"> <div key={label} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: '1px solid var(--line-soft)' }}>
<span className="text-xs text-gray-500 dark:text-slate-400 shrink-0 mr-2">{label}</span> <span style={{ color: 'var(--ink-3)', fontSize: 12 }}>{label}</span>
<span className="text-xs font-medium text-gray-900 dark:text-white text-right font-mono">{value}</span> <span className="mono" style={{ color: valueColor ?? statusColor ?? 'var(--ink-2)', fontSize: 12, textAlign: 'right' }}>{value}</span>
</div> </div>
); );
}; };
return ( return (
<div className="card p-4 overflow-y-auto"> <div className="card p-4 overflow-y-auto">
<div className="flex items-center gap-2 mb-3"> <div className="text-[13px] font-semibold mb-3" style={{ color: 'var(--ink)' }}>Port info</div>
<Cpu className="w-4 h-4 text-blue-500" />
<h3 className="text-sm font-semibold text-gray-900 dark:text-white">Port Information</h3>
</div>
<div className="space-y-0"> <div>
{infoRow('Status', d['status'])} {infoRow('Status', d['status'])}
{infoRow('Rate', d['rate'])} {infoRow('Rate', d['rate'])}
{infoRow('Full Duplex', d['full-duplex'])} {infoRow('Full Duplex', d['full-duplex'])}
@@ -372,8 +417,8 @@ function PortInfoCard({ deviceId, portName }: { deviceId: number; portName: stri
{isSfp && ( {isSfp && (
<> <>
<div className="mt-3 mb-2 pt-2 border-t border-gray-200 dark:border-slate-600"> <div style={{ marginTop: 12, marginBottom: 8, paddingTop: 8, borderTop: '1px solid var(--line)' }}>
<span className="text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wider">SFP Optic</span> <span className="mono text-[10px] uppercase tracking-widest" style={{ color: 'var(--accent)' }}>SFP Optic</span>
</div> </div>
<div className="space-y-0"> <div className="space-y-0">
{infoRow('Type', d['sfp-type'])} {infoRow('Type', d['sfp-type'])}
@@ -748,373 +793,184 @@ export default function SwitchPortDiagram({ deviceId, autoOpenBridge, onBridgeOp
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* Selection info bar */} {/* Selection bar */}
{selectedPorts.size > 0 && ( {selectedPorts.size > 0 && (() => {
<div className="flex items-center gap-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg"> const singlePort = selectedPorts.size === 1 ? ports.find(p => p.name === Array.from(selectedPorts)[0]) : null;
<span className="text-sm font-medium text-blue-700 dark:text-blue-300">
{selectedPorts.size} port{selectedPorts.size > 1 ? 's' : ''} selected:{' '}
{Array.from(selectedPorts).join(', ')}
</span>
<button
className="ml-auto text-xs text-blue-500 hover:text-blue-700"
onClick={() => setSelectedPorts(new Set())}
>
Clear
</button>
{canWrite && selectedPorts.size === 1 && (() => {
const port = ports.find((p) => p.name === Array.from(selectedPorts)[0]);
return port ? (
<button className="btn-primary text-xs py-1" onClick={() => openEditPanel(port)}>
Configure
</button>
) : null;
})()}
{canWrite && selectedPorts.size >= 2 && (() => {
const selArr = Array.from(selectedPorts).map(n => ports.find(p => p.name === n)).filter((p): p is SwitchPort => !!p); const selArr = Array.from(selectedPorts).map(n => ports.find(p => p.name === n)).filter((p): p is SwitchPort => !!p);
const allEligible = selArr.every(p => !isBridge(p) && !isBond(p) && !bondMemberMap.has(p.name)); const allEligible = selArr.every(p => !isBridge(p) && !isBond(p) && !bondMemberMap.has(p.name));
if (!allEligible) return null;
return ( return (
<div style={{
background: 'var(--accent-soft)', border: '1px solid var(--accent)',
borderRadius: 8, padding: '10px 16px', display: 'flex', alignItems: 'center', gap: 10,
}}>
<span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--accent)', flexShrink: 0, boxShadow: '0 0 0 2px var(--accent)33, 0 0 8px var(--accent)88' }} />
<span className="mono text-[12px]" style={{ color: 'var(--accent)' }}>
{selectedPorts.size === 1 ? Array.from(selectedPorts)[0] : `${selectedPorts.size} ports`}
</span>
{singlePort && (
<span className="text-[12px]" style={{ color: 'var(--ink-2)' }}>
selected{singlePort.speed ? ` · ${singlePort.speed}` : ''}{singlePort.mtu ? ` · ${singlePort.mtu} MTU` : ''}{singlePort.running ? ' · link-ok' : ' · link-down'}
</span>
)}
<div style={{ flex: 1 }} />
<button <button
className="btn-secondary text-xs py-1 flex items-center gap-1.5" className="text-[11px]"
style={{ padding: '5px 10px', borderRadius: 5, background: 'transparent', color: 'var(--ink-3)', border: '1px solid var(--line)' }}
onClick={() => setSelectedPorts(new Set())}
>Clear</button>
{canWrite && singlePort && (
<button
className="btn-primary text-[11px]"
style={{ padding: '5px 10px' }}
onClick={() => openEditPanel(singlePort)}
>Configure</button>
)}
{canWrite && selectedPorts.size >= 2 && allEligible && (
<button
className="btn-secondary text-[11px] flex items-center gap-[6px]"
style={{ padding: '5px 10px' }}
onClick={() => { onClick={() => {
setCreateTrunkForm({ setCreateTrunkForm({ name: `bond${bondPorts.length + 1}`, mode: '802.3ad', lacp_rate: 'slow', transmit_hash_policy: '', mtu: '', min_links: '' });
name: `bond${bondPorts.length + 1}`,
mode: '802.3ad',
lacp_rate: 'slow',
transmit_hash_policy: '',
mtu: '',
min_links: '',
});
setBondError(''); setBondError('');
setShowCreateTrunkModal(true); setShowCreateTrunkModal(true);
}} }}
> >
<Link2 className="w-3.5 h-3.5" /> Create Trunk <Link2 className="w-3 h-3" /> Create Trunk
</button> </button>
)}
</div>
); );
})()} })()}
</div>
)}
{/* SVG switch chassis */} {/* Faceplate card */}
<div className="card p-4 overflow-x-auto"> <div className="card" style={{ padding: '22px 26px', position: 'relative', overflow: 'hidden' }}>
<div className="flex items-center justify-between mb-3"> {/* Pinstripe overlay */}
<h3 className="text-sm font-semibold text-gray-900 dark:text-white"> <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', backgroundImage: 'repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(255,255,255,0.015) 9px, rgba(255,255,255,0.015) 10px)' }} />
Switch Ports ({ports.length} total) <div style={{ position: 'relative' }}>
</h3> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
<div className="flex items-center gap-4 text-xs text-gray-500 dark:text-slate-400"> <div>
{[['bg-green-500', 'Up'], ['bg-red-500', 'Down'], ['bg-slate-500', 'Disabled'], ['bg-blue-500', 'Selected']].map(([cls, label]) => ( <div className="text-[13px] font-semibold" style={{ color: 'var(--ink)' }}>
<span key={label} className="flex items-center gap-1.5"> Switch faceplate · {ports.length} ports
<span className={`w-3 h-3 rounded-sm ${cls}`} />{label} </div>
<div className="mono text-[11px] mt-[2px]" style={{ color: 'var(--ink-3)' }}>
click to select · shift for multi · double-click to configure
</div>
</div>
<div style={{ display: 'flex', gap: 14 }}>
{([['up', 'var(--accent)', ports.filter(p => !p.disabled && p.running).length], ['down', 'var(--bad)', ports.filter(p => !p.disabled && !p.running).length], ['disabled', 'var(--ink-4)', ports.filter(p => p.disabled).length], ['selected', 'var(--accent)', selectedPorts.size]] as [string,string,number][]).map(([l, c, n]) => (
<span key={l} className="mono text-[11px]" style={{ display: 'flex', alignItems: 'center', gap: 5, color: 'var(--ink-3)' }}>
<span style={{ width: 9, height: 9, borderRadius: 2, background: c, opacity: l === 'disabled' ? 0.4 : 1, flexShrink: 0 }} />
{l} <span className="num-tab" style={{ color: 'var(--ink-2)' }}>{n}</span>
</span> </span>
))} ))}
</div> </div>
</div> </div>
<svg {/* Rack unit */}
width={chassisW} <div style={{
height={chassisH} background: 'linear-gradient(180deg, var(--faceplate-from), var(--faceplate-to))',
className="overflow-visible" border: '1px solid var(--faceplate-border)', borderRadius: 8, padding: '22px 26px',
> display: 'flex', gap: 30, alignItems: 'center', overflowX: 'auto',
{/* Chassis body */} boxShadow: 'inset 0 0 0 2px var(--faceplate-inset), inset 0 1px 0 rgba(255,255,255,0.02)',
<rect x={0} y={0} width={chassisW} height={chassisH} rx={8} fill="currentColor" className="text-gray-800 dark:text-slate-700" /> }}>
<text x={PAD} y={14} fill="#94a3b8" fontSize={9} fontFamily="monospace">PORTS</text> {/* ETH group */}
{etherPorts.length > 0 && (
{/* SFP section divider and label */} <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
{sfpPorts.length > 0 && ( <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '.1em' }}>ETH</div>
<> {doubleRow ? (
<line <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
x1={etherSectionW + sfpDivider / 2} y1={16} <div style={{ display: 'flex', gap: 4 }}>
x2={etherSectionW + sfpDivider / 2} y2={chassisH - 12} {topRowPorts.map(port => (
stroke="#475569" strokeWidth={1} strokeDasharray="3,3" <PortTile key={port.name} port={port} selected={selectedPorts.has(port.name)} hovered={hoveredPort === port.name} isMember={bondMemberMap.has(port.name)} onClick={e => togglePort(port.name, e)} onMouseEnter={() => setHoveredPort(port.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(port)} />
/> ))}
<text x={etherSectionW + sfpDivider / 2 + 4} y={14} fill="#94a3b8" fontSize={9} fontFamily="monospace">SFP</text> </div>
</> <div style={{ display: 'flex', gap: 4 }}>
{bottomRowPorts.map(port => (
<PortTile key={port.name} port={port} selected={selectedPorts.has(port.name)} hovered={hoveredPort === port.name} isMember={bondMemberMap.has(port.name)} onClick={e => togglePort(port.name, e)} onMouseEnter={() => setHoveredPort(port.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(port)} />
))}
</div>
</div>
) : (
<div style={{ display: 'flex', gap: 4 }}>
{topRowPorts.map(port => (
<PortTile key={port.name} port={port} selected={selectedPorts.has(port.name)} hovered={hoveredPort === port.name} isMember={bondMemberMap.has(port.name)} onClick={e => togglePort(port.name, e)} onMouseEnter={() => setHoveredPort(port.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(port)} />
))}
</div>
)}
</div>
)} )}
{topRowPorts.map((port, i) => { {/* SFP group */}
const x = PAD + i * (PORT_W + GAP); {individualSfpPorts.length > 0 && (
const y = topRowY; <div>
const selected = selectedPorts.has(port.name); <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '.1em', marginBottom: 6 }}>
const hovered = hoveredPort === port.name; SFP · 1–{individualSfpPorts.length}
const isMember = bondMemberMap.has(port.name); </div>
return ( <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', maxWidth: individualSfpPorts.length * 52 }}>
<g key={port.name} className="cursor-pointer" {individualSfpPorts.map(port => (
onClick={(e) => togglePort(port.name, e)} <PortTile key={port.name} port={port} selected={selectedPorts.has(port.name)} hovered={hoveredPort === port.name} onClick={e => togglePort(port.name, e)} onMouseEnter={() => setHoveredPort(port.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(port)} />
onMouseEnter={() => setHoveredPort(port.name)} ))}
onMouseLeave={() => setHoveredPort(null)} </div>
onDoubleClick={() => canWrite && openEditPanel(port)} </div>
>
<rect x={x} y={y} width={PORT_W} height={PORT_H} rx={3}
fill={portColor(port, selected)}
stroke={isMember && !selected ? '#d97706' : portBorderColor(port, selected)}
strokeWidth={selected ? 2 : isMember ? 2 : 1}
strokeDasharray={isMember && !selected ? '4,2' : undefined}
opacity={hovered ? 0.85 : 1}
/>
<text x={x + PORT_W / 2} y={y + PORT_H / 2 + 4} textAnchor="middle" fill="white"
fontSize={10} fontWeight="600" fontFamily="monospace">
{portLabel(port.name)}
</text>
{hovered && (
<foreignObject x={Math.max(0, x - 50)} y={y - 78} width={210} height={90}>
<PortTooltip port={port} />
</foreignObject>
)}
</g>
);
})}
{bottomRowPorts.map((port, i) => {
const x = PAD + i * (PORT_W + GAP);
const y = bottomRowY;
const selected = selectedPorts.has(port.name);
const hovered = hoveredPort === port.name;
const isMember = bondMemberMap.has(port.name);
return (
<g key={port.name} className="cursor-pointer"
onClick={(e) => togglePort(port.name, e)}
onMouseEnter={() => setHoveredPort(port.name)}
onMouseLeave={() => setHoveredPort(null)}
onDoubleClick={() => canWrite && openEditPanel(port)}
>
<rect x={x} y={y} width={PORT_W} height={PORT_H} rx={3}
fill={portColor(port, selected)}
stroke={isMember && !selected ? '#d97706' : portBorderColor(port, selected)}
strokeWidth={selected ? 2 : isMember ? 2 : 1}
strokeDasharray={isMember && !selected ? '4,2' : undefined}
opacity={hovered ? 0.85 : 1}
/>
<text x={x + PORT_W / 2} y={y + PORT_H / 2 + 4} textAnchor="middle" fill="white"
fontSize={10} fontWeight="600" fontFamily="monospace">
{portLabel(port.name)}
</text>
{hovered && (
<foreignObject x={Math.max(0, x - 50)} y={chassisH} width={210} height={90}>
<PortTooltip port={port} />
</foreignObject>
)}
</g>
);
})}
{individualSfpPorts.map((port, i) => {
const x = sfpStartX + i * (PORT_W + GAP);
const y = sfpY;
const selected = selectedPorts.has(port.name);
const hovered = hoveredPort === port.name;
return (
<g key={port.name} className="cursor-pointer"
onClick={(e) => togglePort(port.name, e)}
onMouseEnter={() => setHoveredPort(port.name)}
onMouseLeave={() => setHoveredPort(null)}
onDoubleClick={() => canWrite && openEditPanel(port)}
>
<rect x={x} y={y} width={PORT_W} height={PORT_H} rx={3}
fill={portColor(port, selected)} stroke={portBorderColor(port, selected)}
strokeWidth={selected ? 2 : 1}
strokeDasharray="3,2"
opacity={hovered ? 0.85 : 1}
/>
<text x={x + PORT_W / 2} y={y + PORT_H / 2 + 4} textAnchor="middle" fill="white"
fontSize={10} fontWeight="600" fontFamily="monospace">
{portLabel(port.name)}
</text>
{hovered && (
<foreignObject x={Math.max(0, x - 50)} y={sfpY - 78} width={210} height={90}>
<PortTooltip port={port} />
</foreignObject>
)}
</g>
);
})}
{/* QSFP section divider, label, and cage groups */}
{qsfpCages.length > 0 && (
<>
<line
x1={qsfpStartX - qsfpDivider / 2} y1={16}
x2={qsfpStartX - qsfpDivider / 2} y2={chassisH - 12}
stroke="#475569" strokeWidth={1} strokeDasharray="3,3"
/>
<text x={qsfpStartX - qsfpDivider / 2 + 4} y={14} fill="#94a3b8" fontSize={9} fontFamily="monospace">QSFP</text>
</>
)} )}
{qsfpCages.map((cage) => { {/* QSFP cages */}
// Single-mode cage: 4 virtual lanes all sharing the one port's status. {qsfpCages.map(cage => {
// Breakout cage: real lanes, BUT if only 1 lane is running treat as single-cable
// connection and show all lanes green.
const isSingleMode = !!cage.singlePort; const isSingleMode = !!cage.singlePort;
const laneCount = isSingleMode ? 4 : cage.lanes.length; const laneCount = isSingleMode ? 4 : cage.lanes.length;
const runningLanes = cage.lanes.filter(p => p.running && !p.disabled).length; const runningLanes = cage.lanes.filter(p => p.running && !p.disabled).length;
const isSingleCable = !isSingleMode && runningLanes === 1; const isSingleCable = !isSingleMode && runningLanes === 1;
const cageW = getCageW(laneCount);
const prevW = qsfpCages.slice(0, qsfpCages.indexOf(cage))
.reduce((acc, c) => acc + getCageW(c.singlePort ? 4 : c.lanes.length) + GAP, 0);
const cageX = qsfpStartX + prevW;
const cageY = sfpY;
const refPort = cage.singlePort ?? cage.lanes[0]; const refPort = cage.singlePort ?? cage.lanes[0];
const anySelected = cage.singlePort
? selectedPorts.has(cage.singlePort.name)
: cage.lanes.some(p => selectedPorts.has(p.name));
return ( return (
<g key={cage.key}> <div key={cage.key}>
{/* Outer cage outline */} <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '.1em', marginBottom: 6 }}>{cage.label}</div>
<rect x={cageX} y={cageY} width={cageW} height={PORT_H} rx={3} <div style={{ display: 'flex', gap: 4 }}>
fill={anySelected ? 'rgba(59,130,246,0.12)' : 'rgba(71,85,105,0.25)'}
stroke={anySelected ? '#3b82f6' : '#64748b'}
strokeWidth={anySelected ? 1.5 : 1}
/>
{/* Cage name label */}
<text x={cageX + cageW / 2} y={cageY + CAGE_LABEL_H - 2}
textAnchor="middle" fill="#94a3b8" fontSize={8} fontFamily="monospace">
{cage.label}
</text>
{/* Lane ports */}
{Array.from({ length: laneCount }, (_, li) => { {Array.from({ length: laneCount }, (_, li) => {
// For single-mode or single-cable: all lanes mirror the reference port
const lane = isSingleMode ? cage.singlePort! : cage.lanes[li]; const lane = isSingleMode ? cage.singlePort! : cage.lanes[li];
// In single-cable mode, override visual status to show all as "up" const visualPort: SwitchPort = (isSingleMode || isSingleCable) ? { ...refPort, running: refPort.running, disabled: refPort.disabled } : lane;
const visualPort: SwitchPort = (isSingleMode || isSingleCable)
? { ...refPort, running: refPort.running, disabled: refPort.disabled }
: lane;
const laneX = cageX + CAGE_PAD_X + li * (LANE_W + LANE_GAP);
const laneY = cageY + CAGE_LABEL_H;
const laneSelected = selectedPorts.has(lane.name);
const laneHovered = hoveredPort === lane.name;
return ( return (
<g key={li} className="cursor-pointer" <PortTile key={li} port={visualPort} selected={selectedPorts.has(lane.name)} hovered={hoveredPort === lane.name} onClick={e => togglePort(lane.name, e)} onMouseEnter={() => setHoveredPort(lane.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(lane)} />
onClick={(e) => togglePort(lane.name, e)}
onMouseEnter={() => setHoveredPort(lane.name)}
onMouseLeave={() => setHoveredPort(null)}
onDoubleClick={() => canWrite && openEditPanel(lane)}
>
<rect x={laneX} y={laneY} width={LANE_W} height={CAGE_LANE_H} rx={2}
fill={portColor(visualPort, laneSelected)}
stroke={portBorderColor(visualPort, laneSelected)}
strokeWidth={laneSelected ? 2 : 1}
opacity={laneHovered ? 0.8 : 1}
/>
<text x={laneX + LANE_W / 2} y={laneY + CAGE_LANE_H / 2 + 3}
textAnchor="middle" fill="white" fontSize={9} fontWeight="600" fontFamily="monospace">
{isSingleMode ? String(li + 1) : lane.name.split('-').pop()}
</text>
{laneHovered && (
<foreignObject x={Math.max(0, laneX - 60)} y={cageY - 78} width={210} height={90}>
<PortTooltip port={lane} />
</foreignObject>
)}
</g>
); );
})} })}
</g> </div>
</div>
); );
})} })}
{/* Bridge section divider and label */} {/* Bridge group */}
{bridgePorts.length > 0 && ( {bridgePorts.length > 0 && (
<> <div style={{ marginLeft: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
<line <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '.1em' }}>BRIDGE</div>
x1={bridgeStartX - bridgeDivider / 2} y1={16} <div style={{ display: 'flex', gap: 4 }}>
x2={bridgeStartX - bridgeDivider / 2} y2={chassisH - 12} {bridgePorts.map(port => (
stroke="#475569" strokeWidth={1} strokeDasharray="3,3" <PortTile key={port.name} port={port} selected={selectedPorts.has(port.name)} hovered={hoveredPort === port.name} onClick={e => togglePort(port.name, e)} onMouseEnter={() => setHoveredPort(port.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(port)} />
/> ))}
<text x={bridgeStartX - bridgeDivider / 2 + 4} y={14} fill="#94a3b8" fontSize={9} fontFamily="monospace">BRIDGE</text> </div>
</> </div>
)} )}
{bridgePorts.map((port, i) => { {/* Bond group */}
const x = bridgeStartX + i * (PORT_W + GAP);
const y = bridgeY;
const selected = selectedPorts.has(port.name);
const hovered = hoveredPort === port.name;
return (
<g key={port.name} className="cursor-pointer"
onClick={(e) => togglePort(port.name, e)}
onMouseEnter={() => setHoveredPort(port.name)}
onMouseLeave={() => setHoveredPort(null)}
onDoubleClick={() => canWrite && openEditPanel(port)}
>
<rect x={x} y={y} width={PORT_W} height={PORT_H} rx={3}
fill={portColor(port, selected)} stroke={portBorderColor(port, selected)}
strokeWidth={selected ? 2 : 1}
strokeDasharray="5,3"
opacity={hovered ? 0.85 : 1}
/>
<text x={x + PORT_W / 2} y={y + PORT_H / 2 + 4} textAnchor="middle" fill="white"
fontSize={10} fontWeight="600" fontFamily="monospace">
{portLabel(port.name)}
</text>
{hovered && (
<foreignObject x={Math.max(0, x - 50)} y={bridgeY - 78} width={210} height={90}>
<PortTooltip port={port} />
</foreignObject>
)}
</g>
);
})}
{/* Bond section divider and label */}
{bondPorts.length > 0 && ( {bondPorts.length > 0 && (
<> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
<line <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '.1em' }}>BOND</div>
x1={bondStartX - bondDivider / 2} y1={16} <div style={{ display: 'flex', gap: 4 }}>
x2={bondStartX - bondDivider / 2} y2={chassisH - 12} {bondPorts.map(port => (
stroke="#475569" strokeWidth={1} strokeDasharray="3,3" <PortTile key={port.name} port={port} selected={selectedPorts.has(port.name)} hovered={hoveredPort === port.name} onClick={e => togglePort(port.name, e)} onMouseEnter={() => setHoveredPort(port.name)} onMouseLeave={() => setHoveredPort(null)} onDoubleClick={() => canWrite && openEditPanel(port)} />
/> ))}
<text x={bondStartX - bondDivider / 2 + 4} y={14} fill="#94a3b8" fontSize={9} fontFamily="monospace">BOND</text> </div>
</> </div>
)} )}
</div>
{bondPorts.map((port, i) => {
const x = bondStartX + i * (PORT_W + GAP);
const y = bridgeY;
const selected = selectedPorts.has(port.name);
const hovered = hoveredPort === port.name;
return (
<g key={port.name} className="cursor-pointer"
onClick={(e) => togglePort(port.name, e)}
onMouseEnter={() => setHoveredPort(port.name)}
onMouseLeave={() => setHoveredPort(null)}
onDoubleClick={() => canWrite && openEditPanel(port)}
>
<rect x={x} y={y} width={PORT_W} height={PORT_H} rx={3}
fill={portColor(port, selected)} stroke={portBorderColor(port, selected)}
strokeWidth={selected ? 2 : 1}
strokeDasharray="6,2"
opacity={hovered ? 0.85 : 1}
/>
<text x={x + PORT_W / 2} y={y + PORT_H / 2 + 4} textAnchor="middle" fill="white"
fontSize={10} fontWeight="600" fontFamily="monospace">
{portLabel(port.name)}
</text>
{hovered && (
<foreignObject x={Math.max(0, x - 50)} y={bridgeY - 78} width={210} height={90}>
<PortTooltip port={port} />
</foreignObject>
)}
</g>
);
})}
</svg>
<p className="text-xs text-gray-400 dark:text-slate-500 mt-3">
Click to select · Shift+click to multi-select · Double-click to configure
</p>
</div> </div>
{/* Port throughput graph + info card — shown when exactly one port is selected */} </div>
{/* Port throughput + info — shown when exactly one port is selected */}
{selectedPorts.size === 1 && (() => { {selectedPorts.size === 1 && (() => {
const portName = Array.from(selectedPorts)[0]; const portName = Array.from(selectedPorts)[0];
return ( return (
<div className="grid grid-cols-1 md:grid-cols-5 gap-4 items-stretch"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-stretch">
<div className="md:col-span-2"> <div className="md:col-span-1">
<PortTrafficGraph <PortTrafficGraph
deviceId={deviceId} deviceId={deviceId}
portName={portName} portName={portName}
@@ -1122,7 +978,7 @@ export default function SwitchPortDiagram({ deviceId, autoOpenBridge, onBridgeOp
onRangeChange={setTrafficRange} onRangeChange={setTrafficRange}
/> />
</div> </div>
<div className="md:col-span-2"> <div className="md:col-span-1">
<PortPacketGraph <PortPacketGraph
deviceId={deviceId} deviceId={deviceId}
portName={portName} portName={portName}
@@ -1139,72 +995,72 @@ export default function SwitchPortDiagram({ deviceId, autoOpenBridge, onBridgeOp
{/* Port table */} {/* Port table */}
<div className="card overflow-hidden"> <div className="card overflow-hidden">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full text-sm"> <table className="w-full">
<thead> <thead>
<tr className="border-b border-gray-200 dark:border-slate-700"> <tr style={{ borderBottom: '1px solid var(--line)' }}>
<th className="table-header px-4 py-2.5 text-left">Port</th> {['PORT', 'STATUS', 'SPEED', 'MTU', 'PVID', 'MAC', 'COMMENT', ''].map((h, i) => (
<th className="table-header px-4 py-2.5 text-left">Status</th> <th key={i} className="table-header px-4 py-[10px] text-left">{h}</th>
<th className="table-header px-4 py-2.5 text-left">Speed</th> ))}
<th className="table-header px-4 py-2.5 text-left">MTU</th>
<th className="table-header px-4 py-2.5 text-left">PVID</th>
<th className="table-header px-4 py-2.5 text-left">MAC</th>
<th className="table-header px-4 py-2.5 text-left">Comment</th>
<th className="table-header px-4 py-2.5 w-12" />
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100 dark:divide-slate-700 table-zebra"> <tbody>
{sortedPorts.map((port) => ( {sortedPorts.map((port, i) => {
const state = portState(port);
const stateColor = state === 'up' ? 'var(--good)' : state === 'down' ? 'var(--bad)' : 'var(--ink-4)';
const isSelected = selectedPorts.has(port.name);
return (
<tr <tr
key={port.name} key={port.name}
className={clsx( className="cursor-pointer transition-colors"
'hover:bg-gray-50 dark:hover:bg-slate-700/50 cursor-pointer', style={{
selectedPorts.has(port.name) && 'bg-blue-50 dark:bg-blue-900/20' borderBottom: i < sortedPorts.length - 1 ? '1px solid var(--line-soft)' : 'none',
)} background: isSelected ? 'var(--accent-soft)' : 'transparent',
}}
onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'var(--surface-2)'; }}
onMouseLeave={e => { e.currentTarget.style.background = isSelected ? 'var(--accent-soft)' : 'transparent'; }}
onClick={(e) => togglePort(port.name, e)} onClick={(e) => togglePort(port.name, e)}
> >
<td className="px-4 py-2 font-mono font-medium text-gray-900 dark:text-white"> <td className="px-4 py-[10px]">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-[6px]">
{port.name} <span className="mono text-[12px] font-medium" style={{ color: 'var(--ink)' }}>{port.name}</span>
{bondMemberMap.has(port.name) && ( {bondMemberMap.has(port.name) && (
<span className="text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-1.5 py-0.5 rounded font-sans"> <span className="mono text-[9.5px] px-[5px] py-[2px] rounded" style={{ background: 'var(--warn-bg)', color: 'var(--warn)' }}>
{bondMemberMap.get(port.name)} {bondMemberMap.get(port.name)}
</span> </span>
)} )}
{isBond(port) && ( {isBond(port) && (
<span className="text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-1.5 py-0.5 rounded font-sans"> <span className="mono text-[9.5px] px-[5px] py-[2px] rounded" style={{ background: 'var(--warn-bg)', color: 'var(--warn)' }}>BOND</span>
BOND
</span>
)} )}
</div> </div>
</td> </td>
<td className="px-4 py-2"> <td className="px-4 py-[10px]">
<span className={clsx( <span className="inline-flex items-center gap-[5px] mono text-[11px] font-medium" style={{ color: stateColor }}>
'inline-flex items-center gap-1 text-xs font-medium', <span style={{ width: 6, height: 6, borderRadius: 999, background: stateColor, flexShrink: 0 }} />
port.disabled ? 'text-gray-500' : port.running ? 'text-green-600 dark:text-green-400' : 'text-red-500 dark:text-red-400'
)}>
<span className={clsx('w-1.5 h-1.5 rounded-full',
port.disabled ? 'bg-gray-400' : port.running ? 'bg-green-500' : 'bg-red-500'
)} />
{port.disabled ? 'Disabled' : port.running ? 'Up' : 'Down'} {port.disabled ? 'Disabled' : port.running ? 'Up' : 'Down'}
</span> </span>
</td> </td>
<td className="px-4 py-2 text-gray-500 dark:text-slate-400">{port.speed || '—'}</td> <td className="px-4 py-[10px]"><span className="mono text-[11.5px]" style={{ color: 'var(--ink-3)' }}>{port.speed || '—'}</span></td>
<td className="px-4 py-2 text-gray-500 dark:text-slate-400">{port.mtu || '—'}</td> <td className="px-4 py-[10px]"><span className="mono num-tab text-[11.5px]" style={{ color: 'var(--ink-3)' }}>{port.mtu || '—'}</span></td>
<td className="px-4 py-2 text-gray-500 dark:text-slate-400">{port.bridgeInfo?.pvid ?? '—'}</td> <td className="px-4 py-[10px]"><span className="mono num-tab text-[11.5px]" style={{ color: 'var(--ink-3)' }}>{port.bridgeInfo?.pvid ?? '—'}</span></td>
<td className="px-4 py-2 font-mono text-xs text-gray-400 dark:text-slate-500">{port.mac_address || '—'}</td> <td className="px-4 py-[10px]"><span className="mono text-[11px]" style={{ color: 'var(--ink-4)' }}>{port.mac_address || '—'}</span></td>
<td className="px-4 py-2 text-gray-500 dark:text-slate-400">{port.comment || '—'}</td> <td className="px-4 py-[10px]"><span className="text-[12px]" style={{ color: 'var(--ink-3)' }}>{port.comment || '—'}</span></td>
<td className="px-4 py-2"> <td className="px-4 py-[10px]">
{canWrite && ( {canWrite && (
<button <button
className="p-1 rounded text-gray-400 hover:text-blue-500 transition-colors" className="p-1 rounded transition-colors"
style={{ color: 'var(--ink-4)' }}
onMouseEnter={e => (e.currentTarget.style.color = 'var(--accent)')}
onMouseLeave={e => (e.currentTarget.style.color = 'var(--ink-4)')}
onClick={(e) => { e.stopPropagation(); openEditPanel(port); }} onClick={(e) => { e.stopPropagation(); openEditPanel(port); }}
title="Configure"
> >
<RefreshCw className="w-3.5 h-3.5" /> <RefreshCw className="w-3.5 h-3.5" />
</button> </button>
)} )}
</td> </td>
</tr> </tr>
))} );
})}
</tbody> </tbody>
</table> </table>
</div> </div>
+220 -77
View File
@@ -4,146 +4,289 @@
@layer base { @layer base {
:root { :root {
--color-bg: theme('colors.white'); /* ── surfaces (warm-neutral light) ── */
--color-surface: theme('colors.gray.50'); --bg: #f8f7f4;
--color-border: theme('colors.gray.200'); --surface: #ffffff;
--color-text: theme('colors.gray.900'); --surface-2: #f2f1ec;
--color-text-muted: theme('colors.gray.500'); --surface-3: #e8e6e0;
--color-sidebar-bg: theme('colors.slate.100');
--color-sidebar-text: theme('colors.slate.700'); /* ── lines ── */
--color-sidebar-active: theme('colors.blue.600'); --line: #d4d1c8;
--line-soft: #dedad3;
/* ── text ── */
--ink: #1a1a16;
--ink-2: #3d3c35;
--ink-3: #6b6960;
--ink-4: #9e9b92;
/* ── accent (blue) ── */
--accent: #2563eb;
--accent-2: #1d4ed8;
--accent-soft: #eff6ff;
--accent-fg: #ffffff;
/* ── port faceplate ── */
--faceplate-from: #eae8e3;
--faceplate-to: #d8d6d0;
--faceplate-border: #c4c1b8;
--faceplate-inset: #b8b5ad;
--port-up-bg: #dcf5e0;
--port-up-border: #6abf72;
--port-down-bg: #fde8e8;
--port-down-border: #e07070;
/* ── status ── */
--good: #2d7a2a;
--good-bg: #dcf5dc;
--warn: #8a6200;
--warn-bg: #fef3c7;
--bad: #b83333;
--bad-bg: #fee2e2;
--info: #1a5ea8;
--info-bg: #dbeafe;
--violet: #6b3db8;
--violet-bg: #ede9fe;
/* ── legacy aliases (used by older components) ── */
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-border: var(--line);
--color-text: var(--ink);
--color-text-muted: var(--ink-3);
--color-sidebar-bg: var(--surface);
--color-sidebar-text: var(--ink-2);
--color-sidebar-active: var(--accent);
} }
.dark { .dark {
--color-bg: #0f172a; /* ── surfaces (warm-neutral dark) ── */
--color-surface: #1e293b; --bg: #0e0f12;
--color-border: #334155; --surface: #15171b;
--color-text: #f1f5f9; --surface-2: #1c1f24;
--color-text-muted: #94a3b8; --surface-3: #23262c;
--color-sidebar-bg: #0f172a;
--color-sidebar-text: #cbd5e1; /* ── lines ── */
--color-sidebar-active: #3b82f6; --line: #2a2e35;
--line-soft: #20232a;
/* ── text ── */
--ink: #f1efe9;
--ink-2: #c2bfb6;
--ink-3: #8a877e;
--ink-4: #5d5b54;
/* ── accent (blue) ── */
--accent: #60a5fa;
--accent-2: #3b82f6;
--accent-soft: rgba(96, 165, 250, 0.1);
--accent-fg: #0e0f12;
/* ── port faceplate ── */
--faceplate-from: #0a0c0e;
--faceplate-to: #13171a;
--faceplate-border: #2a2e35;
--faceplate-inset: #1f2329;
--port-up-bg: #1c2918;
--port-up-border: #3b6f3a;
--port-down-bg: #291417;
--port-down-border: #5b2024;
/* ── status ── */
--good: #8de08a;
--good-bg: rgba(141, 224, 138, 0.12);
--warn: #f0c87a;
--warn-bg: rgba(240, 200, 122, 0.12);
--bad: #f08a8a;
--bad-bg: rgba(240, 138, 138, 0.12);
--info: #9ec5ff;
--info-bg: rgba(158, 197, 255, 0.12);
--violet: #c0a8f5;
--violet-bg: rgba(192, 168, 245, 0.12);
/* ── legacy aliases ── */
--color-bg: var(--bg);
--color-surface: var(--surface);
--color-border: var(--line);
--color-text: var(--ink);
--color-text-muted: var(--ink-3);
--color-sidebar-bg: var(--bg);
--color-sidebar-text: var(--ink-2);
--color-sidebar-active: var(--accent);
} }
body { body {
@apply bg-white dark:bg-slate-900 text-gray-900 dark:text-slate-100; background-color: var(--bg);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--ink);
font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-feature-settings: 'ss01';
} }
* { * {
@apply border-gray-200 dark:border-slate-700; border-color: var(--line);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@apply w-1.5 h-1.5; @apply w-1.5 h-1.5;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@apply bg-transparent; background: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@apply bg-gray-300 dark:bg-slate-600 rounded-full; background: var(--line);
border-radius: 999px;
}
/* Monospace utility — for IPs, MACs, versions, timestamps */
.mono {
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-numeric: tabular-nums;
font-feature-settings: 'ss01';
}
/* Tabular number alignment */
.num-tab {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
} }
} }
@layer components { @layer components {
/* ── Cards ── */
.card { .card {
@apply bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-sm; background: var(--surface);
border: 1px solid var(--line);
border-radius: 10px;
} }
.card-subtle {
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 8px;
}
/* ── Buttons ── */
.btn-primary { .btn-primary {
@apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium background: var(--accent);
color: var(--accent-fg);
@apply px-4 py-2 rounded-lg text-sm font-semibold
transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed; transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
} }
.btn-primary:hover:not(:disabled) {
background: var(--accent-2);
}
.btn-secondary { .btn-secondary {
@apply bg-gray-100 hover:bg-gray-200 dark:bg-slate-700 dark:hover:bg-slate-600 background: transparent;
text-gray-700 dark:text-slate-200 px-4 py-2 rounded-lg text-sm font-medium color: var(--ink-2);
border: 1px solid var(--line);
@apply px-4 py-2 rounded-lg text-sm font-medium
transition-colors duration-150; transition-colors duration-150;
} }
.btn-secondary:hover {
background: var(--surface-3);
}
.btn-danger { .btn-danger {
@apply bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium @apply bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium
transition-colors duration-150; transition-colors duration-150;
} }
/* ── Form elements ── */
.input { .input {
@apply w-full px-3 py-2 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 background: var(--surface-2);
rounded-lg text-sm text-gray-900 dark:text-slate-100 placeholder-gray-400 border: 1px solid var(--line);
dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 color: var(--ink);
focus:border-transparent; @apply w-full px-3 py-2 rounded-lg text-sm
focus:outline-none focus:ring-2 focus:border-transparent;
--tw-ring-color: var(--accent);
}
.input::placeholder {
color: var(--ink-4);
} }
.label { .label {
@apply block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1; color: var(--ink-3);
@apply block text-sm font-medium mb-1;
} }
/* React Flow default controls are light-theme SVGs; fix contrast in dark mode */ /* ── Status pills ── */
.status-online {
background: var(--good-bg);
color: var(--good);
}
.status-offline {
background: var(--bad-bg);
color: var(--bad);
}
.status-unknown {
background: var(--surface-2);
color: var(--ink-3);
}
/* ── Severity pills ── */
.severity-error {
background: var(--bad-bg);
color: var(--bad);
}
.severity-warning {
background: var(--warn-bg);
color: var(--warn);
}
.severity-info {
background: var(--info-bg);
color: var(--info);
}
/* ── Table utilities ── */
.table-header {
color: var(--ink-4);
@apply text-left text-[10.5px] font-medium uppercase tracking-[0.08em];
}
/* Zebra striping — uses :where() so explicit bg on <tr> always wins */
:where(.table-zebra > tr:nth-child(even)) {
background: var(--surface-2);
}
/* ── React Flow topology overrides ── */
.topology-reactflow.dark .react-flow__controls { .topology-reactflow.dark .react-flow__controls {
@apply border-slate-600 shadow-lg; border-color: var(--line);
@apply shadow-lg;
} }
.topology-reactflow.dark .react-flow__controls-button { .topology-reactflow.dark .react-flow__controls-button {
@apply bg-slate-600 border-slate-500; background: var(--surface-2);
color: #f1f5f9; border-color: var(--line);
color: var(--ink);
} }
.topology-reactflow.dark .react-flow__controls-button:hover { .topology-reactflow.dark .react-flow__controls-button:hover {
@apply bg-slate-500 border-slate-400; background: var(--surface-3);
color: #fff;
} }
.topology-reactflow.dark .react-flow__controls-button svg { .topology-reactflow.dark .react-flow__controls-button svg {
fill: #f1f5f9; fill: var(--ink);
stroke: #f1f5f9; stroke: var(--ink);
} }
.topology-reactflow.dark .react-flow__controls-button:disabled { .topology-reactflow.dark .react-flow__controls-button:disabled {
@apply opacity-40; @apply opacity-40;
} }
.topology-reactflow.dark .react-flow__minimap { .topology-reactflow.dark .react-flow__minimap {
@apply bg-slate-700 border border-slate-600; background: var(--surface-2);
border: 1px solid var(--line);
} }
.topology-reactflow.dark .react-flow__minimap-mask { .topology-reactflow.dark .react-flow__minimap-mask {
fill: rgb(15 23 42 / 0.65); fill: rgba(14, 15, 18, 0.65);
} }
.topology-reactflow.dark .react-flow__minimap-node { .topology-reactflow.dark .react-flow__minimap-node {
@apply fill-slate-500 stroke-slate-400; fill: var(--surface-3);
stroke: var(--line);
} }
.topology-reactflow { .topology-reactflow {
--topology-edge-label: #64748b; --topology-edge-label: var(--ink-3);
--topology-seg-edge-label: #b45309; --topology-seg-edge-label: var(--warn);
}
.dark .topology-reactflow {
--topology-edge-label: #cbd5e1;
--topology-seg-edge-label: #fcd34d;
} }
.dark .topology-reactflow .react-flow__edge-textbg { .dark .topology-reactflow .react-flow__edge-textbg {
fill: rgb(30 41 59 / 0.92); fill: var(--surface-2);
} fill-opacity: 0.92;
.table-header {
@apply text-left text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wider;
}
.status-online {
@apply bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400;
}
.status-offline {
@apply bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400;
}
.status-unknown {
@apply bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-slate-400;
}
.severity-error {
@apply bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400;
}
.severity-warning {
@apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400;
}
.severity-info {
@apply bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400;
}
/* Zebra striping — uses :where() so explicit bg classes on <tr> always win */
:where(.table-zebra > tr:nth-child(even)) {
@apply bg-gray-50 dark:bg-slate-700/30;
} }
} }
+2 -2
View File
@@ -257,14 +257,14 @@ export default function ClientsPage() {
<span className="text-xs text-green-600 dark:text-green-400">{purgeResult}</span> <span className="text-xs text-green-600 dark:text-green-400">{purgeResult}</span>
)} )}
<div className="flex items-center gap-1.5 ml-auto"> <div className="flex items-center gap-1.5 ml-auto">
<RefreshCw className="w-3.5 h-3.5 text-gray-400 dark:text-slate-500" /> <RefreshCw className="w-3.5 h-3.5 text-ink-4" />
<select <select
value={String(refreshInterval)} value={String(refreshInterval)}
onChange={(e) => { onChange={(e) => {
const raw = e.target.value; const raw = e.target.value;
handleIntervalChange(raw === 'null' ? null : Number(raw)); handleIntervalChange(raw === 'null' ? null : Number(raw));
}} }}
className="text-sm rounded-lg border border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-700 text-gray-700 dark:text-slate-200 px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500" className="text-sm rounded-lg border border-line bg-surface-2 text-ink px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-accent"
> >
{REFRESH_OPTIONS.map((o) => ( {REFRESH_OPTIONS.map((o) => (
<option key={String(o.value)} value={String(o.value)}> <option key={String(o.value)} value={String(o.value)}>
File diff suppressed because it is too large Load Diff
+297 -254
View File
@@ -1,23 +1,11 @@
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useQuery, useQueries, useMutation, useQueryClient } from '@tanstack/react-query';
import { import {
Plus, Plus, RefreshCw, Router, Wifi, Trash2, ChevronRight, Search,
RefreshCw, Radar, ArrowUpCircle, Cpu, Pencil, ArrowUpDown, ArrowUp, ArrowDown,
Router,
Wifi,
Trash2,
ChevronRight,
Search,
Radar,
ArrowUpCircle,
Cpu,
Pencil,
ArrowUpDown,
ArrowUp,
ArrowDown,
} from 'lucide-react'; } from 'lucide-react';
import { devicesApi, topologyApi } from '../services/api'; import { devicesApi, topologyApi, metricsApi } from '../services/api';
import type { Device } from '../types'; import type { Device } from '../types';
import type { DiscoveredDevice } from '../services/api'; import type { DiscoveredDevice } from '../services/api';
import { useCanWrite } from '../hooks/useCanWrite'; import { useCanWrite } from '../hooks/useCanWrite';
@@ -48,10 +36,13 @@ function SortableHeader({
type="button" type="button"
onClick={onClick} onClick={onClick}
className={clsx( className={clsx(
'inline-flex items-center gap-1.5 text-inherit hover:text-gray-900 dark:hover:text-white transition-colors', 'inline-flex items-center gap-1.5 text-inherit transition-colors',
align === 'center' && 'justify-center', align === 'center' && 'justify-center',
align === 'right' && 'justify-end' align === 'right' && 'justify-end'
)} )}
style={{ color: 'inherit' }}
onMouseEnter={e => (e.currentTarget.style.color = 'var(--ink)')}
onMouseLeave={e => (e.currentTarget.style.color = 'inherit')}
title={`Sort by ${label}`} title={`Sort by ${label}`}
> >
<span>{label}</span> <span>{label}</span>
@@ -62,32 +53,58 @@ function SortableHeader({
); );
} }
function StatusDot({ status }: { status: Device['status'] }) { function GlowDot({ status }: { status: Device['status'] }) {
const color = status === 'online' ? 'var(--good)' : status === 'offline' ? 'var(--bad)' : 'var(--ink-4)';
return ( return (
<span <span
className={clsx( style={{
'inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium', width: 8, height: 8, borderRadius: 999, display: 'inline-block',
status === 'online' && 'status-online', background: color, flexShrink: 0,
status === 'offline' && 'status-offline', boxShadow: status === 'online' ? `0 0 0 2px ${color}33, 0 0 8px ${color}88` : 'none',
status === 'unknown' && 'status-unknown' }}
)}
>
<span
className={clsx(
'w-1.5 h-1.5 rounded-full',
status === 'online' && 'bg-green-500',
status === 'offline' && 'bg-red-500',
status === 'unknown' && 'bg-gray-400'
)}
/> />
{status} );
}
function TypePill({ type }: { type: Device['device_type'] }) {
const map: Record<string, { label: string; color: string }> = {
wireless_ap: { label: 'AP', color: 'var(--info)' },
switch: { label: 'SW', color: 'var(--accent)' },
router: { label: 'RTR', color: 'var(--violet)' },
};
const { label, color } = map[type as string] ?? { label: (type as string)?.slice(0, 3)?.toUpperCase() ?? '?', color: 'var(--ink-3)' };
return (
<span
className="mono text-[10.5px] font-medium px-[6px] py-[2px] rounded-full"
style={{ color, border: '1px solid var(--line)' }}
>
{label}
</span> </span>
); );
} }
function DeviceTypeIcon({ type }: { type: Device['device_type'] }) { function CpuValue({ value }: { value: number | undefined }) {
if (type === 'wireless_ap') return <Wifi className="w-5 h-5 text-blue-500" />; if (value == null) return <span className="mono text-[11px]" style={{ color: 'var(--ink-4)' }}>—</span>;
return <Router className="w-5 h-5 text-blue-500" />; const color = value > 70 ? 'var(--bad)' : value > 40 ? 'var(--warn)' : 'var(--accent)';
return (
<span className="mono num-tab text-[12px] font-medium" style={{ color }}>{value}%</span>
);
}
function LoadSparkline({ data }: { data: number[] }) {
if (data.length < 2) return <span className="mono text-[11px]" style={{ color: 'var(--ink-4)' }}>—</span>;
const max = Math.max(...data) || 1;
const w = 72, h = 20;
const pts = data.map((v, i) => [
(i / (data.length - 1)) * w,
h - (v / max) * (h - 2) - 1,
]);
const d = 'M' + pts.map(p => `${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' L');
return (
<svg width={w} height={h} style={{ display: 'block' }}>
<path d={d} fill="none" stroke="var(--ink-3)" strokeWidth="1.2" />
</svg>
);
} }
export default function DevicesPage() { export default function DevicesPage() {
@@ -107,6 +124,8 @@ export default function DevicesPage() {
key: 'discovered_at', key: 'discovered_at',
dir: 'desc', dir: 'desc',
}); });
const [statusFilter, setStatusFilter] = useState<'all' | 'online' | 'offline' | 'updates'>('all');
const [typeFilter, setTypeFilter] = useState<string | null>(null);
const { data: devices = [], isLoading } = useQuery({ const { data: devices = [], isLoading } = useQuery({
queryKey: ['devices'], queryKey: ['devices'],
@@ -133,14 +152,39 @@ export default function DevicesPage() {
}, },
}); });
// Fetch 1h CPU history for all devices (for LOAD sparkline column)
const cpuHistoryResults = useQueries({
queries: devices.map(d => ({
queryKey: ['device-resources-history', d.id],
queryFn: () => metricsApi.deviceResources(d.id, '1h').then(r => r.data),
staleTime: 60_000,
enabled: d.status === 'online',
})),
});
const cpuHistories = useMemo(() => {
const map: Record<number, number[]> = {};
devices.forEach((d, i) => {
const pts = cpuHistoryResults[i]?.data ?? [];
map[d.id] = pts.map((p: { cpu_load?: number }) => p.cpu_load ?? 0).filter((v: number) => v > 0);
});
return map;
}, [devices, cpuHistoryResults]);
const filtered = useMemo(() => { const filtered = useMemo(() => {
const base = devices.filter( const base = devices.filter(d => {
(d) => if (search &&
!search || !d.name.toLowerCase().includes(search.toLowerCase()) &&
d.name.toLowerCase().includes(search.toLowerCase()) || !d.ip_address.includes(search) &&
d.ip_address.includes(search) || !d.model?.toLowerCase().includes(search.toLowerCase())
d.model?.toLowerCase().includes(search.toLowerCase()) ) return false;
); if (statusFilter === 'online' && d.status !== 'online') return false;
if (statusFilter === 'offline' && d.status !== 'offline') return false;
if (statusFilter === 'updates' && !d.firmware_update_available && !d.routerboard_upgrade_available) return false;
if (typeFilter === 'AP' && d.device_type !== 'wireless_ap') return false;
if (typeFilter === 'SW' && d.device_type !== 'switch') return false;
if (typeFilter === 'RTR' && d.device_type !== 'router') return false;
return true;
});
const sorted = [...base].sort((a, b) => { const sorted = [...base].sort((a, b) => {
const val = (x: Device): string | number => { const val = (x: Device): string | number => {
switch (deviceSort.key) { switch (deviceSort.key) {
@@ -203,19 +247,21 @@ export default function DevicesPage() {
} }
}; };
const onlineCount = devices.filter(d => d.status === 'online').length;
const updatesCount = devices.filter(d => d.firmware_update_available || d.routerboard_upgrade_available).length;
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"> {/* Page header */}
<h1 className="text-xl font-bold text-gray-900 dark:text-white"> <div className="flex flex-wrap items-baseline gap-3">
<h1 className="text-[28px] font-semibold leading-none" style={{ color: 'var(--ink)', letterSpacing: '-0.01em' }}>
Devices Devices
{devices.length > 0 && (
<span className="ml-2 text-sm font-normal text-gray-500 dark:text-slate-400">
({devices.filter((d) => d.status === 'online').length}/{devices.length} online)
</span>
)}
</h1> </h1>
<span className="mono text-[11px]" style={{ color: 'var(--ink-3)' }}>
{devices.length} total · {onlineCount} online{updatesCount > 0 ? ` · ${updatesCount} update${updatesCount !== 1 ? 's' : ''}` : ''}
</span>
{canWrite && ( {canWrite && (
<div className="flex items-center gap-2 flex-shrink-0"> <div className="ml-auto flex items-center gap-2">
<button <button
onClick={async () => { onClick={async () => {
setSearching(true); setSearching(true);
@@ -230,48 +276,83 @@ export default function DevicesPage() {
} }
}} }}
disabled={searching} disabled={searching}
className="btn-secondary flex items-center gap-2" className="btn-secondary flex items-center gap-2 text-[12px] py-[6px]"
> >
<RefreshCw className={clsx('w-4 h-4', searching && 'animate-spin')} /> <RefreshCw className={clsx('w-3.5 h-3.5', searching && 'animate-spin')} />
{searching ? 'Searching…' : 'Search for Devices'} {searching ? 'Searching…' : 'Discover'}
</button> </button>
<button <button
onClick={() => { setAddPrefill(undefined); setShowAddModal(true); }} onClick={() => { setAddPrefill(undefined); setShowAddModal(true); }}
className="btn-primary flex items-center gap-2" className="btn-primary flex items-center gap-2 text-[12px] py-[6px]"
> >
<Plus className="w-4 h-4" /> <Plus className="w-3.5 h-3.5" />
Add Device Add device
</button> </button>
</div> </div>
)} )}
</div> </div>
{/* Search */} {/* Filter bar */}
<div className="relative w-full sm:max-w-sm"> <div className="card-subtle flex flex-wrap items-center gap-[6px] p-[6px]">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" /> <div className="flex items-center gap-2 flex-1 min-w-[160px] px-[10px] py-[6px]" style={{ color: 'var(--ink-3)' }}>
<Search className="w-3.5 h-3.5 flex-shrink-0" />
<input <input
type="text" type="text"
className="input pl-9" className="bg-transparent text-[13px] outline-none w-full"
placeholder="Search devices..." style={{ color: 'var(--ink)' }}
placeholder="Filter devices…"
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={e => setSearch(e.target.value)}
/> />
</div> </div>
{(['all', 'online', 'offline', 'updates'] as const).map(f => (
<button
key={f}
onClick={() => setStatusFilter(f)}
className="mono text-[11.5px] px-[10px] py-[4px] rounded-[5px] transition-colors capitalize"
style={{
background: statusFilter === f ? 'var(--surface-3)' : 'transparent',
color: statusFilter === f ? 'var(--ink)' : 'var(--ink-3)',
border: 'none',
}}
>
{f}
</button>
))}
<div className="w-px h-[18px] mx-1" style={{ background: 'var(--line)' }} />
{(['AP', 'SW', 'RTR'] as const).map(t => {
const colors: Record<string, string> = { AP: 'var(--info)', SW: 'var(--accent)', RTR: 'var(--violet)' };
return (
<button
key={t}
onClick={() => setTypeFilter(f => f === t ? null : t)}
className="mono text-[11px] px-[8px] py-[4px] rounded-[5px] transition-colors"
style={{
background: typeFilter === t ? 'var(--surface-3)' : 'transparent',
color: typeFilter === t ? colors[t] : 'var(--ink-3)',
border: '1px solid var(--line)',
}}
>
{t}
</button>
);
})}
</div>
{/* Device list */} {/* Device table */}
{isLoading ? ( {isLoading ? (
<div className="flex items-center justify-center h-48 text-gray-400">Loading...</div> <div className="flex items-center justify-center h-48" style={{ color: 'var(--ink-4)' }}>Loading…</div>
) : filtered.length === 0 ? ( ) : filtered.length === 0 ? (
<div className="card p-12 flex flex-col items-center gap-4 text-center"> <div className="card p-12 flex flex-col items-center gap-4 text-center">
<div className="w-16 h-16 bg-gray-100 dark:bg-slate-700 rounded-full flex items-center justify-center"> <div className="w-16 h-16 rounded-full flex items-center justify-center" style={{ background: 'var(--surface-2)' }}>
<Router className="w-8 h-8 text-gray-400" /> <Router className="w-8 h-8" style={{ color: 'var(--ink-4)' }} />
</div> </div>
<div> <div>
<p className="text-gray-700 dark:text-slate-300 font-medium"> <p className="font-medium" style={{ color: 'var(--ink-2)' }}>
{search ? 'No devices match your search' : 'No devices added yet'} {search || statusFilter !== 'all' || typeFilter ? 'No devices match your filters' : 'No devices added yet'}
</p> </p>
<p className="text-sm text-gray-400 dark:text-slate-500 mt-1"> <p className="text-[13px] mt-1" style={{ color: 'var(--ink-4)' }}>
{!search && 'Click "Add Device" to connect your first Mikrotik device'} {!search && statusFilter === 'all' && !typeFilter && 'Click "Add device" to connect your first Mikrotik device'}
</p> </p>
</div> </div>
</div> </div>
@@ -280,134 +361,117 @@ export default function DevicesPage() {
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full"> <table className="w-full">
<thead> <thead>
<tr className="border-b border-gray-200 dark:border-slate-700"> <tr style={{ borderBottom: '1px solid var(--line)' }}>
<th className="table-header px-4 py-3"> {[
{ key: null, label: '', w: 22 },
{ key: 'name', label: 'DEVICE', w: null },
{ key: null, label: 'TYPE', w: 72 },
{ key: 'model', label: 'MODEL', w: null },
{ key: 'ip_address', label: 'IP ADDRESS', w: null },
{ key: 'ros_version',label: 'ROS', w: 110 },
{ key: null, label: 'CPU', w: 110 },
{ key: null, label: 'LOAD', w: 100 },
{ key: 'last_seen', label: 'SEEN', w: 90 },
{ key: null, label: '', w: 56 },
].map(({ key, label, w }, i) => (
<th
key={i}
className="table-header px-4 py-[10px] text-left"
style={w ? { width: w } : undefined}
>
{key ? (
<SortableHeader <SortableHeader
label="Device" label={label}
active={deviceSort.key === 'name'} active={deviceSort.key === key as DeviceSortKey}
dir={deviceSort.dir} dir={deviceSort.dir}
onClick={() => flipSort(deviceSort, 'name', setDeviceSort)} onClick={() => flipSort(deviceSort, key as DeviceSortKey, setDeviceSort)}
/> />
) : label}
</th> </th>
<th className="table-header px-4 py-3"> ))}
<SortableHeader
label="IP Address"
active={deviceSort.key === 'ip_address'}
dir={deviceSort.dir}
onClick={() => flipSort(deviceSort, 'ip_address', setDeviceSort)}
/>
</th>
<th className="table-header px-4 py-3">
<SortableHeader
label="Model"
active={deviceSort.key === 'model'}
dir={deviceSort.dir}
onClick={() => flipSort(deviceSort, 'model', setDeviceSort)}
/>
</th>
<th className="table-header px-4 py-3">
<SortableHeader
label="ROS Version"
active={deviceSort.key === 'ros_version'}
dir={deviceSort.dir}
onClick={() => flipSort(deviceSort, 'ros_version', setDeviceSort)}
/>
</th>
<th className="table-header px-4 py-3">
<SortableHeader
label="Status"
active={deviceSort.key === 'status'}
dir={deviceSort.dir}
onClick={() => flipSort(deviceSort, 'status', setDeviceSort)}
/>
</th>
<th className="table-header px-4 py-3">
<SortableHeader
label="Last Seen"
active={deviceSort.key === 'last_seen'}
dir={deviceSort.dir}
onClick={() => flipSort(deviceSort, 'last_seen', setDeviceSort)}
/>
</th>
<th className="table-header px-4 py-3 w-28">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100 dark:divide-slate-700 table-zebra"> <tbody>
{filtered.map((device) => ( {filtered.map((device, i) => {
const cpuSpark = cpuHistories[device.id] ?? [];
return (
<tr <tr
key={device.id} key={device.id}
className="hover:bg-gray-50 dark:hover:bg-slate-700/50 cursor-pointer transition-colors" className="cursor-pointer transition-colors"
style={{
borderBottom: i < filtered.length - 1 ? '1px solid var(--line-soft)' : 'none',
}}
onMouseEnter={e => (e.currentTarget.style.background = 'var(--surface-2)')}
onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
onClick={() => navigate(`/devices/${device.id}`)} onClick={() => navigate(`/devices/${device.id}`)}
> >
<td className="px-4 py-3"> <td className="px-4 py-[12px]">
<div className="flex items-center gap-3"> <GlowDot status={device.status} />
<DeviceTypeIcon type={device.device_type} />
<div>
<div className="text-sm font-medium text-gray-900 dark:text-white">
{device.name}
</div>
<div className="text-xs text-gray-400 dark:text-slate-500">
{{ router: 'Router', switch: 'Switch', wireless_ap: 'Wireless AP', other: 'Other' }[device.device_type] ?? device.device_type}
</div>
</div>
</div>
</td> </td>
<td className="px-4 py-3 text-sm font-mono text-gray-600 dark:text-slate-400"> <td className="px-4 py-[12px]">
{device.ip_address} <div className="text-[13px] font-medium" style={{ color: 'var(--ink)' }}>{device.name}</div>
</td> </td>
<td className="px-4 py-3 text-sm text-gray-600 dark:text-slate-400"> <td className="px-4 py-[12px]">
{device.model || '—'} <TypePill type={device.device_type} />
</td> </td>
<td className="px-4 py-3 text-sm text-gray-600 dark:text-slate-400"> <td className="px-4 py-[12px]">
<span className="flex items-center gap-1.5"> <span className="mono text-[11.5px]" style={{ color: 'var(--ink-2)' }}>{device.model || '—'}</span>
</td>
<td className="px-4 py-[12px]">
<span className="mono num-tab text-[12px]" style={{ color: 'var(--ink-2)' }}>{device.ip_address}</span>
</td>
<td className="px-4 py-[12px]">
<span
className="mono text-[11.5px] flex items-center gap-[4px]"
style={{ color: device.firmware_update_available || device.routerboard_upgrade_available ? 'var(--warn)' : 'var(--ink-3)' }}
>
{(device.firmware_update_available || device.routerboard_upgrade_available) && (
<span
className="text-[9px] font-bold px-[4px] py-[1px] rounded-[3px]"
style={{ background: 'var(--warn)', color: 'var(--accent-fg)' }}
>↑</span>
)}
{device.ros_version || '—'} {device.ros_version || '—'}
{device.firmware_update_available && (
<span
title={device.latest_ros_version ? `RouterOS update available: ${device.latest_ros_version}` : 'RouterOS update available'}
className="flex-shrink-0"
>
<ArrowUpCircle className="w-3.5 h-3.5 text-amber-500" />
</span>
)}
{device.routerboard_upgrade_available && (
<span
title={device.upgrade_firmware_version ? `RouterBOOT upgrade available: ${device.upgrade_firmware_version}` : 'RouterBOOT upgrade available'}
className="flex-shrink-0"
>
<Cpu className="w-3.5 h-3.5 text-blue-400" />
</span>
)}
</span> </span>
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-[12px]">
<StatusDot status={device.status} /> <CpuValue value={(() => { const arr = cpuHistories[device.id]; return arr && arr.length > 0 ? arr[arr.length - 1] : undefined; })()} />
</td> </td>
<td className="px-4 py-3 text-sm text-gray-400 dark:text-slate-500"> <td className="px-4 py-[12px]">
<LoadSparkline data={cpuSpark} />
</td>
<td className="px-4 py-[12px]">
<span className="mono text-[11px]" style={{ color: 'var(--ink-3)' }}>
{device.last_seen {device.last_seen
? new Date(device.last_seen).toLocaleString() ? new Date(device.last_seen).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
: '—'} : '—'}
</span>
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-[12px]">
<div <div
className="flex items-center gap-1" className="flex items-center justify-end gap-1"
onClick={(e) => e.stopPropagation()} onClick={e => e.stopPropagation()}
> >
{canWrite && ( {canWrite && (
<> <>
<button <button
onClick={() => syncMutation.mutate(device.id)} onClick={() => syncMutation.mutate(device.id)}
disabled={syncMutation.isPending} disabled={syncMutation.isPending}
className="p-1.5 rounded text-gray-400 hover:text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors" className="p-1.5 rounded transition-colors"
style={{ color: 'var(--ink-4)' }}
title="Sync now" title="Sync now"
onMouseEnter={e => (e.currentTarget.style.color = 'var(--accent)')}
onMouseLeave={e => (e.currentTarget.style.color = 'var(--ink-4)')}
> >
<RefreshCw <RefreshCw className={clsx('w-3.5 h-3.5', syncMutation.isPending && 'animate-spin')} />
className={clsx('w-3.5 h-3.5', syncMutation.isPending && 'animate-spin')}
/>
</button> </button>
<button <button
onClick={() => setEditDevice(device)} onClick={() => setEditDevice(device)}
className="p-1.5 rounded text-gray-400 hover:text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors" className="p-1.5 rounded transition-colors"
style={{ color: 'var(--ink-4)' }}
title="Edit device" title="Edit device"
onMouseEnter={e => (e.currentTarget.style.color = 'var(--ink-2)')}
onMouseLeave={e => (e.currentTarget.style.color = 'var(--ink-4)')}
> >
<Pencil className="w-3.5 h-3.5" /> <Pencil className="w-3.5 h-3.5" />
</button> </button>
@@ -415,33 +479,35 @@ export default function DevicesPage() {
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<button <button
onClick={() => deleteMutation.mutate(device.id)} onClick={() => deleteMutation.mutate(device.id)}
className="text-xs text-red-500 hover:text-red-600 font-medium px-1" className="text-[11px] font-medium px-1"
> style={{ color: 'var(--bad)' }}
Confirm >Confirm</button>
</button>
<button <button
onClick={() => setDeleteConfirm(null)} onClick={() => setDeleteConfirm(null)}
className="text-xs text-gray-400 hover:text-gray-600 px-1" className="text-[11px] px-1"
> style={{ color: 'var(--ink-4)' }}
Cancel >Cancel</button>
</button>
</div> </div>
) : ( ) : (
<button <button
onClick={() => setDeleteConfirm(device.id)} onClick={() => setDeleteConfirm(device.id)}
className="p-1.5 rounded text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors" className="p-1.5 rounded transition-colors"
style={{ color: 'var(--ink-4)' }}
title="Delete device" title="Delete device"
onMouseEnter={e => (e.currentTarget.style.color = 'var(--bad)')}
onMouseLeave={e => (e.currentTarget.style.color = 'var(--ink-4)')}
> >
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3.5 h-3.5" />
</button> </button>
)} )}
</> </>
)} )}
<ChevronRight className="w-4 h-4 text-gray-300 dark:text-slate-600" /> <ChevronRight className="w-4 h-4" style={{ color: 'var(--ink-4)' }} />
</div> </div>
</td> </td>
</tr> </tr>
))} );
})}
</tbody> </tbody>
</table> </table>
</div> </div>
@@ -452,20 +518,16 @@ export default function DevicesPage() {
{discoveredList.length > 0 && ( {discoveredList.length > 0 && (
<div className="space-y-3"> <div className="space-y-3">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<Radar className="w-4 h-4 text-amber-500" /> <Radar className="w-4 h-4" style={{ color: 'var(--warn)' }} />
<h2 className="text-sm font-semibold text-gray-700 dark:text-slate-300"> <h2 className="text-[13px] font-semibold" style={{ color: 'var(--ink-2)' }}>
Discovered Devices Discovered Devices
</h2> </h2>
<span className="text-xs text-gray-400 dark:text-slate-500"> <span className="mono text-[11px]" style={{ color: 'var(--ink-4)' }}>
— Mikrotik neighbors seen by your managed devices, not yet added to management — MikroTik neighbors seen by managed devices, not yet added
</span> </span>
<label <label
className={clsx( className="ml-auto flex items-center gap-2 select-none mono text-[11px]"
'ml-auto flex items-center gap-2 text-xs select-none', style={{ color: duplicateCount === 0 ? 'var(--ink-4)' : 'var(--ink-3)', cursor: duplicateCount === 0 ? 'not-allowed' : 'pointer' }}
duplicateCount === 0
? 'text-gray-300 dark:text-slate-600 cursor-not-allowed'
: 'text-gray-600 dark:text-slate-400 cursor-pointer'
)}
title={ title={
duplicateCount === 0 duplicateCount === 0
? 'No duplicates of already-managed devices detected' ? 'No duplicates of already-managed devices detected'
@@ -474,20 +536,19 @@ export default function DevicesPage() {
> >
<input <input
type="checkbox" type="checkbox"
className="rounded border-gray-300 dark:border-slate-600"
checked={hideDuplicates} checked={hideDuplicates}
disabled={duplicateCount === 0} disabled={duplicateCount === 0}
onChange={(e) => setHideDuplicates(e.target.checked)} onChange={(e) => setHideDuplicates(e.target.checked)}
/> />
Hide duplicates of managed devices Hide duplicates
{duplicateCount > 0 && ( {duplicateCount > 0 && (
<span className="text-gray-400 dark:text-slate-500">({duplicateCount})</span> <span style={{ color: 'var(--ink-4)' }}>({duplicateCount})</span>
)} )}
</label> </label>
{canWrite && visibleDiscovered.length > 0 && ( {canWrite && visibleDiscovered.length > 0 && (
<button <button
onClick={() => setShowTryAllModal(true)} onClick={() => setShowTryAllModal(true)}
className="btn-primary text-xs py-1.5 px-3" className="btn-primary text-[12px] py-[5px] px-3"
title="Try adding all discovered devices with one credential method" title="Try adding all discovered devices with one credential method"
> >
Try All Try All
@@ -495,107 +556,89 @@ export default function DevicesPage() {
)} )}
</div> </div>
{visibleDiscovered.length === 0 ? ( {visibleDiscovered.length === 0 ? (
<div className="card p-4 text-xs text-gray-500 dark:text-slate-400 text-center"> <div className="card p-4 text-center mono text-[11px]" style={{ color: 'var(--ink-4)' }}>
All {discoveredList.length} discovered neighbor(s) are already managed devices. All {discoveredList.length} discovered neighbor(s) are already managed devices.
</div> </div>
) : ( ) : (
<div className="card overflow-hidden"> <div className="card overflow-hidden">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full text-sm"> <table className="w-full">
<thead> <thead>
<tr className="border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/50"> <tr style={{ borderBottom: '1px solid var(--line)' }}>
<th className="table-header px-4 py-2.5 text-left"> {(['Identity', 'IP Address', 'MAC Address', 'Seen By', 'Last Seen', ''] as const).map((label, i) => (
<SortableHeader <th key={i} className="table-header px-4 py-[10px] text-left" style={i === 5 ? { width: 140 } : undefined}>
label="Identity" {label === 'Identity' && (
active={discoveredSort.key === 'identity'} <SortableHeader label="IDENTITY" active={discoveredSort.key === 'identity'} dir={discoveredSort.dir} onClick={() => flipSort(discoveredSort, 'identity', setDiscoveredSort)} />
dir={discoveredSort.dir} )}
onClick={() => flipSort(discoveredSort, 'identity', setDiscoveredSort)} {label === 'IP Address' && (
/> <SortableHeader label="IP ADDRESS" active={discoveredSort.key === 'address'} dir={discoveredSort.dir} onClick={() => flipSort(discoveredSort, 'address', setDiscoveredSort)} />
)}
{label === 'MAC Address' && (
<SortableHeader label="MAC" active={discoveredSort.key === 'mac_address'} dir={discoveredSort.dir} onClick={() => flipSort(discoveredSort, 'mac_address', setDiscoveredSort)} />
)}
{label === 'Seen By' && (
<SortableHeader label="SEEN BY" active={discoveredSort.key === 'seen_by'} dir={discoveredSort.dir} onClick={() => flipSort(discoveredSort, 'seen_by', setDiscoveredSort)} />
)}
{label === 'Last Seen' && (
<SortableHeader label="LAST SEEN" active={discoveredSort.key === 'discovered_at'} dir={discoveredSort.dir} onClick={() => flipSort(discoveredSort, 'discovered_at', setDiscoveredSort)} />
)}
</th> </th>
<th className="table-header px-4 py-2.5 text-left"> ))}
<SortableHeader
label="IP Address"
active={discoveredSort.key === 'address'}
dir={discoveredSort.dir}
onClick={() => flipSort(discoveredSort, 'address', setDiscoveredSort)}
/>
</th>
<th className="table-header px-4 py-2.5 text-left">
<SortableHeader
label="MAC Address"
active={discoveredSort.key === 'mac_address'}
dir={discoveredSort.dir}
onClick={() => flipSort(discoveredSort, 'mac_address', setDiscoveredSort)}
/>
</th>
<th className="table-header px-4 py-2.5 text-left">
<SortableHeader
label="Seen By"
active={discoveredSort.key === 'seen_by'}
dir={discoveredSort.dir}
onClick={() => flipSort(discoveredSort, 'seen_by', setDiscoveredSort)}
/>
</th>
<th className="table-header px-4 py-2.5 text-left">
<SortableHeader
label="Last Seen"
active={discoveredSort.key === 'discovered_at'}
dir={discoveredSort.dir}
onClick={() => flipSort(discoveredSort, 'discovered_at', setDiscoveredSort)}
/>
</th>
<th className="table-header px-4 py-2.5 w-36" />
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100 dark:divide-slate-700 table-zebra"> <tbody>
{visibleDiscovered.map((d, i) => ( {visibleDiscovered.map((d, i) => (
<tr <tr
key={d.mac_address || d.address || i} key={d.mac_address || d.address || i}
className={clsx( style={{
'hover:bg-amber-50/50 dark:hover:bg-amber-900/10', borderBottom: i < visibleDiscovered.length - 1 ? '1px solid var(--line-soft)' : 'none',
d.duplicate_of_device_id != null && 'opacity-70' opacity: d.duplicate_of_device_id != null ? 0.6 : 1,
)} }}
onMouseEnter={e => (e.currentTarget.style.background = 'var(--surface-2)')}
onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
> >
<td className="px-4 py-2.5 font-medium text-gray-900 dark:text-white"> <td className="px-4 py-[11px]">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span>{d.identity || '—'}</span> <span className="text-[13px] font-medium" style={{ color: 'var(--ink)' }}>{d.identity || '—'}</span>
{d.duplicate_of_device_id != null && ( {d.duplicate_of_device_id != null && (
<span <span
className="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300" className="mono text-[9.5px] uppercase tracking-wide px-[6px] py-[2px] rounded"
style={{ background: 'var(--good-bg)', color: 'var(--good)' }}
title={`Matches managed device: ${d.duplicate_of_device_name ?? ''}`} title={`Matches managed device: ${d.duplicate_of_device_name ?? ''}`}
> >
Already managed managed{d.duplicate_of_device_name ? ` · ${d.duplicate_of_device_name}` : ''}
{d.duplicate_of_device_name ? ` · ${d.duplicate_of_device_name}` : ''}
</span> </span>
)} )}
</div> </div>
</td> </td>
<td className="px-4 py-2.5 font-mono text-gray-600 dark:text-slate-400"> <td className="px-4 py-[11px]">
{d.address ? ( {d.address ? (
d.address <span className="mono num-tab text-[12px]" style={{ color: 'var(--ink-2)' }}>{d.address}</span>
) : ( ) : (
<span className="text-amber-500 dark:text-amber-400 italic text-xs font-sans"> <span className="mono text-[11px] italic" style={{ color: 'var(--warn)' }}>
Not detected — enter manually Not detected — enter manually
</span> </span>
)} )}
</td> </td>
<td className="px-4 py-2.5 font-mono text-xs text-gray-500 dark:text-slate-500"> <td className="px-4 py-[11px]">
{d.mac_address || '—'} <span className="mono text-[11px]" style={{ color: 'var(--ink-3)' }}>{d.mac_address || '—'}</span>
</td> </td>
<td className="px-4 py-2.5 text-gray-500 dark:text-slate-400 text-xs"> <td className="px-4 py-[11px]">
{d.seen_by} <span className="text-[12px]" style={{ color: 'var(--ink-3)' }}>{d.seen_by}</span>
</td> </td>
<td className="px-4 py-2.5 text-gray-400 dark:text-slate-500 text-xs"> <td className="px-4 py-[11px]">
<span className="mono text-[11px]" style={{ color: 'var(--ink-4)' }}>
{new Date(d.discovered_at).toLocaleString()} {new Date(d.discovered_at).toLocaleString()}
</span>
</td> </td>
<td className="px-4 py-2.5"> <td className="px-4 py-[11px]">
{canWrite && d.duplicate_of_device_id == null && ( {canWrite && d.duplicate_of_device_id == null && (
<button <button
onClick={() => { onClick={() => {
setAddPrefill({ name: d.identity || '', ip_address: d.address }); setAddPrefill({ name: d.identity || '', ip_address: d.address });
setShowAddModal(true); setShowAddModal(true);
}} }}
className="btn-primary text-xs py-1 px-3 flex items-center gap-1" className="btn-primary text-[12px] py-[5px] px-3 flex items-center gap-1"
> >
<Plus className="w-3 h-3" /> <Plus className="w-3 h-3" />
Add to Manager Add to Manager
+1 -1
View File
@@ -1 +1 @@
export const APP_VERSION = 'v0.10.8 Beta'; export const APP_VERSION = 'v0.10.9 Beta';
+29
View File
@@ -5,6 +5,7 @@ export default {
theme: { theme: {
extend: { extend: {
colors: { colors: {
// Legacy brand palette — kept for backward compat with existing components
brand: { brand: {
50: '#eff6ff', 50: '#eff6ff',
100: '#dbeafe', 100: '#dbeafe',
@@ -21,11 +22,35 @@ export default {
light: '#f1f5f9', light: '#f1f5f9',
dark: '#0f172a', dark: '#0f172a',
}, },
// Design token colors — reference CSS vars so light/dark switch automatically
bg: 'var(--bg)',
surface: 'var(--surface)',
'surface-2': 'var(--surface-2)',
'surface-3': 'var(--surface-3)',
line: 'var(--line)',
'line-soft': 'var(--line-soft)',
ink: 'var(--ink)',
'ink-2': 'var(--ink-2)',
'ink-3': 'var(--ink-3)',
'ink-4': 'var(--ink-4)',
accent: 'var(--accent)',
'accent-2': 'var(--accent-2)',
'accent-soft': 'var(--accent-soft)',
good: 'var(--good)',
warn: 'var(--warn)',
bad: 'var(--bad)',
info: 'var(--info)',
violet: 'var(--violet)',
},
fontFamily: {
sans: ['Geist', 'ui-sans-serif', 'system-ui', '-apple-system', 'sans-serif'],
mono: ['Geist Mono', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
}, },
animation: { animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'fade-in': 'fadeIn 0.2s ease-out', 'fade-in': 'fadeIn 0.2s ease-out',
'slide-in': 'slideIn 0.2s ease-out', 'slide-in': 'slideIn 0.2s ease-out',
'glow-pulse': 'glowPulse 2s ease-in-out infinite',
}, },
keyframes: { keyframes: {
fadeIn: { fadeIn: {
@@ -36,6 +61,10 @@ export default {
'0%': { transform: 'translateX(-10px)', opacity: '0' }, '0%': { transform: 'translateX(-10px)', opacity: '0' },
'100%': { transform: 'translateX(0)', opacity: '1' }, '100%': { transform: 'translateX(0)', opacity: '1' },
}, },
glowPulse: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.4' },
},
}, },
}, },
}, },