comet-ml
[OPIK-3213] [FE] Add Dashboard Infrastructure with Widget System
Details
This PR implements the core dashboard infrastructure for Opik, enabling users to create customizable dashboards with multiple widget types for monitoring project metrics and performance.
Backend Changes:
- Added
dashboardsEnabledfeature toggle toServiceTogglesConfigand configuration files - Minor update to
DashboardDAOfor proper entity handling
Frontend - Core Dashboard Infrastructure:
- Implemented full CRUD operations for dashboards (list, create, read, update, delete, clone)
- Added
DashboardStorewith Zustand for state management (648 lines) - Created comprehensive dashboard type definitions (
types/dashboard.ts) - Implemented auto-save functionality with debouncing (
useDashboardAutosave) - Added dashboard routing and navigation integration
Frontend - Dashboard Pages:
- DashboardsPage: Full-featured list view with create, clone, delete operations
- DashboardPage: Interactive dashboard view with section management and widget configuration
- Added sidebar navigation entry for dashboards
Frontend - Widget System:
- Implemented compound
DashboardWidgetcomponent with reusable sub-components:- Header, Content, Actions (edit, delete, duplicate, move)
- Empty state, Error state, Preview mode
- Drag handle for grid layout
- Created
WidgetConfigDialogsystem for adding/editing widgets with live preview - Implemented widget registry pattern for extensibility
Frontend - Implemented Widgets:
-
Text/Markdown Widget:
- Markdown editor with syntax highlighting
- Live markdown preview
- Supports rich text formatting
-
Project Metrics Widget:
- 9 metric types (traces, threads, costs, tokens, guardrails, feedback scores)
- Configurable chart types (line/bar)
- Project selector (optional, falls back to dashboard project)
- Local/global date range toggle with
MetricDateRangeSelect - Comprehensive filter support for traces and threads
- Reuses existing
MetricContainerChartcomponent with newchartOnlymode
Frontend - Dashboard Layout:
- Integrated
react-grid-layoutfor drag-and-drop widget positioning - Responsive grid system with breakpoints
- Section-based organization with expand/collapse
- Layout persistence and migrations support
Frontend - API Integration:
-
useDashboardsList- Fetch dashboards with pagination and search -
useDashboardById- Fetch single dashboard -
useDashboardCreateMutation- Create new dashboard -
useDashboardUpdateMutation- Update dashboard state -
useDashboardDeleteMutation- Delete dashboard
Supporting Changes:
- Updated
MetricContainerChartto supportchartOnlyprop for widget embedding - Added dashboard explainers and tooltips
- Created dashboard utility functions (layout, migrations, search)
- Added necessary CSS styles for grid layout
- Updated package dependencies (react-grid-layout, etc.)
- Fixed React Hooks linting issues (hooks order, referential stability)
Documentation:
- Comprehensive implementation plan (1,576 lines)
- High-level design document
- MVP summary
- Grid layout investigation
- Next steps planning document
Change checklist
- [x] User facing
- [ ] Documentation update
Issues
- OPIK-3213
Testing
Manual Testing Performed:
- Dashboard CRUD operations (create, read, update, delete, clone)
- Widget addition and configuration with live preview
- Text/Markdown widget with markdown editing
- Project Metrics widget with all 9 metric types
- Chart type switching (line/bar)
- Filter configuration for trace and thread metrics
- Project selector functionality
- Date range toggling (global/local)
- Widget drag-and-drop and resizing
- Section management (add, rename, delete, expand/collapse)
- Auto-save functionality
- Linting passes without errors
- Type checking passes without errors
- Responsive grid layout
Components Tested:
- All dashboard pages load correctly
- Widget preview updates in real-time during configuration
- Filter UI matches existing patterns (AddEditRule dialog)
- Metric charts render correctly with applied filters
- Date range picker integration works as expected
Documentation
- Added comprehensive planning documents in repository root
- Implementation follows existing Opik patterns:
- API hooks follow TanStack Query conventions
- Component structure matches Opik frontend organization
- State management uses Zustand like other features
- Filter implementation reuses existing
FiltersContentcomponent
- Widget system designed for extensibility (easy to add new widget types)
- Dashboard configuration uses versioned schema for future migrations
🔄 Test environment deployment started
Building images for PR #4237...
You can monitor the build progress here.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
✅ Test environment is now available!
Access Information
- URL: https://pr-4237.dev.comet.com
- Cluster: comet-ml-development
- Namespace: pr-4237
- Version: 1.9.32-4237-merge-542
- Application logs: View in Grafana
The deployment has completed successfully and the version has been verified.
Backend Tests Results
350 files 350 suites 55m 30s ⏱️ 5 859 tests 5 852 ✅ 7 💤 0 ❌ 5 858 runs 5 851 ✅ 7 💤 0 ❌
Results for commit e91182c8.
:recycle: This comment has been updated with latest results.
🔄 Test environment deployment started
Building images for PR #4237...
You can monitor the build progress here.
✅ Test environment is now available!
Access Information
- URL: https://pr-4237.dev.comet.com
- Cluster: comet-ml-development
- Namespace: pr-4237
- Version: 1.9.34-4237-merge-567
- Application logs: View in Grafana
The deployment has completed successfully and the version has been verified.
🔄 Test environment deployment started
Building images for PR #4237...
You can monitor the build progress here.
✅ Test environment is now available!
Access Information
- URL: https://pr-4237.dev.comet.com
- Cluster: comet-ml-development
- Namespace: pr-4237
- Version: 1.9.34-4237-merge-575
- Application logs: View in Grafana
The deployment has completed successfully and the version has been verified.
🔄 Test environment deployment started
Building images for PR #4237...
You can monitor the build progress here.
✅ Test environment is now available!
Access Information
- URL: https://pr-4237.dev.comet.com
- Cluster: comet-ml-development
- Namespace: pr-4237
- Version: 1.9.34-4237-merge-576
- Application logs: View in Grafana
The deployment has completed successfully and the version has been verified.
🔄 Test environment deployment started
Building images for PR #4237...
You can monitor the build progress here.
✅ Test environment is now available!
Access Information
- URL: https://pr-4237.dev.comet.com
- Cluster: comet-ml-development
- Namespace: pr-4237
- Version: 1.9.34-4237-merge-602
- Application logs: View in Grafana
The deployment has completed successfully and the version has been verified.
🔄 Test environment deployment started
Building images for PR #4237...
You can monitor the build progress here.
✅ Test environment is now available!
Access Information
- URL: https://pr-4237.dev.comet.com
- Cluster: comet-ml-development
- Namespace: pr-4237
- Version: 1.9.34-4237-merge-608
- Application logs: View in Grafana
The deployment has completed successfully and the version has been verified.
SDK E2E Tests Results
105 tests 104 ✅ 5m 35s ⏱️ 1 suites 0 💤 1 files 1 ❌
For more details on these failures, see this check.
Results for commit e91182c8.
:recycle: This comment has been updated with latest results.
🔄 Test environment deployment started
Building images for PR #4237...
You can monitor the build progress here.
✅ Test environment is now available!
Access Information
- URL: https://pr-4237.dev.comet.com
- Cluster: comet-ml-development
- Namespace: pr-4237
- Version: 1.9.35-4237-merge-613
- Application logs: View in Grafana
The deployment has completed successfully and the version has been verified.