Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Console Usage view with utilisation and waiting charts

Abierto
  • ¿Algo no está bien?
#349 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
52/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
playwright, typescript
Área
documentation, frontend, testing

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
15
Forks
1
Merge medio
8 h 23 min
PR fusionados (30 d)
136

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de callstackincubator/simlock

Todos los issues de callstackincubator/simlock

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.