github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-05 16:22:06 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

feat: implement new dashboard widgets and features including Gauge, Table, and enhanced chart capabilities

Browse Source
This commit is contained in:
Nawaz Dhandala
2026-03-25 22:07:55 +00:00
parent feb86357e8
commit 4cc78175ef
1 changed files with 48 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
Internal/Roadmap/Dashboards.md
View File

@@ -19,23 +19,33 @@ The following features have been implemented:
- **Role-Based Permissions** - ProjectOwner, ProjectAdmin, ProjectMember + custom permissions
- **Dashboard CRUD API** - Standard REST API with slug generation
- **Billing Enforcement** - Free plan limited to 1 dashboard
- **Area Chart** (Phase 1.1) - Area and Stacked Area chart types added to ChartType enum and rendered via chart component
- **Table Widget** (Phase 1.1) - New DashboardComponentType.Table with timestamp/value columns, sticky header, configurable max rows
- **Gauge Widget** (Phase 1.1) - SVG semi-circle gauge with threshold-based color coding (green/yellow/red), configurable min/max/thresholds
- **Template Variables** (Phase 1.2) - DashboardVariable type with CustomList, Query, and TextInput types; toolbar dropdown/input selectors; variable changes trigger widget refresh
- **Auto-Refresh** (Phase 1.3) - 7 interval options (5s to 15m), timer pauses in edit mode, pulsing indicator, interval persisted in dashboard config
- **Multiple Queries per Chart** (Phase 1.4) - metricQueryConfigs array support with fallback to single metricQueryConfig; each query rendered as a separate series
- **Markdown Support** (Phase 1.5) - isMarkdown flag on text components; renders LazyMarkdownViewer when enabled, falls back to bold/italic/underline when disabled
- **Threshold / Color Coding** (Phase 1.6) - Warning and critical threshold config on Value and Chart components; Value widget changes background/text color (green → yellow → red) based on thresholds
- **Legend Interaction** (Phase 1.7) - onValueChange enabled on Line, Area, and Bar charts for built-in Tremor legend click-to-toggle filtering
- **Chart Zoom** (Phase 1.8) - Time range zoom stack with Reset Zoom button in toolbar; pushing current range before zoom, popping on reset
## Gap Analysis Summary
| Feature | OneUptime | Grafana | Datadog | New Relic | Priority |
|---------|-----------|---------|---------|-----------|----------|
| Widget types | 3 | 20+ | 40+ | 15+ | **P0** |
| Chart types | 2 (Line, Bar) | 10+ | 12+ | 10+ | **P0** |
| Template variables | None | 6+ types | Yes | 3 types | **P0** |
| Auto-refresh | None | Configurable | Real-time | Yes | **P0** |
| Widget types | 5 (Chart, Value, Text, Table, Gauge) | 20+ | 40+ | 15+ | ~~**P0**~~ Done |
| Chart types | 4 (Line, Bar, Area, Stacked Area) | 10+ | 12+ | 10+ | ~~**P0**~~ Done |
| Template variables | 3 types (CustomList, Query, TextInput) | 6+ types | Yes | 3 types | ~~**P0**~~ Done |
| Auto-refresh | 7 intervals (5s–15m) | Configurable | Real-time | Yes | ~~**P0**~~ Done |
| Log panels | None | Yes (Loki) | Yes | Yes (NRQL) | **P0** |
| Trace panels | None | Yes (Tempo) | Yes | Yes | **P0** |
| Table widget | None | Yes | Yes | Yes | **P0** |
| Multiple queries per chart | Single query | Yes | Yes | Yes | **P0** |
| Markdown support | Basic formatting only | Full markdown | Full markdown | Full markdown | **P0** |
| Threshold lines / color coding | None | Yes | Yes | Yes | **P0** |
| Legend interaction (show/hide) | None | Yes | Yes | Yes | **P0** |
| Chart zoom | None | Yes | Yes | Yes | **P0** |
| Table widget | Yes | Yes | Yes | Yes | ~~**P0**~~ Done |
| Multiple queries per chart | Yes (array) | Yes | Yes | Yes | ~~**P0**~~ Done |
| Markdown support | Yes (toggle) | Full markdown | Full markdown | Full markdown | ~~**P0**~~ Done |
| Threshold lines / color coding | Value widget color coding | Yes | Yes | Yes | ~~**P0**~~ Partial |
| Legend interaction (show/hide) | Yes (click toggle) | Yes | Yes | Yes | ~~**P0**~~ Done |
| Chart zoom | Yes (time range stack) | Yes | Yes | Yes | ~~**P0**~~ Done |
| Unified query plugin interface | None | Datasource plugins | Yes | NRQL | **P0** |
| Dashboard linking / drill-down | None | Data links | Yes | Facet linking | **P1** |
| Annotations / event overlays | None | Yes | Yes | Yes (Labs) | **P1** |
@@ -144,8 +154,9 @@ interface DashboardWidgetConfig {
These gaps make OneUptime dashboards fundamentally non-competitive. Every major competitor has these.
### 1.1 Add Core Chart Types: Area, Pie, Table, Gauge, Heatmap, Histogram
### 1.1 Add Core Chart Types: Area, Pie, Table, Gauge, Heatmap, Histogram ✅ (Partial)
**Status**: Area, Stacked Area, Table, and Gauge are implemented. Pie, Heatmap, and Histogram enum values are defined but rendering is not yet implemented.
**Current**: Line and Bar only.
**Target**: 8+ chart types covering all standard observability visualization needs.
@@ -170,8 +181,9 @@ Each chart type needs:
- `App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardTableComponent.tsx` (new)
- `App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardGaugeComponent.tsx` (new)
### 1.2 Template Variables
### 1.2 Template Variables ✅
**Status**: Implemented. DashboardVariable type with CustomList, Query, and TextInput types. Toolbar renders dropdown selectors and text inputs. Variable changes trigger widget refresh via refreshTick.
**Current**: No template variables. Users must create separate dashboards for each service/host/environment.
**Target**: Drop-down variable selectors that dynamically filter all widgets.
@@ -195,8 +207,9 @@ Each chart type needs:
- `App/FeatureSet/Dashboard/src/Components/Dashboard/DashboardView.tsx` (pass variable values to widgets)
- `Common/Server/Services/MetricService.ts` (resolve variable references in queries)
### 1.3 Auto-Refresh
### 1.3 Auto-Refresh ✅
**Status**: Implemented. AutoRefreshInterval enum with 7 options (OFF, 5s, 10s, 30s, 1m, 5m, 15m). Timer management via setInterval/clearInterval, pauses in edit mode, pulsing blue dot indicator, interval persisted in DashboardViewConfig.
**Current**: Data goes stale after initial load.
**Target**: Configurable auto-refresh intervals.
@@ -213,8 +226,9 @@ Each chart type needs:
- `App/FeatureSet/Dashboard/src/Components/Dashboard/DashboardView.tsx` (implement refresh timer)
- `Common/Types/Dashboard/DashboardViewConfig.ts` (store refresh interval)
### 1.4 Multiple Queries per Chart with Formulas
### 1.4 Multiple Queries per Chart with Formulas ✅ (Partial)
**Status**: Multiple queries implemented via metricQueryConfigs array with fallback to single metricQueryConfig. Each query renders as a separate series. Formula evaluation and dual Y-axis are not yet implemented.
**Current**: Single `MetricQueryConfigData` per chart.
**Target**: Overlay multiple metric series on a single chart for correlation, with cross-query formulas.
@@ -232,8 +246,9 @@ Each chart type needs:
- `App/FeatureSet/Dashboard/src/Components/Dashboard/Canvas/ComponentSettingsSideOver.tsx` (multi-query config UI)
- `Common/Server/Services/FormulaEvaluator.ts` (new - server-side formula evaluation)
### 1.5 Full Markdown Support for Text Widget
### 1.5 Full Markdown Support for Text Widget ✅
**Status**: Implemented. isMarkdown boolean flag added to DashboardTextComponent. When enabled, renders via LazyMarkdownViewer. When disabled, falls back to existing bold/italic/underline formatting.
**Current**: Only bold, italic, underline formatting.
**Target**: Full markdown rendering including headers, links, lists, code blocks, tables, and images.
@@ -247,8 +262,9 @@ Each chart type needs:
- `App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardTextComponent.tsx` (replace with markdown renderer)
- `Common/Utils/Dashboard/Components/DashboardTextComponent.ts` (store raw markdown)
### 1.6 Threshold Lines & Color Coding
### 1.6 Threshold Lines & Color Coding ✅ (Partial)
**Status**: Warning/critical threshold config added to Chart and Value components. Value widget implements color coding (green → yellow → red background/text). Chart threshold reference lines are configured in the data model but visual rendering on charts requires Tremor chart library modifications (deferred).
**Current**: No threshold visualization.
**Target**: Configurable warning/critical thresholds on charts with color-coded regions.
@@ -264,8 +280,9 @@ Each chart type needs:
- `App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx` (render threshold lines)
- `App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx` (color coding)
### 1.7 Legend Interaction (Show/Hide Series)
### 1.7 Legend Interaction (Show/Hide Series) ✅
**Status**: Implemented. onValueChange callback enabled on Line, Area, and Bar chart components, activating Tremor's built-in activeLegend state management for click-to-toggle series visibility.
**Current**: Legends are display-only.
**Target**: Click legend items to toggle series visibility.
@@ -279,8 +296,9 @@ Each chart type needs:
**Files to modify**:
- `App/FeatureSet/Dashboard/src/Components/Metrics/MetricGraph.tsx` (add legend click handlers)
### 1.8 Chart Zoom (Click-Drag Time Selection)
### 1.8 Chart Zoom (Click-Drag Time Selection) ✅
**Status**: Implemented via time range stack. Toolbar shows Reset Zoom button when zoomed in. Current range is pushed to stack before zoom, popped on reset. In-chart brush/drag selection not yet implemented (uses toolbar-driven zoom instead).
**Current**: No zoom capability.
**Target**: Click and drag on a time series chart to zoom into a time range.
@@ -646,13 +664,13 @@ dashboard.toPerses();
---
## Quick Wins (Can Ship This Week)
## Quick Wins (Can Ship This Week) ✅ All Done
1. **Auto-refresh** - Add a simple `setInterval` refresh with dropdown selector in toolbar
2. **Full markdown for text widget** - Replace custom formatting with a markdown renderer
3. **Legend show/hide** - Add click handler on legend items to toggle series
4. **Stacked area chart** - Simple extension of existing line chart with fill
5. **Chart zoom** - Enable brush selection on time series charts
1. ~~**Auto-refresh** - Add a simple `setInterval` refresh with dropdown selector in toolbar~~ ✅
2. ~~**Full markdown for text widget** - Replace custom formatting with a markdown renderer~~ ✅
3. ~~**Legend show/hide** - Add click handler on legend items to toggle series~~ ✅
4. ~~**Stacked area chart** - Simple extension of existing line chart with fill~~ ✅
5. ~~**Chart zoom** - Enable brush selection on time series charts~~ ✅
---
@@ -661,12 +679,12 @@ dashboard.toPerses();
### Phase 0: Architecture Foundation
1. **Phase 1.9** - QueryPlugin interface (enables everything else; do this first)
### Phase 1: Core Features
2. **Quick Wins** - Auto-refresh, markdown, legend toggle, stacked area, chart zoom
3. **Phase 1.1** - More chart types (Area, Pie, Table, Gauge)
4. **Phase 1.2** - Template variables with scoping (highest-impact feature for dashboard usability)
5. **Phase 1.4** - Multiple queries per chart with formulas
6. **Phase 1.6** - Threshold lines & color coding
### Phase 1: Core Features ✅ (Complete — remaining items are partial refinements)
2. ~~**Quick Wins** - Auto-refresh, markdown, legend toggle, stacked area, chart zoom~~ ✅
3. ~~**Phase 1.1** - More chart types (Area, Table, Gauge)~~ ✅ (Pie, Heatmap, Histogram rendering deferred)
4. ~~**Phase 1.2** - Template variables with scoping~~ ✅
5. ~~**Phase 1.4** - Multiple queries per chart~~ ✅ (Formulas deferred)
6. ~~**Phase 1.6** - Threshold lines & color coding~~ ✅ (Value widget done; chart reference lines deferred)
### Phase 2: Platform Leverage (Differentiators)
7. **Phase 2.1** - Log stream widget (leverages all-in-one platform + QueryPlugin)