You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.9 KiB
101 lines
3.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Server and GPU Information</title>
|
|
<style>
|
|
.card {
|
|
margin: 10px;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
width: 300px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.server-name {
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
.gpu-info {
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Server and GPU Information</h1>
|
|
<div id="server-data"></div>
|
|
|
|
<script>
|
|
function fetchData() {
|
|
fetch('http://127.0.0.1:15002/all_data')
|
|
// 获取服务器和显卡数据
|
|
.then(response => response.json()) // 解析 JSON 响应
|
|
.then(data => {
|
|
// 处理 JSON 数据
|
|
// console.log(data);
|
|
displayServerData(data); // 调用显示数据的函数
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching data:', error);
|
|
});
|
|
}
|
|
|
|
function displayServerData(serverData) {
|
|
// 绘制 -------------------
|
|
let serverDataContainer = document.getElementById('server-data');
|
|
serverDataContainer.innerHTML = ''; // 清空容器
|
|
|
|
let greenDot = '<span style="color: green;"> 空闲</span>';
|
|
let yellowDot = '<span style="color: orange;"> 占用</span>';
|
|
let redDot = '<span style="color: red;"> 占用</span>';
|
|
|
|
for (let key in serverData){
|
|
let serverCard = document.createElement('div');
|
|
serverCard.classList.add('card');
|
|
|
|
let serverName = document.createElement('div');
|
|
serverName.classList.add('server-name');
|
|
let updateFlag = serverData[key].updated ? '' : ' - Not updated -';
|
|
serverName.textContent = key + updateFlag;
|
|
serverCard.appendChild(serverName);
|
|
|
|
if ('info_list' in serverData[key]){
|
|
serverData[key].info_list.forEach(function(gpu){
|
|
let gpuInfo = document.createElement('div');
|
|
gpuInfo.classList.add('gpu-info');
|
|
let colorDot = greenDot;
|
|
if (gpu.used_mem < 1000 && gpu.util_gpu < 20){
|
|
colorDot = greenDot;
|
|
}
|
|
else if (gpu.util_mem < 50){
|
|
colorDot = yellowDot;
|
|
}else{
|
|
colorDot = redDot;
|
|
}
|
|
gpuInfo.innerHTML = '<strong>' + gpu.idx + ' - ' + gpu.gpu_name + colorDot + '</strong><br>'
|
|
+ 'Temperature: ' + gpu.temperature + '°C<br>'
|
|
+ 'Memory: ' + gpu.used_mem + ' / ' + gpu.total_mem + " MB" + '<br>'
|
|
+ 'Utilization: ' + gpu.util_gpu + '%';
|
|
serverCard.appendChild(gpuInfo);
|
|
});
|
|
}else{
|
|
let errInfo = document.createElement('div');
|
|
errInfo.classList.add('error-info');
|
|
errInfo.innerHTML = '<strong>error info</strong><br>' + serverData[key].err_info;
|
|
serverCard.appendChild(errInfo);
|
|
}
|
|
|
|
serverDataContainer.appendChild(serverCard);
|
|
}
|
|
}
|
|
|
|
// 页面加载时获取数据并定时刷新
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
fetchData();
|
|
setInterval(fetchData, 3000); // 每3秒刷新一次数据
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|