king
3d1c55468b
- Add detailed CPU core monitoring option for better performance control - Update monitoring settings in app configuration - Improve parallel task execution for resource usage monitoring - Modify Telegram notification service to skip alerts from svchost processes - Add "Memory %" column to process table in HTML and update related JavaScript - Create performance test scripts for API response time evaluation
259 lines
13 KiB
HTML
259 lines
13 KiB
HTML
<!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>
|
|
<!-- Hidden System Control Button (requires triple-click to show) -->
|
|
<button id="systemControl" class="hidden bg-red-600 hover:bg-red-800 px-4 py-2 rounded-lg transition-colors" title="System Control">
|
|
<i class="fas fa-power-off mr-2"></i>System
|
|
</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-3 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 class="mt-2 flex items-center justify-between text-sm">
|
|
<span class="text-gray-500">
|
|
<i class="fas fa-thermometer-half mr-1"></i>
|
|
<span id="gpuTemp" class="font-medium">0°C</span>
|
|
</span>
|
|
<span id="gpuTempStatus" class="text-green-600">Normal</span>
|
|
</div>
|
|
</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">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>
|
|
|
|
<!-- System Control Modal -->
|
|
<div id="systemControlModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-bold text-gray-800">
|
|
<i class="fas fa-power-off mr-2 text-red-600"></i>System Control
|
|
</h3>
|
|
<button id="closeSystemModal" class="text-gray-400 hover:text-gray-600">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Timer Input -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Timer (seconds) - Default: 15 seconds
|
|
</label>
|
|
<input type="number" id="systemTimer"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder="15" min="0" max="86400" value="15">
|
|
<p class="text-xs text-gray-500 mt-1">Maximum: 24 hours (86400 seconds)</p>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<button id="shutdownBtn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-3 rounded-lg transition-colors flex items-center justify-center">
|
|
<i class="fas fa-power-off mr-2"></i>Shutdown
|
|
</button>
|
|
<button id="restartBtn" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-3 rounded-lg transition-colors flex items-center justify-center">
|
|
<i class="fas fa-redo mr-2"></i>Restart
|
|
</button>
|
|
<button id="cancelBtn" class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-3 rounded-lg transition-colors flex items-center justify-center">
|
|
<i class="fas fa-ban mr-2"></i>Cancel
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Force Shutdown Option -->
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="forceShutdown" class="mr-2" checked>
|
|
<label for="forceShutdown" class="text-sm text-gray-700">Force shutdown (close applications without saving)</label>
|
|
</div>
|
|
|
|
<!-- Warning -->
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
|
|
<div class="flex">
|
|
<i class="fas fa-exclamation-triangle text-yellow-600 mr-2 mt-0.5"></i>
|
|
<div class="text-sm text-yellow-800">
|
|
<strong>Warning:</strong> This will shut down or restart the entire system.
|
|
Make sure to save any unsaved work first. Use the Cancel button to abort any pending shutdown/restart.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/dashboard.js"></script>
|
|
</body>
|
|
</html>
|