refactor(ui): extract reusable component package
This commit is contained in:
vince
parent
e68eb2efee
commit
78a4e28dd4
85 changed files with 4144 additions and 0 deletions
258
src/stories/story-data.ts
Normal file
258
src/stories/story-data.ts
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
import { dashboardPreviewFixtures } from "../fixtures";
|
||||
import type {
|
||||
UiDashboardPreview,
|
||||
UiModuleBlock,
|
||||
UiServiceGroup,
|
||||
UiServiceRow,
|
||||
UiSeverity,
|
||||
UiStatusItem,
|
||||
UiTelemetryCard,
|
||||
} from "../types";
|
||||
|
||||
export const primaryDashboard = dashboardPreviewFixtures.primary;
|
||||
export const secondaryDashboard = dashboardPreviewFixtures.secondary;
|
||||
|
||||
export const emptyDashboard: UiDashboardPreview = {
|
||||
eyebrow: "Preview Surface",
|
||||
title: "Empty Console",
|
||||
subtitle: "No records available",
|
||||
telemetry: [],
|
||||
modules: [],
|
||||
serviceGroups: [],
|
||||
statusItems: [],
|
||||
};
|
||||
|
||||
export const moduleBlocks: Record<string, UiModuleBlock> = {
|
||||
compact: {
|
||||
id: "module-compact",
|
||||
title: "Local Node",
|
||||
value: "21.4 C",
|
||||
detail: "static sample",
|
||||
icon: "mdi:weather-partly-cloudy",
|
||||
severity: "ok",
|
||||
},
|
||||
unavailable: {
|
||||
id: "module-unavailable",
|
||||
title: "External Signal",
|
||||
value: "n/a",
|
||||
detail: "fallback value",
|
||||
icon: "mdi:cloud-off-outline",
|
||||
severity: "unavailable",
|
||||
},
|
||||
long: {
|
||||
id: "module-long",
|
||||
title: "Regional Aggregate Signal",
|
||||
value: "manual review queued",
|
||||
detail: "long generic label wraps without layout shift",
|
||||
icon: "mdi:map-marker-radius-outline",
|
||||
severity: "warning",
|
||||
},
|
||||
};
|
||||
|
||||
export const telemetryCards: Record<string, UiTelemetryCard> = {
|
||||
percent: {
|
||||
id: "telemetry-percent",
|
||||
label: "Capacity Used",
|
||||
value: { kind: "percent", value: 82 },
|
||||
progress: 82,
|
||||
icon: "mdi:gauge",
|
||||
severity: "ok",
|
||||
detail: "static sample",
|
||||
sparkline: [24, 36, 28, 44, 52, 82],
|
||||
},
|
||||
bytes: {
|
||||
id: "telemetry-bytes",
|
||||
label: "Data Volume",
|
||||
value: { kind: "bytes", value: 982451653, precision: 1 },
|
||||
icon: "mdi:database",
|
||||
severity: "neutral",
|
||||
detail: "static sample",
|
||||
sparkline: [8, 12, 20, 18, 24, 29],
|
||||
},
|
||||
temperature: {
|
||||
id: "telemetry-temperature",
|
||||
label: "Node Temperature",
|
||||
value: { kind: "temperature", value: 21.4, precision: 1 },
|
||||
icon: "mdi:thermometer",
|
||||
severity: "neutral",
|
||||
detail: "static sample",
|
||||
sparkline: [18, 20, 19, 21, 20, 21.4],
|
||||
},
|
||||
latency: {
|
||||
id: "telemetry-latency",
|
||||
label: "Median Latency",
|
||||
value: { kind: "latency", value: 87 },
|
||||
icon: "mdi:timer-outline",
|
||||
severity: "warning",
|
||||
detail: "static sample",
|
||||
sparkline: [45, 51, 72, 63, 80, 87],
|
||||
},
|
||||
unavailable: {
|
||||
id: "telemetry-unavailable",
|
||||
label: "Remote Signal",
|
||||
value: { kind: "text", value: "n/a" },
|
||||
icon: "mdi:cloud-off-outline",
|
||||
severity: "unavailable",
|
||||
detail: "fallback value",
|
||||
},
|
||||
stale: {
|
||||
id: "telemetry-stale",
|
||||
label: "Sync Age",
|
||||
value: { kind: "text", value: "stale" },
|
||||
icon: "mdi:clock-alert-outline",
|
||||
severity: "stale",
|
||||
detail: "cached sample",
|
||||
sparkline: [22, 22, 22, 22, 22, 22],
|
||||
},
|
||||
danger: {
|
||||
id: "telemetry-danger",
|
||||
label: "Error Budget",
|
||||
value: { kind: "percent", value: 7 },
|
||||
progress: 7,
|
||||
icon: "mdi:alert-octagon-outline",
|
||||
severity: "danger",
|
||||
detail: "threshold breached",
|
||||
sparkline: [56, 41, 34, 20, 13, 7],
|
||||
},
|
||||
loading: {
|
||||
id: "telemetry-loading",
|
||||
label: "Pending Refresh",
|
||||
value: { kind: "text", value: "sync" },
|
||||
icon: "mdi:progress-clock",
|
||||
severity: "loading",
|
||||
detail: "waiting for update",
|
||||
},
|
||||
long: {
|
||||
id: "telemetry-long",
|
||||
label: "Very Long Generic Source Label That Must Wrap",
|
||||
value: { kind: "percent", value: 63 },
|
||||
progress: 63,
|
||||
icon: "mdi:chart-box-outline",
|
||||
severity: "neutral",
|
||||
detail: "long source label",
|
||||
sparkline: [14, 20, 28, 31, 49, 63],
|
||||
},
|
||||
};
|
||||
|
||||
export const serviceRows: Record<string, UiServiceRow> = {
|
||||
normal: row("service-normal", "Ingest", "Event intake pipeline", "mdi:arrow-collapse-down", "ok", "1.252 ms", {
|
||||
href: "#ingest",
|
||||
label: "Open ingest",
|
||||
}),
|
||||
down: row("service-down", "Replica", "Replica traffic cell", "mdi:access-point-off", "danger", "down"),
|
||||
degraded: row("service-degraded", "Scheduler", "Timed job coordinator", "mdi:calendar-clock", "warning", "1.487 ms"),
|
||||
stale: row("service-stale", "Archive", "Cold storage transfer", "mdi:archive-clock", "stale", "paused"),
|
||||
noLink: row("service-no-link", "Policy", "Rules evaluation", "mdi:shield-check", "neutral", "manual"),
|
||||
long: row(
|
||||
"service-long",
|
||||
"Long Generic Service Name That Wraps Cleanly",
|
||||
"Long generic service description with enough detail to exercise wrapping in constrained panels",
|
||||
"mdi:text-box-search-outline",
|
||||
"warning",
|
||||
"review queued",
|
||||
),
|
||||
};
|
||||
|
||||
export const serviceGroups: Record<string, UiServiceGroup> = {
|
||||
short: {
|
||||
id: "group-short",
|
||||
title: "Short List",
|
||||
services: [serviceRows.normal, serviceRows.degraded],
|
||||
},
|
||||
long: {
|
||||
id: "group-long",
|
||||
title: "Long List",
|
||||
services: [
|
||||
serviceRows.normal,
|
||||
serviceRows.degraded,
|
||||
serviceRows.stale,
|
||||
serviceRows.down,
|
||||
serviceRows.noLink,
|
||||
serviceRows.long,
|
||||
],
|
||||
},
|
||||
empty: {
|
||||
id: "group-empty",
|
||||
title: "Empty Group",
|
||||
services: [],
|
||||
},
|
||||
mixed: {
|
||||
id: "group-mixed",
|
||||
title: "Mixed Statuses",
|
||||
services: [serviceRows.normal, serviceRows.down, serviceRows.degraded, serviceRows.stale],
|
||||
summary: [
|
||||
{ id: "summary-ok", label: "Ok", value: "3", severity: "ok" },
|
||||
{ id: "summary-warn", label: "Warn", value: "1", severity: "warning" },
|
||||
{ id: "summary-down", label: "Down", value: "1", severity: "danger" },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const statusItems: Record<string, UiStatusItem> = {
|
||||
ok: { id: "status-ok", label: "System", value: "Operational", severity: "ok" },
|
||||
degraded: { id: "status-degraded", label: "Routing", value: "Degraded", severity: "warning" },
|
||||
incident: { id: "status-incident", label: "Incident", value: "Active", severity: "danger" },
|
||||
syncing: { id: "status-syncing", label: "Refresh", value: "Syncing", severity: "loading" },
|
||||
stale: { id: "status-stale", label: "Last Sync", value: "18 minutes ago", severity: "stale" },
|
||||
action: {
|
||||
id: "status-action",
|
||||
label: "Action",
|
||||
value: "Inspect",
|
||||
severity: "neutral",
|
||||
link: { href: "#inspect", label: "Inspect status" },
|
||||
},
|
||||
long: {
|
||||
id: "status-long",
|
||||
label: "Long Generic Status Label",
|
||||
value: "long generic status value wraps",
|
||||
severity: "neutral",
|
||||
},
|
||||
};
|
||||
|
||||
export const eightTelemetryCards = [
|
||||
telemetryCards.percent,
|
||||
telemetryCards.bytes,
|
||||
telemetryCards.temperature,
|
||||
telemetryCards.latency,
|
||||
telemetryCards.unavailable,
|
||||
telemetryCards.stale,
|
||||
telemetryCards.danger,
|
||||
telemetryCards.loading,
|
||||
];
|
||||
|
||||
export const sixteenTelemetryCards = Array.from({ length: 16 }, (_, index) => {
|
||||
const card = eightTelemetryCards[index % eightTelemetryCards.length];
|
||||
return {
|
||||
...card,
|
||||
id: `${card.id}-${index}`,
|
||||
label: `${card.label} ${index + 1}`,
|
||||
};
|
||||
});
|
||||
|
||||
export const mixedStatusStrip = [
|
||||
statusItems.ok,
|
||||
statusItems.degraded,
|
||||
statusItems.incident,
|
||||
statusItems.syncing,
|
||||
statusItems.stale,
|
||||
];
|
||||
|
||||
export const fullCompositionDashboard: UiDashboardPreview = {
|
||||
...primaryDashboard,
|
||||
telemetry: eightTelemetryCards,
|
||||
modules: [moduleBlocks.compact, moduleBlocks.unavailable],
|
||||
serviceGroups: [serviceGroups.mixed, serviceGroups.short, serviceGroups.long],
|
||||
statusItems: mixedStatusStrip,
|
||||
};
|
||||
|
||||
function row(
|
||||
id: string,
|
||||
label: string,
|
||||
description: string,
|
||||
icon: string,
|
||||
severity: UiSeverity,
|
||||
detail: string,
|
||||
link?: UiServiceRow["link"],
|
||||
): UiServiceRow {
|
||||
return { id, label, description, icon, severity, detail, link };
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue