vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): sharpen dashboard console visual system

Browse source
This commit is contained in:
vince 2026-06-20 02:11:16 +02:00
parent 739d627ae3
commit 0c75220adc
15 changed files with 417 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/lib/ui/components/render.test.tsx
View file

@ -5,7 +5,9 @@ import { DashboardFrame } from "./DashboardFrame";
import { FooterCell } from "./FooterCell";
import { IconButton } from "./IconButton";
import { ServiceRow } from "./ServiceRow";
import { StatusStrip } from "./StatusStrip";
import { TelemetryCard } from "./TelemetryCard";
import { TelemetryGrid } from "./TelemetryGrid";
import { ThemeToggle } from "./ThemeToggle";
import { dashboardPreviewFixtures } from "../fixtures";
@ -18,6 +20,10 @@ describe("dashboard UI components", () => {
expect(body).toContain("Operations Console");
expect(body).toContain("Core Throughput");
expect(body).toContain("Queue Workers");
expect(body).toContain("console-header");
expect(body).toContain("telemetry-section");
expect(body).toContain("6 Metrics");
expect(body).toContain('data-variant="system-bus"');
expect(body).toContain("data-icon-name=\"mdi:server-network\"");
expect(body).toContain("data-severity=\"warning\"");
expect(body).not.toContain("dashboard-title");
@ -63,10 +69,28 @@ describe("dashboard UI components", () => {
expect(service).toContain("<a ");
expect(service).toContain("href=\"https://example.test/service\"");
expect(service).toContain("target=\"_blank\"");
expect(service).toContain('class="service-row__status"');
expect(service).toContain('class="service-row__launch"');
expect(footer).toContain("<a ");
expect(footer).toContain("href=\"https://example.test/status\"");
});
test("renders the status strip as a compact system bus", () => {
const body = renderToString(
<StatusStrip
id="dashboard-status"
items={[
{ id: "system", label: "System", value: "Nominal", severity: "ok" },
{ id: "refresh", label: "Refresh", value: "15s", severity: "neutral" },
]}
/>,
);
expect(body).toContain('class="status-strip"');
expect(body).toContain('data-variant="system-bus"');
expect(body).toContain("Nominal");
});
test("renders stable model IDs on group and status containers", () => {
const body = renderToString(
<DashboardFrame dashboard={dashboardPreviewFixtures.primary} />,
@ -119,6 +143,19 @@ describe("dashboard UI components", () => {
expect(body).toContain('data-chart-library="uplot"');
});
test("renders telemetry as a framed instrument section with indexed cards", () => {
const body = renderToString(
<TelemetryGrid cards={dashboardPreviewFixtures.primary.telemetry.slice(0, 2)} />,
);
expect(body).toContain('class="telemetry-section"');
expect(body).toContain("Telemetry");
expect(body).toContain("2 Metrics");
expect(body).toContain('data-metric-index="01"');
expect(body).toContain('class="telemetry-card__index"');
expect(body).toContain('class="telemetry-card__source"');
});
test("base button controls forward native attributes", () => {
const button = renderToString(
<Button
@ -154,6 +191,7 @@ describe("dashboard UI components", () => {
expect(body).toContain('class="theme-toggle"');
expect(body).toContain('data-ui-theme-current="light"');
expect(body).toContain('aria-label="Switch to dark theme"');
expect(body).toContain('aria-pressed="true"');
expect(body).toContain('class="theme-toggle__label"');
expect(body).toContain('class="theme-toggle__switch"');
expect(body).toContain('data-active="true"');