AWS CloudWatch Dashboard

A modern, responsive AWS monitoring dashboard built with React, TypeScript, and Tailwind CSS. This application provides real-time monitoring of AWS services including EC2, RDS, Lambda, and more, with comprehensive alerting and logging capabilities.

Features

🚀 Real-time Monitoring

• Live Metrics: Real-time CPU, memory, network, and disk usage monitoring
• Service Health: Monitor EC2 instances, RDS databases, Lambda functions, and more
• Interactive Charts: Line charts, area charts, and bar charts with Recharts
• Auto-refresh: Metrics update every 5 seconds automatically

🔔 Advanced Alerting

• Smart Alerts: CPU, memory, error rate, and response time thresholds
• Alert Management: Acknowledge, dismiss, and configure alert rules
• Severity Levels: Critical, warning, and info alert classifications
• Real-time Notifications: Instant alerts with visual and audio indicators

📊 Comprehensive Logging

• CloudWatch Integration: View and search AWS CloudWatch logs
• Advanced Filtering: Filter by service, log level, and time range
• Real-time Log Streaming: Live log updates with syntax highlighting
• Export Capabilities: Download logs for offline analysis

🎨 Modern UI/UX

• Dark Theme: Professional dark theme optimized for monitoring
• Responsive Design: Works perfectly on desktop, tablet, and mobile
• Intuitive Navigation: Clean sidebar navigation with service grouping
• Customizable Dashboards: Personalize your monitoring experience

Technology Stack

• Frontend: React 18 + TypeScript
• Styling: Tailwind CSS
• Charts: Recharts
• Icons: Lucide React
• Build Tool: Vite
• Package Manager: npm

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd aws-cloudwatch-dashboard

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

Build for Production

npm run build
npm run preview

Project Structure

src/
├── components/
│   ├── AlertsPanel.tsx      # Alert management interface
│   ├── ChartWidget.tsx      # Reusable chart component
│   ├── Dashboard.tsx        # Main dashboard view
│   ├── Header.tsx           # Top navigation bar
│   ├── LogsViewer.tsx       # Log viewing interface
│   ├── MetricCard.tsx       # Individual metric display
│   ├── MetricsView.tsx      # Detailed metrics view
│   ├── RecentLogs.tsx       # Recent logs widget
│   ├── ServiceStatus.tsx    # Service health overview
│   └── Sidebar.tsx          # Side navigation
├── App.tsx                  # Main application component
├── main.tsx                 # Application entry point
└── index.css               # Global styles and animations

Key Components

Dashboard

The main dashboard provides an overview of all AWS services with:

• Real-time metric cards for CPU, memory, network, and disk usage
• Interactive charts showing trends over time
• Service status indicators
• Recent log entries

Alerts Panel

Comprehensive alert management with:

• Alert summary with counts by severity
• Configurable thresholds for different metrics
• Alert acknowledgment and dismissal
• Real-time alert notifications

Metrics View

Detailed metrics for individual AWS services:

• EC2: CPU utilization, network traffic, disk operations
• RDS: Database connections, query latency, storage usage
• Lambda: Invocations, duration, errors, throttles

Logs Viewer

Advanced log viewing capabilities:

• Search and filter logs by service, level, and time
• Real-time log streaming
• Syntax highlighting for different log levels
• Export functionality

Customization

Adding New Metrics

1. Update the metrics state in the relevant component
2. Add new MetricCard components
3. Configure alert thresholds if needed

Adding New Services

1. Add service configuration to the Sidebar component
2. Create service-specific metric views
3. Update the routing in App.tsx

Styling

The application uses Tailwind CSS with custom animations and components defined in src/index.css.

AWS Integration

This is a demo application with simulated data. To integrate with real AWS services:

1. Install AWS SDK

   npm install @aws-sdk/client-cloudwatch @aws-sdk/client-logs

2. Configure AWS Credentials Set up AWS credentials using environment variables or AWS CLI

3. Replace Mock Data Replace the simulated data with actual AWS API calls

Performance Features

• Optimized Rendering: React.memo and useMemo for performance
• Lazy Loading: Components load on demand
• Efficient Updates: Minimal re-renders with proper state management
• Responsive Charts: Charts adapt to container size changes

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• AWS CloudWatch for inspiration
• Recharts for excellent charting capabilities
• Tailwind CSS for utility-first styling
• Lucide React for beautiful icons

---

Note: This is a demonstration application with simulated AWS data. For production use, integrate with actual AWS APIs and implement proper authentication and error handling.