update AI page
This commit is contained in:
Raven Scott
parent
64238d0205
commit
c2a658c61c
@ -212,116 +212,3 @@ function openTop() {
|
|||||||
window.open('https://ai-top.x64.world/', 'liveLogGtopWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes');
|
window.open('https://ai-top.x64.world/', 'liveLogGtopWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes');
|
||||||
}
|
}
|
||||||
|
|
||||||
const NETDATA_URL = 'https://ai-monitor.x64.world';
|
|
||||||
|
|
||||||
// Function to fetch data from the Netdata API
|
|
||||||
async function fetchData(chart) {
|
|
||||||
const response = await fetch(`${NETDATA_URL}/api/v1/data?chart=${chart}&format=json`, {
|
|
||||||
cache: 'no-store',
|
|
||||||
headers: {
|
|
||||||
'Cache-Control': 'no-cache'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return await response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to update all metrics every 2 seconds
|
|
||||||
async function updateMetrics() {
|
|
||||||
await updateCpuUsage();
|
|
||||||
await updateMemoryUsage();
|
|
||||||
await updateNetworkUsage();
|
|
||||||
await fetchGpuStats(); // Fetch GPU stats too
|
|
||||||
|
|
||||||
setTimeout(updateMetrics, 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to update CPU usage
|
|
||||||
async function updateCpuUsage() {
|
|
||||||
const data = await fetchData('system.cpu');
|
|
||||||
const totalCPU = data.data[0].slice(1).reduce((acc, curr) => acc + curr, 0);
|
|
||||||
document.getElementById('cpuUsageItem').textContent = `CPU Usage: ${totalCPU.toFixed(2)}%`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to update Memory usage
|
|
||||||
async function updateMemoryUsage() {
|
|
||||||
const data = await fetchData('mem.available');
|
|
||||||
const usedMemoryMB = data.data[0][1];
|
|
||||||
const usedMemoryGB = usedMemoryMB / 1024;
|
|
||||||
document.getElementById('memoryUsageItem').textContent = `Memory Usage: ${usedMemoryGB.toFixed(2)} GB`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to update Network usage
|
|
||||||
async function updateNetworkUsage() {
|
|
||||||
const data = await fetchData('system.net');
|
|
||||||
const totalNetwork = data.data[0].slice(1).reduce((acc, curr) => acc + curr, 0);
|
|
||||||
|
|
||||||
let networkText;
|
|
||||||
if (totalNetwork > 1024) {
|
|
||||||
const totalNetworkInMB = totalNetwork / 1024;
|
|
||||||
networkText = `${totalNetworkInMB.toFixed(2)} MB/s (Down)`;
|
|
||||||
} else if (totalNetwork < -1024) {
|
|
||||||
const totalNetworkInMB = Math.abs(totalNetwork) / 1024;
|
|
||||||
networkText = `${totalNetworkInMB.toFixed(2)} MB/s (Up)`;
|
|
||||||
} else {
|
|
||||||
const totalNetworkInKB = Math.abs(totalNetwork);
|
|
||||||
networkText = `${totalNetworkInKB.toFixed(2)} KB/s (Up)`;
|
|
||||||
}
|
|
||||||
document.getElementById('networkUsageItem').textContent = `Network Usage: ${networkText}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to fetch GPU stats
|
|
||||||
async function fetchGpuStats() {
|
|
||||||
try {
|
|
||||||
const response = await fetch('https://smi.x64.world/nvidia-smi');
|
|
||||||
const data = await response.json();
|
|
||||||
updateGpuStats(data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching GPU stats:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to update GPU stats
|
|
||||||
function updateGpuStats(data) {
|
|
||||||
const gpu = data.nvidia_smi_log.gpu;
|
|
||||||
document.getElementById('gpuUsageItem').textContent = `GPU Utilization: ${gpu.utilization.gpu_util}%`;
|
|
||||||
document.getElementById('gpuMemoryUsageItem').textContent = `GPU Memory Utilization: ${gpu.utilization.memory_util}%`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to initialize the dynamic menu items
|
|
||||||
function initializeMenu() {
|
|
||||||
const menu = document.getElementById('monitorMenu');
|
|
||||||
|
|
||||||
// Create CPU Usage item
|
|
||||||
const cpuItem = document.createElement('li');
|
|
||||||
cpuItem.classList.add('nav-item');
|
|
||||||
cpuItem.innerHTML = '<a class="nav-link" href="#" id="cpuUsageItem">CPU Usage: --%</a>';
|
|
||||||
menu.appendChild(cpuItem);
|
|
||||||
|
|
||||||
// Create Memory Usage item
|
|
||||||
const memoryItem = document.createElement('li');
|
|
||||||
memoryItem.classList.add('nav-item');
|
|
||||||
memoryItem.innerHTML = '<a class="nav-link" href="#" id="memoryUsageItem">Memory Usage: -- GB</a>';
|
|
||||||
menu.appendChild(memoryItem);
|
|
||||||
|
|
||||||
// Create Network Usage item
|
|
||||||
const networkItem = document.createElement('li');
|
|
||||||
networkItem.classList.add('nav-item');
|
|
||||||
networkItem.innerHTML = '<a class="nav-link" href="#" id="networkUsageItem">Network Usage: -- KB/s</a>';
|
|
||||||
menu.appendChild(networkItem);
|
|
||||||
|
|
||||||
// Create GPU Usage item
|
|
||||||
const gpuItem = document.createElement('li');
|
|
||||||
gpuItem.classList.add('nav-item');
|
|
||||||
gpuItem.innerHTML = '<a class="nav-link" href="#" id="gpuUsageItem">GPU Utilization: --%</a>';
|
|
||||||
menu.appendChild(gpuItem);
|
|
||||||
|
|
||||||
// Create GPU Memory Utilization item
|
|
||||||
const gpuMemoryItem = document.createElement('li');
|
|
||||||
gpuMemoryItem.classList.add('nav-item');
|
|
||||||
gpuMemoryItem.innerHTML = '<a class="nav-link" href="#" id="gpuMemoryUsageItem">GPU Memory Utilization: --%</a>';
|
|
||||||
menu.appendChild(gpuMemoryItem);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start the updates
|
|
||||||
initializeMenu();
|
|
||||||
updateMetrics();
|
|
||||||
@ -62,39 +62,21 @@
|
|||||||
<span class="nav-link separator">|</span>
|
<span class="nav-link separator">|</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<!-- Inject custom monitor menu items here -->
|
<!-- Inject custom menu items here -->
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#" id="liveLogLink" onclick="openLiveLog()">Live Log</a>
|
<a class="nav-link" href="#" onclick="openLiveLog()">Live Log</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#" id="topLink" onclick="openTop()">Top</a>
|
<a class="nav-link" href="#" onclick="openTop()">Top</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#" id="gpuStatsLink" onclick="openGpuStats()">GPU Stats</a>
|
<a class="nav-link" href="#" onclick="openGpuStats()">GPU Stats</a>
|
||||||
</li>
|
|
||||||
|
|
||||||
<!-- Dynamic monitor stats -->
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#" id="cpuUsageItem">CPU Usage: --%</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#" id="memoryUsageItem">Memory Usage: -- GB</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#" id="networkUsageItem">Network Usage: -- KB/s</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#" id="gpuUsageItem">GPU Utilization: --%</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="#" id="gpuMemoryUsageItem">GPU Memory Utilization: --%</a>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
<!-- Alert Messages -->
|
<!-- Alert Messages -->
|
||||||
<div id="success-alert" class="alert alert-success mt-3" style="display: none;"></div>
|
<div id="success-alert" class="alert alert-success mt-3" style="display: none;"></div>
|
||||||
<div id="error-alert" class="alert alert-danger mt-3" style="display: none;"></div>
|
<div id="error-alert" class="alert alert-danger mt-3" style="display: none;"></div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user