feat(local-ui): metrics/services/errors views + promote shared chrome into @maple/ui#248
Merged
Merged
Conversation
… into @maple/ui Promote the filter chrome the local UI had hand-copied from apps/web into packages/ui so both apps render from one source: filter-section (web's superset with serviceColorMap/option icons), filter-sidebar (width-agnostic frame), duration-range-filter (web's onRangeChange API + configurable debounceMs and flush on blur/Enter), the generic toolbar family (data- agnostic: RefreshButton takes onRefresh, TimeRangeSelect takes ranges, so @maple/ui gains no react-query dep), metric-type-badge, and the pure replay-format formatters (the warehouse partition-window helper stays in web — @maple/ui must not depend on @maple/query-engine). Web paths become re-export shims so no consumers change; local copies are deleted. Close most of the local-mode feature gap with three new views backed by MVs that already exist in the local chDB schema and existing CH queries (all 15 smoke-tested against a live chDB binary, incl. the windowed metricsTimeseriesRateQuery): - #/metrics + #/metrics/:name — sparkline preview grid with type/service facets; detail plots true per-second rate for monotonic counters and avg for gauges/histograms via the shared QueryBuilderLineChart, plus a per-service breakdown table - #/services + #/services/:name — dense table (spans/errors/error rate/ p50/p95/logs) with env/ns facets; detail shows golden-signal cards, throughput-by-operation chart, and a top-operations table deep-linking into filtered traces - #/errors — summary stats, fingerprint-grouped error cards with service/ environment facets, expandable to recent affected traces linking to the trace waterfall span-detail-panel/log-detail-sheet stay intentionally divergent (web's are effect-atom/infra-coupled); their headers now document that instead of claiming to mirror web. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
|
Your Pullfrog Router balance is exhausted. You have a card on file but auto-reload is disabled, so runs paused once your balance went past the overdraft buffer. Top up balance → · Enable auto-reload →
|
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
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.

What
Brings the local-mode UI (
apps/local-ui) closer to feature/UI parity with the web app, and kills the duplicated chrome by promoting it into@maple/ui.Shared-chrome promotion (dedup)
Promoted into
packages/ui/src— web files become re-export shims (zero consumer edits), local copies deleted:components/filters/filter-section.tsx— web's superset (option icons,serviceColorMap,SingleCheckboxFilter); local gains service color swatchescomponents/filters/filter-sidebar.tsx— width-agnostic frame + header/body/loading;FilterSidebarErrorstays in web (binds the app'sErrorState)components/filters/duration-range-filter.tsx— web'sonRangeChangeAPI + local's flush-on-blur/Enter,debounceMsprop (web 400ms default, local passes 300ms)components/toolbar.tsx— genericToolbar/ToolbarSearch/ToolbarStat/TimeRangeSelect/RefreshButton, data-agnostic so@maple/uigains no react-query dep; local keeps a tiny wrapper binding the["local"]invalidation. Web toolbar adoption deliberately deferred (router/effect-atom wired).components/metrics/metric-type-badge.tsx(+METRIC_TYPE_COLORS)lib/replay-format.ts— pure formatters only;replayPartitionWindowstays in web because@maple/uimust not depend on@maple/query-enginespan-detail-panel/log-detail-sheetstay intentionally divergent (web's are effect-atom/infra-coupled); header comments now document thatNew local views (parity)
All backed by MVs that already exist in
local-schema.sqland existing@maple/query-engineCH queries — no CLI/schema changes. All 15 queries smoke-tested against a live chDB binary first, including the windowedmetricsTimeseriesRateQuery.#/metrics+#/metrics/:name— sparkline preview grid with type/service facets; detail plots true per-second rate for monotonic counters and avg for gauges/histograms via the sharedQueryBuilderLineChart, plus per-service breakdown#/services+#/services/:name— dense table (spans/errors/error rate/p50/p95/logs) with env/ns facets; detail has golden-signal cards, throughput-by-operation chart, top-operations table deep-linking into filtered traces#/errors— summary stats, fingerprint-grouped cards with service/env facets, expandable to recent affected traces linking to the trace waterfallWhy
The local UI had drifted: it hand-copied web chrome (each copy tagged "mirrors the web app's …") and exposed only traces/logs/sessions while the local chDB schema already materializes everything metrics/services/errors need.
Verification
bun typecheckpasses;@maple/local-uitests pass; all 730 web tests pass (route tests cover the filter-sidebar consumers)web.localhost/traces: filter sidebar unchanged on the promoted componentsReviewer notes
bucketSecondsForRangegives ~60 buckets per range; long ranges over short data windows legitimately show "not enough datapoints" previews🤖 Generated with Claude Code
Need help on this PR? Tag
@codesmith-botwith what you need. Autofix is disabled.