Katia Bulatova
81274f4033
## Queue pages design overhaul (frontend for the queue-metrics feature) Builds the dashboards on top of the queue-metrics pipeline (base branch). ### Queues list <img width="1440" height="788" alt="Screenshot 2026-07-20 at 01 02 55" src="https://github.com/user-attachments/assets/0b97dd6c-d05b-4dba-99c9-04266ec22cb3" /> ### Queue detail <img width="1440" height="1272" alt="tab-overview" src="https://github.com/user-attachments/assets/22b33f82-522d-4410-a477-fe5d2c2f7adf" /> <img width="1440" height="1532" alt="tab-keys" src="https://github.com/user-attachments/assets/b05619fa-93a8-43ef-8838-a6d7fc5d789b" /> ### Under the hood - Percent-based concurrency overrides (schema + migration + recalc on env limit change, capped at the env limit) — covered by unit tests - All recurring refresh hits ClickHouse only (15s blocks / 60s charts, paused in hidden tabs); Redis/PG serve first paint - Added `MetricsLayout` that is currently used for `/queues + $id`, `/agents + $id`, `/settings/usage` <img width="500" height="auto" alt="Screenshot 2026-07-20 at 01 07 31" src="https://github.com/user-attachments/assets/e8a798e7-deee-455d-be96-414f7d09a06c" />
56 lines
2.3 KiB
TypeScript
56 lines
2.3 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { compareColumn, sortRows, type SortColumn } from "~/components/primitives/useTableSort";
|
|
|
|
type Row = { id: number; name: string | null; queued: number | null };
|
|
|
|
const rows: Row[] = [
|
|
{ id: 0, name: "banana", queued: 3 },
|
|
{ id: 1, name: "Apple", queued: null },
|
|
{ id: 2, name: "cherry", queued: 3 },
|
|
{ id: 3, name: null, queued: 1 },
|
|
];
|
|
|
|
describe("sortRows", () => {
|
|
it("sorts numbers ascending with nulls last", () => {
|
|
const column: SortColumn<Row> = { key: "queued", type: "number", value: (r) => r.queued };
|
|
expect(sortRows(rows, column, "asc").map((r) => r.id)).toEqual([3, 0, 2, 1]);
|
|
});
|
|
|
|
it("keeps nulls last even when descending", () => {
|
|
const column: SortColumn<Row> = { key: "queued", type: "number", value: (r) => r.queued };
|
|
// 3 and 0 both have queued=3; stable order (0 before 2) is preserved, null (id 1) stays last.
|
|
expect(sortRows(rows, column, "desc").map((r) => r.id)).toEqual([0, 2, 3, 1]);
|
|
});
|
|
|
|
it("sorts alphabetically case-insensitively with empty/null last", () => {
|
|
const column: SortColumn<Row> = { key: "name", type: "alpha", value: (r) => r.name };
|
|
expect(sortRows(rows, column, "asc").map((r) => r.id)).toEqual([1, 0, 2, 3]);
|
|
expect(sortRows(rows, column, "desc").map((r) => r.id)).toEqual([2, 0, 1, 3]);
|
|
});
|
|
|
|
it("is stable for equal values (preserves original order)", () => {
|
|
const column: SortColumn<Row> = { key: "queued", type: "number", value: () => 5 };
|
|
expect(sortRows(rows, column, "asc").map((r) => r.id)).toEqual([0, 1, 2, 3]);
|
|
});
|
|
|
|
it("supports a custom comparator", () => {
|
|
// Sort by name length.
|
|
const column: SortColumn<Row> = {
|
|
key: "name",
|
|
type: "custom",
|
|
compare: (a, b) => (a.name?.length ?? 0) - (b.name?.length ?? 0),
|
|
};
|
|
expect(sortRows(rows, column, "asc").map((r) => r.id)).toEqual([3, 1, 0, 2]);
|
|
});
|
|
});
|
|
|
|
describe("compareColumn", () => {
|
|
it("treats NaN as null (sorts last)", () => {
|
|
const column: SortColumn<Row> = { key: "queued", type: "number", value: (r) => r.queued };
|
|
const withNaN: Row = { id: 9, name: "x", queued: NaN };
|
|
const normal: Row = { id: 10, name: "y", queued: 1 };
|
|
expect(compareColumn(column, withNaN, normal, "asc")).toBe(1);
|
|
expect(compareColumn(column, withNaN, normal, "desc")).toBe(1);
|
|
});
|
|
});
|