ResourceUsageAPI/README_WebUI.md

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

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

dotnet run --windows-service

Build and Deploy

dotnet build --configuration Release
dotnet publish --configuration Release --output ./publish

Configuration

Port Configuration

Edit appsettings.json to change ports:

{
  "Kestrel": {
    "Endpoints": {
      "Http": {
        "Url": "http://*:5000"
      },
      "Https": {
        "Url": "https://*:5001"
      }
    }
  }
}

Monitoring Settings

Configure monitoring intervals and features in appsettings.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)