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.
197 lines
8.1 KiB
197 lines
8.1 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);
|
|
displayError(error + " （多半是没有正确连接服务器端，可能是没开、网络错误）");
|
|
});
|
|
}
|
|
|
|
function displayError(err_info){
|
|
let serverDataContainer = document.getElementById('server-data');
|
|
serverDataContainer.innerHTML = ''; // 清空容器
|
|
|
|
let errDiv = document.createElement('div');
|
|
errDiv.classList.add('error-info');
|
|
errDiv.innerHTML = err_info;
|
|
serverDataContainer.appendChild(errDiv);
|
|
}
|
|
|
|
function parse_storage(num){
|
|
num /= 1024;
|
|
if (num < 1024){
|
|
return num.toFixed(2) + " MB";
|
|
}
|
|
|
|
num /= 1024;
|
|
if (num < 1024){
|
|
return num.toFixed(2) + " GB";
|
|
}
|
|
|
|
num /= 1024;
|
|
if (num < 1024){
|
|
return num.toFixed(2) + " TB";
|
|
}
|
|
}
|
|
|
|
function add_bar(serverCard){
|
|
let bar = document.createElement('div');
|
|
bar.innerHTML = "<hr />"
|
|
serverCard.appendChild(bar);
|
|
}
|
|
|
|
function displayServerData(data) {
|
|
// 绘制 -------------------
|
|
let serverDataContainer = document.getElementById('server-data');
|
|
serverDataContainer.innerHTML = ''; // 清空容器
|
|
|
|
let timeStr = data['time']
|
|
let serverData = data['server_data']
|
|
|
|
let timeDiv = document.createElement('div');
|
|
timeDiv.textContent = timeStr;
|
|
serverDataContainer.appendChild(timeDiv);
|
|
|
|
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;
|
|
// 设置标题字体大小
|
|
serverName.style.fontSize = '22px'; // 直接设置字体大小
|
|
serverName.style.fontWeight = 'bold'; // 可选：加粗标题
|
|
serverName.style.backgroundColor = 'black'; // 背景设为黑色
|
|
serverName.style.color = 'white'; // 文字设为白色
|
|
serverName.style.padding = '10px'; // 增加内边距
|
|
serverName.style.borderRadius = '5px'; // 可选：增加圆角
|
|
serverCard.appendChild(serverName);
|
|
// 内存
|
|
if ('memory_info' in serverData[key]){
|
|
let memoryInfo = document.createElement('div');
|
|
memoryInfo.classList.add('memory-info');
|
|
|
|
let totalNum = serverData[key].memory_info.total
|
|
let usedNum = serverData[key].memory_info.used
|
|
let totalMem = parse_storage(totalNum);
|
|
let usedMem = parse_storage(usedNum);
|
|
let tmpColor = "green";
|
|
if (usedNum / totalNum > 0.8)
|
|
tmpColor = "red";
|
|
else if (usedNum / totalNum > 0.6)
|
|
tmpColor = "orange";
|
|
|
|
memoryInfo.innerHTML += "<strong> 内存 : </strong> <span style=\"color: " + tmpColor + ";\">" + usedMem + " / " + totalMem + "</span><br>";
|
|
|
|
serverCard.appendChild(memoryInfo);
|
|
// 分割线
|
|
add_bar(serverCard);
|
|
}
|
|
|
|
// 存储空间
|
|
if ('storage_info_list' in serverData[key]){
|
|
let storageInfo = document.createElement('div');
|
|
storageInfo.classList.add('storage-info');
|
|
|
|
for (let i = 0; i < serverData[key].storage_info_list.length; i++) {
|
|
let targetPath = serverData[key].storage_info_list[i].path;
|
|
let totalNum = serverData[key].storage_info_list[i].total
|
|
let availableNum = serverData[key].storage_info_list[i].available
|
|
let totalStorage = parse_storage(totalNum);
|
|
let availableStorage = parse_storage(totalNum - availableNum);
|
|
let tmpColor = "green";
|
|
if (availableNum / totalNum < 0.1)
|
|
tmpColor = "red";
|
|
else if (availableNum / totalNum < 0.3)
|
|
tmpColor = "orange";
|
|
storageInfo.innerHTML += '<strong>' + targetPath + " :</strong> <span style=\"color: " + tmpColor
|
|
+ ";\">" + availableStorage + " / " + totalStorage + "</span><br>";
|
|
}
|
|
|
|
serverCard.appendChild(storageInfo);
|
|
// 分割线
|
|
add_bar(serverCard);
|
|
}
|
|
|
|
// gpu
|
|
if ('gpu_info_list' in serverData[key]){
|
|
serverData[key].gpu_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>
|
|
|