wulf-pulse/components/status/worker-pulse.tsx

119 lines
3.5 KiB
TypeScript
Raw Normal View History

feat(design): nav/visual overhaul — brand layer, /status route, KPI dashboard, TanStack DataTable Major UI refresh on the nav-design-improvements branch. Drops 2013-era inline styles and consolidates patterns behind shared primitives. Foundation - New Wulf brand layer in app/styles/brand.css repointing --primary to the standards-guide blue (#0075AD) with utility classes for numerics (.num / .num-lg / .num-xl), metric labels, surface tints, and the wolf-mark watermark - Switch primary face to IBM Plex Sans + IBM Plex Mono via next/font; Helvetica/Arial stays in the fallback chain for brand fidelity - Wordmark subtitle changed from "PSA Management System" to "Operations console" everywhere it appeared - Tagline footer ("Don't be afraid to cry") on every non-mobile page Status moved out of /dashboard - New /status route with integration tiles grouped by category, sync health table, worker pulse cards (analyzer / RMM / sync scheduler), token-expiry section, conditional alert banner - Top-bar StatusIndicator polls integration health every 60s and links to /status - INTEGRATIONS_DISABLED env var suppresses operator-disabled integrations (e.g. SentinelOne) — no failure noise from broken-on- purpose entries. Aliases supported (sentinelone → s1, etc.) Dashboard rebuilt around KPIs - /api/dashboard/overview adds today snapshot (opened, resolved, open total, SLA breaches) with delta math - /api/dashboard/trends backs queue × priority heatmap, 30-day volume area chart, 30-day mean resolution time line chart, today's active engineers leaderboard Components - StatusBadge driven by lib/status-registry.ts (priority, ticket status, classification, source, company type, publish, active / yes-no / billable / approved registries) - StatusLight (8px geometric square, five states, three sizes) - EmptyState (shared dashed panel with icon + headline + optional CTA) - KpiCard with delta indicator and tonal left border - WulfMark (mark / wordmark variants from /public/branding) - Skeleton helpers (SkeletonRow / Rows / Card / Chart / Header / Table) Navigation - Admin flat link → dropdown with seven shortcuts - New UserMenu (initials avatar, role badge, settings + sign-out) - Active-route highlight is now a 2px Wulf-blue underline echoing the PageHeader rule (consistent across flat links and submenu triggers); active children inside dropdowns use bg-primary/10 - Submenu width is content-driven (min-w 320 / max-w 440, single col) - Mobile hamburger via Sheet, reuses the same nav config Pages migrated - 16 admin sub-pages adopt PageHeader (with accent prop) - /addigy-devices: shadcn Table + Checkbox; PageHeader; status badges - 10 raw <table> blocks across admin/sync/* migrated to shadcn Table - /veeam-analysis migrated to shadcn Table (kept its expansion logic) - Detail routes (analyzer ticket, analyzer analysis) get breadcrumbs DataTable - Rewritten on @tanstack/react-table v8 in manual mode; external API unchanged so all 10+ data-browser pages keep working - New optional props for drill-down rows: getRowCanExpand + renderSubRow Mobile - Multi-select Popover gets max-w-[calc(100vw-1rem)] and collisionPadding so dropdowns can't overflow narrow viewports - CI filter bar wraps and shrinks; stat pill flows below Docs - New ARCHITECTURE.md (load-bearing reference for runtime, data flow, workers, analyzer pipeline, auth, deployment, gotchas) - New DESIGN.md (tokens, layout, navigation IA, component vocabulary, rolling backlog of remaining cleanup) - CLAUDE.md refreshed with pointers to the two new docs and the INTEGRATIONS_DISABLED operator config note - shadcn registry registered as project-level MCP server (.mcp.json) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-03 09:33:13 -04:00
/* WorkerPulse single worker heartbeat tile.
*
* State derives from:
* last activity is fresher than the worker's expected cadence ok / pending
* last activity stale idle (worker quiet, not necessarily broken)
* any failures in the last hour warn (degraded)
* all 1h runs failing error
*
* Per-worker freshness thresholds:
* Analyzer 5 min (poll every 2s, gets work intermittently)
* RMM Overshell 10 min
* Sync scheduler 60 min (cron-driven; quietest worker) */
'use client';
import { Card, CardContent } from '@/components/ui/card';
import { StatusLight, type StatusLightState } from '@/components/ui/status-light';
interface WorkerSnapshot {
name: string;
lastActivity: string | null;
inFlight: number;
oneHour: { success: number; failure: number };
}
interface WorkerPulseProps {
worker: WorkerSnapshot;
/** Stale threshold in minutes; varies per worker. */
freshnessMinutes?: number;
}
function relTime(iso: string | null): string {
if (!iso) return 'never';
const ms = Date.now() - new Date(iso).getTime();
if (ms < 0) return 'just now';
const min = Math.floor(ms / 60000);
if (min < 1) return 'just now';
if (min < 60) return `${min} min ago`;
const hr = Math.floor(min / 60);
if (hr < 48) return `${hr} h ago`;
const day = Math.floor(hr / 24);
return `${day} d ago`;
}
export function WorkerPulse({ worker, freshnessMinutes = 30 }: WorkerPulseProps) {
const { lastActivity, inFlight, oneHour } = worker;
const fresh =
lastActivity != null &&
Date.now() - new Date(lastActivity).getTime() < freshnessMinutes * 60_000;
let state: StatusLightState;
let stateLabel: string;
if (oneHour.failure > 0 && oneHour.success === 0) {
state = 'error';
stateLabel = 'failing';
} else if (oneHour.failure > 0) {
state = 'warn';
stateLabel = 'degraded';
} else if (inFlight > 0) {
state = 'pending';
stateLabel = 'in flight';
} else if (fresh) {
state = 'ok';
stateLabel = 'ok';
} else {
state = 'idle';
stateLabel = 'idle';
}
return (
<Card>
<CardContent className="pt-4 pb-3 space-y-3">
<div className="flex items-start justify-between">
<div>
<p className="text-sm font-medium leading-none">{worker.name}</p>
<p className="text-xs text-muted-foreground mt-1 capitalize">{stateLabel}</p>
</div>
<StatusLight state={state} size="lg" pulse={state === 'pending'} label={stateLabel} />
</div>
<div className="grid grid-cols-3 gap-2 text-center">
<Stat label="In flight" value={inFlight} />
<Stat label="Ok · 1h" value={oneHour.success} />
<Stat label="Fail · 1h" value={oneHour.failure} tone={oneHour.failure > 0 ? 'error' : 'default'} />
</div>
<p className="text-xs text-muted-foreground">
Last activity <span className="num">{relTime(lastActivity)}</span>
</p>
</CardContent>
</Card>
);
}
function Stat({
label,
value,
tone = 'default',
}: {
label: string;
value: number;
tone?: 'default' | 'error';
}) {
return (
<div className="rounded-sm bg-muted/40 py-1.5 px-2">
<p
className={
'num text-base ' + (tone === 'error' ? 'text-destructive' : 'text-foreground')
}
>
{value}
</p>
<p className="text-[10px] uppercase tracking-wider text-muted-foreground">
{label}
</p>
</div>
);
}