gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-08-06 00:47:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): SystemSheet §9.11 — security and scheduled sheets (PR 2/3) (#961)

Browse Source 
* feat(frontend): add SystemSheet primitive and migrate mesh sheets to §9.11 chrome

DESIGN.md §9.11 codifies one canonical right-side detail-sheet shell (cyan
rail, mono crumb, italic serif name, mono meta, ESC chip + close glyph,
fixed three-slot toolbar, cyan-underline tabs, ScrollArea body, footer
freshness band). Today the 16 sheet consumers each render their own
header chrome with stock shadcn SheetHeader/SheetTitle.

Introduce <SystemSheet> + <SheetSection> in
frontend/src/components/ui/system-sheet.tsx, composing the existing
<Sheet>/<SheetContent> primitive. Add a backward-compatible showClose
prop to SheetContent so SystemSheet can render its own ESC chip + close
glyph instead of the stock cyan square close.

Migrate the four mesh sheets as the first batch:
* MeshActivitySheet: crumb Fleet › Mesh › Activity, footer freshness from
  most-recent event timestamp.
* MeshOptInSheet: crumb Fleet › Mesh › {nodeName}, meta of opted-in
  count, drops the redundant bottom Close button (ESC chip dismisses).
* MeshDiagnosticsSheet: removes the icon-prefixed title (forbidden by
  §9.11), lifts Refresh/Restart buttons from the body into the toolbar
  band, three SheetSection blocks for sidecar status, streams, cache.
* MeshRouteDetailSheet: adds Overview/Events/Raw tabs, lifts Test probe
  into the toolbar primary slot, footer surfaces last probe latency.

* feat(frontend): migrate security and scheduled sheets to §9.11 chrome

PR 2 of the System Sheet (§9.11) rollout, stacked on the SystemSheet
primitive PR. Migrates six more sheet consumers and merges the Stack
alert + auto-heal sheets into a single tabbed sheet per audit §17.

Sheets migrated:
* NodeUpdatesSheet: crumb Fleet > Updates, Recheck primary, Update-all
  secondary when applicable. Stat tiles and node rows lose their
  card-in-sheet wrapping (forbidden by §9.11) for flat dividers.
* StackAlertSheet (now the merged stack monitor): tabs Alerts /
  Auto-heal, crumb Stack > {name} > Monitor. New initialTab prop lets
  callers open directly to either tab. Auto-heal tab is hidden entirely
  for Community-tier users (matches the existing tier-gating on the
  context menu trigger and keyboard shortcut).
* StackAutoHealSheet.tsx: deleted. Its body became the Auto-heal tab
  inside the merged sheet.
* VulnerabilityScanSheet: removed the icon-prefixed title (forbidden by
  §9.11). Re-scan, Compare, CSV, SARIF lifted from body cards into the
  toolbar band. Tabs Vulnerabilities | Secrets | Misconfigs (counts on
  the tab labels). SBOM dropdown stays in the body summary section
  pending a primitive enhancement for dropdown-attached toolbar actions.
* ScanComparisonSheet: crumb Security > Scans > Compare, name Diff,
  meta with the +added/-removed delta.
* SecurityHistoryView: the inner sheet only. Crumb Security > Scan
  history. Compare (paid + 2 selected) and Refresh in toolbar.
* ScheduledOperationsView run-history sheet (lines ~847-935 only):
  crumb Schedules > {taskName} > Runs, Download CSV in toolbar, footer
  surfaces next-run timestamp.

Hook refactor:
* useOverlayState replaces three separate state vars (alertSheetOpen,
  alertSheetStack, autoHealStackName) with one stackMonitor object
  carrying { stackName, tab }. New helpers openAlertSheet(stackName),
  openAutoHeal(stackName), closeStackMonitor(). Tests rewritten and
  pass (11/11).
* useSidebarContextMenu and ShellOverlays updated for the new API. The
  three other call sites (useStackMenuItems, useStackKeyboardShortcuts)
  already use openAlertSheet/openAutoHeal and need no change.
This commit is contained in:
Anso
2026-05-06 23:19:16 -04:00
committed by GitHub
parent 4d9617a5c6
commit 3ec0a45ff0
11 changed files with 1307 additions and 1507 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/EditorLayout/ShellOverlays.tsx
+6 -14
View File
@@ -5,7 +5,6 @@ import { PolicyBlockDialog } from '../stack/PolicyBlockDialog';
import { DeleteStackDialog } from './DeleteStackDialog';
import { UnsavedChangesDialog } from './UnsavedChangesDialog';
import { StackAlertSheet } from '../StackAlertSheet';
import { StackAutoHealSheet } from '@/components/StackAutoHealSheet';
import { GitSourcePanel } from '../stack/GitSourcePanel';
import { LogViewer } from '../LogViewer';
import { VulnerabilityScanSheet } from '../VulnerabilityScanSheet';
@@ -54,9 +53,8 @@ export function ShellOverlays({
pendingUnsavedLoad,
bashModalOpen, selectedContainer,
logViewerOpen, logContainer,
alertSheetOpen, closeAlertSheet, alertSheetStack,
stackMonitor, closeStackMonitor,
policyBlock, setPolicyBlock, policyBypassing,
autoHealStackName, setAutoHealStackName,
stackMisconfigScanId, setStackMisconfigScanId,
diffPreview, setDiffPreview, diffPreviewConfirming, setDiffPreviewConfirming,
} = overlayState;
@@ -96,11 +94,12 @@ export function ShellOverlays({
/>
)}
{/* Stack Alert Sheet */}
{/* Stack monitor (alerts + auto-heal as tabs) */}
<StackAlertSheet
isOpen={alertSheetOpen}
onClose={closeAlertSheet}
stackName={alertSheetStack}
open={stackMonitor !== null}
onOpenChange={(open) => { if (!open) closeStackMonitor(); }}
stackName={stackMonitor?.stackName ?? ''}
initialTab={stackMonitor?.tab ?? 'alerts'}
/>
{/* Pre-deploy policy block */}
@@ -114,13 +113,6 @@ export function ShellOverlays({
onBypass={stackActions.bypassPolicyAndDeploy}
/>
{/* Stack Auto-Heal Sheet */}
<StackAutoHealSheet
stackName={autoHealStackName ?? ''}
open={autoHealStackName !== null}
onOpenChange={(open) => { if (!open) setAutoHealStackName(null); }}
/>
{/* Git Source Panel */}
{stackName && (
<GitSourcePanel
frontend/src/components/EditorLayout/hooks/useOverlayState.test.ts
+12 -17
View File
@@ -14,9 +14,7 @@ describe('useOverlayState', () => {
expect(result.current.selectedContainer).toBeNull();
expect(result.current.logViewerOpen).toBe(false);
expect(result.current.logContainer).toBeNull();
expect(result.current.alertSheetOpen).toBe(false);
expect(result.current.alertSheetStack).toBe('');
expect(result.current.autoHealStackName).toBeNull();
expect(result.current.stackMonitor).toBeNull();
expect(result.current.policyBlock).toBeNull();
expect(result.current.policyBypassing).toBe(false);
expect(result.current.stackMisconfigScanId).toBeNull();
@@ -69,32 +67,29 @@ describe('useOverlayState', () => {
expect(result.current.logContainer).toBeNull();
});
it('openAlertSheet sets sheet state', () => {
it('openAlertSheet opens stack monitor on the alerts tab', () => {
const { result } = renderHook(() => useOverlayState());
act(() => result.current.openAlertSheet('web-stack'));
expect(result.current.alertSheetOpen).toBe(true);
expect(result.current.alertSheetStack).toBe('web-stack');
expect(result.current.stackMonitor).toEqual({ stackName: 'web-stack', tab: 'alerts' });
});
it('openAlertSheet with autoHeal sets autoHealStackName', () => {
it('openAutoHeal opens stack monitor on the auto-heal tab', () => {
const { result } = renderHook(() => useOverlayState());
act(() => result.current.openAlertSheet('web-stack', 'web-stack'));
expect(result.current.alertSheetOpen).toBe(true);
expect(result.current.alertSheetStack).toBe('web-stack');
expect(result.current.autoHealStackName).toBe('web-stack');
act(() => result.current.openAutoHeal('web-stack'));
expect(result.current.stackMonitor).toEqual({ stackName: 'web-stack', tab: 'auto-heal' });
});
it('openAlertSheet without autoHeal leaves autoHealStackName null', () => {
it('openAutoHeal after openAlertSheet switches to the auto-heal tab', () => {
const { result } = renderHook(() => useOverlayState());
act(() => result.current.openAlertSheet('web-stack'));
expect(result.current.alertSheetOpen).toBe(true);
expect(result.current.autoHealStackName).toBeNull();
act(() => result.current.openAutoHeal('web-stack'));
expect(result.current.stackMonitor).toEqual({ stackName: 'web-stack', tab: 'auto-heal' });
});
it('closeAlertSheet sets alertSheetOpen to false', () => {
it('closeStackMonitor clears the stack monitor state', () => {
const { result } = renderHook(() => useOverlayState());
act(() => result.current.openAlertSheet('web-stack'));
act(() => result.current.closeAlertSheet());
expect(result.current.alertSheetOpen).toBe(false);
act(() => result.current.closeStackMonitor());
expect(result.current.stackMonitor).toBeNull();
});
});
frontend/src/components/EditorLayout/hooks/useOverlayState.ts
+8 -10
View File
@@ -66,15 +66,14 @@ export function useOverlayState() {
return () => window.removeEventListener(SENCHO_OPEN_LOGS_EVENT, handler);
}, [openLogViewer]); // openLogViewer is stable (useCallback with empty deps)
const [alertSheetOpen, setAlertSheetOpen] = useState(false);
const [alertSheetStack, setAlertSheetStack] = useState('');
const [autoHealStackName, setAutoHealStackName] = useState<string | null>(null);
const openAlertSheet = useCallback((stackName: string, autoHeal?: string | null) => {
setAlertSheetStack(stackName);
setAutoHealStackName(autoHeal ?? null);
setAlertSheetOpen(true);
const [stackMonitor, setStackMonitor] = useState<{ stackName: string; tab: 'alerts' | 'auto-heal' } | null>(null);
const openAlertSheet = useCallback((stackName: string) => {
setStackMonitor({ stackName, tab: 'alerts' });
}, []);
const closeAlertSheet = useCallback(() => setAlertSheetOpen(false), []);
const openAutoHeal = useCallback((stackName: string) => {
setStackMonitor({ stackName, tab: 'auto-heal' });
}, []);
const closeStackMonitor = useCallback(() => setStackMonitor(null), []);
const [policyBlock, setPolicyBlock] = useState<PolicyBlock | null>(null);
const [policyBypassing, setPolicyBypassing] = useState(false);
@@ -91,8 +90,7 @@ export function useOverlayState() {
pendingUnsavedNode, setPendingUnsavedNode,
bashModalOpen, selectedContainer, openBashModal, closeBashModal,
logViewerOpen, logContainer, openLogViewer, closeLogViewer,
alertSheetOpen, alertSheetStack, autoHealStackName, openAlertSheet, closeAlertSheet,
setAutoHealStackName,
stackMonitor, openAlertSheet, openAutoHeal, closeStackMonitor,
policyBlock, setPolicyBlock, policyBypassing, setPolicyBypassing,
stackMisconfigScanId, setStackMisconfigScanId,
diffPreview, setDiffPreview, diffPreviewConfirming, setDiffPreviewConfirming,
frontend/src/components/EditorLayout/hooks/useSidebarContextMenu.ts
+1 -1
View File
@@ -49,7 +49,7 @@ export function useSidebarContextMenu({
menuVisibility: stackActions.getStackMenuVisibility(file),
autoUpdateEnabled: stackListState.autoUpdateSettings[sName] ?? true,
openAlertSheet: () => overlayState.openAlertSheet(file),
openAutoHeal: () => overlayState.setAutoHealStackName(file),
openAutoHeal: () => overlayState.openAutoHeal(file),
checkUpdates: () => stackActions.checkUpdatesForStack(),
openStackApp: () => stackActions.openStackApp(file),
deploy: () => stackActions.executeStackActionByFile(file, 'deploy', 'deploy'),
frontend/src/components/FleetView/NodeUpdatesSheet.tsx
+145 -160
View File
@@ -3,8 +3,7 @@ import {
Search, Loader2, Check, CircleCheck, CircleAlert, AlertTriangle,
Download, RefreshCw, Monitor, Globe,
} from 'lucide-react';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { ScrollArea } from '@/components/ui/scroll-area';
import { SystemSheet, SheetSection } from '@/components/ui/system-sheet';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
@@ -64,174 +63,160 @@ export function NodeUpdatesSheet({
const localEntry = updateStatuses.find(s => s.type === 'local') ?? updateStatuses[0];
const gatewayLabel = formatVersion(localEntry?.latestVersion);
const meta = updateStatuses.length === 0
? 'No nodes'
: `${updateStatuses.length} nodes · ${available} update${available === 1 ? '' : 's'} available`;
const footerContext = updateStatuses.length === 0
? undefined
: (gatewayLabel ? `Latest version ${gatewayLabel}` : `${available} update${available === 1 ? '' : 's'} available`);
const secondaryActions = canBulkUpdate && updatableRemoteCount > 0
? [{
label: `Update all (${updatableRemoteCount})`,
icon: Download,
onClick: () => { void triggerUpdateAll(); },
}]
: undefined;
return (
<Sheet open={open} onOpenChange={handleOpenChange}>
<SheetContent side="right" className="w-[700px] sm:max-w-[700px] flex flex-col p-0">
<SheetHeader className="px-6 pt-6 pb-4 shrink-0 border-b">
<SheetTitle>Node Updates</SheetTitle>
<SheetDescription className="sr-only">Check and apply updates across your fleet nodes.</SheetDescription>
</SheetHeader>
{checkingUpdates ? (
<div className="flex flex-1 items-center justify-center text-muted-foreground text-sm gap-2">
<Loader2 className="w-4 h-4 animate-spin" />
Checking for updates...
</div>
) : updateStatuses.length === 0 ? (
<div className="flex flex-1 items-center justify-center text-muted-foreground text-sm">
No nodes found.
</div>
) : (
<div className="flex flex-col flex-1 min-h-0">
{/* Summary stats */}
<div className="px-6 pt-4 pb-3 shrink-0">
<div className="grid grid-cols-4 gap-2">
<div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel px-3 py-2 text-center">
<div className="text-lg font-medium tabular-nums tracking-tight text-stat-value">{upToDate}</div>
<div className="text-[10px] text-stat-subtitle flex items-center justify-center gap-1">
<CircleCheck className="w-3 h-3 text-success" strokeWidth={1.5} /> Up to date
</div>
<SystemSheet
open={open}
onOpenChange={handleOpenChange}
crumb={['Fleet', 'Updates']}
name="Node updates"
meta={meta}
primaryAction={{
label: 'Recheck',
icon: recheckingUpdates ? Loader2 : RefreshCw,
onClick: () => { void handleRecheck(); },
disabled: recheckingUpdates || checkingUpdates,
}}
secondaryActions={secondaryActions}
footerContext={footerContext}
size="lg"
>
{checkingUpdates ? (
<div className="flex items-center justify-center py-12 text-muted-foreground text-sm gap-2">
<Loader2 className="w-4 h-4 animate-spin" />
Checking for updates...
</div>
) : updateStatuses.length === 0 ? (
<div className="flex items-center justify-center py-12 text-muted-foreground text-sm">
No nodes found.
</div>
) : (
<>
<SheetSection title="Summary">
<div className="grid grid-cols-4 gap-x-4 divide-x divide-card-border/40 text-center">
<div className="px-2">
<div className="text-lg font-medium tabular-nums tracking-tight text-stat-value">{upToDate}</div>
<div className="text-[10px] text-stat-subtitle flex items-center justify-center gap-1">
<CircleCheck className="w-3 h-3 text-success" strokeWidth={1.5} /> Up to date
</div>
<div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel px-3 py-2 text-center">
<div className="text-lg font-medium tabular-nums tracking-tight text-stat-value">{available}</div>
<div className="text-[10px] text-stat-subtitle flex items-center justify-center gap-1">
<CircleAlert className="w-3 h-3 text-warning" strokeWidth={1.5} /> Available
</div>
</div>
<div className="px-2">
<div className="text-lg font-medium tabular-nums tracking-tight text-stat-value">{available}</div>
<div className="text-[10px] text-stat-subtitle flex items-center justify-center gap-1">
<CircleAlert className="w-3 h-3 text-warning" strokeWidth={1.5} /> Available
</div>
<div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel px-3 py-2 text-center">
<div className="text-lg font-medium tabular-nums tracking-tight text-stat-value">{updating}</div>
<div className="text-[10px] text-stat-subtitle flex items-center justify-center gap-1">
<Loader2 className="w-3 h-3 text-brand" strokeWidth={1.5} /> Updating
</div>
</div>
<div className="px-2">
<div className="text-lg font-medium tabular-nums tracking-tight text-stat-value">{updating}</div>
<div className="text-[10px] text-stat-subtitle flex items-center justify-center gap-1">
<Loader2 className="w-3 h-3 text-brand" strokeWidth={1.5} /> Updating
</div>
<div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel px-3 py-2 text-center">
<div className="text-lg font-medium tabular-nums tracking-tight text-stat-value">{failed}</div>
<div className="text-[10px] text-stat-subtitle flex items-center justify-center gap-1">
<AlertTriangle className="w-3 h-3 text-destructive/70" strokeWidth={1.5} /> Failed
</div>
</div>
<div className="px-2">
<div className="text-lg font-medium tabular-nums tracking-tight text-stat-value">{failed}</div>
<div className="text-[10px] text-stat-subtitle flex items-center justify-center gap-1">
<AlertTriangle className="w-3 h-3 text-destructive/70" strokeWidth={1.5} /> Failed
</div>
</div>
</div>
</SheetSection>
{/* Search + gateway version */}
<div className="flex items-center gap-2 px-6 pb-3 shrink-0">
<div className="relative flex-1">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
<Input
placeholder="Filter nodes..."
value={search}
onChange={e => setSearch(e.target.value)}
className="h-8 pl-8 text-xs"
/>
</div>
{gatewayLabel && (
<div className="text-[11px] text-muted-foreground shrink-0">
Latest: <span className="font-mono tabular-nums text-foreground">{gatewayLabel}</span>
<SheetSection title={`Nodes · ${updateStatuses.length}`}>
<div className="relative mb-3">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
<Input
placeholder="Filter nodes..."
value={search}
onChange={e => setSearch(e.target.value)}
className="h-8 pl-8 text-xs"
/>
</div>
<div className="grid grid-cols-[1fr_80px_100px_100px_120px] gap-2 px-3 pb-1 text-[10px] leading-3 font-mono text-stat-subtitle uppercase tracking-[0.18em]">
<span>Node</span>
<span>Type</span>
<span>Current</span>
<span>Latest</span>
<span className="text-right">Status</span>
</div>
<div className="divide-y divide-card-border/40">
{filtered.map(s => (
<div key={s.nodeId} className="grid grid-cols-[1fr_80px_100px_100px_120px] gap-2 items-center px-3 py-2">
<div className="flex items-center gap-2.5 min-w-0">
<div className={`flex items-center justify-center w-6 h-6 rounded-md shrink-0 ${s.updateAvailable && !s.updateStatus ? 'bg-warning/10' : 'bg-muted'}`}>
{s.type === 'local'
? <Monitor className={`w-3 h-3 ${s.updateAvailable && !s.updateStatus ? 'text-warning' : 'text-muted-foreground'}`} strokeWidth={1.5} />
: <Globe className={`w-3 h-3 ${s.updateAvailable && !s.updateStatus ? 'text-warning' : 'text-muted-foreground'}`} strokeWidth={1.5} />
}
</div>
<span className="text-sm font-medium truncate">{s.name}</span>
</div>
<Badge variant="outline" className="text-[10px] px-1.5 py-0 h-4 w-fit">
{s.type}
</Badge>
<span className="text-xs font-mono tabular-nums text-muted-foreground">
{formatVersion(s.version) ?? <span className="text-muted-foreground/50 italic text-[10px]">unknown</span>}
</span>
<span className="text-xs font-mono tabular-nums">
{formatVersion(s.latestVersion) ?? <span className="text-muted-foreground/50 italic text-[10px]">unknown</span>}
</span>
<div className="flex justify-end">
{s.updateStatus && (
<UpdateStatusBadge
status={s.updateStatus}
error={s.error}
onRetry={() => retryNodeUpdate(s.nodeId)}
onDismiss={() => dismissNodeUpdate(s.nodeId)}
/>
)}
{!s.updateStatus && !s.updateAvailable && (
<Badge className="text-[10px] px-1.5 py-0 h-5 bg-success-muted text-success border-success/30">
<Check className="w-2.5 h-2.5 mr-0.5" /> Up to date
</Badge>
)}
{s.updateAvailable && !s.updateStatus && (
<Button
variant="outline"
size="sm"
className="h-6 text-[11px] px-2.5"
onClick={() => triggerNodeUpdate(s.nodeId)}
disabled={updatingNodeId === s.nodeId}
>
{updatingNodeId === s.nodeId ? (
<><Loader2 className="w-3 h-3 mr-1 animate-spin" />Updating</>
) : (
<><Download className="w-3 h-3 mr-1" strokeWidth={1.5} />Update</>
)}
</Button>
)}
</div>
</div>
))}
{filtered.length === 0 && (
<div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
No nodes match &ldquo;{search}&rdquo;
</div>
)}
</div>
{/* Table column header */}
<div className="px-6 pb-2 shrink-0">
<div className="grid grid-cols-[1fr_80px_100px_100px_120px] gap-2 px-3 text-[10px] leading-3 font-mono text-stat-subtitle uppercase tracking-[0.18em]">
<span>Node</span>
<span>Type</span>
<span>Current</span>
<span>Latest</span>
<span className="text-right">Status</span>
</div>
</div>
{/* Node list — fills remaining height, no cap */}
<ScrollArea className="flex-1 min-h-0 px-6">
<div className="space-y-1 pb-2">
{filtered.map(s => (
<div key={s.nodeId} className="grid grid-cols-[1fr_80px_100px_100px_120px] gap-2 items-center rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel px-3 py-2">
<div className="flex items-center gap-2.5 min-w-0">
<div className={`flex items-center justify-center w-6 h-6 rounded-md shrink-0 ${s.updateAvailable && !s.updateStatus ? 'bg-warning/10' : 'bg-muted'}`}>
{s.type === 'local'
? <Monitor className={`w-3 h-3 ${s.updateAvailable && !s.updateStatus ? 'text-warning' : 'text-muted-foreground'}`} strokeWidth={1.5} />
: <Globe className={`w-3 h-3 ${s.updateAvailable && !s.updateStatus ? 'text-warning' : 'text-muted-foreground'}`} strokeWidth={1.5} />
}
</div>
<span className="text-sm font-medium truncate">{s.name}</span>
</div>
<Badge variant="outline" className="text-[10px] px-1.5 py-0 h-4 w-fit">
{s.type}
</Badge>
<span className="text-xs font-mono tabular-nums text-muted-foreground">
{formatVersion(s.version) ?? <span className="text-muted-foreground/50 italic text-[10px]">unknown</span>}
</span>
<span className="text-xs font-mono tabular-nums">
{formatVersion(s.latestVersion) ?? <span className="text-muted-foreground/50 italic text-[10px]">unknown</span>}
</span>
<div className="flex justify-end">
{s.updateStatus && (
<UpdateStatusBadge
status={s.updateStatus}
error={s.error}
onRetry={() => retryNodeUpdate(s.nodeId)}
onDismiss={() => dismissNodeUpdate(s.nodeId)}
/>
)}
{!s.updateStatus && !s.updateAvailable && (
<Badge className="text-[10px] px-1.5 py-0 h-5 bg-success-muted text-success border-success/30">
<Check className="w-2.5 h-2.5 mr-0.5" /> Up to date
</Badge>
)}
{s.updateAvailable && !s.updateStatus && (
<Button
variant="outline"
size="sm"
className="h-6 text-[11px] px-2.5"
onClick={() => triggerNodeUpdate(s.nodeId)}
disabled={updatingNodeId === s.nodeId}
>
{updatingNodeId === s.nodeId ? (
<><Loader2 className="w-3 h-3 mr-1 animate-spin" />Updating</>
) : (
<><Download className="w-3 h-3 mr-1" strokeWidth={1.5} />Update</>
)}
</Button>
)}
</div>
</div>
))}
{filtered.length === 0 && (
<div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
No nodes match &ldquo;{search}&rdquo;
</div>
)}
</div>
</ScrollArea>
{/* Footer */}
<div className="flex items-center justify-between px-6 py-4 border-t border-border/50 shrink-0">
<Button
variant="ghost"
size="sm"
className="h-7 text-xs text-muted-foreground"
disabled={recheckingUpdates}
onClick={handleRecheck}
>
<RefreshCw className={`w-3 h-3 mr-1.5 ${recheckingUpdates ? 'animate-spin' : ''}`} strokeWidth={1.5} />
Recheck
</Button>
{canBulkUpdate && updatableRemoteCount > 0 && (
<Button
variant="outline"
size="sm"
onClick={triggerUpdateAll}
className="h-7 gap-1.5"
>
<Download className="w-3.5 h-3.5" strokeWidth={1.5} />
Update All ({updatableRemoteCount})
</Button>
)}
</div>
</div>
)}
</SheetContent>
</Sheet>
</SheetSection>
</>
)}
</SystemSheet>
);
}
frontend/src/components/ScanComparisonSheet.tsx
+170 -173
View File
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { SystemSheet, SheetSection } from '@/components/ui/system-sheet';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Button } from '@/components/ui/button';
import {
@@ -14,7 +14,6 @@ import {
ArrowRight,
ChevronLeft,
ChevronRight,
GitCompare,
Loader2,
MinusCircle,
PlusCircle,
@@ -145,93 +144,93 @@ export function ScanComparisonSheet({
const pageItems = rows.slice(safePage * PAGE_SIZE, (safePage + 1) * PAGE_SIZE);
const needsPagination = rows.length > PAGE_SIZE;
const meta = data
? `#${data.scanA.id} → #${data.scanB.id} · +${data.added.length} −${data.removed.length}`
: (loading ? 'Loading…' : '');
const footerContext = data
? `${data.scanA.image_ref} → ${data.scanB.image_ref}`
: undefined;
return (
<Sheet open={open} onOpenChange={(o) => !o && onClose()}>
<SheetContent className="sm:max-w-4xl flex flex-col p-0">
<SheetHeader className="px-6 pt-6 pb-4 pr-14 border-b border-border space-y-2">
<div className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
Scan comparison
</div>
<SheetTitle className="flex items-center gap-2 font-display italic text-2xl">
<GitCompare className="w-5 h-5 text-muted-foreground not-italic" strokeWidth={1.5} />
Diff
</SheetTitle>
<SheetDescription className="sr-only">
Side-by-side comparison of two vulnerability scans showing added, removed, and unchanged findings.
</SheetDescription>
</SheetHeader>
<SystemSheet
open={open}
onOpenChange={(o) => !o && onClose()}
crumb={['Security', 'Scans', 'Compare']}
name="Diff"
meta={meta}
footerContext={footerContext}
size="xl"
>
{loading && (
<div className="flex items-center justify-center py-12">
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" strokeWidth={1.5} />
</div>
)}
{loading && (
<div className="flex items-center justify-center flex-1">
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" strokeWidth={1.5} />
</div>
)}
{data && !loading && (
<div className="flex flex-col flex-1 min-h-0">
{/* Scan identification */}
<div className="px-6 py-4 border-b space-y-3">
<div className="flex items-center gap-3 text-xs font-mono tabular-nums">
<div className="flex-1 min-w-0">
<div className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">Baseline</div>
<div className="text-stat-value truncate">{data.scanA.image_ref}</div>
<div className="text-stat-subtitle tabular-nums">{new Date(data.scanA.scanned_at).toLocaleString()}</div>
</div>
<ArrowRight className="w-4 h-4 text-muted-foreground shrink-0" strokeWidth={1.5} />
<div className="flex-1 min-w-0">
<div className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">Current</div>
<div className="text-stat-value truncate">{data.scanB.image_ref}</div>
<div className="text-stat-subtitle tabular-nums">{new Date(data.scanB.scanned_at).toLocaleString()}</div>
</div>
{data && !loading && (
<>
<SheetSection title="Scans">
<div className="flex items-center gap-3 text-xs font-mono tabular-nums mb-3">
<div className="flex-1 min-w-0">
<div className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">Baseline</div>
<div className="text-stat-value truncate">{data.scanA.image_ref}</div>
<div className="text-stat-subtitle tabular-nums">{new Date(data.scanA.scanned_at).toLocaleString()}</div>
</div>
<ArrowRight className="w-4 h-4 text-muted-foreground shrink-0" strokeWidth={1.5} />
<div className="flex-1 min-w-0">
<div className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">Current</div>
<div className="text-stat-value truncate">{data.scanB.image_ref}</div>
<div className="text-stat-subtitle tabular-nums">{new Date(data.scanB.scanned_at).toLocaleString()}</div>
</div>
{crossImage && (
<div className="flex items-start gap-2 rounded border border-warning/40 bg-warning/10 px-3 py-2 text-xs text-warning">
<AlertTriangle className="w-3.5 h-3.5 shrink-0 mt-[1px]" strokeWidth={1.5} />
<span>
You are comparing scans from two different image references. Package-level changes may reflect image differences rather than CVE drift.
</span>
</div>
)}
{data.truncated && (
<div
role="alert"
className="flex items-start gap-2 rounded border border-warning/40 bg-warning/10 px-3 py-2 text-xs text-warning"
>
<AlertTriangle className="w-3.5 h-3.5 shrink-0 mt-[1px]" strokeWidth={1.5} />
<span>
Showing the first {data.row_limit ?? 1000} findings per scan. One or both scans exceed this limit, so the comparison may be incomplete.
</span>
</div>
)}
{/* Delta ribbon */}
{addedCounts && removedCounts && (
<div className="flex flex-wrap gap-2">
{(['CRITICAL', 'HIGH', 'MEDIUM', 'LOW'] as VulnSeverity[]).map((sev) => {
const delta = formatDelta(sev, addedCounts[sev], removedCounts[sev]);
return (
<span
key={sev}
aria-label={`${sev} delta ${delta.text}`}
data-tone={delta.tone}
className={cn(
'inline-flex items-center gap-1.5 rounded border px-2 py-1 text-xs font-mono tabular-nums shadow-card-bevel',
DELTA_TONE_CLASS[delta.tone],
)}
>
<span className="uppercase tracking-[0.18em] text-[10px]">{sev}</span>
<span>{delta.text}</span>
</span>
);
})}
</div>
)}
</div>
{/* Filter pills */}
<div className="px-6 pt-3 flex items-center gap-1 flex-wrap">
{crossImage && (
<div className="flex items-start gap-2 rounded border border-warning/40 bg-warning/10 px-3 py-2 mb-3 text-xs text-warning">
<AlertTriangle className="w-3.5 h-3.5 shrink-0 mt-[1px]" strokeWidth={1.5} />
<span>
You are comparing scans from two different image references. Package-level changes may reflect image differences rather than CVE drift.
</span>
</div>
)}
{data.truncated && (
<div
role="alert"
className="flex items-start gap-2 rounded border border-warning/40 bg-warning/10 px-3 py-2 mb-3 text-xs text-warning"
>
<AlertTriangle className="w-3.5 h-3.5 shrink-0 mt-[1px]" strokeWidth={1.5} />
<span>
Showing the first {data.row_limit ?? 1000} findings per scan. One or both scans exceed this limit, so the comparison may be incomplete.
</span>
</div>
)}
{addedCounts && removedCounts && (
<div className="flex flex-wrap gap-2">
{(['CRITICAL', 'HIGH', 'MEDIUM', 'LOW'] as VulnSeverity[]).map((sev) => {
const delta = formatDelta(sev, addedCounts[sev], removedCounts[sev]);
return (
<span
key={sev}
aria-label={`${sev} delta ${delta.text}`}
data-tone={delta.tone}
className={cn(
'inline-flex items-center gap-1.5 rounded border px-2 py-1 text-xs font-mono tabular-nums shadow-card-bevel',
DELTA_TONE_CLASS[delta.tone],
)}
>
<span className="uppercase tracking-[0.18em] text-[10px]">{sev}</span>
<span>{delta.text}</span>
</span>
);
})}
</div>
)}
</SheetSection>
<SheetSection title={`Findings · ${filter}`}>
<div className="flex items-center gap-1 flex-wrap mb-3">
<Button
variant={filter === 'added' ? 'default' : 'ghost'}
size="sm"
@@ -296,98 +295,96 @@ export function ScanComparisonSheet({
)}
</div>
<ScrollArea className="flex-1 min-h-0">
<div className="px-6 py-3">
{pageItems.length === 0 ? (
<div className="flex flex-col items-center justify-center text-center py-16 gap-2">
<ShieldCheck className="w-8 h-8 text-success" strokeWidth={1.5} />
<div className="text-sm text-muted-foreground">
{filter === 'added' && 'No new findings. Nothing regressed between these scans.'}
{filter === 'removed' && 'No findings were resolved between these scans.'}
{filter === 'unchanged' && 'No findings are shared between the two scans.'}
</div>
<ScrollArea block className="max-h-[60vh]">
{pageItems.length === 0 ? (
<div className="flex flex-col items-center justify-center text-center py-16 gap-2">
<ShieldCheck className="w-8 h-8 text-success" strokeWidth={1.5} />
<div className="text-sm text-muted-foreground">
{filter === 'added' && 'No new findings. Nothing regressed between these scans.'}
{filter === 'removed' && 'No findings were resolved between these scans.'}
{filter === 'unchanged' && 'No findings are shared between the two scans.'}
</div>
) : (
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[180px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">CVE</TableHead>
<TableHead className="text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Package</TableHead>
<TableHead className="w-[100px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Severity</TableHead>
<TableHead className="w-[110px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{pageItems.map((v, idx) => {
const href = cveUrl(v.vulnerability_id, v.primary_url);
const rowClass = cn(
SEVERITY_ROW_TINT[v.severity],
filter === 'unchanged' && 'opacity-75',
v.suppressed && 'opacity-60',
);
return (
<TableRow key={`${v.vulnerability_id}-${v.pkg_name}-${idx}`} className={rowClass}>
<TableCell className="font-mono text-xs tabular-nums">
<span className="inline-flex items-center gap-1.5">
{v.suppressed && (
<ShieldOff
className="w-3 h-3 text-muted-foreground"
strokeWidth={1.5}
aria-label="Suppressed"
/>
)}
{href ? (
<a
href={href}
target="_blank"
rel="noreferrer noopener"
className="hover:underline"
>
{v.vulnerability_id}
</a>
) : (
v.vulnerability_id
)}
</div>
) : (
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[180px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">CVE</TableHead>
<TableHead className="text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Package</TableHead>
<TableHead className="w-[100px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Severity</TableHead>
<TableHead className="w-[110px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{pageItems.map((v, idx) => {
const href = cveUrl(v.vulnerability_id, v.primary_url);
const rowClass = cn(
SEVERITY_ROW_TINT[v.severity],
filter === 'unchanged' && 'opacity-75',
v.suppressed && 'opacity-60',
);
return (
<TableRow key={`${v.vulnerability_id}-${v.pkg_name}-${idx}`} className={rowClass}>
<TableCell className="font-mono text-xs tabular-nums">
<span className="inline-flex items-center gap-1.5">
{v.suppressed && (
<ShieldOff
className="w-3 h-3 text-muted-foreground"
strokeWidth={1.5}
aria-label="Suppressed"
/>
)}
{href ? (
<a
href={href}
target="_blank"
rel="noreferrer noopener"
className="hover:underline"
>
{v.vulnerability_id}
</a>
) : (
v.vulnerability_id
)}
</span>
</TableCell>
<TableCell className="font-mono text-xs truncate max-w-[180px]" title={v.pkg_name}>
{v.pkg_name}
</TableCell>
<TableCell>
<SeverityChip severity={v.severity} />
</TableCell>
<TableCell className="font-mono text-xs">
{filter === 'added' && (
<span className="inline-flex items-center gap-1 text-destructive">
<PlusCircle className="w-3 h-3" strokeWidth={1.5} />
Added
</span>
</TableCell>
<TableCell className="font-mono text-xs truncate max-w-[180px]" title={v.pkg_name}>
{v.pkg_name}
</TableCell>
<TableCell>
<SeverityChip severity={v.severity} />
</TableCell>
<TableCell className="font-mono text-xs">
{filter === 'added' && (
<span className="inline-flex items-center gap-1 text-destructive">
<PlusCircle className="w-3 h-3" strokeWidth={1.5} />
Added
</span>
)}
{filter === 'removed' && (
<span className="inline-flex items-center gap-1 text-success">
<MinusCircle className="w-3 h-3" strokeWidth={1.5} />
Removed
</span>
)}
{filter === 'unchanged' && (
<span className="inline-flex items-center gap-1 text-muted-foreground">
<Equal className="w-3 h-3" strokeWidth={1.5} />
{crossImage ? 'Shared' : 'Unchanged'}
</span>
)}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
)}
</div>
)}
{filter === 'removed' && (
<span className="inline-flex items-center gap-1 text-success">
<MinusCircle className="w-3 h-3" strokeWidth={1.5} />
Removed
</span>
)}
{filter === 'unchanged' && (
<span className="inline-flex items-center gap-1 text-muted-foreground">
<Equal className="w-3 h-3" strokeWidth={1.5} />
{crossImage ? 'Shared' : 'Unchanged'}
</span>
)}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
)}
</ScrollArea>
</div>
)}
</SheetContent>
</Sheet>
</SheetSection>
</>
)}
</SystemSheet>
);
}
frontend/src/components/ScheduledOperationsView.tsx
+26 -33
View File
@@ -5,8 +5,7 @@ import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Modal, ModalHeader, ModalBody, ModalFooter, ConfirmModal } from '@/components/ui/modal';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { ScrollArea } from '@/components/ui/scroll-area';
import { SystemSheet, SheetSection } from '@/components/ui/system-sheet';
import { TogglePill } from '@/components/ui/toggle-pill';
import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
@@ -844,31 +843,27 @@ export default function ScheduledOperationsView({ filterNodeId, onClearFilter, p
</ConfirmModal>
{/* Run History Sheet */}
<Sheet open={!!runsTask} onOpenChange={(open) => { if (!open) setRunsTask(null); }}>
<SheetContent className="sm:max-w-xl">
<SheetHeader>
<div className="flex items-center justify-between">
<SheetTitle>Execution History - {runsTask?.name}</SheetTitle>
{runsTask && runs.length > 0 && (
<Button
variant="ghost"
size="sm"
onClick={() => window.open(`/api/scheduled-tasks/${runsTask.id}/runs/export`, '_blank')}
title="Export as CSV"
>
<Download className="w-4 h-4" strokeWidth={1.5} />
</Button>
)}
</div>
</SheetHeader>
<ScrollArea className="mt-4 flex-1" style={{ maxHeight: 'calc(100vh - 10rem)' }}>
<div>
{runsLoading ? (
<div className="text-center text-muted-foreground py-8">Loading...</div>
) : runs.length === 0 ? (
<div className="text-center text-muted-foreground py-8">No executions yet.</div>
) : (
<>
<SystemSheet
open={!!runsTask}
onOpenChange={(open) => { if (!open) setRunsTask(null); }}
crumb={['Schedules', runsTask?.name ?? '—', 'Runs']}
name={runsTask?.name ?? 'Run history'}
meta={`${runsTotal} run${runsTotal === 1 ? '' : 's'}`}
secondaryActions={runsTask && runs.length > 0 ? [{
label: 'Download CSV',
icon: Download,
onClick: () => window.open(`/api/scheduled-tasks/${runsTask.id}/runs/export`, '_blank'),
}] : undefined}
footerContext={runsTask?.next_run_at ? `Next run ${formatTimestamp(runsTask.next_run_at)}` : undefined}
size="lg"
>
<SheetSection title="Executions" hideHeader>
{runsLoading ? (
<div className="text-center text-muted-foreground py-8">Loading...</div>
) : runs.length === 0 ? (
<div className="text-center text-muted-foreground py-8">No executions yet.</div>
) : (
<>
<Table>
<TableHeader>
<TableRow>
@@ -927,12 +922,10 @@ export default function ScheduledOperationsView({ filterNodeId, onClearFilter, p
</div>
</div>
)}
</>
)}
</div>
</ScrollArea>
</SheetContent>
</Sheet>
</>
)}
</SheetSection>
</SystemSheet>
</div>
);
}
frontend/src/components/SecurityHistoryView.tsx
+162 -189
View File
@@ -3,13 +3,7 @@ import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { ScrollArea } from '@/components/ui/scroll-area';
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from '@/components/ui/sheet';
import { SystemSheet, SheetSection } from '@/components/ui/system-sheet';
import {
Table,
TableBody,
@@ -153,198 +147,177 @@ export function SecurityHistoryView({ open, onClose }: SecurityHistoryViewProps)
};
const compareDisabled = selected.length !== 2;
const meta = `${total} scan${total === 1 ? '' : 's'} · ${groups.length} image${groups.length === 1 ? '' : 's'}`;
const footerContext = `Node ${activeNode?.name ?? '—'}`;
return (
<Sheet open={open} onOpenChange={(next) => { if (!next) onClose(); }}>
<SheetContent className="sm:max-w-4xl flex flex-col p-0 gap-0">
<SheetHeader className="px-6 pt-6 pb-4 pr-14 border-b border-border space-y-2">
<div className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
Security · Node {activeNode?.name ?? '-'}
<SystemSheet
open={open}
onOpenChange={(next) => { if (!next) onClose(); }}
crumb={['Security', 'Scan history']}
name="Scan history"
meta={meta}
primaryAction={isPaid ? {
label: `Compare (${selected.length}/2)`,
icon: GitCompare,
onClick: compareSelected,
disabled: compareDisabled,
} : undefined}
secondaryActions={[{
label: 'Refresh',
icon: RefreshCw,
onClick: () => load(safePage, search),
disabled: loading,
}]}
footerContext={footerContext}
size="xl"
>
<SheetSection title="Scans" hideHeader>
<div className="flex items-center gap-3 mb-3 flex-wrap">
<div className="relative flex-1 min-w-[200px] max-w-sm">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" strokeWidth={1.5} />
<Input
placeholder="Search by image..."
value={searchDraft}
onChange={(e) => setSearchDraft(e.target.value)}
className="pl-8"
/>
</div>
<div className="flex items-center justify-between gap-3">
<SheetTitle className="font-display italic text-2xl">Scan history</SheetTitle>
<div className="flex items-center gap-2">
{isPaid && (
<Button
variant="outline"
size="sm"
className="border-border"
onClick={compareSelected}
disabled={compareDisabled}
title={compareDisabled
? 'Select exactly two completed scans to compare'
: 'Compare the two selected scans'}
>
<GitCompare className="w-4 h-4 mr-2" strokeWidth={1.5} />
Compare ({selected.length}/2)
</Button>
)}
{needsPagination && (
<div className="flex items-center gap-1 ml-auto" aria-live="polite">
<Button
variant="outline"
size="sm"
className="border-border"
onClick={() => load(safePage, search)}
disabled={loading}
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => setPage(Math.max(0, safePage - 1))}
disabled={safePage === 0}
aria-label="Previous page"
>
<RefreshCw
className={cn('w-4 h-4 mr-2', loading && 'animate-spin')}
strokeWidth={1.5}
/>
Refresh
<ChevronLeft className="w-4 h-4" strokeWidth={1.5} />
</Button>
<span
className="text-xs font-mono tabular-nums text-stat-subtitle min-w-[3rem] text-center"
aria-label={`Page ${safePage + 1} of ${totalPages}`}
>
{safePage + 1} / {totalPages}
</span>
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => setPage(Math.min(totalPages - 1, safePage + 1))}
disabled={safePage >= totalPages - 1}
aria-label="Next page"
>
<ChevronRight className="w-4 h-4" strokeWidth={1.5} />
</Button>
</div>
</div>
<SheetDescription className="text-sm text-muted-foreground">
Completed vulnerability scans on this node, grouped by image. Select two to compare.
</SheetDescription>
</SheetHeader>
<div className="flex-1 flex flex-col px-6 py-4 overflow-hidden">
<div className="flex items-center gap-3 mb-4 flex-wrap">
<div className="relative flex-1 min-w-[200px] max-w-sm">
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" strokeWidth={1.5} />
<Input
placeholder="Search by image..."
value={searchDraft}
onChange={(e) => setSearchDraft(e.target.value)}
className="pl-8"
/>
</div>
{needsPagination && (
<div className="flex items-center gap-1 ml-auto" aria-live="polite">
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => setPage(Math.max(0, safePage - 1))}
disabled={safePage === 0}
aria-label="Previous page"
>
<ChevronLeft className="w-4 h-4" strokeWidth={1.5} />
</Button>
<span
className="text-xs font-mono tabular-nums text-stat-subtitle min-w-[3rem] text-center"
aria-label={`Page ${safePage + 1} of ${totalPages}`}
>
{safePage + 1} / {totalPages}
</span>
<Button
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => setPage(Math.min(totalPages - 1, safePage + 1))}
disabled={safePage >= totalPages - 1}
aria-label="Next page"
>
<ChevronRight className="w-4 h-4" strokeWidth={1.5} />
</Button>
</div>
)}
</div>
{groups.length === 0 && !loading ? (
<div className="flex flex-col items-center justify-center text-center py-16 gap-2">
<ShieldCheck className="w-8 h-8 text-muted-foreground" strokeWidth={1.5} />
<div className="text-sm text-muted-foreground">
{search
? 'No completed scans match your search.'
: 'No scans have completed on this node yet.'}
</div>
</div>
) : (
<ScrollArea className="flex-1 min-h-0">
<div className="space-y-5 pr-2">
{groups.map((group) => (
<div key={group.image_ref}>
<div className="flex items-center gap-2 mb-1.5">
<span className="font-mono text-sm truncate" title={group.image_ref}>
{group.image_ref}
</span>
<span className="text-xs text-stat-subtitle">
{group.scans.length} scan{group.scans.length === 1 ? '' : 's'}
</span>
</div>
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[40px]" />
<TableHead className="w-[180px]">Scanned</TableHead>
<TableHead className="w-[120px]">Trigger</TableHead>
<TableHead className="w-[120px]">Highest</TableHead>
<TableHead className="w-[90px] text-right">Total</TableHead>
<TableHead className="w-[90px] text-right">Fixable</TableHead>
<TableHead />
</TableRow>
</TableHeader>
<TableBody>
{group.scans.map((scan) => {
const isSelected = selected.includes(scan.id);
return (
<TableRow
key={scan.id}
className={cn(isSelected && 'bg-accent/30')}
>
<TableCell>
<Checkbox
checked={isSelected}
onCheckedChange={() => toggleSelect(scan.id)}
aria-label={`Select scan ${scan.id}`}
/>
</TableCell>
<TableCell className="font-mono text-xs">
{new Date(scan.scanned_at).toLocaleString()}
</TableCell>
<TableCell className="font-mono text-xs capitalize">
{scan.triggered_by}
</TableCell>
<TableCell>
{scan.highest_severity ? (
<SeverityChip severity={scan.highest_severity} />
) : (
<span className="text-xs text-success font-mono">none</span>
)}
</TableCell>
<TableCell className="text-right font-mono text-xs tabular-nums">
{scan.total_vulnerabilities}
</TableCell>
<TableCell className="text-right font-mono text-xs tabular-nums text-success">
{scan.fixable_count}
</TableCell>
<TableCell className="text-right">
<Button
variant="ghost"
size="sm"
className="h-7 text-xs"
onClick={() => setInspectScanId(scan.id)}
>
Open
</Button>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
))}
</div>
</ScrollArea>
)}
</div>
<ScanComparisonSheet
baselineScanId={compareIds?.[0] ?? null}
currentScanId={compareIds?.[1] ?? null}
onClose={() => setCompareIds(null)}
/>
{groups.length === 0 && !loading ? (
<div className="flex flex-col items-center justify-center text-center py-16 gap-2">
<ShieldCheck className="w-8 h-8 text-muted-foreground" strokeWidth={1.5} />
<div className="text-sm text-muted-foreground">
{search
? 'No completed scans match your search.'
: 'No scans have completed on this node yet.'}
</div>
</div>
) : (
<ScrollArea block className="max-h-[60vh]">
<div className="space-y-5">
{groups.map((group) => (
<div key={group.image_ref}>
<div className="flex items-center gap-2 mb-1.5">
<span className="font-mono text-sm truncate" title={group.image_ref}>
{group.image_ref}
</span>
<span className="text-xs text-stat-subtitle">
{group.scans.length} scan{group.scans.length === 1 ? '' : 's'}
</span>
</div>
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[40px]" />
<TableHead className="w-[180px]">Scanned</TableHead>
<TableHead className="w-[120px]">Trigger</TableHead>
<TableHead className="w-[120px]">Highest</TableHead>
<TableHead className="w-[90px] text-right">Total</TableHead>
<TableHead className="w-[90px] text-right">Fixable</TableHead>
<TableHead />
</TableRow>
</TableHeader>
<TableBody>
{group.scans.map((scan) => {
const isSelected = selected.includes(scan.id);
return (
<TableRow
key={scan.id}
className={cn(isSelected && 'bg-accent/30')}
>
<TableCell>
<Checkbox
checked={isSelected}
onCheckedChange={() => toggleSelect(scan.id)}
aria-label={`Select scan ${scan.id}`}
/>
</TableCell>
<TableCell className="font-mono text-xs">
{new Date(scan.scanned_at).toLocaleString()}
</TableCell>
<TableCell className="font-mono text-xs capitalize">
{scan.triggered_by}
</TableCell>
<TableCell>
{scan.highest_severity ? (
<SeverityChip severity={scan.highest_severity} />
) : (
<span className="text-xs text-success font-mono">none</span>
)}
</TableCell>
<TableCell className="text-right font-mono text-xs tabular-nums">
{scan.total_vulnerabilities}
</TableCell>
<TableCell className="text-right font-mono text-xs tabular-nums text-success">
{scan.fixable_count}
</TableCell>
<TableCell className="text-right">
<Button
variant="ghost"
size="sm"
className="h-7 text-xs"
onClick={() => setInspectScanId(scan.id)}
>
Open
</Button>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</div>
))}
</div>
</ScrollArea>
)}
</SheetSection>
<VulnerabilityScanSheet
scanId={inspectScanId}
onClose={() => setInspectScanId(null)}
canGenerateSbom={isPaid}
canCompare={false}
canManageSuppressions={isPaid && isAdmin}
/>
</SheetContent>
</Sheet>
<ScanComparisonSheet
baselineScanId={compareIds?.[0] ?? null}
currentScanId={compareIds?.[1] ?? null}
onClose={() => setCompareIds(null)}
/>
<VulnerabilityScanSheet
scanId={inspectScanId}
onClose={() => setInspectScanId(null)}
canGenerateSbom={isPaid}
canCompare={false}
canManageSuppressions={isPaid && isAdmin}
/>
</SystemSheet>
);
}
frontend/src/components/StackAlertSheet.tsx
+551 -190
View File
@@ -1,11 +1,5 @@
import { useState, useEffect } from 'react';
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from '@/components/ui/sheet';
import { SystemSheet, SheetSection } from '@/components/ui/system-sheet';
import {
AlertDialog,
AlertDialogAction,
@@ -20,13 +14,14 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Combobox } from '@/components/ui/combobox';
import { ScrollArea } from '@/components/ui/scroll-area';
import { TogglePill } from '@/components/ui/toggle-pill';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Trash2, HelpCircle, AlertTriangle, Info, CheckCircle2, Loader2 } from 'lucide-react';
import { Trash2, HelpCircle, AlertTriangle, Info, CheckCircle2, Loader2, ChevronDown, ChevronUp } from 'lucide-react';
import { toast } from '@/components/ui/toast-store';
import { apiFetch } from '@/lib/api';
import { useNodes } from '@/context/NodeContext';
import { useAuth } from '@/context/AuthContext';
import { useLicense } from '@/context/LicenseContext';
interface StackAlert {
id?: number;
@@ -38,10 +33,42 @@ interface StackAlert {
cooldown_mins: number;
}
interface AutoHealPolicy {
id?: number;
stack_name: string;
service_name: string | null;
unhealthy_duration_mins: number;
cooldown_mins: number;
max_restarts_per_hour: number;
auto_disable_after_failures: number;
enabled: number;
consecutive_failures: number;
last_fired_at: number;
created_at: number;
updated_at: number;
}
interface AutoHealHistoryEntry {
id?: number;
policy_id: number;
stack_name: string;
service_name: string | null;
container_name: string;
container_id: string;
action: 'restarted' | 'skipped_user_action' | 'skipped_cooldown' | 'skipped_rate_limit' | 'failed' | 'policy_auto_disabled';
reason: string;
success: number;
error: string | null;
timestamp: number;
}
type MonitorTab = 'alerts' | 'auto-heal';
interface StackAlertSheetProps {
isOpen: boolean;
onClose: () => void;
open: boolean;
onOpenChange: (open: boolean) => void;
stackName: string;
initialTab?: MonitorTab;
}
interface AgentStatus {
@@ -81,7 +108,60 @@ const clampNonNegative = (setter: (v: string) => void) => (e: React.ChangeEvent<
setter(val);
};
export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetProps) {
function actionColorClass(action: AutoHealHistoryEntry['action']): string {
if (action === 'restarted') return 'text-success';
if (action === 'failed' || action === 'policy_auto_disabled') return 'text-destructive';
return 'text-muted-foreground';
}
function actionLabel(action: AutoHealHistoryEntry['action']): string {
switch (action) {
case 'restarted': return 'Restarted';
case 'skipped_user_action': return 'Skipped (user action)';
case 'skipped_cooldown': return 'Skipped (cooldown)';
case 'skipped_rate_limit': return 'Skipped (rate limit)';
case 'failed': return 'Failed';
case 'policy_auto_disabled': return 'Auto-disabled';
}
}
export function StackAlertSheet({ open, onOpenChange, stackName, initialTab = 'alerts' }: StackAlertSheetProps) {
const { isPaid } = useLicense();
// Per Sencho convention: paid features hide their trigger entirely. Community users
// never see the Auto-heal tab, and a stray initialTab='auto-heal' falls back to alerts.
const effectiveInitialTab: MonitorTab = !isPaid && initialTab === 'auto-heal' ? 'alerts' : initialTab;
const [activeTab, setActiveTab] = useState<MonitorTab>(effectiveInitialTab);
useEffect(() => {
if (open) setActiveTab(effectiveInitialTab);
}, [open, effectiveInitialTab, stackName]);
const tabs = isPaid
? [
{ id: 'alerts', label: 'Alerts' },
{ id: 'auto-heal', label: 'Auto-heal' },
]
: [{ id: 'alerts', label: 'Alerts' }];
return (
<SystemSheet
open={open}
onOpenChange={onOpenChange}
crumb={['Stack', stackName || '—', 'Monitor']}
name={stackName || 'Stack monitor'}
meta={activeTab === 'alerts' ? 'Alert rules' : 'Auto-heal policies'}
tabs={tabs}
activeTab={activeTab}
onTabChange={(id) => setActiveTab(id as MonitorTab)}
size="md"
>
{activeTab === 'alerts' && <AlertsTab stackName={stackName} />}
{activeTab === 'auto-heal' && isPaid && <AutoHealTab stackName={stackName} open={open} />}
</SystemSheet>
);
}
function AlertsTab({ stackName }: { stackName: string }) {
const { isAdmin } = useAuth();
const { activeNode } = useNodes();
const isRemote = activeNode?.type === 'remote';
@@ -95,7 +175,6 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
enabledTypes: [],
});
// New Alert Form State
const [metric, setMetric] = useState('cpu_percent');
const [operator, setOperator] = useState('>');
const [threshold, setThreshold] = useState('');
@@ -103,11 +182,10 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
const [cooldown, setCooldown] = useState('60');
useEffect(() => {
if (isOpen && stackName) {
fetchAlerts();
fetchAgentStatus();
}
}, [isOpen, stackName]); // eslint-disable-line react-hooks/exhaustive-deps
if (!stackName) return;
fetchAlerts();
fetchAgentStatus();
}, [stackName]); // eslint-disable-line react-hooks/exhaustive-deps
const fetchAlerts = async () => {
try {
@@ -124,7 +202,6 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
const fetchAgentStatus = async () => {
setAgentStatus(prev => ({ ...prev, loading: true }));
try {
// Always fetch agents from the active node (proxied via x-node-id for remote)
const res = await apiFetch('/agents');
if (res.ok) {
const agents: Array<{ type: string; enabled: boolean }> = await res.json();
@@ -148,7 +225,6 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
toast.error('Please enter a threshold.');
return;
}
setIsLoading(true);
const newAlert = {
stack_name: stackName,
@@ -158,7 +234,6 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
duration_mins: parseInt(duration, 10),
cooldown_mins: parseInt(cooldown, 10),
};
try {
const res = await apiFetch('/alerts', {
method: 'POST',
@@ -263,179 +338,122 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
};
return (
<>
<Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
<SheetContent className="sm:max-w-[420px] flex flex-col">
<SheetHeader>
<SheetTitle>Stack Alerts: {stackName}</SheetTitle>
<SheetDescription>
Configure metric thresholds to trigger notifications for this stack.
</SheetDescription>
</SheetHeader>
<TooltipProvider>
<SheetSection title="Notification channels">
{renderAgentStatusBanner()}
</SheetSection>
<ScrollArea className="flex-1">
<TooltipProvider>
<div className="mt-4 space-y-5 pr-2">
{/* Notification agent status banner */}
{renderAgentStatusBanner()}
{/* List Existing Alerts */}
<div className="space-y-3">
<h4 className="text-sm font-medium">Existing Rules</h4>
{alerts.length === 0 ? (
<div className="text-sm text-muted-foreground p-4 bg-muted/50 rounded-lg text-center">
No active alert rules for this stack.
</div>
) : (
alerts.map(alert => (
<div key={alert.id} className="flex flex-col gap-2 p-3 bg-muted/50 rounded-lg border text-sm">
<div className="flex justify-between items-start">
<div>
<span className="font-medium text-foreground">
{metricLabels[alert.metric] || alert.metric} {alert.operator} {alert.threshold}
</span>
<div className="text-muted-foreground mt-1">
Trigger after {alert.duration_mins}m &bull; Cooldown: {alert.cooldown_mins}m
</div>
</div>
{isAdmin && <Button
variant="ghost"
size="icon"
className="h-8 w-8 text-muted-foreground hover:text-destructive shrink-0"
onClick={() => alert.id && setConfirmDeleteId(alert.id)}
disabled={isLoading}
>
<Trash2 className="h-4 w-4" strokeWidth={1.5} />
</Button>}
</div>
</div>
))
)}
<SheetSection title="Active rules">
{alerts.length === 0 ? (
<div className="text-sm text-muted-foreground text-center py-4">
No active alert rules for this stack.
</div>
) : (
<div className="space-y-2">
{alerts.map(alert => (
<div key={alert.id} className="flex justify-between items-start gap-2 py-2 border-b border-card-border/40 last:border-b-0 text-sm">
<div>
<span className="font-medium text-foreground">
{metricLabels[alert.metric] || alert.metric} {alert.operator} {alert.threshold}
</span>
<div className="text-muted-foreground text-xs mt-0.5">
Trigger after {alert.duration_mins}m &bull; Cooldown {alert.cooldown_mins}m
</div>
</div>
<hr />
{/* Add New Alert Form */}
{isAdmin && <div className="space-y-4">
<h4 className="text-sm font-medium">Add New Rule</h4>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Label>Metric</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" strokeWidth={1.5} />
</TooltipTrigger>
<TooltipContent>
<p className="max-w-[200px] text-sm">The system resource or metric to monitor. Select from CPU, Memory, Network I/O, or Restarts.</p>
</TooltipContent>
</Tooltip>
</div>
<Combobox
options={metricOptions}
value={metric}
onValueChange={setMetric}
placeholder="Select metric..."
searchPlaceholder="Search metrics..."
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<div className="flex items-center gap-2">
<Label>Operator</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" strokeWidth={1.5} />
</TooltipTrigger>
<TooltipContent>
<p className="max-w-[200px] text-sm">The comparison condition to trigger the alert against the threshold.</p>
</TooltipContent>
</Tooltip>
</div>
<Combobox
options={operatorOptions}
value={operator}
onValueChange={setOperator}
placeholder="Select operator..."
/>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Label>Threshold</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" strokeWidth={1.5} />
</TooltipTrigger>
<TooltipContent>
<p className="max-w-[200px] text-sm">The numerical value the metric needs to breach to trigger the conditions.</p>
</TooltipContent>
</Tooltip>
</div>
<Input
type="number"
min={0}
value={threshold}
onChange={clampNonNegative(setThreshold)}
placeholder="e.g. 90"
/>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<div className="flex items-center gap-2">
<Label>Duration (mins)</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" strokeWidth={1.5} />
</TooltipTrigger>
<TooltipContent>
<p className="max-w-[200px] text-sm">How long the metric must stay in breach of the threshold before sending an alert.</p>
</TooltipContent>
</Tooltip>
</div>
<Input
type="number"
min={0}
value={duration}
onChange={clampNonNegative(setDuration)}
/>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Label>Cooldown (mins)</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" strokeWidth={1.5} />
</TooltipTrigger>
<TooltipContent>
<p className="max-w-[200px] text-sm">How long to wait before sending another alert if the stack continues to breach.</p>
</TooltipContent>
</Tooltip>
</div>
<Input
type="number"
min={0}
value={cooldown}
onChange={clampNonNegative(setCooldown)}
/>
</div>
</div>
<Button className="w-full mt-2" onClick={addAlert} disabled={isLoading}>
{isLoading ? (
<><Loader2 className="h-4 w-4 mr-2 animate-spin" />Saving...</>
) : (
'Add Rule'
)}
{isAdmin && (
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-muted-foreground hover:text-destructive shrink-0"
onClick={() => alert.id && setConfirmDeleteId(alert.id)}
disabled={isLoading}
>
<Trash2 className="h-4 w-4" strokeWidth={1.5} />
</Button>
</div>}
)}
</div>
</TooltipProvider>
</ScrollArea>
</SheetContent>
</Sheet>
))}
</div>
)}
</SheetSection>
{isAdmin && (
<SheetSection title="Add new rule">
<div className="space-y-3">
<div className="space-y-2">
<div className="flex items-center gap-2">
<Label>Metric</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" strokeWidth={1.5} />
</TooltipTrigger>
<TooltipContent>
<p className="max-w-[200px] text-sm">The system resource or metric to monitor. Select from CPU, Memory, Network I/O, or Restarts.</p>
</TooltipContent>
</Tooltip>
</div>
<Combobox
options={metricOptions}
value={metric}
onValueChange={setMetric}
placeholder="Select metric..."
searchPlaceholder="Search metrics..."
/>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-2">
<Label>Operator</Label>
<Combobox
options={operatorOptions}
value={operator}
onValueChange={setOperator}
placeholder="Select operator..."
/>
</div>
<div className="space-y-2">
<Label>Threshold</Label>
<Input
type="number"
min={0}
value={threshold}
onChange={clampNonNegative(setThreshold)}
placeholder="e.g. 90"
/>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-2">
<Label>Duration (mins)</Label>
<Input
type="number"
min={0}
value={duration}
onChange={clampNonNegative(setDuration)}
/>
</div>
<div className="space-y-2">
<Label>Cooldown (mins)</Label>
<Input
type="number"
min={0}
value={cooldown}
onChange={clampNonNegative(setCooldown)}
/>
</div>
</div>
<Button className="w-full mt-2" onClick={addAlert} disabled={isLoading}>
{isLoading ? (
<><Loader2 className="h-4 w-4 mr-2 animate-spin" />Saving...</>
) : (
'Add Rule'
)}
</Button>
</div>
</SheetSection>
)}
<AlertDialog open={!!confirmDeleteId} onOpenChange={(open) => !open && setConfirmDeleteId(null)}>
<AlertDialogContent>
@@ -456,6 +474,349 @@ export function StackAlertSheet({ isOpen, onClose, stackName }: StackAlertSheetP
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</TooltipProvider>
);
}
function AutoHealTab({ stackName, open }: { stackName: string; open: boolean }) {
const [policies, setPolicies] = useState<AutoHealPolicy[]>([]);
const [loading, setLoading] = useState(false);
const [saving, setSaving] = useState(false);
const [deleting, setDeleting] = useState(false);
const [serviceOptions, setServiceOptions] = useState<{ value: string; label: string }[]>([]);
const [service, setService] = useState('');
const [unhealthyFor, setUnhealthyFor] = useState('5');
const [cooldown, setCooldown] = useState('5');
const [maxRestarts, setMaxRestarts] = useState('3');
const [autoDisableAfter, setAutoDisableAfter] = useState('5');
useEffect(() => {
if (!open || !stackName) return;
setLoading(true);
apiFetch(`/auto-heal/policies?stackName=${encodeURIComponent(stackName)}`)
.then(res => res.json() as Promise<AutoHealPolicy[]>)
.then(data => setPolicies(data))
.catch(() => toast.error('Failed to load auto-heal policies.'))
.finally(() => setLoading(false));
apiFetch(`/stacks/${encodeURIComponent(stackName)}/services`)
.then(res => res.json() as Promise<string[]>)
.then(names => setServiceOptions(names.map(n => ({ value: n, label: n }))))
.catch(() => { /* services list is optional, silently skip */ });
}, [open, stackName]);
const handleToggle = async (id: number, enabled: boolean) => {
setSaving(true);
try {
const res = await apiFetch(`/auto-heal/policies/${id}`, {
method: 'PATCH',
body: JSON.stringify({ enabled: enabled ? 1 : 0 }),
});
if (res.ok) {
setPolicies(prev =>
prev.map(p => p.id === id ? { ...p, enabled: enabled ? 1 : 0 } : p)
);
} else {
const err = await res.json().catch(() => ({})) as Record<string, unknown>;
toast.error((err?.message as string) || (err?.error as string) || 'Failed to update policy.');
}
} catch (e) {
console.error('[StackAlertSheet] Failed to toggle policy:', e);
toast.error('Network error. Could not reach the node.');
} finally {
setSaving(false);
}
};
const handleDelete = async (id: number) => {
setDeleting(true);
try {
const res = await apiFetch(`/auto-heal/policies/${id}`, { method: 'DELETE' });
if (res.ok) {
toast.success('Policy deleted.');
setPolicies(prev => prev.filter(p => p.id !== id));
} else {
const err = await res.json().catch(() => ({})) as Record<string, unknown>;
toast.error((err?.message as string) || (err?.error as string) || 'Failed to delete policy.');
}
} catch (e) {
console.error('[StackAlertSheet] Failed to delete policy:', e);
toast.error('Network error. Could not reach the node.');
} finally {
setDeleting(false);
}
};
const handleAddPolicy = async () => {
setSaving(true);
const body = {
stack_name: stackName,
service_name: service === '' ? null : service,
unhealthy_duration_mins: parseInt(unhealthyFor, 10) || 5,
cooldown_mins: parseInt(cooldown, 10) || 5,
max_restarts_per_hour: parseInt(maxRestarts, 10) || 3,
auto_disable_after_failures: parseInt(autoDisableAfter, 10) || 5,
};
try {
const res = await apiFetch('/auto-heal/policies', {
method: 'POST',
body: JSON.stringify(body),
});
if (res.ok) {
toast.success('Policy added.');
setService('');
setUnhealthyFor('5');
setCooldown('5');
setMaxRestarts('3');
setAutoDisableAfter('5');
apiFetch(`/auto-heal/policies?stackName=${encodeURIComponent(stackName)}`)
.then(res => res.json() as Promise<AutoHealPolicy[]>)
.then(data => setPolicies(data))
.catch(() => toast.error('Failed to reload policies.'));
} else {
const err = await res.json().catch(() => ({})) as Record<string, unknown>;
toast.error((err?.message as string) || (err?.error as string) || 'Failed to add policy.');
console.error('[StackAlertSheet] addPolicy failed:', err);
}
} catch (e) {
console.error('[StackAlertSheet] addPolicy threw:', e);
toast.error('Network error. Could not reach the node.');
} finally {
setSaving(false);
}
};
const serviceComboOptions = [
{ value: '', label: 'All services' },
...serviceOptions,
];
return (
<>
<SheetSection title="Active policies">
{loading ? (
<div className="flex items-center justify-center gap-2 p-6 text-sm text-muted-foreground">
<Loader2 className="h-4 w-4 animate-spin" strokeWidth={1.5} />
<span>Loading policies...</span>
</div>
) : policies.length === 0 ? (
<div className="text-sm text-muted-foreground text-center py-4">
No auto-heal policies configured for this stack.
</div>
) : (
<div className="space-y-2">
{policies.map(policy => (
<PolicyRow
key={policy.id}
policy={policy}
onDelete={handleDelete}
onToggle={handleToggle}
deleting={deleting}
saving={saving}
/>
))}
</div>
)}
</SheetSection>
<SheetSection title="Add new policy">
<div className="space-y-3">
<div className="space-y-2">
<Label>Service</Label>
<Combobox
options={serviceComboOptions}
value={service}
onValueChange={setService}
placeholder="All services"
searchPlaceholder="Search services..."
emptyText="No services found."
/>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-2">
<Label htmlFor="unhealthy-duration">Unhealthy for (minutes)</Label>
<Input
id="unhealthy-duration"
type="text"
inputMode="numeric"
value={unhealthyFor}
onChange={clampNonNegative(setUnhealthyFor)}
placeholder="5"
/>
</div>
<div className="space-y-2">
<Label htmlFor="cooldown">Cooldown (minutes)</Label>
<Input
id="cooldown"
type="text"
inputMode="numeric"
value={cooldown}
onChange={clampNonNegative(setCooldown)}
placeholder="5"
/>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-2">
<Label htmlFor="max-restarts">Max restarts / hr</Label>
<Input
id="max-restarts"
type="text"
inputMode="numeric"
value={maxRestarts}
onChange={clampNonNegative(setMaxRestarts)}
placeholder="3"
/>
</div>
<div className="space-y-2">
<Label htmlFor="auto-disable">Auto-disable after (failures)</Label>
<Input
id="auto-disable"
type="text"
inputMode="numeric"
value={autoDisableAfter}
onChange={clampNonNegative(setAutoDisableAfter)}
placeholder="5"
/>
</div>
</div>
<Button
className="w-full mt-2"
onClick={handleAddPolicy}
disabled={saving}
>
{saving ? (
<><Loader2 className="h-4 w-4 mr-2 animate-spin" strokeWidth={1.5} />Saving...</>
) : (
'Add Policy'
)}
</Button>
</div>
</SheetSection>
</>
);
}
interface PolicyRowProps {
policy: AutoHealPolicy;
onDelete: (id: number) => void;
onToggle: (id: number, enabled: boolean) => void;
deleting: boolean;
saving: boolean;
}
function PolicyRow({ policy, onDelete, onToggle, deleting, saving }: PolicyRowProps) {
const [historyOpen, setHistoryOpen] = useState(false);
const [history, setHistory] = useState<AutoHealHistoryEntry[]>([]);
const [loadingHistory, setLoadingHistory] = useState(false);
const toggleHistory = async () => {
if (!historyOpen && history.length === 0 && policy.id != null) {
setLoadingHistory(true);
try {
const res = await apiFetch(`/auto-heal/policies/${policy.id}/history`);
if (res.ok) {
const data: AutoHealHistoryEntry[] = await res.json();
setHistory(data);
} else {
const err = await res.json().catch(() => ({})) as Record<string, unknown>;
toast.error((err?.message as string) || (err?.error as string) || 'Failed to load history.');
}
} catch (e) {
console.error('[StackAlertSheet] Failed to fetch history:', e);
toast.error('Network error. Could not reach the node.');
} finally {
setLoadingHistory(false);
}
}
setHistoryOpen(prev => !prev);
};
return (
<div className="flex flex-col gap-0 border-b border-card-border/40 last:border-b-0 text-sm py-2">
<div className="flex items-center justify-between gap-2">
<div className="flex flex-col gap-0.5 min-w-0">
<span className="font-mono text-foreground truncate">
{policy.service_name ?? <span className="text-muted-foreground font-sans">All services</span>}
</span>
<span className="text-muted-foreground text-xs">
Unhealthy for {policy.unhealthy_duration_mins} min
&bull; Cooldown: {policy.cooldown_mins} min
&bull; Max {policy.max_restarts_per_hour}/hr
</span>
{policy.consecutive_failures > 0 && (
<span className="inline-flex items-center gap-1 mt-0.5">
<span className="px-1.5 py-0.5 rounded text-xs font-mono tabular-nums text-destructive bg-destructive/10 border border-destructive/20">
{policy.consecutive_failures} failure{policy.consecutive_failures !== 1 ? 's' : ''}
</span>
</span>
)}
</div>
<div className="flex items-center gap-2 shrink-0">
<TogglePill
checked={policy.enabled === 1}
onChange={(checked) => policy.id != null && onToggle(policy.id, checked)}
disabled={saving}
aria-label={`Toggle policy for ${policy.service_name ?? 'all services'}`}
/>
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-muted-foreground hover:text-foreground"
onClick={toggleHistory}
aria-label="Toggle history"
disabled={loadingHistory}
>
{loadingHistory ? (
<Loader2 className="h-4 w-4 animate-spin" strokeWidth={1.5} />
) : historyOpen ? (
<ChevronUp className="h-4 w-4" strokeWidth={1.5} />
) : (
<ChevronDown className="h-4 w-4" strokeWidth={1.5} />
)}
</Button>
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-destructive/60 hover:bg-destructive hover:text-destructive-foreground"
onClick={() => policy.id != null && onDelete(policy.id)}
disabled={deleting}
aria-label="Delete policy"
>
<Trash2 className="h-4 w-4" strokeWidth={1.5} />
</Button>
</div>
</div>
{historyOpen && (
<div className="border-t border-card-border/40 mt-2 pt-2 space-y-1.5">
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">Recent activity</p>
{history.length === 0 ? (
<p className="text-xs text-muted-foreground text-center py-2">No history yet.</p>
) : (
history.map((entry) => (
<div key={entry.id} className="flex items-start gap-2 text-xs">
<span className="text-muted-foreground shrink-0 tabular-nums font-mono">
{new Date(entry.timestamp).toLocaleString()}
</span>
<span className="font-mono text-foreground shrink-0 truncate max-w-[100px]">
{entry.container_name}
</span>
<span className={`shrink-0 font-medium ${actionColorClass(entry.action)}`}>
{actionLabel(entry.action)}
</span>
<span className="text-muted-foreground truncate">
{entry.reason}
</span>
</div>
))
)}
</div>
)}
</div>
);
}
frontend/src/components/StackAutoHealSheet.tsx
-439
View File
@@ -1,439 +0,0 @@
import { useState, useEffect } from 'react';
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from '@/components/ui/sheet';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { TogglePill } from '@/components/ui/toggle-pill';
import { Combobox } from '@/components/ui/combobox';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Trash2, ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
import { toast } from '@/components/ui/toast-store';
import { apiFetch } from '@/lib/api';
import { PaidGate } from '@/components/PaidGate';
interface AutoHealPolicy {
id?: number;
stack_name: string;
service_name: string | null;
unhealthy_duration_mins: number;
cooldown_mins: number;
max_restarts_per_hour: number;
auto_disable_after_failures: number;
enabled: number;
consecutive_failures: number;
last_fired_at: number;
created_at: number;
updated_at: number;
}
interface AutoHealHistoryEntry {
id?: number;
policy_id: number;
stack_name: string;
service_name: string | null;
container_name: string;
container_id: string;
action: 'restarted' | 'skipped_user_action' | 'skipped_cooldown' | 'skipped_rate_limit' | 'failed' | 'policy_auto_disabled';
reason: string;
success: number;
error: string | null;
timestamp: number;
}
interface StackAutoHealSheetProps {
stackName: string;
open: boolean;
onOpenChange: (open: boolean) => void;
}
const clampNonNegative = (setter: (v: string) => void) => (e: React.ChangeEvent<HTMLInputElement>) => {
let val = e.target.value;
if (val !== '' && Number(val) < 0) val = '0';
setter(val);
};
function actionColorClass(action: AutoHealHistoryEntry['action']): string {
if (action === 'restarted') return 'text-success';
if (action === 'failed' || action === 'policy_auto_disabled') return 'text-destructive';
return 'text-muted-foreground';
}
function actionLabel(action: AutoHealHistoryEntry['action']): string {
switch (action) {
case 'restarted': return 'Restarted';
case 'skipped_user_action': return 'Skipped (user action)';
case 'skipped_cooldown': return 'Skipped (cooldown)';
case 'skipped_rate_limit': return 'Skipped (rate limit)';
case 'failed': return 'Failed';
case 'policy_auto_disabled': return 'Auto-disabled';
}
}
interface PolicyRowProps {
policy: AutoHealPolicy;
onDelete: (id: number) => void;
onToggle: (id: number, enabled: boolean) => void;
deleting: boolean;
saving: boolean;
}
function PolicyRow({ policy, onDelete, onToggle, deleting, saving }: PolicyRowProps) {
const [historyOpen, setHistoryOpen] = useState(false);
const [history, setHistory] = useState<AutoHealHistoryEntry[]>([]);
const [loadingHistory, setLoadingHistory] = useState(false);
const toggleHistory = async () => {
if (!historyOpen && history.length === 0 && policy.id != null) {
setLoadingHistory(true);
try {
const res = await apiFetch(`/auto-heal/policies/${policy.id}/history`);
if (res.ok) {
const data: AutoHealHistoryEntry[] = await res.json();
setHistory(data);
} else {
const err = await res.json().catch(() => ({})) as Record<string, unknown>;
toast.error((err?.message as string) || (err?.error as string) || 'Failed to load history.');
}
} catch (e) {
console.error('[StackAutoHealSheet] Failed to fetch history:', e);
toast.error('Network error. Could not reach the node.');
} finally {
setLoadingHistory(false);
}
}
setHistoryOpen(prev => !prev);
};
return (
<div className="flex flex-col gap-0 rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel text-sm">
<div className="flex items-center justify-between gap-2 p-3">
<div className="flex flex-col gap-0.5 min-w-0">
<span className="font-mono text-foreground truncate">
{policy.service_name ?? <span className="text-muted-foreground font-sans">All services</span>}
</span>
<span className="text-muted-foreground text-xs">
Unhealthy for {policy.unhealthy_duration_mins} min
&bull; Cooldown: {policy.cooldown_mins} min
&bull; Max {policy.max_restarts_per_hour}/hr
</span>
{policy.consecutive_failures > 0 && (
<span className="inline-flex items-center gap-1 mt-0.5">
<span className="px-1.5 py-0.5 rounded text-xs font-mono tabular-nums text-destructive bg-destructive/10 border border-destructive/20">
{policy.consecutive_failures} failure{policy.consecutive_failures !== 1 ? 's' : ''}
</span>
</span>
)}
</div>
<div className="flex items-center gap-2 shrink-0">
<TogglePill
checked={policy.enabled === 1}
onChange={(checked) => policy.id != null && onToggle(policy.id, checked)}
disabled={saving}
aria-label={`Toggle policy for ${policy.service_name ?? 'all services'}`}
/>
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-muted-foreground hover:text-foreground"
onClick={toggleHistory}
aria-label="Toggle history"
disabled={loadingHistory}
>
{loadingHistory ? (
<Loader2 className="h-4 w-4 animate-spin" strokeWidth={1.5} />
) : historyOpen ? (
<ChevronUp className="h-4 w-4" strokeWidth={1.5} />
) : (
<ChevronDown className="h-4 w-4" strokeWidth={1.5} />
)}
</Button>
<Button
variant="ghost"
size="icon"
className="h-7 w-7 text-destructive/60 hover:bg-destructive hover:text-destructive-foreground"
onClick={() => policy.id != null && onDelete(policy.id)}
disabled={deleting}
aria-label="Delete policy"
>
<Trash2 className="h-4 w-4" strokeWidth={1.5} />
</Button>
</div>
</div>
{historyOpen && (
<div className="border-t border-card-border px-3 pb-3 pt-2 space-y-1.5">
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">Recent Activity</p>
{history.length === 0 ? (
<p className="text-xs text-muted-foreground text-center py-2">No history yet.</p>
) : (
history.map((entry) => (
<div key={entry.id} className="flex items-start gap-2 text-xs">
<span className="text-muted-foreground shrink-0 tabular-nums font-mono">
{new Date(entry.timestamp).toLocaleString()}
</span>
<span className="font-mono text-foreground shrink-0 truncate max-w-[100px]">
{entry.container_name}
</span>
<span className={`shrink-0 font-medium ${actionColorClass(entry.action)}`}>
{actionLabel(entry.action)}
</span>
<span className="text-muted-foreground truncate">
{entry.reason}
</span>
</div>
))
)}
</div>
)}
</div>
);
}
export function StackAutoHealSheet({ stackName, open, onOpenChange }: StackAutoHealSheetProps) {
const [policies, setPolicies] = useState<AutoHealPolicy[]>([]);
const [loading, setLoading] = useState(false);
const [saving, setSaving] = useState(false);
const [deleting, setDeleting] = useState(false);
const [serviceOptions, setServiceOptions] = useState<{ value: string; label: string }[]>([]);
// Form state
const [service, setService] = useState('');
const [unhealthyFor, setUnhealthyFor] = useState('5');
const [cooldown, setCooldown] = useState('5');
const [maxRestarts, setMaxRestarts] = useState('3');
const [autoDisableAfter, setAutoDisableAfter] = useState('5');
useEffect(() => {
if (!open || !stackName) return;
setLoading(true);
apiFetch(`/auto-heal/policies?stackName=${encodeURIComponent(stackName)}`)
.then(res => res.json() as Promise<AutoHealPolicy[]>)
.then(data => setPolicies(data))
.catch(() => toast.error('Failed to load auto-heal policies.'))
.finally(() => setLoading(false));
apiFetch(`/stacks/${encodeURIComponent(stackName)}/services`)
.then(res => res.json() as Promise<string[]>)
.then(names => setServiceOptions(names.map(n => ({ value: n, label: n }))))
.catch(() => { /* services list is optional, silently skip */ });
}, [open, stackName]);
const handleToggle = async (id: number, enabled: boolean) => {
setSaving(true);
try {
const res = await apiFetch(`/auto-heal/policies/${id}`, {
method: 'PATCH',
body: JSON.stringify({ enabled: enabled ? 1 : 0 }),
});
if (res.ok) {
setPolicies(prev =>
prev.map(p => p.id === id ? { ...p, enabled: enabled ? 1 : 0 } : p)
);
} else {
const err = await res.json().catch(() => ({})) as Record<string, unknown>;
toast.error((err?.message as string) || (err?.error as string) || 'Failed to update policy.');
}
} catch (e) {
console.error('[StackAutoHealSheet] Failed to toggle policy:', e);
toast.error('Network error. Could not reach the node.');
} finally {
setSaving(false);
}
};
const handleDelete = async (id: number) => {
setDeleting(true);
try {
const res = await apiFetch(`/auto-heal/policies/${id}`, { method: 'DELETE' });
if (res.ok) {
toast.success('Policy deleted.');
setPolicies(prev => prev.filter(p => p.id !== id));
} else {
const err = await res.json().catch(() => ({})) as Record<string, unknown>;
toast.error((err?.message as string) || (err?.error as string) || 'Failed to delete policy.');
}
} catch (e) {
console.error('[StackAutoHealSheet] Failed to delete policy:', e);
toast.error('Network error. Could not reach the node.');
} finally {
setDeleting(false);
}
};
const handleAddPolicy = async () => {
setSaving(true);
const body = {
stack_name: stackName,
service_name: service === '' ? null : service,
unhealthy_duration_mins: parseInt(unhealthyFor, 10) || 5,
cooldown_mins: parseInt(cooldown, 10) || 5,
max_restarts_per_hour: parseInt(maxRestarts, 10) || 3,
auto_disable_after_failures: parseInt(autoDisableAfter, 10) || 5,
};
try {
const res = await apiFetch('/auto-heal/policies', {
method: 'POST',
body: JSON.stringify(body),
});
if (res.ok) {
toast.success('Policy added.');
setService('');
setUnhealthyFor('5');
setCooldown('5');
setMaxRestarts('3');
setAutoDisableAfter('5');
apiFetch(`/auto-heal/policies?stackName=${encodeURIComponent(stackName)}`)
.then(res => res.json() as Promise<AutoHealPolicy[]>)
.then(data => setPolicies(data))
.catch(() => toast.error('Failed to reload policies.'));
} else {
const err = await res.json().catch(() => ({})) as Record<string, unknown>;
toast.error((err?.message as string) || (err?.error as string) || 'Failed to add policy.');
console.error('[StackAutoHealSheet] addPolicy failed:', err);
}
} catch (e) {
console.error('[StackAutoHealSheet] addPolicy threw:', e);
toast.error('Network error. Could not reach the node.');
} finally {
setSaving(false);
}
};
const serviceComboOptions = [
{ value: '', label: 'All services' },
...serviceOptions,
];
return (
<PaidGate>
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent className="sm:max-w-[440px] flex flex-col">
<SheetHeader>
<SheetTitle>Auto-Heal Policies: {stackName}</SheetTitle>
<SheetDescription className="sr-only">
Configure auto-heal policies to automatically restart unhealthy containers in this stack.
</SheetDescription>
</SheetHeader>
<ScrollArea className="flex-1">
<div className="mt-4 space-y-5 pr-2">
{/* Existing policies */}
<div className="space-y-3">
<h4 className="text-sm font-medium">Active Policies</h4>
{loading ? (
<div className="flex items-center justify-center gap-2 p-6 text-sm text-muted-foreground">
<Loader2 className="h-4 w-4 animate-spin" strokeWidth={1.5} />
<span>Loading policies...</span>
</div>
) : policies.length === 0 ? (
<div className="text-sm text-muted-foreground p-4 bg-muted/50 rounded-lg border text-center">
No auto-heal policies configured for this stack.
</div>
) : (
policies.map(policy => (
<PolicyRow
key={policy.id}
policy={policy}
onDelete={handleDelete}
onToggle={handleToggle}
deleting={deleting}
saving={saving}
/>
))
)}
</div>
<hr className="border-card-border" />
{/* Add new policy form */}
<div className="space-y-4">
<h4 className="text-sm font-medium">Add New Policy</h4>
<div className="space-y-2">
<Label>Service</Label>
<Combobox
options={serviceComboOptions}
value={service}
onValueChange={setService}
placeholder="All services"
searchPlaceholder="Search services..."
emptyText="No services found."
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="unhealthy-duration">Unhealthy for (minutes)</Label>
<Input
id="unhealthy-duration"
type="text"
inputMode="numeric"
value={unhealthyFor}
onChange={clampNonNegative(setUnhealthyFor)}
placeholder="5"
/>
</div>
<div className="space-y-2">
<Label htmlFor="cooldown">Cooldown (minutes)</Label>
<Input
id="cooldown"
type="text"
inputMode="numeric"
value={cooldown}
onChange={clampNonNegative(setCooldown)}
placeholder="5"
/>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="max-restarts">Max restarts / hr</Label>
<Input
id="max-restarts"
type="text"
inputMode="numeric"
value={maxRestarts}
onChange={clampNonNegative(setMaxRestarts)}
placeholder="3"
/>
</div>
<div className="space-y-2">
<Label htmlFor="auto-disable">Auto-disable after (failures)</Label>
<Input
id="auto-disable"
type="text"
inputMode="numeric"
value={autoDisableAfter}
onChange={clampNonNegative(setAutoDisableAfter)}
placeholder="5"
/>
</div>
</div>
<Button
className="w-full mt-2"
onClick={handleAddPolicy}
disabled={saving}
>
{saving ? (
<><Loader2 className="h-4 w-4 mr-2 animate-spin" strokeWidth={1.5} />Saving...</>
) : (
'Add Policy'
)}
</Button>
</div>
</div>
</ScrollArea>
</SheetContent>
</Sheet>
</PaidGate>
);
}
frontend/src/components/VulnerabilityScanSheet.tsx
+226 -281
View File
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { SystemSheet, SheetSection } from '@/components/ui/system-sheet';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Button } from '@/components/ui/button';
import {
@@ -17,7 +17,6 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
ShieldCheck,
ShieldOff,
ExternalLink,
ChevronLeft,
@@ -27,11 +26,8 @@ import {
Loader2,
Check,
GitCompare,
KeyRound,
FileWarning,
} from 'lucide-react';
import { Combobox } from '@/components/ui/combobox';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
Dialog,
DialogContent,
@@ -48,6 +44,7 @@ import { toast } from '@/components/ui/toast-store';
import { cn } from '@/lib/utils';
import { cveUrl } from '@/lib/cveUrl';
import { SEVERITY_ROW_TINT } from '@/lib/severityStyles';
import { formatTimeAgo } from '@/lib/relativeTime';
import type {
VulnerabilityScan,
VulnerabilityDetail,
@@ -371,40 +368,71 @@ export function VulnerabilityScanSheet({
}
}, [scan]);
return (
<Sheet open={scanId != null} onOpenChange={(open) => !open && onClose()}>
<SheetContent className="sm:max-w-2xl flex flex-col p-0">
<SheetHeader className="px-6 pt-6 pb-4 pr-14 border-b border-border space-y-2">
<div className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
Vulnerability scan · {scan?.triggered_by ?? '-'}
</div>
<SheetTitle className="flex items-center gap-2 font-display italic text-2xl">
<ShieldCheck className="w-5 h-5 text-muted-foreground" strokeWidth={1.5} />
<span className="font-mono text-base truncate not-italic">
{scan?.image_ref ?? 'Loading...'}
</span>
</SheetTitle>
<SheetDescription className="sr-only">
{scan
? `Vulnerability scan results for ${scan.image_ref}: ${scan.total_vulnerabilities} total findings.`
: 'Vulnerability scan details.'}
</SheetDescription>
</SheetHeader>
const meta = scan
? `${scan.total_vulnerabilities} vulns · ${scan.fixable_count} fixable · ${scan.triggered_by}`
: (loading ? 'Loading…' : 'No scan');
const footerContext = scan
? `Scanned ${formatTimeAgo(new Date(scan.scanned_at).getTime())}`
: undefined;
const secondaryActions = scan ? [
...(canCompare ? [{
label: 'Compare',
icon: compareLoading ? Loader2 : GitCompare,
onClick: openCompareMenu,
disabled: compareLoading,
}] : []),
...(details.length > 0 ? [{
label: 'CSV',
icon: Download,
onClick: exportCsv,
}] : []),
...(canGenerateSbom && scan.status === 'completed' ? [{
label: 'SARIF',
icon: Download,
onClick: () => { void exportSarif(); },
}] : []),
] : undefined;
return (
<>
<SystemSheet
open={scanId != null}
onOpenChange={(open) => !open && onClose()}
crumb={['Security', 'Scans', scan?.image_ref ?? '…']}
name={scan?.image_ref ?? 'Loading…'}
meta={meta}
primaryAction={onRescan && scan ? {
label: 'Re-scan',
icon: RefreshCw,
onClick: () => onRescan(scan.image_ref),
disabled: scan.status === 'in_progress',
} : undefined}
secondaryActions={secondaryActions}
tabs={scan ? [
{ id: 'vulns', label: 'Vulnerabilities', count: totalDetails },
{ id: 'secrets', label: 'Secrets', count: scan.secret_count ?? secrets.length },
{ id: 'misconfigs', label: 'Misconfigs', count: scan.misconfig_count ?? misconfigs.length },
] : undefined}
activeTab={tab}
onTabChange={(id) => setTab(id as FindingTab)}
footerContext={footerContext}
size="lg"
>
{loading && !scan && (
<div className="flex items-center justify-center flex-1">
<div className="flex items-center justify-center py-12">
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" strokeWidth={1.5} />
</div>
)}
{scan && (
<div className="flex flex-col flex-1 min-h-0">
{/* Summary stats */}
<div className="px-6 py-4 border-b space-y-3">
<>
<SheetSection title="Summary">
{scan.policy_evaluation?.violated && (
<div
role="alert"
className="relative rounded border border-destructive/40 bg-destructive/10 px-3 py-2 pl-4 shadow-card-bevel"
className="relative rounded border border-destructive/40 bg-destructive/10 px-3 py-2 pl-4 mb-3 shadow-card-bevel"
>
<span
aria-hidden="true"
@@ -427,7 +455,7 @@ export function VulnerabilityScanSheet({
</div>
</div>
)}
<div className="flex flex-wrap gap-2">
<div className="flex flex-wrap gap-2 mb-3">
{scan.critical_count > 0 && (
<span className={cn('rounded border px-2 py-1 text-xs font-mono tabular-nums uppercase tracking-[0.18em] shadow-card-bevel', SEVERITY_CLASSES.CRITICAL)}>
{scan.critical_count} CRITICAL
@@ -476,19 +504,8 @@ export function VulnerabilityScanSheet({
</div>
</div>
<div className="flex flex-wrap items-center gap-2 pt-2">
{onRescan && (
<Button
variant="outline"
size="sm"
onClick={() => onRescan(scan.image_ref)}
disabled={scan.status === 'in_progress'}
>
<RefreshCw className="w-3.5 h-3.5 mr-1.5" strokeWidth={1.5} />
Re-scan
</Button>
)}
{canGenerateSbom && (
{canGenerateSbom && (
<div className="flex flex-wrap items-center gap-2 mt-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" disabled={downloadingSbom}>
@@ -509,43 +526,11 @@ export function VulnerabilityScanSheet({
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)}
<Button variant="outline" size="sm" onClick={exportCsv} disabled={details.length === 0}>
<Download className="w-3.5 h-3.5 mr-1.5" strokeWidth={1.5} />
CSV
</Button>
{canGenerateSbom && (
<Button
variant="outline"
size="sm"
onClick={exportSarif}
disabled={scan.status !== 'completed'}
title="Export findings as SARIF 2.1.0 for GitHub code scanning"
>
<Download className="w-3.5 h-3.5 mr-1.5" strokeWidth={1.5} />
SARIF
</Button>
)}
{canCompare && (
<Button
variant="outline"
size="sm"
onClick={openCompareMenu}
disabled={compareLoading}
title="Compare this scan to a previous one for the same image"
>
{compareLoading ? (
<Loader2 className="w-3.5 h-3.5 mr-1.5 animate-spin" strokeWidth={1.5} />
) : (
<GitCompare className="w-3.5 h-3.5 mr-1.5" strokeWidth={1.5} />
)}
Compare
</Button>
)}
</div>
</div>
)}
{compareOpen && canCompare && (
<div className="pt-2 space-y-2">
<div className="pt-3 space-y-2">
{compareOptions.length === 0 && !compareLoading ? (
<div className="rounded border border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
No other completed scans for this image yet. Run a second scan to enable comparison.
@@ -569,44 +554,11 @@ export function VulnerabilityScanSheet({
)}
</div>
)}
</div>
</SheetSection>
<Tabs
value={tab}
onValueChange={(v) => setTab(v as FindingTab)}
className="flex flex-col flex-1 min-h-0"
>
<div className="px-6 pt-3">
<TabsList>
<TabsTrigger value="vulns" className="gap-1.5">
<ShieldCheck className="w-3.5 h-3.5" strokeWidth={1.5} />
Vulnerabilities
<span className="font-mono tabular-nums text-stat-subtitle">
({totalDetails})
</span>
</TabsTrigger>
<TabsTrigger value="secrets" className="gap-1.5">
<KeyRound className="w-3.5 h-3.5" strokeWidth={1.5} />
Secrets
<span className="font-mono tabular-nums text-stat-subtitle">
({scan.secret_count ?? secrets.length})
</span>
</TabsTrigger>
<TabsTrigger value="misconfigs" className="gap-1.5">
<FileWarning className="w-3.5 h-3.5" strokeWidth={1.5} />
Misconfigs
<span className="font-mono tabular-nums text-stat-subtitle">
({scan.misconfig_count ?? misconfigs.length})
</span>
</TabsTrigger>
</TabsList>
</div>
<TabsContent
value="vulns"
className="flex flex-col flex-1 min-h-0 mt-0 data-[state=inactive]:hidden"
>
<div className="px-6 pt-3 flex items-center gap-1 flex-wrap">
{tab === 'vulns' && (
<SheetSection title={`Vulnerabilities · ${totalDetails}`}>
<div className="flex items-center gap-1 flex-wrap mb-3">
{(['ALL', 'CRITICAL', 'HIGH', 'MEDIUM', 'LOW'] as SeverityFilter[]).map((s) => (
<Button
key={s}
@@ -649,35 +601,34 @@ export function VulnerabilityScanSheet({
</div>
{totalDetails > details.length && (
<div className="px-6 pt-2 text-xs text-stat-subtitle font-mono">
<div className="text-xs text-stat-subtitle font-mono mb-2">
Showing first {details.length} of {totalDetails}. Export CSV for the complete list.
</div>
)}
<ScrollArea className="flex-1 min-h-0">
<div className="px-6 py-3">
{pageItems.length === 0 ? (
<div className="text-center text-sm text-muted-foreground py-12">
{details.length === 0
? 'No vulnerabilities found.'
: 'No vulnerabilities match the selected filter.'}
</div>
) : (
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[180px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">CVE</TableHead>
<TableHead className="text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Package</TableHead>
<TableHead className="w-[100px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Severity</TableHead>
<TableHead className="w-[110px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Installed</TableHead>
<TableHead className="w-[110px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Fixed</TableHead>
{canManageSuppressions && <TableHead className="w-[40px]" />}
</TableRow>
</TableHeader>
<TableBody>
{pageItems.map((d) => {
const href = cveUrl(d.vulnerability_id, d.primary_url);
return (
<ScrollArea block className="max-h-[60vh]">
{pageItems.length === 0 ? (
<div className="text-center text-sm text-muted-foreground py-12">
{details.length === 0
? 'No vulnerabilities found.'
: 'No vulnerabilities match the selected filter.'}
</div>
) : (
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[180px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">CVE</TableHead>
<TableHead className="text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Package</TableHead>
<TableHead className="w-[100px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Severity</TableHead>
<TableHead className="w-[110px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Installed</TableHead>
<TableHead className="w-[110px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Fixed</TableHead>
{canManageSuppressions && <TableHead className="w-[40px]" />}
</TableRow>
</TableHeader>
<TableBody>
{pageItems.map((d) => {
const href = cveUrl(d.vulnerability_id, d.primary_url);
return (
<TableRow
key={d.id}
className={cn(SEVERITY_ROW_TINT[d.severity], d.suppressed && 'opacity-60')}
@@ -742,21 +693,19 @@ export function VulnerabilityScanSheet({
</TableCell>
)}
</TableRow>
);
})}
</TableBody>
</Table>
)}
</div>
);
})}
</TableBody>
</Table>
)}
</ScrollArea>
</TabsContent>
</SheetSection>
)}
<TabsContent
value="secrets"
className="flex flex-col flex-1 min-h-0 mt-0 data-[state=inactive]:hidden"
>
{tab === 'secrets' && (
<SheetSection title={`Secrets · ${scan.secret_count ?? secrets.length}`}>
{secretsNeedsPagination && (
<div className="px-6 pt-3 flex items-center gap-1">
<div className="flex items-center gap-1 mb-3">
<div className="flex items-center gap-1 ml-auto">
<Button
variant="ghost"
@@ -784,70 +733,67 @@ export function VulnerabilityScanSheet({
</div>
</div>
)}
<ScrollArea className="flex-1 min-h-0">
<div className="px-6 py-3">
{secrets.length === 0 ? (
<div className="text-center text-sm text-muted-foreground py-12">
No secrets detected.
</div>
) : (
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[100px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Severity</TableHead>
<TableHead className="w-[160px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Rule</TableHead>
<TableHead className="text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Title</TableHead>
<TableHead className="w-[260px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Target</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{secretsPageItems.map((s) => (
<TableRow key={s.id} className={SEVERITY_ROW_TINT[s.severity]}>
<TableCell>
<SeverityChip severity={s.severity} />
</TableCell>
<TableCell className="font-mono text-xs truncate max-w-[160px]" title={s.rule_id}>
{s.rule_id}
</TableCell>
<TableCell className="text-xs">
<div className="truncate max-w-[320px]" title={s.title ?? undefined}>
{s.title || <span className="text-muted-foreground">-</span>}
<ScrollArea block className="max-h-[60vh]">
{secrets.length === 0 ? (
<div className="text-center text-sm text-muted-foreground py-12">
No secrets detected.
</div>
) : (
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[100px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Severity</TableHead>
<TableHead className="w-[160px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Rule</TableHead>
<TableHead className="text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Title</TableHead>
<TableHead className="w-[260px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Target</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{secretsPageItems.map((s) => (
<TableRow key={s.id} className={SEVERITY_ROW_TINT[s.severity]}>
<TableCell>
<SeverityChip severity={s.severity} />
</TableCell>
<TableCell className="font-mono text-xs truncate max-w-[160px]" title={s.rule_id}>
{s.rule_id}
</TableCell>
<TableCell className="text-xs">
<div className="truncate max-w-[320px]" title={s.title ?? undefined}>
{s.title || <span className="text-muted-foreground">-</span>}
</div>
{s.match_excerpt && (
<div
className="font-mono text-[11px] text-muted-foreground truncate max-w-[320px]"
title={s.match_excerpt}
>
{s.match_excerpt}
</div>
{s.match_excerpt && (
<div
className="font-mono text-[11px] text-muted-foreground truncate max-w-[320px]"
title={s.match_excerpt}
>
{s.match_excerpt}
</div>
)}
</TableCell>
<TableCell className="font-mono text-xs truncate max-w-[260px]" title={s.target}>
{s.target}
{s.start_line != null && (
<span className="text-muted-foreground">
:{s.start_line}
{s.end_line != null && s.end_line !== s.start_line
? `-${s.end_line}`
: ''}
</span>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</div>
)}
</TableCell>
<TableCell className="font-mono text-xs truncate max-w-[260px]" title={s.target}>
{s.target}
{s.start_line != null && (
<span className="text-muted-foreground">
:{s.start_line}
{s.end_line != null && s.end_line !== s.start_line
? `-${s.end_line}`
: ''}
</span>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</ScrollArea>
</TabsContent>
</SheetSection>
)}
<TabsContent
value="misconfigs"
className="flex flex-col flex-1 min-h-0 mt-0 data-[state=inactive]:hidden"
>
{tab === 'misconfigs' && (
<SheetSection title={`Misconfigs · ${scan.misconfig_count ?? misconfigs.length}`}>
{misconfigsNeedsPagination && (
<div className="px-6 pt-3 flex items-center gap-1">
<div className="flex items-center gap-1 mb-3">
<div className="flex items-center gap-1 ml-auto">
<Button
variant="ghost"
@@ -877,78 +823,77 @@ export function VulnerabilityScanSheet({
</div>
</div>
)}
<ScrollArea className="flex-1 min-h-0">
<div className="px-6 py-3">
{misconfigs.length === 0 ? (
<div className="text-center text-sm text-muted-foreground py-12">
No misconfigurations detected.
</div>
) : (
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[100px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Severity</TableHead>
<TableHead className="w-[140px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Check</TableHead>
<TableHead className="text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Title</TableHead>
<TableHead className="w-[200px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Target</TableHead>
<TableHead className="w-[220px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Fix</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{misconfigsPageItems.map((m) => (
<TableRow key={m.id} className={SEVERITY_ROW_TINT[m.severity]}>
<TableCell>
<SeverityChip severity={m.severity} />
</TableCell>
<TableCell
className="font-mono text-xs truncate max-w-[140px]"
title={m.check_id ?? m.rule_id}
>
{m.check_id || m.rule_id}
</TableCell>
<TableCell className="text-xs">
<div className="truncate max-w-[320px]" title={m.title ?? undefined}>
{m.primary_url ? (
<a
href={m.primary_url}
target="_blank"
rel="noreferrer noopener"
className="inline-flex items-center gap-1 hover:underline"
>
{m.title || m.rule_id}
<ExternalLink className="w-3 h-3" strokeWidth={1.5} />
</a>
) : (
m.title || m.rule_id
)}
</div>
{m.message && (
<div
className="text-[11px] text-muted-foreground truncate max-w-[320px]"
title={m.message}
<ScrollArea block className="max-h-[60vh]">
{misconfigs.length === 0 ? (
<div className="text-center text-sm text-muted-foreground py-12">
No misconfigurations detected.
</div>
) : (
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[100px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Severity</TableHead>
<TableHead className="w-[140px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Check</TableHead>
<TableHead className="text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Title</TableHead>
<TableHead className="w-[200px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Target</TableHead>
<TableHead className="w-[220px] text-[10px] uppercase tracking-[0.18em] font-mono text-stat-subtitle">Fix</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{misconfigsPageItems.map((m) => (
<TableRow key={m.id} className={SEVERITY_ROW_TINT[m.severity]}>
<TableCell>
<SeverityChip severity={m.severity} />
</TableCell>
<TableCell
className="font-mono text-xs truncate max-w-[140px]"
title={m.check_id ?? m.rule_id}
>
{m.check_id || m.rule_id}
</TableCell>
<TableCell className="text-xs">
<div className="truncate max-w-[320px]" title={m.title ?? undefined}>
{m.primary_url ? (
<a
href={m.primary_url}
target="_blank"
rel="noreferrer noopener"
className="inline-flex items-center gap-1 hover:underline"
>
{m.message}
</div>
{m.title || m.rule_id}
<ExternalLink className="w-3 h-3" strokeWidth={1.5} />
</a>
) : (
m.title || m.rule_id
)}
</TableCell>
<TableCell className="font-mono text-xs truncate max-w-[200px]" title={m.target}>
{m.target}
</TableCell>
<TableCell className="text-xs truncate max-w-[220px]" title={m.resolution ?? undefined}>
{m.resolution || <span className="text-muted-foreground">-</span>}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</div>
</div>
{m.message && (
<div
className="text-[11px] text-muted-foreground truncate max-w-[320px]"
title={m.message}
>
{m.message}
</div>
)}
</TableCell>
<TableCell className="font-mono text-xs truncate max-w-[200px]" title={m.target}>
{m.target}
</TableCell>
<TableCell className="text-xs truncate max-w-[220px]" title={m.resolution ?? undefined}>
{m.resolution || <span className="text-muted-foreground">-</span>}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</ScrollArea>
</TabsContent>
</Tabs>
</div>
</SheetSection>
)}
</>
)}
</SheetContent>
</SystemSheet>
<ScanComparisonSheet
baselineScanId={compareBaselineId}
currentScanId={compareBaselineId != null ? scanId : null}
@@ -1031,7 +976,7 @@ export function VulnerabilityScanSheet({
</DialogFooter>
</DialogContent>
</Dialog>
</Sheet>
</>
);
}