From cc4e4a626fe3d350517a1510296b21d9d62a399a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B1=BC=E9=AA=A8=E5=89=AA?= <1580622474@qq.com>
Date: Thu, 3 Oct 2024 11:04:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=BA=86=E4=B8=80=E4=B8=8B?=
 =?UTF-8?q?=E5=AD=98=E5=82=A8=E7=A9=BA=E9=97=B4=E7=9A=84=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 42 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3819e89..5b3feee 100644
--- a/index.html
+++ b/index.html
@@ -53,6 +53,29 @@
             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');
@@ -73,11 +96,14 @@
                 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);
+                // 分割线
+                add_bar(serverCard);
 
                 // 存储空间
                 if ('storage_info_list' in serverData[key]){
@@ -86,13 +112,23 @@
 
                     for (let i = 0; i < serverData[key].storage_info_list.length; i++) {
                         let targetPath = serverData[key].storage_info_list[i].path;
-                        let totalStorage = serverData[key].storage_info_list[i].total;
-                        let availableStorage = serverData[key].storage_info_list[i].available;
-                        storageInfo.innerHTML += targetPath + " : " + availableStorage + " / " + totalStorage + "<br>";
+                        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){