lablup / lablup/backend.ai-webui
Visualize Prometheus metrics in WebUI
- Dominant language
- TypeScript
- Stars
- 133
- Forks
- 81
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 344
Description
## Goal
Leverage the Prometheus metrics pipeline (Manager 26.4.2+, Strawberry GraphQL `prometheusQueryPreset*` APIs) to visually surface operational metrics in the WebUI.
## Background
- The backend already scrapes Prometheus metrics per model-service deployment (service discovery registers every healthy inference route as a scrape target, labeled with `deployment_id`, `endpoint_id`, `route_id`, etc.).
- Query presets are exposed via GraphQL to **any authenticated user** (`prometheusQueryPresets`, `prometheusQueryPresetResult`), so regular users can already query them — the WebUI just doesn't render them yet.
- The WebUI currently consumes presets only for auto-scaling rule configuration (`AutoScalingRuleEditorModal`, `DeploymentAutoScalingCard`) and has an admin-only preset editor (`PrometheusPresetTab`). No metric **charts** exist anywhere.
## Strategy
**Frontend-first**: implement what is possible with the existing backend APIs instead of waiting for further backend work. Backend gaps discovered along the way should be filed as separate backend issues with `TODO(needs-backend)` markers.
## Candidate scope (child issues)
- Show vLLM inference metrics on the deployment detail page (first child issue)
- Time-series chart component reusable across preset categories
- Additional preset categories/panels as they are seeded by the backend
JIRA Issue: FR-3433
Contributor guide
No contributing guide indexed for this repository
Research direction
First confirm which child scope is being taken, since this issue lists deployment charts, a reusable time-series component, and future preset panels rather than one concrete change. Read AutoScalingRuleEditorModal, DeploymentAutoScalingCard, and PrometheusPresetTab, then trace the prometheusQueryPresets and prometheusQueryPresetResult APIs. Done should mean an agreed WebUI metric-visualization scope is implemented against the existing APIs, with backend gaps separated as TODO(needs-backend) issues.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, prometheus, typescript
- Domain
- data-visualization, frontend, observability-sre
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 38/100