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
```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)