mirror of
https://github.com//cppla/ServerStatus
synced 2025-06-02 21:59:51 +08:00
IO Speed as Tips
This commit is contained in:
cppla
parent
8f3736e4fc
commit
d7b8f27082
@ -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; }
|
||||
}
|
||||
|
||||
@ -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; }
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user