Add ResourceHub for real-time updates and implement web dashboard with REST API

- Created ResourceHub.cs for SignalR group management. - Developed a modern web dashboard using Tailwind CSS for responsive design. - Implemented real-time updates with SignalR for CPU, Memory, GPU, and Network usage. - Added REST API endpoints for resource information and process management. - Integrated process management features to view and terminate high-usage processes. - Enhanced UI with loading spinners, notifications, and responsive tables. - Included performance charts for historical CPU and Memory usage. - Configured Swagger UI for API documentation. - Established security features including process kill restrictions and API key authentication.
2025-08-07 23:02:03 +08:00
parent aa30c9f034
commit 3d47fc1439
23 changed files with 1405 additions and 547 deletions
@@ -0,0 +1,146 @@
+# 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)