Web interface for visualizing observability metrics
Status: v0.1.0 (Alpha)
Observe Dashboard is a modern web application for visualizing and analyzing observability metrics from Observe Context.
- ✅ Real-time metric visualizations
- ✅ Interactive charts and graphs
- ✅ Custom dashboards
- ✅ Alert management
- ✅ Dark/Light theme
- ✅ Responsive design
- ✅ GraphQL integration
- ✅ Export reports
- Framework: Next.js 14
- UI Library: shadcn/ui + Radix UI
- Charts: Recharts
- State: Zustand
- Styling: Tailwind CSS
- TypeScript: Full type safety
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/observeco/dashboard.git
cd dashboard
# Install dependencies
npm install
# Start development server
npm run dev
# Open http://localhost:3000# Build
npm run build
# Start production server
npm start- Live metric updates
- Auto-refreshing charts
- WebSocket connections
- Performance indicators
- Create custom dashboards
- Drag-and-drop widgets
- Save/load configurations
- Share dashboards
- Configure alert rules
- Notification channels (email, Slack, webhook)
- Alert history
- Acknowledge/resolve alerts
dashboard/
├── app/ # Next.js app directory
│ ├── dashboard/ # Dashboard pages
│ ├── metrics/ # Metrics pages
│ ├── alerts/ # Alerts pages
│ └── layout.tsx # Root layout
├── components/ # React components
│ ├── charts/ # Chart components
│ ├── ui/ # shadcn/ui components
│ └── dashboard/ # Dashboard widgets
├── lib/ # Utilities
│ ├── api.ts # API client
│ ├── graphql.ts # GraphQL client
│ └── utils.ts # Helper functions
└── public/ # Static assets
Create .env.local:
NEXT_PUBLIC_API_URL=http://localhost:8080
NEXT_PUBLIC_GRAPHQL_URL=http://localhost:8080/graphql
NEXT_PUBLIC_WS_URL=ws://localhost:8080/ws# Run development server with hot reload
npm run dev
# Run linting
npm run lint
# Run tests
npm test
# Type check
npm run type-check
# Format code
npm run format# Install Vercel CLI
npm i -g vercel
# Deploy
vercel# Build image
docker build -t observe-dashboard .
# Run container
docker run -p 3000:3000 observe-dashboard- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if needed
- Open a Pull Request
MIT License - see LICENSE for details.
- Documentation: https://docs.observeco.com/dashboard
- Demo: https://dashboard.observeco.com
- Issues: https://github.com/observeco/dashboard/issues
ObservecO - See your systems clearly.