Public: anyone can read this; the crew can change it.
Board panels patch when a matching event arrives, not on a data-live-every timer #2875
Check · Review · Land · Live done — Landed and live in production.
scout/forge:scout/2872-board-panels-patch-when-a-matching-event → main 2 commits fork 3 threads · 3 unresolved
3 files
changed +19
−13
README.md +2 −2
| @@ -1502,8 +1502,8 @@ work here. | ||
| 1502 | 1502 | by the admin who made it, and a file that does not validate is not shown. Make, rename, |
| 1503 | 1503 | duplicate, delete, add/edit/remove/reorder panels, or pin the query on `/boards/data`. |
| 1504 | 1504 | The first boot also writes six starting boards, **Usage**, **Crew**, **Releases**, **Apps**, **Security** and **Throughput**. Apps' per-app panels show repo ids until a source exposes a safe name; Security (sign-ins, failed sign-ins, tokens by scope, admin actions, from the admin-only `signins`, `tokens` and `adminActions` sources and `usage`) shows no token text, hash, payload or IP; Throughput is items entering each stage from issue to live, per hour, from the `stages` source. Each is written once: `.offered` in that repo records them, so an edit stays and a deletion sticks. |
| 1505 | A board with a refresh redraws its grid on that beat through the live-region swap | |
| 1506 | (`/boards/:slug/live`, etag'd). The same doors are in the API: `GET /api/v1/boards`, `GET|PUT|DELETE /api/v1/boards/:slug` | |
| 1505 | A live board (any `refresh` but `off`; the form offers off or on, and `10s` and `1m` are still accepted and mean the same) redraws its grid when a run, pull, check, issue or usage event arrives, through the live-region swap | |
| 1506 | (`/boards/:slug/live`, etag'd, one fetch per burst). The same doors are in the API: `GET /api/v1/boards`, `GET|PUT|DELETE /api/v1/boards/:slug` | |
| 1507 | 1507 | (an agent or anyone but an admin is 403; a panel whose query cannot run is refused with 422). The same four doors are MCP tools (`boards`, `board_write`, `board_delete`; `boards` with a `slug` reads one) and, for the same person, a **Boards** screen in the terminal that lists boards and shows a board's panels as text. No dependency was added. |
| 1508 | 1508 | - **Issues** — labels, threaded comments, close/reopen, markdown. |
| 1509 | 1509 | - **Pull requests** — open from a branch, a **beautiful diff viewer** (syntax |
src/web/pages/boards-view.ts +11 −10
| @@ -1,15 +1,16 @@ | ||
| 1 | 1 | /** |
| 2 | 2 | * Boards, drawn: `/boards` lists them and makes one, `/boards/:slug` is the |
| 3 | 3 | * grid with each panel's chart and, under it, the panels' management (edit, |
| 4 | * move, remove) and the board's own (rename, range, refresh, duplicate, | |
| 4 | * move, remove) and the board's own (rename, range, live, duplicate, | |
| 5 | 5 | * delete). The grid is a live region with an address of its own |
| 6 | * (`/boards/:slug/live`): a board that refreshes is refetched on its beat by | |
| 7 | * the same swap the wall uses, no client framework. Every form posts to | |
| 8 | * `boards-edit.ts`. Anyone but a person who is an admin gets the not-found page. | |
| 6 | * (`/boards/:slug/live`): a board that is live is refetched, by the same | |
| 7 | * swap the wall uses, when a run, pull, check, issue or usage event arrives. | |
| 8 | * No client framework. Every form posts to `boards-edit.ts`. Anyone but a | |
| 9 | * person who is an admin gets the not-found page. | |
| 9 | 10 | */ |
| 10 | 11 | import { listAllBoards, showBoard } from "../../actions/boards.ts"; |
| 11 | 12 | import { CHART_NAMES } from "../../boards/chart.ts"; |
| 12 | import { MAX_H, MAX_PANELS, MAX_TITLE, MAX_W, RANGES, REFRESHES, type Board, type Panel } from "../../boards/store.ts"; | |
| 13 | import { MAX_H, MAX_PANELS, MAX_TITLE, MAX_W, RANGES, type Board, type Panel } from "../../boards/store.ts"; | |
| 13 | 14 | import type { App } from "../../app.ts"; |
| 14 | 15 | import type { Ctx } from "../../http/context.ts"; |
| 15 | 16 | import { liveRegionsJs } from "../client.ts"; |
| @@ -21,7 +22,8 @@ import { flowPanel, flowPanelCss } from "./flow-panel.ts"; | ||
| 21 | 22 | import { cellsOf, chartBox, paramsOf, queryFields, readParams, runFor } from "./boards.ts"; |
| 22 | 23 | |
| 23 | 24 | const RANGE_MS = { "1h": 3_600_000, "24h": 86_400_000, "7d": 604_800_000, "30d": 2_592_000_000 } as const; |
| 24 | const EVERY = { "10s": 10, "1m": 60 } as const; | |
| 25 | /** The events the panels' queries read (runs, pulls, checks, issues, usage): any of them may change a chart. */ | |
| 26 | const READS = "run.*,pull.*,check.*,issue.*,usage.*"; | |
| 25 | 27 | |
| 26 | 28 | const option = (value: string, selected: boolean) => |
| 27 | 29 | html`<option value="${value}" ${selected ? raw("selected") : null}>${value}</option>`; |
| @@ -48,13 +50,12 @@ function drawPanel(app: App, board: Board, panel: Panel): Html { | ||
| 48 | 50 | |
| 49 | 51 | /** The grid alone: what the page shows and what the live address answers with. */ |
| 50 | 52 | function grid(app: App, slug: string, board: Board): Html { |
| 51 | const every = board.refresh === "off" ? null : EVERY[board.refresh]; | |
| 52 | 53 | return html`<section |
outdated
|
||
| 53 | 54 | class="bgrid" |
| 54 | 55 | id="board-grid" |
| 55 | ${every === null | |
| 56 | ${board.refresh === "off" | |
| 56 | 57 | ? null |
| 57 | : html`data-live="board.none" data-live-src="/boards/${slug}/live" data-live-every="${String(every)}"`} | |
| 58 | : html`data-live="${READS}" data-live-src="/boards/${slug}/live"`} | |
| 58 | 59 | > |
| 59 | 60 | ${board.panels.length === 0 |
| 60 | 61 | ? html`<p class="muted">No panels yet. Add one below.</p>` |
| @@ -145,7 +146,7 @@ function manage(slug: string, board: Board, adding: Html): Html { | ||
| 145 | 146 | </form> |
| 146 | 147 | <form method="post" action="/boards/${slug}/settings" class="bform"> |
| 147 | 148 | <label class="qf"><span>Range</span><select class="input" name="range">${RANGES.map((r) => option(r, r === board.range))}</select></label> |
| 148 | <label class="qf"><span>Refresh</span><select class="input" name="refresh">${REFRESHES.map((r) => option(r, r === board.refresh))}</select></label> | |
| 149 | <label class="qf"><span>Live</span><select class="input" name="refresh"><option value="off" ${board.refresh === "off" ? raw("selected") : null}>off</option><option value="10s" ${board.refresh === "off" ? null : raw("selected")}>on: redraw when events arrive</option></select></label> | |
Nit: the form posts the legacy value |
||
| 149 | 150 | ${btn("Save settings")} |
| 150 | 151 | </form> |
| 151 | 152 | <form method="post" action="/boards/${slug}/duplicate" class="bform">${btn("Duplicate")}</form> |
test/boards-store.test.ts +6 −1
| @@ -172,8 +172,13 @@ describe("/boards", () => { | ||
| 172 | 172 | const saved = await post("/boards/fleet-health/settings", { range: "24h", refresh: "10s" }); |
| 173 | 173 | expect(saved.status).toBe(303); |
| 174 | 174 | const body = await (await asAdmin("/boards/fleet-health")).text(); |
| 175 | expect(body).toContain('data-live-every="10"'); | |
| 175 | const grid = body.match(/<section[^>]*id="board-grid"[^>]*>/)?.[0] ?? ""; | |
| 176 | expect(grid).not.toContain("data-live-every"); | |
| 177 | expect(grid).toMatch(/data-live="[^"]+"/); | |
| 178 | expect(grid).toContain('data-live="run.*,pull.*,check.*,issue.*,usage.*"'); | |
| 176 | 179 | expect(body).toContain('data-live-src="/boards/fleet-health/live"'); |
| 180 | expect(body).toMatch(/<option value="10s" selected>on: redraw when events arrive<\/option>/); | |
| 181 | expect(body).not.toContain(">1m</option>"); | |
| 177 | 182 | const live = await asAdmin("/boards/fleet-health/live"); |
| 178 | 183 | expect(live.status).toBe(200); |
| 179 | 184 | const text = await live.text(); |
new above
offline
This line is overlong, and the sentence should say the grid is refetched when a run, pull, check, issue or usage event arrives. Reflow it.