feat(web): OSS dashboard app (overview, jobs, queues)#202
Open
merencia wants to merge 6 commits into
Open
Conversation
merencia
force-pushed
the
feat/web-dashboard-hooks
branch
from
6614c8a to
dccffbb
Compare
merencia
force-pushed
the
feat/web-dashboard-app
branch
2 times, most recently
from
5fcc603 to
35c84c9
Compare
merencia
force-pushed
the
feat/web-dashboard-hooks
branch
from
dccffbb to
b509f1f
Compare
Comment on lines
+1
to
+41
| import { JobsPage } from "./pages/jobs"; | ||
| import { OverviewPage } from "./pages/overview"; | ||
| import { QueuesPage } from "./pages/queues"; | ||
| import type { DashboardPage } from "./shell"; | ||
|
|
||
| /** The OSS dashboard pages. The Pro spreads these and appends its own before mounting the shell. */ | ||
| export const ossPages: DashboardPage[] = [ | ||
| { | ||
| path: "/", | ||
| nav: { | ||
| label: "Overview", | ||
| icon: "layout-dashboard", | ||
| section: "Monitor", | ||
| hint: "G O", | ||
| subtitle: "Real-time job processing at a glance", | ||
| }, | ||
| element: <OverviewPage />, | ||
| }, | ||
| { | ||
| path: "/jobs", | ||
| nav: { | ||
| label: "Jobs", | ||
| icon: "list", | ||
| section: "Monitor", | ||
| hint: "G J", | ||
| subtitle: "Inspect, filter, and reprocess background jobs", | ||
| }, | ||
| element: <JobsPage />, | ||
| }, | ||
| { | ||
| path: "/queues", | ||
| nav: { | ||
| label: "Queues", | ||
| icon: "layers", | ||
| section: "Monitor", | ||
| hint: "G Q", | ||
| subtitle: "Concurrency, priority, and throughput per queue", | ||
| }, | ||
| element: <QueuesPage />, | ||
| }, | ||
| ]; |
Contributor
There was a problem hiding this comment.
Nah, let's use tanstack router for this.
the react dashboard that consumes /api via the typed hooks: a hash-routed shell with a page registry (the seam-4 extension point) and three screens built from the /ui components. - shell: sidebar built from a pages[] registry; the pro passes a superset array to add screens without forking. - overview: live stat cards plus a dependency-free svg throughput chart. - jobs: filters (state/queue/class), a paginated table, and per-row run/rerun/cancel actions. - queues: a table with a pause/resume toggle. - hash router via useSyncExternalStore; DashboardApp wires the api client into context. - dev: a vite dev server (dev:app) that proxies /api, plus index.html + vite.app.config.ts. 28 dashboard tests in jsdom (router, shell, pages against a fake client). source only; the ./dashboard subpath export and the static build land with the web façade that serves it.
reworks the oss dashboard to match the design system's modern kit. promotes the kit's reusable primitives (statusdot, sparkline, delta, kbd, relative-time) into ui/ as tested tailwind components, and adds a layer of stateful business components (sidebar with cmd-k palette, sparkline stat cards, throughput chart, segmented job filters, refined jobs table, queue load-bar cards, job detail) wired to the existing hooks. pages just compose those; the shell keeps the page-registry seam for the pro. adds chart.js for the throughput chart. no placeholder data: the sidebar footer shows real engine connectivity from a new /api/system endpoint (driver and version surface once the server passes them), and the decorative workers/settings pages and filter/enqueue buttons are dropped.
…tent width the throughput chart is now created once and updated in place, so polling gently pushes the series along instead of replaying chart.js's entrance animation on every refetch. the header content shares the page's max width so the title and the toggle/docs actions line up with the content's left and right edges.
…ive stories adds a test for every dashboard business component (app sidebar, command palette, header, engine status, stat/success/queue cards, segmented filter, jobs toolbar, jobs table, job detail, throughput chart) and the missing storybook stories for the promoted primitives (kbd, statusdot, sparkline, delta), so every component keeps the tsx+test(+story) shape.
the header and page content drop the 1180px cap, so on wide screens the content fills the available space and stays aligned with the sidebar and the header actions instead of hugging the left with a gap.
Replace the hand-rolled hash router with TanStack Router, per the plan-mode decision, and wire the QueryClientProvider at the app root. - createDashboardRouter builds the route tree from the page registry, so the Pro's "spread ossPages + append" seam is unchanged; hash history keeps the static serve working under any base path with no server rewrites - job detail is now a real nested route (/jobs/$id) via useParams, replacing the in-page regex switch; deep-linking and the back button come for free - the chrome (sidebar, header, ⌘K palette) moves into the root route's Outlet - convert use-system to TanStack Query (rebased on top of the hooks change) Addresses review on pages.tsx (Giovani: use TanStack Router).
merencia
force-pushed
the
feat/web-dashboard-app
branch
from
0616f93 to
994e38c
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
stacked on #201. the OSS dashboard app that consumes /api via the typed hooks.
pages[]registry (the pro adds screens by spreading it, the seam-4 point)/uicomponents;DashboardAppwires the client into contextsource only; the
./dashboardsubpath export + static build come with the web façade that serves it.