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 @@
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
- <th id="online_status" style="text-align: center;">协议</th>
- <th id="month_traffic" style="text-align: center;">月流量 ↓|↑</th>
- <th id="name">节点名</th>
- <th id="type">虚拟化</th>
- <th id="location">位置</th>
- <th id="uptime">在线</th>
+ <th id="online_status" style="text-align: center;">🔗协议</th>
+ <th id="month_traffic" style="text-align: center;">📊月流量↓|↑</th>
+ <th id="name">📌节点</th>
+ <th id="type">🗂️虚拟化</th>
+ <th id="location">🌍位置</th>
+ <th id="uptime">⏱️在线</th>
<th id="load">负载</th>
- <th id="network">网络 ↓|↑</th>
- <th id="traffic">总流量 ↓|↑</th>
- <th id="cpu">核芯</th>
- <th id="ram">内存</th>
- <th id="hdd">硬盘</th>
- <th id="io">IO(r/w)</th>
- <th id="ping">联通|电信|移动</th>
+ <th id="network">🚦网络↓|↑</th>
+ <th id="traffic">📋总流量↓|↑</th>
+ <th id="cpu">🎯核芯</th>
+ <th id="ram">⚡️内存</th>
+ <th id="hdd">💾硬盘</th>
+ <th id="ping">🌐CU|CT|CM</th>
</tr>
</thead>
<tbody id="servers">
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() {
"<td id=\"cpu\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
"<td id=\"memory\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
"<td id=\"hdd\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
- "<td id=\"io\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
"<td id=\"ping\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
"</tr>" +
"<tr class=\"expandRow " + hack + "\"><td colspan=\"16\"><div class=\"accordian-body collapse\" id=\"rt" + i + "\">" +
@@ -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 = "<small>关闭</small>";
- TableRow.children["io"].children[0].children[0].className = "progress-bar progress-bar-danger";
- TableRow.children["io"].children[0].children[0].innerHTML = "<small>关闭</small>";
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 = "<small>关闭</small>";
@@ -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 = "<small>"+io+"</small>";
+ 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 = "<small>错误</small>";
- TableRow.children["io"].children[0].children[0].className = "progress-bar progress-bar-error";
- TableRow.children["io"].children[0].children[0].innerHTML = "<small>错误</small>";
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 = "<small>错误</small>";