Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Console Usage view with utilisation and waiting charts

Aperta
  • Qualcosa non va?
#349 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
52/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
playwright, typescript
Ambito
documentation, frontend, testing

Direzione di ricerca

Start with ui/src/views/index.tsx, ui/src/views/usage.tsx, and ui/src/views/usage-model.ts, then read the referenced architecture and design rules. Run the model, resource, chart, and Playwright tests named in the issue. Done means the Usage view matches the specified figures and charts, refreshes on the stated schedule, works at 360 px in both colour schemes, passes the axe check, and is documented in docs/CONSOLE.md.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

task:draft

Part of #329.

Scope

After this PR, the console has a Usage view: a window picker (last hour, day, week), the figures as stat cards and tables, and two charts, utilisation and waiting over time, that update without a reload as the window moves. It follows the design guide, works at 360 px and in both colour schemes.

Technical spec

Modules touched
  • ui/src/views/index.tsx — a Usage entry in VIEWS, path /usage.
  • ui/src/views/usage.tsx and ui/src/views/usage-model.ts (pure, unit-tested) — the view and its model. The model turns one usage.get answer into the stat-card rows, the table rows and the two chart series; the view renders them with StatCards, Panel, the shared table from ui/src/table.tsx, and a chart built on ui/src/charts.tsx.
  • ui/src/charts.tsx — the chart takes a bucketed series with any width and formats the axis by bucketMs, which MinuteChart assumes to be a minute today; the accessible table beside it does the same.
  • Data: a variant of useLiveResource in ui/src/live/live-context.tsx that refetches /v1/stats?since=<window> every 15 seconds while on screen and never more often; an event marks the resource stale for the next tick, not a fetch of its own; the window is in the URL's search (?window=1h|24h|7d) through useSearch, default 24h.
  • partial renders as a note above the figures with coversFrom.
  • On a worker the per-worker table has one row, itself; on a gateway one per worker. The per-requester table shows the label beside the id.
  • e2e/console/usage.spec.ts — Playwright, on the fake driver.
  • docs/CONSOLE.md — the view. docs/internal/DESIGN.md if a token or rule is added.
Contract and event changes
  • None. The view reads GET /v1/stats and the existing event stream.
Rules in play
  • architecture.md rule 1: the model is pure and the view reads one route.
  • testing.md rule 1: each Playwright test title is a claim about what is on screen.
  • docs/internal/DESIGN.md: charts have their numbers in an accessible table, animation off, colour by class; tables stack under 768 px; no horizontal scroll at 360 px; contrast AA in both schemes.
Tests
  • the usage model turns an answer into stat cards for requests, grants by source, wait p95, held p50, peak utilisation and rejections
  • the usage model turns the series into a utilisation chart series of slots used over max and a waiting chart series of requests waiting per bucket
  • the usage model formats the window and the partial note from coversFrom
  • the Usage resource refetches on the 15-second tick and not on the one-second tick, and an event does not start a fetch before the next tick
  • the chart formats the axis by bucket width for one-minute, fifteen-minute and one-hour buckets
  • (console) the Usage tab shows the figures for the last 24 hours by default and the picker switches to the last hour and the last week
  • (console) after a lease is granted while the view is open, the request count rises within 15 seconds without a reload
  • (console) the utilisation and waiting charts render with their accessible tables, and every number in a chart appears as text
  • (console) at 360 px the view has no horizontal scroll and the tables stack
  • (console) the view passes the axe check in light and dark schemes
  • (console) on a gateway with two workers, the per-worker table has two rows; on a single host it has one

Done when

  • On the fake driver, after a scripted run, the Usage view shows the figures and both charts for the chosen window, matching simlock stats --json for that window.
  • Taking a lease while the view is open raises the counts within 15 seconds without a reload.
  • The view works at 360 px with no horizontal scroll, in light and dark schemes, and passes the console lane's axe check.
  • On a gateway the per-worker table has one row per worker; on a worker it has one row.
  • docs/CONSOLE.md describes the view and its window picker.

Out of scope

  • Explicit start and end dates in the console; the three fixed windows only. The CLI and the route cover arbitrary windows.
  • Any chart beyond utilisation and waiting.

Depends on

  • #348

Approval

  • Approved for delivery

Written by an agent.

Lingua principale
TypeScript
Stelle
15
Fork
1
Merge medio
8h 38m
PR unite (30g)
135

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di callstackincubator/simlock

Tutte le issue di callstackincubator/simlock

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.