2 changed files with 5 additions and 318 deletions
@ -1,2 +1,6 @@ |
|||||
serverList.json |
serverList.json |
||||
|
|
||||
|
# build |
||||
build/ |
build/ |
||||
|
dist/ |
||||
|
*.spec |
||||
@ -1,317 +0,0 @@ |
|||||
<!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; |
|
||||
font-size: 24px; /* 调整字体大小 */ |
|
||||
background-color: black; /* 背景色设为黑色 */ |
|
||||
color: white; /* 文字颜色设为白色 */ |
|
||||
padding: 10px; /* 增加内边距使其更美观 */ |
|
||||
border-radius: 5px; /* 可选：增加圆角效果 */ |
|
||||
} |
|
||||
.gpu-info { |
|
||||
margin-top: 10px; |
|
||||
border: 1px solid #ccc; /* 边框 */ |
|
||||
border-radius: 8px; /* 圆角 */ |
|
||||
padding: 10px; /* 内边距 */ |
|
||||
margin-bottom: 15px; /* 下边距 */ |
|
||||
background-color: #f9f9f9; /* 背景颜色 */ |
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影 */ |
|
||||
} |
|
||||
|
|
||||
.user-info { |
|
||||
margin-top: 10px; /* 上边距 */ |
|
||||
font-size: 14px; /* 字体大小 */ |
|
||||
color: #555; /* 字体颜色 */ |
|
||||
} |
|
||||
|
|
||||
.user-item { |
|
||||
color: #007bff; /* 用户名颜色 */ |
|
||||
font-weight: bold; /* 加粗 */ |
|
||||
} |
|
||||
|
|
||||
/* 头部样式 */ |
|
||||
.head_contrainer{ |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: space-between; |
|
||||
height: 90px; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.head_contrainer .checkboxes{ |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
</style> |
|
||||
</head> |
|
||||
<body> |
|
||||
<div class="head_contrainer"> |
|
||||
<div> |
|
||||
<h1>Server and GPU Information</h1> |
|
||||
<p id="time"></p> |
|
||||
</div> |
|
||||
|
|
||||
<div class="checkboxes"> |
|
||||
<div class="sample"> |
|
||||
<label for="toggle_network">网络</label> |
|
||||
<input type="checkbox" id="toggle_network" checked onchange="updateDisplay()"> |
|
||||
</div> |
|
||||
<div class="sample"> |
|
||||
<label for="toggle_memory">内存</label> |
|
||||
<input type="checkbox" id="toggle_memory" checked onchange="updateDisplay()"> |
|
||||
</div> |
|
||||
<div class="sample"> |
|
||||
<label for="toggle_storage">存储</label> |
|
||||
<input type="checkbox" id="toggle_storage" checked onchange="updateDisplay()"> |
|
||||
</div> |
|
||||
<div class="sample"> |
|
||||
<label for="toggle_gpus">显卡</label> |
|
||||
<input type="checkbox" id="toggle_gpus" checked onchange="updateDisplay()"> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div id="server-data"></div> |
|
||||
|
|
||||
<script> |
|
||||
let lastData = null; |
|
||||
|
|
||||
// 请求服务器获取GPus数据 |
|
||||
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_data_unit(num, fixedLen=2){ |
|
||||
if (num < 1024){ |
|
||||
return num.toFixed(fixedLen) + " KB"; |
|
||||
} |
|
||||
|
|
||||
num /= 1024; |
|
||||
if (num < 1024){ |
|
||||
return num.toFixed(fixedLen) + " MB"; |
|
||||
} |
|
||||
|
|
||||
num /= 1024; |
|
||||
if (num < 1024){ |
|
||||
return num.toFixed(fixedLen) + " GB"; |
|
||||
} |
|
||||
|
|
||||
num /= 1024; |
|
||||
if (num < 1024){ |
|
||||
return num.toFixed(fixedLen) + " TB"; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function add_bar(serverCard){ |
|
||||
let bar = document.createElement('hr'); |
|
||||
serverCard.appendChild(bar); |
|
||||
} |
|
||||
|
|
||||
function updateDisplay(){ |
|
||||
if (lastData != null){ |
|
||||
displayServerData(lastData); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 页面绑定数据 |
|
||||
function displayServerData(data) { |
|
||||
lastData = data; |
|
||||
// 绘制 ------------------- |
|
||||
let serverDataContainer = document.getElementById('server-data'); |
|
||||
serverDataContainer.innerHTML = ''; // 清空容器 |
|
||||
|
|
||||
let timeStr = data['time'] |
|
||||
let serverData = data['server_data'] |
|
||||
|
|
||||
let timeDiv = document.getElementById('time') |
|
||||
timeDiv.textContent = "更新时间为：" + timeStr |
|
||||
|
|
||||
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 (document.getElementById('toggle_network').checked && 'network_info' in serverData[key]){ |
|
||||
let networkInfo = document.createElement('div'); |
|
||||
networkInfo.classList.add('network-info'); |
|
||||
|
|
||||
let inNum = serverData[key].network_info.in; |
|
||||
let outNum = serverData[key].network_info.out; |
|
||||
inNum = parse_data_unit(inNum) |
|
||||
outNum = parse_data_unit(outNum) |
|
||||
|
|
||||
networkInfo.innerHTML += "<strong> 网络 : </strong> in: " + inNum + "/s, out: " + outNum + "/s"; |
|
||||
|
|
||||
serverCard.appendChild(networkInfo); |
|
||||
// 分割线 |
|
||||
add_bar(serverCard); |
|
||||
} |
|
||||
|
|
||||
// 内存 |
|
||||
if (document.getElementById('toggle_memory').checked && '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_data_unit(totalNum); |
|
||||
let usedMem = parse_data_unit(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 (document.getElementById('toggle_storage').checked && '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_data_unit(totalNum); |
|
||||
let availableStorage = parse_data_unit(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 (document.getElementById('toggle_gpus').checked && '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>' |
|
||||
+ '温度: ' + gpu.temperature + '°C<br>' |
|
||||
+ '显存: ' + gpu.used_mem + ' / ' + gpu.total_mem + " MB" + '<br>' |
|
||||
+ '利用率: ' + gpu.util_gpu + '%'; |
|
||||
|
|
||||
// 添加用户使用信息 |
|
||||
if ('users' in gpu) { // 检查是否有用户信息 |
|
||||
let userInfo = document.createElement('div'); |
|
||||
userInfo.classList.add('user-info'); |
|
||||
userInfo.innerHTML = "<strong>使用情况：</strong>"; |
|
||||
|
|
||||
// for (const [username, mem] of Object.entries(gpu.users)) { |
|
||||
// userInfo.innerHTML += `<span class="user-item">${username} (${mem}) </span>`; |
|
||||
// } |
|
||||
// 排序 |
|
||||
const user_entries = Object.entries(gpu.users); |
|
||||
const sorted_user = user_entries.sort((a, b) => b[1] - a[1]); |
|
||||
sorted_user.forEach(([key, value]) => { |
|
||||
// 过滤小于50MB的 |
|
||||
if (value > 40) |
|
||||
userInfo.innerHTML += `<span class="user-item">${key} (${value}) </span>`; |
|
||||
}); |
|
||||
|
|
||||
gpuInfo.appendChild(userInfo); // 将用户信息添加到GPU信息中 |
|
||||
} |
|
||||
|
|
||||
serverCard.appendChild(gpuInfo); |
|
||||
}); |
|
||||
// 分割线 |
|
||||
add_bar(serverCard); |
|
||||
} |
|
||||
|
|
||||
// 错误信息 |
|
||||
if ('err_info' in serverData[key]) |
|
||||
{ |
|
||||
let errInfo = document.createElement('div'); |
|
||||
errInfo.classList.add('error-info'); |
|
||||
errInfo.innerHTML = '<strong>error info</strong><br>' + serverData[key].err_info; |
|
||||
serverCard.appendChild(errInfo); |
|
||||
// 分割线 |
|
||||
add_bar(serverCard); |
|
||||
} |
|
||||
|
|
||||
// 删除最后的分割线 |
|
||||
if (serverCard.lastElementChild && serverCard.lastElementChild.tagName === 'HR') { |
|
||||
serverCard.removeChild(serverCard.lastElementChild); |
|
||||
} |
|
||||
|
|
||||
serverDataContainer.appendChild(serverCard); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 页面加载时获取数据并定时刷新 |
|
||||
document.addEventListener('DOMContentLoaded', function() { |
|
||||
fetchData(); |
|
||||
setInterval(fetchData, 3000); // 每3秒刷新一次数据 |
|
||||
}); |
|
||||
</script> |
|
||||
</body> |
|
||||
</html> |
|
||||
Loading…
Reference in new issue