bzuccaro
a805195c49
The key now renders the live request count (large) when a model is active, plus a 1Hz count-trend sparkline of the last 60s in a bottom strip. IDLE/ LOADING/OFF/OFFLINE states unchanged. History lives in per-key state with a sampler cleared on disappear.
100 lines
3.8 KiB
TypeScript
100 lines
3.8 KiB
TypeScript
import assert from "node:assert/strict";
|
|
import { test } from "node:test";
|
|
import { renderGpuGraph, renderInflight, svgDataUrl } from "../src/lib/render";
|
|
|
|
test("svgDataUrl wraps an SVG as a base64 data URL", () => {
|
|
const url = svgDataUrl("<svg></svg>");
|
|
assert.match(url, /^data:image\/svg\+xml;base64,/);
|
|
});
|
|
|
|
test("renderInflight: ready + count renders IDLE in green", () => {
|
|
const svg = renderInflight({ modelName: "Qwen3.8-27B-NVFP4", state: "ready", count: 0, offline: false, pulse: false });
|
|
assert.match(svg, /IDLE/);
|
|
assert.match(svg, /#1e6b34/);
|
|
assert.doesNotMatch(svg, /ACTIVE/);
|
|
});
|
|
|
|
test("renderInflight: ready + count>0 renders the count number on red", () => {
|
|
const svg = renderInflight({ modelName: "Qwen3.8-27B-NVFP4", state: "ready", count: 2, offline: false, pulse: false });
|
|
assert.match(svg, /2/);
|
|
assert.match(svg, /#8b2626/);
|
|
assert.doesNotMatch(svg, /ACTIVE/);
|
|
assert.doesNotMatch(svg, /IDLE/);
|
|
});
|
|
|
|
test("renderInflight: idle state does not show a count number", () => {
|
|
const svg = renderInflight({ modelName: "A", state: "ready", count: 0, offline: false, pulse: false });
|
|
assert.match(svg, /IDLE/);
|
|
assert.doesNotMatch(svg, /font-size="24"/);
|
|
});
|
|
|
|
test("renderInflight: draws a count-trend spark when history has 2+ samples", () => {
|
|
const svg = renderInflight({ modelName: "A", state: "ready", count: 1, offline: false, pulse: false, history: [0, 1, 2, 1] });
|
|
assert.match(svg, /<polyline/);
|
|
assert.match(svg, /<path/);
|
|
});
|
|
|
|
test("renderInflight: no spark with fewer than 2 history samples", () => {
|
|
const svg = renderInflight({ modelName: "A", state: "ready", count: 1, offline: false, pulse: false, history: [1] });
|
|
assert.doesNotMatch(svg, /<polyline/);
|
|
const none = renderInflight({ modelName: "A", state: "ready", count: 1, offline: false, pulse: false });
|
|
assert.doesNotMatch(none, /<polyline/);
|
|
});
|
|
|
|
test("renderInflight: pulse toggles opacity while active", () => {
|
|
const a = renderInflight({ modelName: "A", state: "ready", count: 1, offline: false, pulse: false });
|
|
const b = renderInflight({ modelName: "A", state: "ready", count: 1, offline: false, pulse: true });
|
|
assert.notEqual(a, b);
|
|
assert.match(b, /opacity="0.55"/);
|
|
});
|
|
|
|
test("renderInflight: offline and no-model states", () => {
|
|
const offline = renderInflight({ modelName: "A", state: "ready", count: 0, offline: true, pulse: false });
|
|
assert.match(offline, /OFFLINE/);
|
|
const noModel = renderInflight({ modelName: "unset", state: undefined, count: 0, offline: false, pulse: false });
|
|
assert.match(noModel, /NO MODEL/);
|
|
});
|
|
|
|
test("renderInflight: loading renders LOADING in amber", () => {
|
|
const svg = renderInflight({ modelName: "A", state: "loading", count: 0, offline: false, pulse: false });
|
|
assert.match(svg, /LOADING/);
|
|
assert.match(svg, /#8a6d1d/);
|
|
});
|
|
|
|
test("renderGpuGraph: draws a polyline, value, and metric label", () => {
|
|
const svg = renderGpuGraph({
|
|
gpuName: "GPU 2 · RTX 5090",
|
|
metric: "util_percent",
|
|
value: 67,
|
|
history: [0, 20, 40, 67],
|
|
offline: false,
|
|
});
|
|
assert.match(svg, /<polyline/);
|
|
assert.match(svg, /67%/);
|
|
assert.match(svg, /UTIL/);
|
|
assert.match(svg, /GPU 2/);
|
|
});
|
|
|
|
test("renderGpuGraph: power draws a watts value", () => {
|
|
const svg = renderGpuGraph({
|
|
gpuName: "ALL GPUS",
|
|
metric: "power",
|
|
value: 1030,
|
|
history: [900, 1000, 1030],
|
|
offline: false,
|
|
});
|
|
assert.match(svg, /1030W/);
|
|
assert.match(svg, /PWR/);
|
|
assert.match(svg, /ALL GPUS/);
|
|
});
|
|
|
|
test("renderGpuGraph: offline frame", () => {
|
|
const svg = renderGpuGraph({ gpuName: "ALL GPUS", metric: "util_percent", value: undefined, history: [], offline: true });
|
|
assert.match(svg, /OFFLINE/);
|
|
});
|
|
|
|
test("renderGpuGraph: single-point history avoids divide-by-zero", () => {
|
|
const svg = renderGpuGraph({ gpuName: "ALL GPUS", metric: "util_percent", value: 50, history: [50], offline: false });
|
|
assert.match(svg, /<svg/);
|
|
});
|