feat(ui): Build the dashboard view over container and serving metrics#87
Merged
Conversation
The dashboard endpoints and a typed client shipped with the observability work but nothing consumed them, so the stored dashboards were unreachable. This adds the view they were staged for. Dashboards can be created, renamed, and deleted, and each one holds panels the operator arranges on a twelve-column grid. A panel plots a container metric (CPU, memory, network) or a serving metric (requests, errors, latency) for one deployment or all of them, as a line chart or a single stat, over a selectable time range. Panel data is read from the metric endpoints that already serve the observability screens, so nothing new is collected.
Code Review SummaryThis PR successfully implements a functional Dashboard view, allowing users to customize and view container and serving metrics in a grid layout. It reuses existing API clients and charting components effectively. 🚀 Key Improvements
💡 Minor Suggestions
|
| function formatStat(v: number, u: string): string { | ||
| if (u === "percent") return `${v.toFixed(1)}%`; | ||
| if (u === "ms") return v >= 1000 ? `${(v / 1000).toFixed(2)}s` : `${v.toFixed(0)}ms`; | ||
| if (u === "bytes") { |
There was a problem hiding this comment.
Using bitwise operators like 1 << 30 in JavaScript is limited to 32-bit signed integers. While this works for values up to ~2GB, memory metrics for large containers or node-level aggregates can exceed this range. It's safer to use numerical literals. Additionally, adding 'B' to the unit suffixes (e.g., 'GB' instead of 'G') would make the units more explicit and consistent with the base 'B' case.
Suggested change
| if (u === "bytes") { | |
| if (u === "bytes") { | |
| if (v >= 1073741824) return `${(v / 1073741824).toFixed(1)}GB`; | |
| if (v >= 1048576) return `${(v / 1048576).toFixed(0)}MB`; | |
| if (v >= 1024) return `${(v / 1024).toFixed(0)}KB`; | |
| return `${v}B`; | |
| } |
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.
The dashboard endpoints and a typed client shipped with the observability work (flatrun/agent#174, ui #82) but nothing consumed them, so stored dashboards were unreachable. This adds the view they were staged for, reusing that backend, the
dashboardsApiclient, and the existing chart component rather than adding new plumbing.Dashboards can be created, renamed, and deleted. Each holds panels on a twelve-column grid; a panel plots a container metric (CPU, memory, network) or a serving metric (requests, errors, latency), for one deployment or all, as a line chart or a single stat, over a selectable range. Panel data comes from the metric endpoints the observability screens already use, so nothing new is collected.
Unverified: the render against a live agent with real metrics. Covered by component tests over the data adaptation and the create flow, plus type-check and build, but not driven end to end against a running backend.