# Resource Monitor Web UI This enhanced Resource Monitor Service now includes a modern web-based dashboard with REST API functionality. ## Features ### Web Dashboard - **Mobile-Friendly Design**: Built with Tailwind CSS for responsive design - **Real-Time Updates**: Uses SignalR for live data updates every 5 seconds - **Interactive Dashboard**: Shows CPU, Memory, GPU, and Network usage with progress bars - **Process Management**: View top 10 processes with ability to kill top 3 high-usage processes - **Detailed View**: Toggle detailed system information and disk usage - **Performance Charts**: Real-time CPU and Memory usage history ### REST API Endpoints #### Resource Information - `GET /api/resource/usage` - Get complete resource usage information - `GET /api/resource/system-info` - Get system information - `GET /api/resource/cpu` - Get CPU usage details - `GET /api/resource/memory` - Get memory usage details - `GET /api/resource/gpu` - Get GPU usage details - `GET /api/resource/disks` - Get disk usage for all drives - `GET /api/resource/network` - Get network usage details - `GET /api/resource/processes?count=10` - Get top processes #### Process Management - `POST /api/resource/kill-process/{processId}` - Terminate a specific process #### API Documentation - `GET /swagger` - Swagger UI for API documentation (in Development mode) ## Running the Application ### Development Mode ```bash dotnet run ``` The application will be available at: - Web UI: http://localhost:5000 - API: http://localhost:5000/api/ - Swagger UI: http://localhost:5000/swagger ### Windows Service Mode ```bash dotnet run --windows-service ``` ### Build and Deploy ```bash dotnet build --configuration Release dotnet publish --configuration Release --output ./publish ``` ## Configuration ### Port Configuration Edit `appsettings.json` to change ports: ```json { "Kestrel": { "Endpoints": { "Http": { "Url": "http://*:5000" }, "Https": { "Url": "https://*:5001" } } } } ``` ### Monitoring Settings Configure monitoring intervals and features in `appsettings.json`: ```json { "MonitoringSettings": { "UpdateIntervalMs": 5000, "EnableGpuMonitoring": true, "EnableProcessMonitoring": true, "MaxProcessesToTrack": 10 } } ``` ## Security Features ### Process Kill Restrictions - Only the top 3 highest CPU/Memory usage processes can be terminated - Confirmation dialog required for process termination - All process terminations are logged ### API Security - CORS configured for allowed origins - Optional API key authentication (disabled by default) - Rate limiting can be configured ## Dashboard Features ### Main Dashboard Cards 1. **CPU Usage**: Real-time percentage with progress bar 2. **Memory Usage**: Memory utilization with progress bar 3. **GPU Usage**: Graphics processor utilization 4. **Network**: Upload/download speeds ### Process Table - Shows top 10 processes by CPU/Memory usage - Process ID, Name, CPU%, Memory usage - Kill button available for top 3 processes only ### Detailed Information (Toggle) - Complete system information - Disk usage for all drives - Real-time performance charts - Historical CPU and Memory usage graphs ### Mobile Responsive - Optimized for mobile devices - Touch-friendly interface - Responsive grid layout - Collapsible sections ## Technology Stack - **Backend**: ASP.NET Core 9.0 - **Frontend**: HTML5, Tailwind CSS, Chart.js - **Real-time**: SignalR - **API Documentation**: Swagger/OpenAPI - **Icons**: Font Awesome - **Charts**: Chart.js ## Browser Compatibility - Chrome 90+ - Firefox 88+ - Safari 14+ - Edge 90+ ## Development Notes The application runs both as a web server and a Windows service background worker simultaneously, providing: - Web interface for interactive monitoring - REST API for programmatic access - Background service for continuous monitoring - Real-time updates via WebSocket (SignalR)