feat(ui): add type filter toggles
This commit is contained in:
197
src/components/Header.tsx
Normal file
197
src/components/Header.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import { Search, Loader2, Network, HardDrive, Box, Database, Link, ArrowLeftRight, ArrowUpDown, Router, Wifi, Monitor, Container, FolderTree, Folder } from 'lucide-react';
|
||||
import { useTopologyStore, Orientation, StatusFilter } from '../store/topologyStore';
|
||||
import { ViewMode, NodeType } from '../types';
|
||||
import { getNodeColor } from '../utils/colors';
|
||||
|
||||
interface HeaderProps {
|
||||
onRefresh?: () => Promise<void>;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
const viewModes: { mode: ViewMode; label: string; icon: React.ReactNode }[] = [
|
||||
{ mode: 'full', label: 'Full', icon: <Link className="w-4 h-4" /> },
|
||||
{ mode: 'network', label: 'Network', icon: <Network className="w-4 h-4" /> },
|
||||
{ mode: 'host', label: 'Hosts', icon: <HardDrive className="w-4 h-4" /> },
|
||||
{ mode: 'service', label: 'Services', icon: <Box className="w-4 h-4" /> },
|
||||
{ mode: 'filesystem', label: 'Files', icon: <Database className="w-4 h-4" /> },
|
||||
];
|
||||
|
||||
const orientations: { value: Orientation; label: string; icon: React.ReactNode }[] = [
|
||||
{ value: 'LR', label: 'Left to Right', icon: <ArrowLeftRight className="w-4 h-4" /> },
|
||||
{ value: 'TB', label: 'Top to Bottom', icon: <ArrowUpDown className="w-4 h-4" /> },
|
||||
];
|
||||
|
||||
const nodeTypeFilters: { type: NodeType; icon: React.ReactNode }[] = [
|
||||
{ type: 'gateway', icon: <Router className="w-4 h-4" /> },
|
||||
{ type: 'vlan', icon: <Network className="w-4 h-4" /> },
|
||||
{ type: 'wifi', icon: <Wifi className="w-4 h-4" /> },
|
||||
{ type: 'host_physical', icon: <HardDrive className="w-4 h-4" /> },
|
||||
{ type: 'host_vm', icon: <Monitor className="w-4 h-4" /> },
|
||||
{ type: 'host_container', icon: <Container className="w-4 h-4" /> },
|
||||
{ type: 'service', icon: <Box className="w-4 h-4" /> },
|
||||
{ type: 'volume', icon: <Database className="w-4 h-4" /> },
|
||||
{ type: 'mount', icon: <FolderTree className="w-4 h-4" /> },
|
||||
{ type: 'path', icon: <Folder className="w-4 h-4" /> },
|
||||
];
|
||||
|
||||
export default function Header({ onRefresh, isLoading: externalLoading }: HeaderProps) {
|
||||
const {
|
||||
viewMode,
|
||||
setViewMode,
|
||||
orientation,
|
||||
setOrientation,
|
||||
searchQuery,
|
||||
setSearchQuery,
|
||||
typeFilters,
|
||||
toggleTypeFilter,
|
||||
statusFilter,
|
||||
setStatusFilter,
|
||||
toggleLeftPanel,
|
||||
toggleRightPanel,
|
||||
leftPanelOpen,
|
||||
rightPanelOpen,
|
||||
isLoading: storeLoading
|
||||
} = useTopologyStore();
|
||||
|
||||
const loading = externalLoading ?? storeLoading;
|
||||
|
||||
const handleRefresh = async () => {
|
||||
if (onRefresh) {
|
||||
await onRefresh();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-14 bg-slate-800 border-b border-slate-700 px-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center">
|
||||
<Network className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h1 className="text-lg font-semibold text-white">Homelab Topology</h1>
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-slate-600" />
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{viewModes.map(({ mode, label, icon }) => (
|
||||
<button
|
||||
key={mode}
|
||||
onClick={() => setViewMode(mode)}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-colors ${
|
||||
viewMode === mode
|
||||
? 'bg-indigo-500/20 text-indigo-400 border border-indigo-500/50'
|
||||
: 'text-slate-400 hover:text-white hover:bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
{icon}
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-slate-600" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
value={orientation}
|
||||
onChange={(e) => setOrientation(e.target.value as Orientation)}
|
||||
className="h-9 px-3 bg-slate-700 border border-slate-600 rounded-lg text-sm text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
|
||||
>
|
||||
{orientations.map(({ value, label }) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-slate-600" />
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{nodeTypeFilters.map(({ type, icon }) => {
|
||||
const isActive = typeFilters.includes(type);
|
||||
const color = getNodeColor(type);
|
||||
return (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => toggleTypeFilter(type)}
|
||||
className={`p-2 rounded-md transition-colors ${
|
||||
isActive
|
||||
? 'border'
|
||||
: 'text-slate-500 hover:text-slate-300 hover:bg-slate-700'
|
||||
}`}
|
||||
style={isActive ? {
|
||||
backgroundColor: `${color}20`,
|
||||
borderColor: `${color}50`,
|
||||
color: color
|
||||
} : undefined}
|
||||
title={type}
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="h-6 w-px bg-slate-600" />
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
|
||||
className="h-9 px-3 bg-slate-700 border border-slate-600 rounded-lg text-sm text-slate-300 focus:outline-none focus:border-indigo-500 cursor-pointer"
|
||||
>
|
||||
<option value="all">All Status</option>
|
||||
<option value="running">Running</option>
|
||||
<option value="stopped">Stopped</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search nodes..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-64 h-9 pl-9 pr-4 bg-slate-700 border border-slate-600 rounded-lg text-sm text-white placeholder-slate-400 focus:outline-none focus:border-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
className="h-9 px-3 flex items-center gap-2 bg-slate-700 hover:bg-slate-600 border border-slate-600 rounded-lg text-sm text-slate-300 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<Loader2 className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
{loading ? 'Loading...' : 'Refresh'}
|
||||
</button>
|
||||
|
||||
<div className="h-6 w-px bg-slate-600" />
|
||||
|
||||
<button
|
||||
onClick={toggleLeftPanel}
|
||||
className={`p-2 rounded-lg transition-colors ${
|
||||
leftPanelOpen ? 'bg-indigo-500/20 text-indigo-400' : 'text-slate-400 hover:text-white hover:bg-slate-700'
|
||||
}`}
|
||||
title="Toggle left panel"
|
||||
>
|
||||
<Box className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={toggleRightPanel}
|
||||
className={`p-2 rounded-lg transition-colors ${
|
||||
rightPanelOpen ? 'bg-indigo-500/20 text-indigo-400' : 'text-slate-400 hover:text-white hover:bg-slate-700'
|
||||
}`}
|
||||
title="Toggle right panel"
|
||||
>
|
||||
<Database className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user