Add unified at-a-glance stats widgets to hosted and remote instance list pages
- Dominant language
- JavaScript
- Stars
- 400
- Forks
- 89
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 146
Description
Remote instance pages have interactive status bar widgets above the data table (`DevicesStatusBar` component) that show a bird's eye view of instance distribution by status and last seen time. Hosted instance pages don't have anything like this. We should unify the experience.
## Current state
* **Remote instances** (`DevicesBrowser.vue`): Two `DevicesStatusBar` widgets, one for "Last Seen" (online/offline distribution) and one for "Last Known Status" (running, error, stopped). These bars are interactive: clicking a segment filters the table below. This interactivity is awkward because it duplicates the filtering that lives in the filter dropdown, creating two competing ways to filter.
* **Hosted instances** (team and application level): No stats widgets at all.
## What we want
* Add at-a-glance stats widgets to hosted instance pages (both team and application level)
* Make the widgets **static** (non-interactive). Remove the click-to-filter behavior from the remote instance status bars. Filtering should happen through the filter dropdown only (see #8115).
* The widgets should give a quick summary of the overall state of instances on that page
## Open questions
* Should the widgets represent the full dataset or just the currently visible/filtered data?
* Should widget values update when filters are applied?
* What data should we show?
* For remote instances we already have last seen and status distribution, but we might want to add more (mode distribution, assignment status, etc.)
* For hosted instances we need to figure out what's most useful. Candidates might be status distribution (running/stopped/suspended/errored), stack version distribution, update availability
Depends on #8114.
Contributor guide
Assessment
This issue has not been assessed yet.