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
79 lines
4.4 KiB
HTML
79 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Process Table Test</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-gray-100 p-8">
|
|
<div class="max-w-4xl mx-auto">
|
|
<h1 class="text-2xl font-bold mb-6">Process Table with Memory Percentage</h1>
|
|
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-4">
|
|
<i class="fas fa-list mr-2"></i>Top Processes
|
|
</h2>
|
|
<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>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="text-sm font-medium text-gray-900">chrome.exe</div>
|
|
<div class="text-sm text-gray-500 ml-2">PID: 1234</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">15.2%</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">512.3 MB</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">3.2%</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
<button class="bg-red-500 hover:bg-red-700 text-white px-2 py-1 rounded text-xs">
|
|
Kill
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="text-sm font-medium text-gray-900">notepad.exe</div>
|
|
<div class="text-sm text-gray-500 ml-2">PID: 5678</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">2.1%</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">25.6 MB</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">0.2%</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
<button class="bg-red-500 hover:bg-red-700 text-white px-2 py-1 rounded text-xs">
|
|
Kill
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 p-4 bg-green-100 border border-green-200 rounded-lg">
|
|
<h3 class="font-bold text-green-800">✅ Changes Made:</h3>
|
|
<ul class="list-disc list-inside text-green-700 mt-2">
|
|
<li>Added "Memory %" column to the process table</li>
|
|
<li>Updated HTML table header to include the new column</li>
|
|
<li>Modified JavaScript to display memory percentage from backend data</li>
|
|
<li>Backend already calculates MemoryUsagePercentage based on total system memory</li>
|
|
<li>Updated colspan for "No data" message from 4 to 5 columns</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|