Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Console Usage view with utilisation and waiting charts

オープン
  • 何か問題がありますか？
#349 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
52/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
playwright, typescript
領域
documentation, frontend, testing

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
15
フォーク
1
平均マージ
8時間 23分
マージ済み PR（30日）
136

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

callstackincubator/simlock のほかの issue

callstackincubator/simlock の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。