mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-12 19:57:37 +00:00
feat(security): reflow the node Security page for mobile (#1372)
* feat(security): reflow the node Security page for mobile Below the md breakpoint the Security page now reads as a phone surface instead of a squeezed desktop, with no change to the desktop layout. - Masthead stat cluster moves into a full-width 3-cell strip (critical / high / last scan) below the tab strip, since the masthead hides its inline cluster on a phone. - The eight-section tab strip becomes a horizontally scrollable mono row with an edge mask-fade and a cyan underline on the active tab; every section stays reachable by scroll. - The six totals render as a 3x2 hairline-divided grid instead of the 640px-wide rail that forced a horizontal scroll. - The Images tab becomes a filterable, scrollable list (severity dot, truncated ref, freshness, critical/high count tags) with a chip row, in place of the desktop table. - A freshness footer band states scan recency and scanner version. All mobile treatment is gated by useIsMobile() or max-md: utilities, so the desktop view is byte-identical. Charts are reused full-width. * feat(security): make the mobile Security page a bespoke masthead-led screen On a phone the Security page now drops the global top bar and leads with its masthead (the notifications + more-menu cluster moves into the masthead's right slot), matching Home and Fleet so the mobile shell is continuous across pages. The view is reclassified bespoke and rendered through the masthead-led path; the desktop layout is unchanged. The mobile "more" menu now lists every destination instead of omitting the bottom-tab views, so the same menu opens the same set on every screen rather than changing contents from page to page.
This commit is contained in:
Anso
@@ -8,11 +8,23 @@ import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
||||
import { SeverityBadge } from '@/components/ui/SeverityBadge';
|
||||
import { getSeverityKey, type SeverityKey } from '@/lib/severityStyles';
|
||||
import { getSeverityKey, type SeverityKey, type ImageFilterValue } from '@/lib/severityStyles';
|
||||
import { formatTimeAgo } from '@/lib/relativeTime';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useIsMobile } from '@/hooks/use-is-mobile';
|
||||
import { ImageScanRow, ImageFilterChips, type ImageFilterChip } from './SecurityMobile';
|
||||
import type { ScanSummary, ScanDetailTab, ScannerKind } from '@/types/security';
|
||||
|
||||
// Mobile severity chips. 'FIXABLE' is a phone-only pseudo-filter (the desktop
|
||||
// Combobox never emits it), so the shared filter logic treats it specially.
|
||||
const MOBILE_FILTER_CHIPS: ImageFilterChip[] = [
|
||||
{ value: 'all', label: 'All' },
|
||||
{ value: 'CRITICAL', label: 'Critical' },
|
||||
{ value: 'HIGH', label: 'High' },
|
||||
{ value: 'FIXABLE', label: 'Fixable' },
|
||||
{ value: 'CLEAN', label: 'Clean' },
|
||||
];
|
||||
|
||||
const PAGE_SIZE = 12;
|
||||
|
||||
type SortKey = 'image_ref' | 'scanned_at' | 'severity' | 'findings';
|
||||
@@ -67,8 +79,9 @@ interface ImagesTabProps {
|
||||
|
||||
/** Latest-scan index for real images (stack/config scans live in Compose risks). */
|
||||
export function ImagesTab({ summaries, loading, error, onInspect, canScan, scanningRef, onScan }: ImagesTabProps) {
|
||||
const isMobile = useIsMobile();
|
||||
const [search, setSearch] = useState('');
|
||||
const [severity, setSeverity] = useState('all');
|
||||
const [severity, setSeverity] = useState<ImageFilterValue>('all');
|
||||
const [sortKey, setSortKey] = useState<SortKey>('scanned_at');
|
||||
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
|
||||
const [page, setPage] = useState(0);
|
||||
@@ -78,7 +91,11 @@ export function ImagesTab({ summaries, loading, error, onInspect, canScan, scann
|
||||
return Object.values(summaries)
|
||||
.filter((s) => !s.image_ref.startsWith('stack:'))
|
||||
.filter((s) => (term ? s.image_ref.toLowerCase().includes(term) : true))
|
||||
.filter((s) => (severity === 'all' ? true : getSeverityKey(s) === severity));
|
||||
.filter((s) => {
|
||||
if (severity === 'all') return true;
|
||||
if (severity === 'FIXABLE') return s.fixable > 0;
|
||||
return getSeverityKey(s) === severity;
|
||||
});
|
||||
}, [summaries, search, severity]);
|
||||
|
||||
const sorted = useMemo(() => {
|
||||
@@ -136,6 +153,37 @@ export function ImagesTab({ summaries, loading, error, onInspect, canScan, scann
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{isMobile ? (
|
||||
<>
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" strokeWidth={1.5} />
|
||||
<Input
|
||||
placeholder="Filter images…"
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(0); }}
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
<ImageFilterChips
|
||||
chips={MOBILE_FILTER_CHIPS}
|
||||
active={severity}
|
||||
onSelect={(v) => { setSeverity(v); setPage(0); }}
|
||||
/>
|
||||
<div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel overflow-hidden">
|
||||
<div className="px-4">
|
||||
{pageItems.map((s) => (
|
||||
<ImageScanRow key={s.image_ref} summary={s} onInspect={onInspect} />
|
||||
))}
|
||||
</div>
|
||||
{pageItems.length === 0 && (
|
||||
<div className="py-12 text-center text-sm text-muted-foreground">
|
||||
No images match your search or filter.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="relative flex-1 min-w-[200px] max-w-sm">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" strokeWidth={1.5} />
|
||||
@@ -149,7 +197,7 @@ export function ImagesTab({ summaries, loading, error, onInspect, canScan, scann
|
||||
<Combobox
|
||||
options={FILTER_OPTIONS}
|
||||
value={severity}
|
||||
onValueChange={(v) => { setSeverity(v || 'all'); setPage(0); }}
|
||||
onValueChange={(v) => { setSeverity((v || 'all') as ImageFilterValue); setPage(0); }}
|
||||
className="w-[180px]"
|
||||
/>
|
||||
</div>
|
||||
@@ -233,6 +281,8 @@ export function ImagesTab({ summaries, loading, error, onInspect, canScan, scann
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{sorted.length > PAGE_SIZE && (
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
|
||||
@@ -3,6 +3,8 @@ import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { SignalRail, type SignalTile } from '@/components/ui/SignalRail';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { formatTimeAgo } from '@/lib/relativeTime';
|
||||
import { useIsMobile } from '@/hooks/use-is-mobile';
|
||||
import { SecuritySevStrip, SecurityTotalsGrid, SecurityFooterBand } from './SecurityMobile';
|
||||
import type { SecurityOverview, ScanSummary, SecurityRiskTrendPoint } from '@/types/security';
|
||||
import type { SecurityTab } from '@/lib/events';
|
||||
import {
|
||||
@@ -55,6 +57,8 @@ function ChartCard({ title, className, children }: { title: string; className?:
|
||||
}
|
||||
|
||||
export function OverviewTab({ overview, loadError, summaries, trend, onNavigate, onInspect, canScan, onScanComplete, isPaid }: OverviewTabProps) {
|
||||
const isMobile = useIsMobile();
|
||||
|
||||
if (loadError === 'unsupported') {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
@@ -106,16 +110,23 @@ export function OverviewTab({ overview, loadError, summaries, trend, onNavigate,
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{canScan && (
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<p className="text-sm text-stat-subtitle">
|
||||
{overview.scannedImages === 0
|
||||
? 'No images scanned on this node yet.'
|
||||
: `${overview.scannedImages} image${overview.scannedImages === 1 ? '' : 's'} scanned.`}
|
||||
</p>
|
||||
<ScanNodeLauncher canScan={canScan} onComplete={onScanComplete} />
|
||||
</div>
|
||||
isMobile ? (
|
||||
<ScanNodeLauncher canScan={canScan} onComplete={onScanComplete} fullWidth />
|
||||
) : (
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<p className="text-sm text-stat-subtitle">
|
||||
{overview.scannedImages === 0
|
||||
? 'No images scanned on this node yet.'
|
||||
: `${overview.scannedImages} image${overview.scannedImages === 1 ? '' : 's'} scanned.`}
|
||||
</p>
|
||||
<ScanNodeLauncher canScan={canScan} onComplete={onScanComplete} />
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* The masthead hides its stat cluster on a phone; restate it here. */}
|
||||
{isMobile && <SecuritySevStrip overview={overview} />}
|
||||
|
||||
{/* Charts lead the dashboard. */}
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
<ChartCard title="Risk trend · 30 days · critical + high" className="lg:col-span-2">
|
||||
@@ -136,11 +147,15 @@ export function OverviewTab({ overview, loadError, summaries, trend, onNavigate,
|
||||
</div>
|
||||
|
||||
{/* Supporting counts + posture, secondary to the charts above. */}
|
||||
<div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel overflow-hidden max-md:overflow-x-auto">
|
||||
<div className="min-w-[640px]">
|
||||
<SignalRail tiles={tiles} className="border-b-0" />
|
||||
{isMobile ? (
|
||||
<SecurityTotalsGrid overview={overview} />
|
||||
) : (
|
||||
<div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel overflow-hidden">
|
||||
<div className="min-w-[640px]">
|
||||
<SignalRail tiles={tiles} className="border-b-0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel p-4">
|
||||
@@ -182,6 +197,8 @@ export function OverviewTab({ overview, loadError, summaries, trend, onNavigate,
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isMobile && <SecurityFooterBand overview={overview} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,6 +13,8 @@ interface ScanNodeLauncherProps {
|
||||
canScan: boolean;
|
||||
/** Fired after a scan finishes so the caller can refresh the overview. */
|
||||
onComplete?: () => void;
|
||||
/** Stretch the trigger to fill its row (the mobile Overview lead action). */
|
||||
fullWidth?: boolean;
|
||||
}
|
||||
|
||||
const TYPES = [
|
||||
@@ -29,7 +31,7 @@ type TypeKey = (typeof TYPES)[number]['key'];
|
||||
* captured once so the request and the progress stream stay bound to it even if
|
||||
* the active node changes mid-scan.
|
||||
*/
|
||||
export function ScanNodeLauncher({ canScan, onComplete }: ScanNodeLauncherProps) {
|
||||
export function ScanNodeLauncher({ canScan, onComplete, fullWidth = false }: ScanNodeLauncherProps) {
|
||||
const { runWithLog } = useDeployFeedback();
|
||||
const { activeNode } = useNodes();
|
||||
const [open, setOpen] = useState(false);
|
||||
@@ -79,7 +81,7 @@ export function ScanNodeLauncher({ canScan, onComplete }: ScanNodeLauncherProps)
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button size="sm" disabled={running}>
|
||||
<Button size="sm" disabled={running} className={fullWidth ? 'w-full' : undefined}>
|
||||
{running
|
||||
? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" strokeWidth={1.5} />
|
||||
: <ShieldCheck className="w-4 h-4 mr-1.5" strokeWidth={1.5} />}
|
||||
|
||||
@@ -0,0 +1,216 @@
|
||||
// Mobile (<md) reflow pieces for the node-scoped Security page. These render
|
||||
// only on the phone branch (gated by useIsMobile() in the parent components)
|
||||
// and never affect the desktop layout. Tokens only, no new colors or fonts;
|
||||
// they translate the approved prototype onto the existing design tokens.
|
||||
import type { ReactNode } from 'react';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Kicker } from '@/components/mobile/mobile-ui';
|
||||
import { getSeverityKey, SEVERITY_DOT_CLASSES, type ImageFilterValue } from '@/lib/severityStyles';
|
||||
import { formatTimeAgo } from '@/lib/relativeTime';
|
||||
import type { SecurityTab } from '@/lib/events';
|
||||
import type { ScanSummary, SecurityOverview, ScanDetailTab } from '@/types/security';
|
||||
|
||||
export interface SecurityMobileTab {
|
||||
value: SecurityTab;
|
||||
label: string;
|
||||
}
|
||||
|
||||
/** Horizontal mono tab scroller with a cyan underline on the active tab and an
|
||||
* edge mask-fade so the overflow reads as scrollable. Keeps all tabs reachable
|
||||
* by scroll, matching the desktop tab IA. */
|
||||
export function SecurityMobileTabs({ tabs, active, onSelect }: {
|
||||
tabs: SecurityMobileTab[];
|
||||
active: SecurityTab;
|
||||
onSelect: (tab: SecurityTab) => void;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
role="tablist"
|
||||
aria-label="Security sections"
|
||||
className="flex shrink-0 overflow-x-auto border-b border-hairline [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||||
style={{
|
||||
maskImage: 'linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%)',
|
||||
WebkitMaskImage: 'linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%)',
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab) => {
|
||||
const on = tab.value === active;
|
||||
return (
|
||||
<button
|
||||
key={tab.value}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={on}
|
||||
onClick={() => onSelect(tab.value)}
|
||||
className={cn(
|
||||
'min-h-11 shrink-0 whitespace-nowrap px-3 py-[13px] font-mono text-[12px] tracking-[0.04em] transition-colors',
|
||||
on ? 'text-brand shadow-[inset_0_-2px_0_0_var(--brand)]' : 'text-stat-subtitle',
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StripCell({ kicker, value, valueClass, last }: {
|
||||
kicker: string;
|
||||
value: string;
|
||||
valueClass: string;
|
||||
last?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn('min-w-0 flex-1 px-[13px] py-3', !last && 'border-r border-hairline')}>
|
||||
<Kicker>{kicker}</Kicker>
|
||||
<div className={cn('mt-[3px] truncate font-mono text-[26px] leading-none tabular-nums tracking-[-0.02em]', valueClass)}>
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** CRITICAL / HIGH / LAST SCAN strip that the desktop masthead carries inline;
|
||||
* on mobile the masthead hides its stat cluster and this sits below the tabs. */
|
||||
export function SecuritySevStrip({ overview }: { overview: SecurityOverview }) {
|
||||
return (
|
||||
<div className="flex overflow-hidden rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel">
|
||||
<StripCell kicker="critical" value={String(overview.critical)} valueClass={overview.critical > 0 ? 'text-destructive' : 'text-stat-value'} />
|
||||
<StripCell kicker="high" value={String(overview.high)} valueClass={overview.high > 0 ? 'text-warning' : 'text-stat-value'} />
|
||||
<StripCell
|
||||
kicker="last scan"
|
||||
value={overview.lastSuccessfulScanAt ? formatTimeAgo(overview.lastSuccessfulScanAt) : 'never'}
|
||||
valueClass="text-stat-value"
|
||||
last
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The six desktop totals as a 3-col x 2-row hairline-divided card (replaces the
|
||||
* min-w-[640px] SignalRail, which forces a horizontal scroll on a phone). */
|
||||
export function SecurityTotalsGrid({ overview }: { overview: SecurityOverview }) {
|
||||
const cells: Array<{ kicker: string; value: number; valueClass: string }> = [
|
||||
{ kicker: 'scanned', value: overview.scannedImages, valueClass: 'text-stat-value' },
|
||||
{ kicker: 'fixable', value: overview.fixable, valueClass: overview.fixable > 0 ? 'text-warning' : 'text-stat-value' },
|
||||
{ kicker: 'secrets', value: overview.secrets, valueClass: overview.secrets > 0 ? 'text-destructive' : 'text-stat-value' },
|
||||
{ kicker: 'misconfigs', value: overview.misconfigs, valueClass: overview.misconfigs > 0 ? 'text-warning' : 'text-stat-value' },
|
||||
{ kicker: 'stale', value: overview.staleScans, valueClass: overview.staleScans > 0 ? 'text-warning' : 'text-stat-value' },
|
||||
{ kicker: 'failed', value: overview.failedScans, valueClass: overview.failedScans > 0 ? 'text-destructive' : 'text-stat-value' },
|
||||
];
|
||||
return (
|
||||
<div className="grid grid-cols-3 overflow-hidden rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel">
|
||||
{cells.map((cell, i) => (
|
||||
<div
|
||||
key={cell.kicker}
|
||||
className={cn('px-[13px] py-3', i % 3 !== 0 && 'border-l border-hairline', i >= 3 && 'border-t border-hairline')}
|
||||
>
|
||||
<Kicker>{cell.kicker}</Kicker>
|
||||
<div className={cn('mt-[3px] font-mono text-[21px] leading-none tabular-nums tracking-[-0.01em]', cell.valueClass)}>
|
||||
{cell.value}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Footer freshness band (§9.11): context, not chrome. States the truthful scan
|
||||
* freshness and scanner version for the active node. */
|
||||
export function SecurityFooterBand({ overview }: { overview: SecurityOverview }) {
|
||||
const parts: string[] = [
|
||||
overview.lastSuccessfulScanAt ? `last scan ${formatTimeAgo(overview.lastSuccessfulScanAt)}` : 'no successful scan yet',
|
||||
];
|
||||
if (overview.scanner.available) {
|
||||
parts.push(`${overview.scanner.source}${overview.scanner.version ? ` v${overview.scanner.version}` : ''}`);
|
||||
} else {
|
||||
parts.push('scanner not installed');
|
||||
}
|
||||
return (
|
||||
<div className="-mx-4 mt-2 border-t border-hairline bg-band px-4 py-[9px]">
|
||||
<Kicker className="text-stat-subtitle">{parts.join(' · ')}</Kicker>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const COUNT_TAG_TONE = {
|
||||
destructive: 'border-destructive/30 bg-destructive/[0.14] text-destructive',
|
||||
warning: 'border-warning/30 bg-warning/[0.14] text-warning',
|
||||
success: 'border-success/30 bg-success/[0.14] text-success',
|
||||
} as const;
|
||||
|
||||
function CountTag({ tone, children }: { tone: keyof typeof COUNT_TAG_TONE; children: ReactNode }) {
|
||||
return (
|
||||
<span className={cn('whitespace-nowrap rounded-[5px] border px-[7px] py-[2px] font-mono text-[10px] uppercase tracking-[0.08em]', COUNT_TAG_TONE[tone])}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** One image row in the mobile Images list: severity dot, truncated mono ref over
|
||||
* a freshness meta line, trailing C/H count tags (or CLEAN), and a chevron. */
|
||||
export function ImageScanRow({ summary, onInspect }: {
|
||||
summary: ScanSummary;
|
||||
onInspect: (scanId: number, initialTab?: ScanDetailTab) => void;
|
||||
}) {
|
||||
// Use the shared classifier so the count tags agree with the leading dot: a
|
||||
// medium/low-only image is not "clean", it is its highest severity.
|
||||
const severityKey = getSeverityKey(summary);
|
||||
const clean = severityKey === 'CLEAN';
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onInspect(summary.scan_id, 'vulns')}
|
||||
className="flex min-h-11 w-full items-center gap-[11px] border-b border-hairline py-[11px] text-left last:border-b-0"
|
||||
>
|
||||
<span className={cn('h-[7px] w-[7px] shrink-0 rounded-full', SEVERITY_DOT_CLASSES[severityKey])} aria-hidden />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate font-mono text-[13px] text-stat-value">{summary.image_ref}</span>
|
||||
<span className="mt-px block font-mono text-[10px] text-stat-icon">scanned {formatTimeAgo(summary.scanned_at)}</span>
|
||||
</span>
|
||||
<span className="flex shrink-0 items-center gap-1">
|
||||
{summary.critical > 0 && <CountTag tone="destructive">{summary.critical}C</CountTag>}
|
||||
{summary.high > 0 && <CountTag tone="warning">{summary.high}H</CountTag>}
|
||||
{clean && <CountTag tone="success">clean</CountTag>}
|
||||
</span>
|
||||
<ChevronRight className="h-3 w-3 shrink-0 text-stat-icon" strokeWidth={1.5} aria-hidden />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export interface ImageFilterChip {
|
||||
value: ImageFilterValue;
|
||||
label: string;
|
||||
}
|
||||
|
||||
/** Horizontal severity filter chips for the mobile Images list. */
|
||||
export function ImageFilterChips({ chips, active, onSelect }: {
|
||||
chips: ImageFilterChip[];
|
||||
active: ImageFilterValue;
|
||||
onSelect: (value: ImageFilterValue) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
||||
{chips.map((chip) => {
|
||||
const on = chip.value === active;
|
||||
return (
|
||||
<button
|
||||
key={chip.value}
|
||||
type="button"
|
||||
onClick={() => onSelect(chip.value)}
|
||||
className={cn(
|
||||
'min-h-11 shrink-0 whitespace-nowrap rounded-[7px] border px-[11px] font-mono text-[11px] tracking-[0.04em] transition-colors',
|
||||
on
|
||||
? 'border-brand bg-brand text-brand-foreground'
|
||||
: 'border-card-border bg-card text-stat-subtitle',
|
||||
)}
|
||||
>
|
||||
{chip.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
/**
|
||||
* Mobile (<md) Security reflow pieces: the horizontal tab scroller and the
|
||||
* image-list row, plus the ImagesTab mobile list/chip rendering. These render
|
||||
* only on the phone branch; useIsMobile() is driven via a mocked matchMedia.
|
||||
*/
|
||||
import { describe, it, expect, vi, afterEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { SecurityMobileTabs, ImageScanRow, SecuritySevStrip, type SecurityMobileTab } from '../SecurityMobile';
|
||||
import { ImagesTab } from '../ImagesTab';
|
||||
import type { ScanSummary, SecurityOverview } from '@/types/security';
|
||||
|
||||
function overview(o: Partial<SecurityOverview> = {}): SecurityOverview {
|
||||
return {
|
||||
scannedImages: 0,
|
||||
critical: 0,
|
||||
high: 0,
|
||||
fixable: 0,
|
||||
secrets: 0,
|
||||
misconfigs: 0,
|
||||
staleScans: 0,
|
||||
failedScans: 0,
|
||||
lastSuccessfulScanAt: null,
|
||||
scanner: { available: false, source: 'managed', version: null, autoUpdate: false },
|
||||
deployEnforcement: { eligibleBlockPolicies: 0, honorSuppressionsOnDeploy: false },
|
||||
...o,
|
||||
};
|
||||
}
|
||||
|
||||
function summary(o: Partial<ScanSummary> & { image_ref: string; scan_id: number }): ScanSummary {
|
||||
return {
|
||||
highest_severity: null,
|
||||
scanned_at: 1_700_000_000_000,
|
||||
total: 0,
|
||||
critical: 0,
|
||||
high: 0,
|
||||
medium: 0,
|
||||
low: 0,
|
||||
unknown: 0,
|
||||
fixable: 0,
|
||||
secret_count: 0,
|
||||
misconfig_count: 0,
|
||||
...o,
|
||||
};
|
||||
}
|
||||
|
||||
function asMap(...list: ScanSummary[]): Record<string, ScanSummary> {
|
||||
return Object.fromEntries(list.map((s) => [s.image_ref, s]));
|
||||
}
|
||||
|
||||
function installMatchMedia(matches: boolean) {
|
||||
window.matchMedia = vi.fn().mockReturnValue({
|
||||
matches,
|
||||
media: '',
|
||||
onchange: null,
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
dispatchEvent: vi.fn(),
|
||||
}) as unknown as typeof window.matchMedia;
|
||||
}
|
||||
|
||||
const TABS: SecurityMobileTab[] = [
|
||||
{ value: 'overview', label: 'Overview' },
|
||||
{ value: 'images', label: 'Images' },
|
||||
{ value: 'scanner', label: 'Scanner setup' },
|
||||
];
|
||||
|
||||
describe('SecurityMobileTabs', () => {
|
||||
it('renders every tab and marks the active one selected', () => {
|
||||
render(<SecurityMobileTabs tabs={TABS} active="images" onSelect={vi.fn()} />);
|
||||
expect(screen.getAllByRole('tab')).toHaveLength(3);
|
||||
expect(screen.getByRole('tab', { name: 'Images' })).toHaveAttribute('aria-selected', 'true');
|
||||
expect(screen.getByRole('tab', { name: 'Overview' })).toHaveAttribute('aria-selected', 'false');
|
||||
});
|
||||
|
||||
it('gives the active tab the cyan underline and brand ink', () => {
|
||||
render(<SecurityMobileTabs tabs={TABS} active="images" onSelect={vi.fn()} />);
|
||||
const active = screen.getByRole('tab', { name: 'Images' });
|
||||
expect(active.className).toContain('text-brand');
|
||||
expect(active.className).toContain('shadow-[inset_0_-2px_0_0_var(--brand)]');
|
||||
});
|
||||
|
||||
it('calls onSelect with the tab value on click', async () => {
|
||||
const onSelect = vi.fn();
|
||||
render(<SecurityMobileTabs tabs={TABS} active="overview" onSelect={onSelect} />);
|
||||
await userEvent.click(screen.getByRole('tab', { name: 'Scanner setup' }));
|
||||
expect(onSelect).toHaveBeenCalledWith('scanner');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ImageScanRow', () => {
|
||||
it('shows critical and high count tags', () => {
|
||||
render(<ImageScanRow summary={summary({ image_ref: 'nginx:1', scan_id: 1, critical: 5, high: 2 })} onInspect={vi.fn()} />);
|
||||
expect(screen.getByText('nginx:1')).toBeInTheDocument();
|
||||
expect(screen.getByText('5C')).toBeInTheDocument();
|
||||
expect(screen.getByText('2H')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows a clean tag when there are no findings', () => {
|
||||
render(<ImageScanRow summary={summary({ image_ref: 'caddy:2', scan_id: 2 })} onInspect={vi.fn()} />);
|
||||
expect(screen.getByText('clean')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not call a medium/low-only image clean', () => {
|
||||
// A medium-only image has no critical/high/secret/misconfig findings but is
|
||||
// not clean; the dot and tags must follow getSeverityKey, not an all-zero check.
|
||||
render(<ImageScanRow summary={summary({ image_ref: 'pg:16', scan_id: 3, highest_severity: 'MEDIUM', total: 4, medium: 4 })} onInspect={vi.fn()} />);
|
||||
expect(screen.queryByText('clean')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('opens the scan on the vulns tab when tapped', async () => {
|
||||
const onInspect = vi.fn();
|
||||
render(<ImageScanRow summary={summary({ image_ref: 'redis:7', scan_id: 9 })} onInspect={onInspect} />);
|
||||
await userEvent.click(screen.getByText('redis:7'));
|
||||
expect(onInspect).toHaveBeenCalledWith(9, 'vulns');
|
||||
});
|
||||
});
|
||||
|
||||
describe('SecuritySevStrip', () => {
|
||||
it('tints critical and high by severity when nonzero', () => {
|
||||
render(<SecuritySevStrip overview={overview({ critical: 2, high: 4 })} />);
|
||||
expect(screen.getByText('2').className).toContain('text-destructive');
|
||||
expect(screen.getByText('4').className).toContain('text-warning');
|
||||
});
|
||||
|
||||
it('keeps zero counts at the neutral value tone', () => {
|
||||
render(<SecuritySevStrip overview={overview({ critical: 0, high: 0 })} />);
|
||||
// Two cells read 0 (critical, high); both stay neutral, neither tinted.
|
||||
for (const cell of screen.getAllByText('0')) {
|
||||
expect(cell.className).toContain('text-stat-value');
|
||||
expect(cell.className).not.toContain('text-destructive');
|
||||
}
|
||||
});
|
||||
|
||||
it('reads "never" when the node has no successful scan', () => {
|
||||
render(<SecuritySevStrip overview={overview({ lastSuccessfulScanAt: null })} />);
|
||||
expect(screen.getByText('never')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('ImagesTab (mobile)', () => {
|
||||
const original = window.matchMedia;
|
||||
afterEach(() => { window.matchMedia = original; vi.clearAllMocks(); });
|
||||
|
||||
const base = {
|
||||
loading: false,
|
||||
error: false,
|
||||
onInspect: vi.fn(),
|
||||
canScan: false,
|
||||
scanningRef: null as string | null,
|
||||
onScan: vi.fn(),
|
||||
};
|
||||
|
||||
it('renders the severity chips and a row list below the breakpoint', () => {
|
||||
installMatchMedia(true);
|
||||
render(
|
||||
<ImagesTab
|
||||
{...base}
|
||||
summaries={asMap(
|
||||
summary({ image_ref: 'nginx:1', scan_id: 1, highest_severity: 'CRITICAL', total: 5, critical: 5 }),
|
||||
summary({ image_ref: 'stack:web', scan_id: 2, misconfig_count: 3 }),
|
||||
)}
|
||||
/>,
|
||||
);
|
||||
// Chips are present and the stack scan is excluded, like the desktop table.
|
||||
expect(screen.getByRole('button', { name: 'Fixable' })).toBeInTheDocument();
|
||||
expect(screen.getByText('nginx:1')).toBeInTheDocument();
|
||||
expect(screen.getByText('5C')).toBeInTheDocument();
|
||||
expect(screen.queryByText('stack:web')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('filters the list to fixable images via the chip', async () => {
|
||||
installMatchMedia(true);
|
||||
render(
|
||||
<ImagesTab
|
||||
{...base}
|
||||
summaries={asMap(
|
||||
summary({ image_ref: 'fix:1', scan_id: 1, highest_severity: 'HIGH', high: 2, fixable: 2 }),
|
||||
summary({ image_ref: 'nofix:1', scan_id: 2, highest_severity: 'HIGH', high: 1, fixable: 0 }),
|
||||
)}
|
||||
/>,
|
||||
);
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Fixable' }));
|
||||
expect(screen.getByText('fix:1')).toBeInTheDocument();
|
||||
expect(screen.queryByText('nofix:1')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user