From d7b8f27082d6e44e94dbdeb8a3b8cc1a28677dd9 Mon Sep 17 00:00:00 2001 From: cppla Date: Fri, 29 Apr 2022 13:58:38 +0800 Subject: [PATCH] IO Speed as Tips --- web/css/dark.css | 81 +++++++++++++++++++----------------------- web/css/light.css | 81 +++++++++++++++++++----------------------- web/index.html | 25 +++++++------ web/js/serverstatus.js | 17 ++++----- 4 files changed, 93 insertions(+), 111 deletions(-) diff --git a/web/css/dark.css b/web/css/dark.css index 461567f..2b70d38 100644 --- a/web/css/dark.css +++ b/web/css/dark.css @@ -19,59 +19,52 @@ tr.odd.expandRow > :hover { background: #212e36 !important; } .expandRow > td { padding: 0 !important; border-top: 0px !important; } #month_traffic { min-width: 85px; max-width: 95px;} #network { min-width: 115px; } -#cpu, #ram, #hdd { min-width: 20px; max-width: 75px; } -#io { width: 100px; } +#cpu, #ram, #hdd { min-width: 45px; max-width: 90px; } #ping { max-width: 95px; } @media only screen and (max-width: 1080px) { - body { font-size: 10px; } - .content { padding: 0; } - #type, tr td:nth-child(4) { display:none; visibility:hidden; } - #location, tr td:nth-child(5) { display:none; visibility:hidden; } - #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } - #ping, tr td:nth-child(14) { display:none; visibility:hidden; } + #type, tr td:nth-child(4) { display:none; visibility:hidden; } + #location, tr td:nth-child(5) { display:none; visibility:hidden; } + #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } + #ping, tr td:nth-child(13) { display:none; visibility:hidden; } } @media only screen and (max-width: 720px) { - body { font-size: 10px; } - .content { padding: 0; } - #type, tr td:nth-child(4) { display:none; visibility:hidden; } - #location, tr td:nth-child(5) { display:none; visibility:hidden; } - #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } - #io, tr td:nth-child(13) { display:none; visibility:hidden; } - #ping, tr td:nth-child(14) { display:none; visibility:hidden; } + body { font-size: 10px; } + .content { padding: 0; } + #type, tr td:nth-child(4) { display:none; visibility:hidden; } + #location, tr td:nth-child(5) { display:none; visibility:hidden; } + #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } + #ping, tr td:nth-child(13) { display:none; visibility:hidden; } } @media only screen and (max-width: 620px) { - body { font-size: 10px; } - .content { padding: 0; } - #month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; } - #type, tr td:nth-child(4) { display:none; visibility:hidden; } - #location, tr td:nth-child(5) { display:none; visibility:hidden; } - #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } - #traffic, tr td:nth-child(9) { display:none; visibility:hidden; } - #io, tr td:nth-child(13) { display:none; visibility:hidden; } - #ping, tr td:nth-child(14) { display:none; visibility:hidden; } + body { font-size: 10px; } + .content { padding: 0; } + #month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; } + #type, tr td:nth-child(4) { display:none; visibility:hidden; } + #location, tr td:nth-child(5) { display:none; visibility:hidden; } + #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } + #traffic, tr td:nth-child(9) { display:none; visibility:hidden; } + #ping, tr td:nth-child(13) { display:none; visibility:hidden; } } @media only screen and (max-width: 533px) { - body { font-size: 10px; } - .content { padding: 0; } - #month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; } - #type, tr td:nth-child(4) { display:none; visibility:hidden; } - #location, tr td:nth-child(5) { display:none; visibility:hidden; } - #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } - #traffic, tr td:nth-child(9) { display:none; visibility:hidden; } - #io, tr td:nth-child(13) { display:none; visibility:hidden; } - #ping, tr td:nth-child(14) { display:none; visibility:hidden; } + body { font-size: 10px; } + .content { padding: 0; } + #month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; } + #type, tr td:nth-child(4) { display:none; visibility:hidden; } + #location, tr td:nth-child(5) { display:none; visibility:hidden; } + #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } + #traffic, tr td:nth-child(9) { display:none; visibility:hidden; } + #ping, tr td:nth-child(13) { display:none; visibility:hidden; } } @media only screen and (max-width: 450px) { - body { font-size: 10px; } - .content { padding: 0; } - #month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; } - #name, tr td:nth-child(3) { min-width: 55px; max-width: 85px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } - #type, tr td:nth-child(4) { display:none; visibility:hidden; } - #location, tr td:nth-child(5) { display:none; visibility:hidden; } - #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } - #traffic, tr td:nth-child(9) { display:none; visibility:hidden; } - #cpu, #ram, #hdd { min-width: 25px; max-width: 50px; } - #io, tr td:nth-child(13) { display:none; visibility:hidden; } - #ping, tr td:nth-child(14) { display:none; visibility:hidden; } + body { font-size: 10px; } + .content { padding: 0; } + #month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; } + #name, tr td:nth-child(3) { min-width: 55px; max-width: 85px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } + #type, tr td:nth-child(4) { display:none; visibility:hidden; } + #location, tr td:nth-child(5) { display:none; visibility:hidden; } + #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } + #traffic, tr td:nth-child(9) { display:none; visibility:hidden; } + #cpu, #ram, #hdd { min-width: 25px; max-width: 50px; } + #ping, tr td:nth-child(13) { display:none; visibility:hidden; } } diff --git a/web/css/light.css b/web/css/light.css index 16aee79..abd2c98 100644 --- a/web/css/light.css +++ b/web/css/light.css @@ -16,59 +16,52 @@ tr.odd.expandRow > :hover { background: #FFF !important; } .expandRow > td { padding: 0 !important; border-top: 0px !important; } #month_traffic { min-width: 85px; max-width: 95px;} #network { min-width: 115px; } -#cpu, #ram, #hdd { min-width: 20px; max-width: 75px; } -#io { width: 100px; } +#cpu, #ram, #hdd { min-width: 45px; max-width: 90px; } #ping { max-width: 95px; } @media only screen and (max-width: 1080px) { - body { font-size: 10px; } - .content { padding: 0; } - #type, tr td:nth-child(4) { display:none; visibility:hidden; } - #location, tr td:nth-child(5) { display:none; visibility:hidden; } - #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } - #ping, tr td:nth-child(14) { display:none; visibility:hidden; } + #type, tr td:nth-child(4) { display:none; visibility:hidden; } + #location, tr td:nth-child(5) { display:none; visibility:hidden; } + #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } + #ping, tr td:nth-child(13) { display:none; visibility:hidden; } } @media only screen and (max-width: 720px) { - body { font-size: 10px; } - .content { padding: 0; } - #type, tr td:nth-child(4) { display:none; visibility:hidden; } - #location, tr td:nth-child(5) { display:none; visibility:hidden; } - #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } - #io, tr td:nth-child(13) { display:none; visibility:hidden; } - #ping, tr td:nth-child(14) { display:none; visibility:hidden; } + body { font-size: 10px; } + .content { padding: 0; } + #type, tr td:nth-child(4) { display:none; visibility:hidden; } + #location, tr td:nth-child(5) { display:none; visibility:hidden; } + #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } + #ping, tr td:nth-child(13) { display:none; visibility:hidden; } } @media only screen and (max-width: 620px) { - body { font-size: 10px; } - .content { padding: 0; } - #month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; } - #type, tr td:nth-child(4) { display:none; visibility:hidden; } - #location, tr td:nth-child(5) { display:none; visibility:hidden; } - #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } - #traffic, tr td:nth-child(9) { display:none; visibility:hidden; } - #io, tr td:nth-child(13) { display:none; visibility:hidden; } - #ping, tr td:nth-child(14) { display:none; visibility:hidden; } + body { font-size: 10px; } + .content { padding: 0; } + #month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; } + #type, tr td:nth-child(4) { display:none; visibility:hidden; } + #location, tr td:nth-child(5) { display:none; visibility:hidden; } + #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } + #traffic, tr td:nth-child(9) { display:none; visibility:hidden; } + #ping, tr td:nth-child(13) { display:none; visibility:hidden; } } @media only screen and (max-width: 533px) { - body { font-size: 10px; } - .content { padding: 0; } - #month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; } - #type, tr td:nth-child(4) { display:none; visibility:hidden; } - #location, tr td:nth-child(5) { display:none; visibility:hidden; } - #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } - #traffic, tr td:nth-child(9) { display:none; visibility:hidden; } - #io, tr td:nth-child(13) { display:none; visibility:hidden; } - #ping, tr td:nth-child(14) { display:none; visibility:hidden; } + body { font-size: 10px; } + .content { padding: 0; } + #month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; } + #type, tr td:nth-child(4) { display:none; visibility:hidden; } + #location, tr td:nth-child(5) { display:none; visibility:hidden; } + #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } + #traffic, tr td:nth-child(9) { display:none; visibility:hidden; } + #ping, tr td:nth-child(13) { display:none; visibility:hidden; } } @media only screen and (max-width: 450px) { - body { font-size: 10px; } - .content { padding: 0; } - #month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; } - #name, tr td:nth-child(3) { min-width: 55px; max-width: 85px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } - #type, tr td:nth-child(4) { display:none; visibility:hidden; } - #location, tr td:nth-child(5) { display:none; visibility:hidden; } - #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } - #traffic, tr td:nth-child(9) { display:none; visibility:hidden; } - #cpu, #ram, #hdd { min-width: 25px; max-width: 50px; } - #io, tr td:nth-child(13) { display:none; visibility:hidden; } - #ping, tr td:nth-child(14) { display:none; visibility:hidden; } + body { font-size: 10px; } + .content { padding: 0; } + #month_traffic, tr td:nth-child(2) { display:none; visibility:hidden; } + #name, tr td:nth-child(3) { min-width: 55px; max-width: 85px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } + #type, tr td:nth-child(4) { display:none; visibility:hidden; } + #location, tr td:nth-child(5) { display:none; visibility:hidden; } + #uptime, tr td:nth-child(6) { display:none; visibility:hidden; } + #traffic, tr td:nth-child(9) { display:none; visibility:hidden; } + #cpu, #ram, #hdd { min-width: 25px; max-width: 50px; } + #ping, tr td:nth-child(13) { display:none; visibility:hidden; } } diff --git a/web/index.html b/web/index.html index ebb389c..7c175dd 100644 --- a/web/index.html +++ b/web/index.html @@ -75,20 +75,19 @@ - - - - - - + + + + + + - - - - - - - + + + + + + diff --git a/web/js/serverstatus.js b/web/js/serverstatus.js index c2c0698..f2bae71 100644 --- a/web/js/serverstatus.js +++ b/web/js/serverstatus.js @@ -74,7 +74,6 @@ function uptime() { "" + "" + "" + - "" + "" + "" + "
协议月流量 ↓|↑节点名虚拟化位置在线🔗协议📊月流量↓|↑📌节点🗂️虚拟化🌍位置⏱️在线 负载网络 ↓|↑总流量 ↓|↑核芯内存硬盘IO(r/w)联通|电信|移动🚦网络↓|↑📋总流量↓|↑🎯核芯⚡️内存💾硬盘🌐CU|CT|CM
加载中
加载中
加载中
加载中
加载中
" + @@ -136,8 +135,6 @@ function uptime() { TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-danger"; TableRow.children["hdd"].children[0].children[0].style.width = "100%"; TableRow.children["hdd"].children[0].children[0].innerHTML = "关闭"; - TableRow.children["io"].children[0].children[0].className = "progress-bar progress-bar-danger"; - TableRow.children["io"].children[0].children[0].innerHTML = "关闭"; TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-danger"; TableRow.children["ping"].children[0].children[0].style.width = "100%"; TableRow.children["ping"].children[0].children[0].innerHTML = "关闭"; @@ -239,9 +236,8 @@ function uptime() { TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-success"; TableRow.children["hdd"].children[0].children[0].style.width = HDD + "%"; TableRow.children["hdd"].children[0].children[0].innerHTML = HDD + "%"; - ExpandRow[0].children["expand_hdd"].innerHTML = "硬盘: " + bytesToSize(result.servers[i].hdd_used*1024*1024, 2) + " / " + bytesToSize(result.servers[i].hdd_total*1024*1024, 2); - - //IO, 过小的B字节单位没有意义 + // IO Speed for HDD. + // IO, 过小的B字节单位没有意义 var io = ""; if(result.servers[i].io_read < 1024*1024) io += parseInt(result.servers[i].io_read/1024) + "K"; @@ -252,8 +248,11 @@ function uptime() { io += parseInt(result.servers[i].io_write/1024) + "K"; else io += parseInt(result.servers[i].io_write/1024/1024) + "M"; - TableRow.children["io"].children[0].children[0].className = "progress-bar progress-bar-success"; - TableRow.children["io"].children[0].children[0].innerHTML = ""+io+""; + TableRow.children["hdd"].children[0].setAttribute("data-toggle", "tooltip"); + TableRow.children["hdd"].children[0].setAttribute("data-placement", "right"); + TableRow.children["hdd"].children[0].setAttribute("title", io); + // Expand for HDD. + ExpandRow[0].children["expand_hdd"].innerHTML = "硬盘: " + bytesToSize(result.servers[i].hdd_used*1024*1024, 2) + " / " + bytesToSize(result.servers[i].hdd_total*1024*1024, 2); // delay time @@ -308,8 +307,6 @@ function uptime() { TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-error"; TableRow.children["hdd"].children[0].children[0].style.width = "100%"; TableRow.children["hdd"].children[0].children[0].innerHTML = "错误"; - TableRow.children["io"].children[0].children[0].className = "progress-bar progress-bar-error"; - TableRow.children["io"].children[0].children[0].innerHTML = "错误"; TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-error"; TableRow.children["ping"].children[0].children[0].style.width = "100%"; TableRow.children["ping"].children[0].children[0].innerHTML = "错误";