king/ResourceUsageAPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove network monitoring features and related code; update GPU monitoring in dashboard for improved performance and clarity.

Browse Source
This commit is contained in:
Din
2025-08-08 11:45:48 +08:00
parent 35828f189c
commit 5ece1fbe27
6 changed files with 71 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wwwroot/index.html
+7 -16
View File
@@ -41,7 +41,7 @@
<!-- 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">
<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">
@@ -93,22 +93,13 @@
<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 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 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>
wwwroot/js/dashboard.js
+64 -10
View File
@@ -228,18 +228,29 @@ class ResourceDashboard {
// Update GPU
if (data.gpu) {
const gpuUsage = data.gpu.usage || 0;
const gpuTemp = data.gpu.temperature || 0;
document.getElementById('gpuUsage').textContent = `${gpuUsage.toFixed(1)}%`;
document.getElementById('gpuBar').style.width = `${gpuUsage}%`;
}
// Update Network
if (data.network) {
const bytesReceived = data.network.bytesReceived || 0;
const bytesSent = data.network.bytesSent || 0;
const totalSpeed = (bytesReceived + bytesSent) / 1024 / 1024;
document.getElementById('networkSpeed').textContent = `${totalSpeed.toFixed(1)} MB/s`;
document.getElementById('networkDetail').textContent =
`↑ ${(bytesSent / 1024 / 1024).toFixed(1)} MB/s ↓ ${(bytesReceived / 1024 / 1024).toFixed(1)} MB/s`;
// Update GPU temperature
document.getElementById('gpuTemp').textContent = `${gpuTemp}°C`;
// Set temperature status color based on temperature ranges
const tempStatusElement = document.getElementById('gpuTempStatus');
if (gpuTemp <= 60) {
tempStatusElement.textContent = 'Cool';
tempStatusElement.className = 'text-green-600';
} else if (gpuTemp <= 75) {
tempStatusElement.textContent = 'Normal';
tempStatusElement.className = 'text-yellow-600';
} else if (gpuTemp <= 85) {
tempStatusElement.textContent = 'Warm';
tempStatusElement.className = 'text-orange-600';
} else {
tempStatusElement.textContent = 'Hot';
tempStatusElement.className = 'text-red-600';
}
}
// Update Game Detection
@@ -258,6 +269,11 @@ class ResourceDashboard {
if (data.disks && !document.getElementById('detailsSection').classList.contains('hidden')) {
this.updateDiskUsage(data.disks);
}
// Update System Info GPU details (only if details section is visible and we have system info)
if (!document.getElementById('detailsSection').classList.contains('hidden') && this.lastSystemInfo) {
this.updateSystemInfo(this.lastSystemInfo);
}
} catch (error) {
console.error('Error updating dashboard:', error);
this.showNotification('Error updating dashboard data', 'error');
@@ -343,6 +359,43 @@ class ResourceDashboard {
// Store the latest system info
this.lastSystemInfo = systemInfo;
// Get GPU info from the latest resource data if available
const gpuInfo = this.lastResourceData?.gpu;
let gpuSection = '';
if (gpuInfo && gpuInfo.isAvailable) {
gpuSection = `
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-semibold text-gray-700">GPU</h4>
<p class="text-gray-600">${gpuInfo.name || 'Unknown GPU'}</p>
<div class="mt-2 space-y-1">
<div class="flex justify-between text-sm">
<span class="text-gray-500">Usage:</span>
<span class="text-gray-700">${gpuInfo.usage || 0}%</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-500">Temperature:</span>
<span class="text-gray-700 ${gpuInfo.temperature > 85 ? 'text-red-600' : gpuInfo.temperature > 75 ? 'text-orange-600' : gpuInfo.temperature > 60 ? 'text-yellow-600' : 'text-green-600'}">${gpuInfo.temperature || 0}°C</span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-500">Memory:</span>
<span class="text-gray-700">${gpuInfo.memoryUsed && gpuInfo.memoryTotal ? ((gpuInfo.memoryUsed / gpuInfo.memoryTotal) * 100).toFixed(1) : 0}%</span>
</div>
${gpuInfo.fanSpeed ? `
<div class="flex justify-between text-sm">
<span class="text-gray-500">Fan Speed:</span>
<span class="text-gray-700">${gpuInfo.fanSpeed}%</span>
</div>` : ''}
${gpuInfo.powerUsage ? `
<div class="flex justify-between text-sm">
<span class="text-gray-500">Power:</span>
<span class="text-gray-700">${gpuInfo.powerUsage}W</span>
</div>` : ''}
</div>
</div>
`;
}
const systemInfoDiv = document.getElementById('systemInfo');
systemInfoDiv.innerHTML = `
<div class="bg-gray-50 p-4 rounded-lg">
@@ -369,6 +422,7 @@ class ResourceDashboard {
<h4 class="font-semibold text-gray-700">Uptime</h4>
<p class="text-gray-600">${systemInfo.uptime ? this.formatUptime(systemInfo.uptime) : 'N/A'}</p>
</div>
${gpuSection}
`;
}