A real-time dashboard for monitoring service health and performance across multiple domains. This application provides a comprehensive visualization of service metrics, allowing engineers and system administrators to quickly identify and resolve critical issues.
- Domain Overview: View summary metrics for each domain including total services and critical issues
- Polar Visualization: Analyze service health and importance with an interactive bubble chart
- Critical Services Monitoring: Track the 6 most critical services with 24-hour activity visualization
- Service List: Browse all services with detailed metrics and status indicators
- Simulated Real-Time Updates: Receive live updates of service metrics via built-in mock data generation
- Detailed Service View: Drill down into detailed service information with performance charts
- Frontend: React 19 with TypeScript
- State Management: Redux with Redux Toolkit
- Data Visualization: D3.js
- Styling: TailwindCSS
- Mock Data: Built-in mock data generation for simulated real-time updates
- Node.js 16+
- npm or yarn
- Clone the repository:
git clone https://github.com/your-org/dashboard-app.git
cd dashboard-app- Install dependencies:
npm installnpm start: Runs the app in development mode at http://localhost:3000npm run build: Builds the app for production to thebuildfoldernpm test: Launches the test runner in interactive watch mode
This application uses built-in mock data rather than external APIs:
- All API endpoints are mocked internally
- Real-time updates are simulated with 5-second intervals
- No external server dependencies required
src/components: UI components organized by functionsrc/store: Redux store configuration and slicessrc/services: API service implementations and mock datasrc/hooks: Custom React hookssrc/types: TypeScript type definitionsmock-server: Reference implementation (not required for running the app)