mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-21 15:46:43 +00:00
refactor(frontend): extract OverviewToolbar from FleetView (F5-4) (#918)
- Move search, sort, filter popover, label filters, and view-mode toggle into FleetView/OverviewToolbar.tsx (~175 LOC removed from shell) - Extend FleetView/types.ts with ViewMode, SortField, SortDir, FilterStatus, FilterType, FleetPreferences, FleetPaletteEntry - Replace hand-rolled view-mode pill buttons with SegmentedControl (proper aria-checked semantics, keyboard navigation) - Hoist SORT_OPTIONS and renderPaletteOption to module-level constants - Stabilise palette options with useMemo inside OverviewToolbar - FleetView.tsx shrinks from ~1,280 to ~1,107 LOC
This commit is contained in:
Anso
@@ -0,0 +1,211 @@
|
||||
import { useMemo } from 'react';
|
||||
import {
|
||||
Search, ArrowUpDown, AlertTriangle, Play, Square,
|
||||
LayoutGrid, Network, SlidersHorizontal,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Combobox } from '@/components/ui/combobox';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import { MultiSelectCombobox } from '@/components/ui/multi-select-combobox';
|
||||
import { SegmentedControl, type SegmentedControlOption } from '@/components/ui/segmented-control';
|
||||
import { LabelDot } from '../LabelPill';
|
||||
import type { LabelColor } from '../label-types';
|
||||
import type { ViewMode, SortField, FilterStatus, FilterType, FleetPreferences, FleetPaletteEntry } from './types';
|
||||
|
||||
const FILTER_SECTION_LABEL_CLASS = 'text-[10px] leading-3 font-mono uppercase tracking-[0.18em] text-stat-subtitle';
|
||||
|
||||
const SORT_OPTIONS = [
|
||||
{ value: 'name', label: 'Name' },
|
||||
{ value: 'cpu', label: 'CPU Usage' },
|
||||
{ value: 'memory', label: 'Memory Usage' },
|
||||
{ value: 'containers', label: 'Containers' },
|
||||
{ value: 'status', label: 'Status' },
|
||||
];
|
||||
|
||||
const VIEW_MODE_OPTIONS: SegmentedControlOption<ViewMode>[] = [
|
||||
{ value: 'grid', label: 'Grid', icon: LayoutGrid },
|
||||
{ value: 'topology', label: 'Topology', icon: Network },
|
||||
];
|
||||
|
||||
function renderPaletteOption(option: { label: string; color?: string }) {
|
||||
return (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<LabelDot color={(option.color as LabelColor) ?? 'slate'} />
|
||||
{option.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
interface OverviewToolbarProps {
|
||||
isPaid: boolean;
|
||||
viewMode: ViewMode;
|
||||
onViewModeChange: (mode: ViewMode) => void;
|
||||
searchQuery: string;
|
||||
onSearchQueryChange: (q: string) => void;
|
||||
prefs: FleetPreferences;
|
||||
onPrefsChange: (update: Partial<FleetPreferences>) => void;
|
||||
fleetPalette: FleetPaletteEntry[];
|
||||
labelFilters: Set<string>;
|
||||
onLabelFiltersChange: (filters: Set<string>) => void;
|
||||
onClearFilters: () => void;
|
||||
}
|
||||
|
||||
export function OverviewToolbar({
|
||||
isPaid,
|
||||
viewMode,
|
||||
onViewModeChange,
|
||||
searchQuery,
|
||||
onSearchQueryChange,
|
||||
prefs,
|
||||
onPrefsChange,
|
||||
fleetPalette,
|
||||
labelFilters,
|
||||
onLabelFiltersChange,
|
||||
onClearFilters,
|
||||
}: OverviewToolbarProps) {
|
||||
const showPaidControls = isPaid && viewMode === 'grid';
|
||||
const activeFilterCount =
|
||||
(prefs.filterStatus !== 'all' ? 1 : 0) +
|
||||
(prefs.filterType !== 'all' ? 1 : 0) +
|
||||
(prefs.filterCritical ? 1 : 0) +
|
||||
(labelFilters.size > 0 ? 1 : 0);
|
||||
|
||||
const paletteOptions = useMemo(
|
||||
() => fleetPalette.map(p => ({ value: p.key, label: p.name, color: p.color })),
|
||||
[fleetPalette],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap items-center gap-2 mb-4">
|
||||
{showPaidControls && (
|
||||
<>
|
||||
<div className="relative flex-1 min-w-[200px] max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
|
||||
<Input
|
||||
placeholder="Search nodes or stacks..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => onSearchQueryChange(e.target.value)}
|
||||
className="pl-9 h-9"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-40">
|
||||
<Combobox
|
||||
options={SORT_OPTIONS}
|
||||
value={prefs.sortBy}
|
||||
onValueChange={(v) => onPrefsChange({ sortBy: v as SortField })}
|
||||
placeholder="Sort by..."
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-9 w-9 p-0 shrink-0"
|
||||
onClick={() => onPrefsChange({ sortDir: prefs.sortDir === 'asc' ? 'desc' : 'asc' })}
|
||||
title={prefs.sortDir === 'asc' ? 'Switch to descending' : 'Switch to ascending'}
|
||||
>
|
||||
<ArrowUpDown className={`w-4 h-4 ${prefs.sortDir === 'desc' ? 'rotate-180' : ''} transition-transform`} />
|
||||
</Button>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant={activeFilterCount > 0 ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className="h-9 gap-2 shrink-0"
|
||||
>
|
||||
<SlidersHorizontal className="w-4 h-4" />
|
||||
Filters
|
||||
{activeFilterCount > 0 && (
|
||||
<Badge variant="secondary" className="h-5 min-w-[1.25rem] px-1.5 text-[10px] tabular-nums">
|
||||
{activeFilterCount}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="end" className="w-80 space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className={FILTER_SECTION_LABEL_CLASS}>Status</label>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{(['all', 'online', 'offline'] as FilterStatus[]).map(status => (
|
||||
<Button
|
||||
key={status}
|
||||
variant={prefs.filterStatus === status ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className="h-7 text-xs px-2.5"
|
||||
onClick={() => onPrefsChange({ filterStatus: status })}
|
||||
>
|
||||
{status === 'all' ? 'All' : status === 'online' ? (
|
||||
<><Play className="w-3 h-3 mr-1" />Online</>
|
||||
) : (
|
||||
<><Square className="w-3 h-3 mr-1" />Offline</>
|
||||
)}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className={FILTER_SECTION_LABEL_CLASS}>Type</label>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{(['all', 'local', 'remote'] as FilterType[]).map(type => (
|
||||
<Button
|
||||
key={type}
|
||||
variant={prefs.filterType === type ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className="h-7 text-xs px-2.5"
|
||||
onClick={() => onPrefsChange({ filterType: type })}
|
||||
>
|
||||
{type === 'all' ? 'All' : type.charAt(0).toUpperCase() + type.slice(1)}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className={FILTER_SECTION_LABEL_CLASS}>Severity</label>
|
||||
<Button
|
||||
variant={prefs.filterCritical ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
className="h-7 text-xs px-2.5"
|
||||
onClick={() => onPrefsChange({ filterCritical: !prefs.filterCritical })}
|
||||
>
|
||||
<AlertTriangle className="w-3 h-3 mr-1" />
|
||||
Critical Only
|
||||
</Button>
|
||||
</div>
|
||||
{fleetPalette.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<label className={FILTER_SECTION_LABEL_CLASS}>Tags</label>
|
||||
<MultiSelectCombobox
|
||||
options={paletteOptions}
|
||||
selected={labelFilters}
|
||||
onSelectionChange={onLabelFiltersChange}
|
||||
placeholder="Tags"
|
||||
renderOption={renderPaletteOption}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{activeFilterCount > 0 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full h-8 text-xs"
|
||||
onClick={onClearFilters}
|
||||
>
|
||||
Clear all filters
|
||||
</Button>
|
||||
)}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</>
|
||||
)}
|
||||
|
||||
<SegmentedControl
|
||||
value={viewMode}
|
||||
onChange={onViewModeChange}
|
||||
ariaLabel="View mode"
|
||||
options={VIEW_MODE_OPTIONS}
|
||||
className="ml-auto shrink-0 shadow-card-bevel"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
import type { LabelColor } from '../label-types';
|
||||
|
||||
export interface NodeUpdateStatus {
|
||||
nodeId: number;
|
||||
name: string;
|
||||
@@ -8,3 +10,23 @@ export interface NodeUpdateStatus {
|
||||
updateStatus: 'updating' | 'completed' | 'timeout' | 'failed' | null;
|
||||
error?: string | null;
|
||||
}
|
||||
|
||||
export type ViewMode = 'grid' | 'topology';
|
||||
export type SortField = 'name' | 'cpu' | 'memory' | 'containers' | 'status';
|
||||
export type SortDir = 'asc' | 'desc';
|
||||
export type FilterStatus = 'all' | 'online' | 'offline';
|
||||
export type FilterType = 'all' | 'local' | 'remote';
|
||||
|
||||
export interface FleetPreferences {
|
||||
sortBy: SortField;
|
||||
sortDir: SortDir;
|
||||
filterStatus: FilterStatus;
|
||||
filterType: FilterType;
|
||||
filterCritical: boolean;
|
||||
}
|
||||
|
||||
export interface FleetPaletteEntry {
|
||||
key: string;
|
||||
name: string;
|
||||
color: LabelColor;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user