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.
This commit is contained in:
Phoenix
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Resource Monitor Dashboard</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="css/dashboard.css">
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<!-- Navigation -->
|
||||
<nav class="bg-blue-600 text-white shadow-lg">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<div class="flex items-center">
|
||||
<i class="fas fa-chart-line text-2xl mr-3"></i>
|
||||
<h1 class="text-xl font-bold">Resource Monitor</h1>
|
||||
</div>
|
||||
<div class="flex space-x-4">
|
||||
<button id="toggleAutoRefresh" class="bg-yellow-500 hover:bg-yellow-700 px-4 py-2 rounded-lg transition-colors">
|
||||
<i class="fas fa-sync mr-2"></i>Auto: ON
|
||||
</button>
|
||||
<button id="toggleProcesses" class="bg-purple-500 hover:bg-purple-700 px-4 py-2 rounded-lg transition-colors">
|
||||
<i class="fas fa-list mr-2"></i>Processes
|
||||
</button>
|
||||
<button id="toggleDetails" class="bg-blue-500 hover:bg-blue-700 px-4 py-2 rounded-lg transition-colors">
|
||||
<i class="fas fa-info-circle mr-2"></i>Details
|
||||
</button>
|
||||
<button id="refreshData" class="bg-green-500 hover:bg-green-700 px-4 py-2 rounded-lg transition-colors">
|
||||
<i class="fas fa-sync-alt mr-2"></i>Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<!-- Dashboard Overview -->
|
||||
<div id="dashboard" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<!-- CPU Card -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500">CPU Usage</p>
|
||||
<p id="cpuUsage" class="text-3xl font-bold text-blue-600">0%</p>
|
||||
</div>
|
||||
<div class="bg-blue-100 p-3 rounded-full">
|
||||
<i class="fas fa-microchip text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div id="cpuBar" class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Memory Card -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500">Memory Usage</p>
|
||||
<p id="memoryUsage" class="text-3xl font-bold text-green-600">0%</p>
|
||||
</div>
|
||||
<div class="bg-green-100 p-3 rounded-full">
|
||||
<i class="fas fa-memory text-green-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div id="memoryBar" class="bg-green-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GPU Card -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500">GPU Usage</p>
|
||||
<p id="gpuUsage" class="text-3xl font-bold text-purple-600">0%</p>
|
||||
</div>
|
||||
<div class="bg-purple-100 p-3 rounded-full">
|
||||
<i class="fas fa-display text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div id="gpuBar" class="bg-purple-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Card -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-500">Network</p>
|
||||
<p id="networkSpeed" class="text-3xl font-bold text-orange-600">0 MB/s</p>
|
||||
</div>
|
||||
<div class="bg-orange-100 p-3 rounded-full">
|
||||
<i class="fas fa-network-wired text-orange-600 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p id="networkDetail" class="text-sm text-gray-500">↑ 0 MB/s ↓ 0 MB/s</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Game Detection Section -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-xl font-bold text-gray-800">
|
||||
<i class="fas fa-gamepad mr-2"></i>Game Detection
|
||||
</h2>
|
||||
<span id="gameStatus" class="text-sm text-gray-500">No game detected</span>
|
||||
</div>
|
||||
<div id="gameInfo" class="text-center py-8">
|
||||
<div class="text-gray-400 mb-4">
|
||||
<i class="fas fa-gamepad text-4xl"></i>
|
||||
</div>
|
||||
<p class="text-gray-500">No game currently running</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top Processes Section (Hidden by default) -->
|
||||
<div id="processesSection" class="hidden">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-xl font-bold text-gray-800">
|
||||
<i class="fas fa-list mr-2"></i>Top Processes
|
||||
</h2>
|
||||
<span class="text-sm text-gray-500">Click process name to terminate</span>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full table-auto">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Process</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CPU %</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Memory</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="processTable" class="bg-white divide-y divide-gray-200">
|
||||
<!-- Process rows will be populated here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detailed Information (Hidden by default) -->
|
||||
<div id="detailsSection" class="hidden">
|
||||
<!-- System Information -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-server mr-2"></i>System Information
|
||||
</h2>
|
||||
<div id="systemInfo" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<!-- System info will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Disk Usage -->
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 mb-8">
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-hard-drive mr-2"></i>Disk Usage
|
||||
</h2>
|
||||
<div id="diskUsage" class="space-y-4">
|
||||
<!-- Disk usage will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Performance Charts -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="bg-white rounded-lg shadow-lg p-6">
|
||||
<h3 class="text-lg font-bold text-gray-800 mb-4">CPU History</h3>
|
||||
<canvas id="cpuChart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
<div class="bg-white rounded-lg shadow-lg p-6">
|
||||
<h3 class="text-lg font-bold text-gray-800 mb-4">Memory History</h3>
|
||||
<canvas id="memoryChart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading Overlay -->
|
||||
<div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div class="bg-white rounded-lg p-6 flex items-center space-x-3">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||||
<span class="text-gray-700">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user