mirror of
https://github.com//cppla/ServerStatus
synced 2025-06-01 21:29:50 +08:00
ai niu bi
This commit is contained in:
cppla
parent
ad95e00723
commit
a307ad7d19
@ -4,356 +4,178 @@ var d = 0;
|
|||||||
var server_status = new Array();
|
var server_status = new Array();
|
||||||
|
|
||||||
function timeSince(date) {
|
function timeSince(date) {
|
||||||
if(date == 0)
|
if (date == 0) return "从未.";
|
||||||
return "从未.";
|
var seconds = Math.floor((new Date() - date) / 1000);
|
||||||
|
var interval = Math.floor(seconds / 60);
|
||||||
var seconds = Math.floor((new Date() - date) / 1000);
|
return interval > 1 ? interval + " 分钟前." : "几秒前.";
|
||||||
var interval = Math.floor(seconds / 60);
|
|
||||||
if (interval > 1)
|
|
||||||
return interval + " 分钟前.";
|
|
||||||
else
|
|
||||||
return "几秒前.";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function bytesToSize(bytes, precision, si)
|
function bytesToSize(bytes, precision, si = false) {
|
||||||
{
|
const units = si ? ['B', 'KB', 'MB', 'GB', 'TB'] : ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
|
||||||
var ret;
|
if (bytes === 0) return '0 B';
|
||||||
si = typeof si !== 'undefined' ? si : 0;
|
const k = si ? 1000 : 1024;
|
||||||
if(si != 0) {
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
var megabyte = 1000 * 1000;
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(precision)) + ' ' + units[i];
|
||||||
var gigabyte = megabyte * 1000;
|
|
||||||
var terabyte = gigabyte * 1000;
|
|
||||||
} else {
|
|
||||||
var megabyte = 1024 * 1024;
|
|
||||||
var gigabyte = megabyte * 1024;
|
|
||||||
var terabyte = gigabyte * 1024;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((bytes >= megabyte) && (bytes < gigabyte)) {
|
|
||||||
ret = (bytes / megabyte).toFixed(precision) + ' M';
|
|
||||||
|
|
||||||
} else if ((bytes >= gigabyte) && (bytes < terabyte)) {
|
|
||||||
ret = (bytes / gigabyte).toFixed(precision) + ' G';
|
|
||||||
|
|
||||||
} else if (bytes >= terabyte) {
|
|
||||||
ret = (bytes / terabyte).toFixed(precision) + ' T';
|
|
||||||
|
|
||||||
} else {
|
|
||||||
return bytes + ' B';
|
|
||||||
}
|
|
||||||
return ret;
|
|
||||||
/*if(si != 0) {
|
|
||||||
return ret + 'B';
|
|
||||||
} else {
|
|
||||||
return ret + 'iB';
|
|
||||||
}*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function uptime() {
|
function uptime() {
|
||||||
$.getJSON("json/stats.json", function(result) {
|
$.getJSON("json/stats.json", function(result) {
|
||||||
$("#loading-notice").remove();
|
$("#loading-notice").remove();
|
||||||
if(result.reload)
|
if (result.reload) setTimeout(location.reload, 1000);
|
||||||
setTimeout(function() { location.reload() }, 1000);
|
|
||||||
|
|
||||||
for (var i = 0, rlen=result.servers.length; i < rlen; i++) {
|
result.servers.forEach((server, i) => {
|
||||||
var TableRow = $("#servers tr#r" + i);
|
let TableRow = $("#servers tr#r" + i);
|
||||||
var MableRow = $("#monitors tr#r" + i);
|
let MableRow = $("#monitors tr#r" + i);
|
||||||
var ExpandRow = $("#servers #rt" + i);
|
let ExpandRow = $("#servers #rt" + i);
|
||||||
var hack; // fuck CSS for making me do this
|
let hack = i % 2 ? "odd" : "even";
|
||||||
if(i%2) hack="odd"; else hack="even";
|
|
||||||
if (!TableRow.length) {
|
|
||||||
$("#servers").append(
|
|
||||||
"<tr id=\"r" + i + "\" data-toggle=\"collapse\" data-target=\"#rt" + i + "\" class=\"accordion-toggle " + hack + "\">" +
|
|
||||||
"<td id=\"online_status\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
|
|
||||||
"<td id=\"month_traffic\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
|
|
||||||
"<td id=\"name\">加载中</td>" +
|
|
||||||
"<td id=\"type\">加载中</td>" +
|
|
||||||
"<td id=\"location\">加载中</td>" +
|
|
||||||
"<td id=\"uptime\">加载中</td>" +
|
|
||||||
"<td id=\"load\">加载中</td>" +
|
|
||||||
"<td id=\"network\">加载中</td>" +
|
|
||||||
"<td id=\"traffic\">加载中</td>" +
|
|
||||||
"<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=\"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 + "\">" +
|
|
||||||
"<div id=\"expand_mem\">加载中</div>" +
|
|
||||||
"<div id=\"expand_hdd\">加载中</div>" +
|
|
||||||
"<div id=\"expand_tupd\">加载中</div>" +
|
|
||||||
"<div id=\"expand_ping\">加载中</div>" +
|
|
||||||
"</div></td></tr>"
|
|
||||||
);
|
|
||||||
TableRow = $("#servers tr#r" + i);
|
|
||||||
ExpandRow = $("#servers #rt" + i);
|
|
||||||
server_status[i] = true;
|
|
||||||
}
|
|
||||||
if (!MableRow.length) {
|
|
||||||
$("#monitors").append(
|
|
||||||
"<tr id=\"r" + i + "\" data-target=\"#rt" + i + "\" class=\"accordion-toggle " + hack + "\">" +
|
|
||||||
"<td id=\"monitor_status\"><div class=\"progress\"><div style=\"width: 100%;\" class=\"progress-bar progress-bar-warning\"><small>加载中</small></div></div></td>" +
|
|
||||||
"<td id=\"monitor_node\">加载中</td>" +
|
|
||||||
"<td id=\"monitor_location\">加载中</td>" +
|
|
||||||
"<td id=\"monitor_text\">加载中</td>" +
|
|
||||||
"</tr>"
|
|
||||||
);
|
|
||||||
MableRow = $("#monitors tr#r" + i);
|
|
||||||
}
|
|
||||||
TableRow = TableRow[0];
|
|
||||||
MableRow = MableRow[0];
|
|
||||||
if(error) {
|
|
||||||
TableRow.setAttribute("data-target", "#rt" + i);
|
|
||||||
MableRow.setAttribute("data-target", "#rt" + i);
|
|
||||||
server_status[i] = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// online_status
|
if (!TableRow.length) {
|
||||||
if (result.servers[i].online4 && !result.servers[i].online6) {
|
$("#servers").append(
|
||||||
TableRow.children["online_status"].children[0].children[0].className = "progress-bar progress-bar-success";
|
`<tr id="r${i}" data-toggle="collapse" data-target="#rt${i}" class="accordion-toggle ${hack}">
|
||||||
TableRow.children["online_status"].children[0].children[0].innerHTML = "<small>IPv4</small>";
|
<td id="online_status"><div class="progress"><div style="width: 100%;" class="progress-bar progress-bar-warning"><small>加载中</small></div></div></td>
|
||||||
MableRow.children["monitor_status"].children[0].children[0].className = "progress-bar progress-bar-success";
|
<td id="month_traffic"><div class="progress"><div style="width: 100%;" class="progress-bar progress-bar-warning"><small>加载中</small></div></div></td>
|
||||||
MableRow.children["monitor_status"].children[0].children[0].innerHTML = "<small>IPv4</small>";
|
<td id="name">加载中</td>
|
||||||
} else if (result.servers[i].online4 && result.servers[i].online6) {
|
<td id="type">加载中</td>
|
||||||
TableRow.children["online_status"].children[0].children[0].className = "progress-bar progress-bar-success";
|
<td id="location">加载中</td>
|
||||||
TableRow.children["online_status"].children[0].children[0].innerHTML = "<small>双栈</small>";
|
<td id="uptime">加载中</td>
|
||||||
MableRow.children["monitor_status"].children[0].children[0].className = "progress-bar progress-bar-success";
|
<td id="load">加载中</td>
|
||||||
MableRow.children["monitor_status"].children[0].children[0].innerHTML = "<small>双栈</small>";
|
<td id="network">加载中</td>
|
||||||
} else if (!result.servers[i].online4 && result.servers[i].online6) {
|
<td id="traffic">加载中</td>
|
||||||
TableRow.children["online_status"].children[0].children[0].className = "progress-bar progress-bar-success";
|
<td id="cpu"><div class="progress"><div style="width: 100%;" class="progress-bar progress-bar-warning"><small>加载中</small></div></div></td>
|
||||||
TableRow.children["online_status"].children[0].children[0].innerHTML = "<small>IPv6</small>";
|
<td id="memory"><div class="progress"><div style="width: 100%;" class="progress-bar progress-bar-warning"><small>加载中</small></div></div></td>
|
||||||
MableRow.children["monitor_status"].children[0].children[0].className = "progress-bar progress-bar-success";
|
<td id="hdd"><div class="progress"><div style="width: 100%;" class="progress-bar progress-bar-warning"><small>加载中</small></div></div></td>
|
||||||
MableRow.children["monitor_status"].children[0].children[0].innerHTML = "<small>IPv6</small>";
|
<td id="ping"><div class="progress"><div style="width: 100%;" class="progress-bar progress-bar-warning"><small>加载中</small></div></div></td>
|
||||||
} else {
|
</tr>
|
||||||
TableRow.children["online_status"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
<tr class="expandRow ${hack}"><td colspan="16"><div class="accordian-body collapse" id="rt${i}">
|
||||||
TableRow.children["online_status"].children[0].children[0].innerHTML = "<small>关闭</small>";
|
<div id="expand_mem">加载中</div>
|
||||||
MableRow.children["monitor_status"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
<div id="expand_hdd">加载中</div>
|
||||||
MableRow.children["monitor_status"].children[0].children[0].innerHTML = "<small>关闭</small>";
|
<div id="expand_tupd">加载中</div>
|
||||||
}
|
<div id="expand_ping">加载中</div>
|
||||||
|
</div></td></tr>`
|
||||||
|
);
|
||||||
|
TableRow = $("#servers tr#r" + i);
|
||||||
|
ExpandRow = $("#servers #rt" + i);
|
||||||
|
server_status[i] = true;
|
||||||
|
}
|
||||||
|
|
||||||
// Name
|
if (!MableRow.length) {
|
||||||
TableRow.children["name"].innerHTML = result.servers[i].name;
|
$("#monitors").append(
|
||||||
MableRow.children["monitor_node"].innerHTML = result.servers[i].name;
|
`<tr id="r${i}" data-target="#rt${i}" class="accordion-toggle ${hack}">
|
||||||
|
<td id="monitor_status"><div class="progress"><div style="width: 100%;" class="progress-bar progress-bar-warning"><small>加载中</small></div></div></td>
|
||||||
|
<td id="monitor_node">加载中</td>
|
||||||
|
<td id="monitor_location">加载中</td>
|
||||||
|
<td id="monitor_text">加载中</td>
|
||||||
|
</tr>`
|
||||||
|
);
|
||||||
|
MableRow = $("#monitors tr#r" + i);
|
||||||
|
}
|
||||||
|
|
||||||
// Type
|
if (error) {
|
||||||
TableRow.children["type"].innerHTML = result.servers[i].type;
|
TableRow.attr("data-target", "#rt" + i);
|
||||||
|
MableRow.attr("data-target", "#rt" + i);
|
||||||
|
server_status[i] = true;
|
||||||
|
}
|
||||||
|
|
||||||
// Location
|
const statusClass = server.online4 || server.online6 ? "progress-bar progress-bar-success" : "progress-bar progress-bar-danger";
|
||||||
TableRow.children["location"].innerHTML = result.servers[i].location;
|
const statusText = server.online4 && server.online6 ? "双栈" : server.online4 ? "IPv4" : server.online6 ? "IPv6" : "关闭";
|
||||||
MableRow.children["monitor_location"].innerHTML = result.servers[i].location;
|
|
||||||
if (!result.servers[i].online4 && !result.servers[i].online6) {
|
|
||||||
if (server_status[i]) {
|
|
||||||
TableRow.children["uptime"].innerHTML = "–";
|
|
||||||
TableRow.children["load"].innerHTML = "–";
|
|
||||||
TableRow.children["network"].innerHTML = "–";
|
|
||||||
TableRow.children["traffic"].innerHTML = "–";
|
|
||||||
TableRow.children["month_traffic"].children[0].children[0].className = "progress-bar progress-bar-warning";
|
|
||||||
TableRow.children["month_traffic"].children[0].children[0].innerHTML = "<small>关闭</small>";
|
|
||||||
TableRow.children["cpu"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
|
||||||
TableRow.children["cpu"].children[0].children[0].style.width = "100%";
|
|
||||||
TableRow.children["cpu"].children[0].children[0].innerHTML = "<small>关闭</small>";
|
|
||||||
TableRow.children["memory"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
|
||||||
TableRow.children["memory"].children[0].children[0].style.width = "100%";
|
|
||||||
TableRow.children["memory"].children[0].children[0].innerHTML = "<small>关闭</small>";
|
|
||||||
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["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>";
|
|
||||||
MableRow.children["monitor_text"].innerHTML = "-";
|
|
||||||
if(ExpandRow.hasClass("in")) {
|
|
||||||
ExpandRow.collapse("hide");
|
|
||||||
}
|
|
||||||
TableRow.setAttribute("data-target", "");
|
|
||||||
MableRow.setAttribute("data-target", "");
|
|
||||||
server_status[i] = false;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (!server_status[i]) {
|
|
||||||
TableRow.setAttribute("data-target", "#rt" + i);
|
|
||||||
MableRow.setAttribute("data-target", "#rt" + i);
|
|
||||||
server_status[i] = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// month traffic
|
TableRow.find("#online_status .progress-bar").attr("class", statusClass).html(`<small>${statusText}</small>`);
|
||||||
var monthtraffic = "";
|
MableRow.find("#monitor_status .progress-bar").attr("class", statusClass).html(`<small>${statusText}</small>`);
|
||||||
var trafficdiff_in = result.servers[i].network_in - result.servers[i].last_network_in;
|
|
||||||
var trafficdiff_out = result.servers[i].network_out - result.servers[i].last_network_out;
|
|
||||||
if(trafficdiff_in < 1024*1024*1024*1024)
|
|
||||||
monthtraffic += (trafficdiff_in/1024/1024/1024).toFixed(1) + "G";
|
|
||||||
else
|
|
||||||
monthtraffic += (trafficdiff_in/1024/1024/1024/1024).toFixed(1) + "T";
|
|
||||||
monthtraffic += " | "
|
|
||||||
if(trafficdiff_out < 1024*1024*1024*1024)
|
|
||||||
monthtraffic += (trafficdiff_out/1024/1024/1024).toFixed(1) + "G";
|
|
||||||
else
|
|
||||||
monthtraffic += (trafficdiff_out/1024/1024/1024/1024).toFixed(1) + "T";
|
|
||||||
TableRow.children["month_traffic"].children[0].children[0].className = "progress-bar progress-bar-success";
|
|
||||||
TableRow.children["month_traffic"].children[0].children[0].innerHTML = "<small>"+monthtraffic+"</small>";
|
|
||||||
|
|
||||||
// Uptime
|
TableRow.find("#name").html(server.name);
|
||||||
TableRow.children["uptime"].innerHTML = result.servers[i].uptime;
|
MableRow.find("#monitor_node").html(server.name);
|
||||||
|
TableRow.find("#type").html(server.type);
|
||||||
|
TableRow.find("#location").html(server.location);
|
||||||
|
MableRow.find("#monitor_location").html(server.location);
|
||||||
|
|
||||||
// Load: default load_1, you can change show: load_1, load_5, load_15
|
if (!server.online4 && !server.online6) {
|
||||||
if(result.servers[i].load == -1) {
|
if (server_status[i]) {
|
||||||
TableRow.children["load"].innerHTML = "–";
|
TableRow.find("#uptime").html("–");
|
||||||
} else {
|
TableRow.find("#load").html("–");
|
||||||
TableRow.children["load"].innerHTML = result.servers[i].load_1.toFixed(2);
|
TableRow.find("#network").html("–");
|
||||||
}
|
TableRow.find("#traffic").html("–");
|
||||||
|
TableRow.find("#month_traffic .progress-bar").attr("class", "progress-bar progress-bar-warning").html("<small>关闭</small>");
|
||||||
|
TableRow.find("#cpu .progress-bar").attr("class", "progress-bar progress-bar-danger").css("width", "100%").html("<small>关闭</small>");
|
||||||
|
TableRow.find("#memory .progress-bar").attr("class", "progress-bar progress-bar-danger").css("width", "100%").html("<small>关闭</small>");
|
||||||
|
TableRow.find("#hdd .progress-bar").attr("class", "progress-bar progress-bar-danger").css("width", "100%").html("<small>关闭</small>");
|
||||||
|
TableRow.find("#ping .progress-bar").attr("class", "progress-bar progress-bar-danger").css("width", "100%").html("<small>关闭</small>");
|
||||||
|
MableRow.find("#monitor_text").html("-");
|
||||||
|
if (ExpandRow.hasClass("in")) ExpandRow.collapse("hide");
|
||||||
|
TableRow.attr("data-target", "");
|
||||||
|
MableRow.attr("data-target", "");
|
||||||
|
server_status[i] = false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!server_status[i]) {
|
||||||
|
TableRow.attr("data-target", "#rt" + i);
|
||||||
|
MableRow.attr("data-target", "#rt" + i);
|
||||||
|
server_status[i] = true;
|
||||||
|
}
|
||||||
|
|
||||||
// Network
|
const trafficdiff_in = server.network_in - server.last_network_in;
|
||||||
var netstr = "";
|
const trafficdiff_out = server.network_out - server.last_network_out;
|
||||||
if(result.servers[i].network_rx < 1024*1024)
|
const monthtraffic = `${bytesToSize(trafficdiff_in, 1, true)} | ${bytesToSize(trafficdiff_out, 1, true)}`;
|
||||||
netstr += (result.servers[i].network_rx/1024).toFixed(1) + "K";
|
TableRow.find("#month_traffic .progress-bar").attr("class", "progress-bar progress-bar-success").html(`<small>${monthtraffic}</small>`);
|
||||||
else
|
|
||||||
netstr += (result.servers[i].network_rx/1024/1024).toFixed(1) + "M";
|
|
||||||
netstr += " | "
|
|
||||||
if(result.servers[i].network_tx < 1024*1024)
|
|
||||||
netstr += (result.servers[i].network_tx/1024).toFixed(1) + "K";
|
|
||||||
else
|
|
||||||
netstr += (result.servers[i].network_tx/1024/1024).toFixed(1) + "M";
|
|
||||||
TableRow.children["network"].innerHTML = netstr;
|
|
||||||
|
|
||||||
//Traffic
|
TableRow.find("#uptime").html(server.uptime);
|
||||||
var trafficstr = "";
|
TableRow.find("#load").html(server.load_1 == -1 ? "–" : server.load_1.toFixed(2));
|
||||||
if(result.servers[i].network_in < 1024*1024*1024*1024)
|
|
||||||
trafficstr += (result.servers[i].network_in/1024/1024/1024).toFixed(1) + "G";
|
|
||||||
else
|
|
||||||
trafficstr += (result.servers[i].network_in/1024/1024/1024/1024).toFixed(1) + "T";
|
|
||||||
trafficstr += " | "
|
|
||||||
if(result.servers[i].network_out < 1024*1024*1024*1024)
|
|
||||||
trafficstr += (result.servers[i].network_out/1024/1024/1024).toFixed(1) + "G";
|
|
||||||
else
|
|
||||||
trafficstr += (result.servers[i].network_out/1024/1024/1024/1024).toFixed(1) + "T";
|
|
||||||
TableRow.children["traffic"].innerHTML = trafficstr;
|
|
||||||
|
|
||||||
// CPU
|
const netstr = `${bytesToSize(server.network_rx, 1, true)} | ${bytesToSize(server.network_tx, 1, true)}`;
|
||||||
if (result.servers[i].cpu >= 90)
|
TableRow.find("#network").html(netstr);
|
||||||
TableRow.children["cpu"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
|
||||||
else if (result.servers[i].cpu >= 80)
|
|
||||||
TableRow.children["cpu"].children[0].children[0].className = "progress-bar progress-bar-warning";
|
|
||||||
else
|
|
||||||
TableRow.children["cpu"].children[0].children[0].className = "progress-bar progress-bar-success";
|
|
||||||
TableRow.children["cpu"].children[0].children[0].style.width = result.servers[i].cpu + "%";
|
|
||||||
TableRow.children["cpu"].children[0].children[0].innerHTML = result.servers[i].cpu + "%";
|
|
||||||
|
|
||||||
// Memory
|
const trafficstr = `${bytesToSize(server.network_in, 1, true)} | ${bytesToSize(server.network_out, 1, true)}`;
|
||||||
var Mem = ((result.servers[i].memory_used/result.servers[i].memory_total)*100.0).toFixed(0);
|
TableRow.find("#traffic").html(trafficstr);
|
||||||
if (Mem >= 90)
|
|
||||||
TableRow.children["memory"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
|
||||||
else if (Mem >= 80)
|
|
||||||
TableRow.children["memory"].children[0].children[0].className = "progress-bar progress-bar-warning";
|
|
||||||
else
|
|
||||||
TableRow.children["memory"].children[0].children[0].className = "progress-bar progress-bar-success";
|
|
||||||
TableRow.children["memory"].children[0].children[0].style.width = Mem + "%";
|
|
||||||
TableRow.children["memory"].children[0].children[0].innerHTML = Mem + "%";
|
|
||||||
// 内存|swap
|
|
||||||
ExpandRow[0].children["expand_mem"].innerHTML = "内存|虚存: " + bytesToSize(result.servers[i].memory_used*1024, 1) + " / " + bytesToSize(result.servers[i].memory_total*1024, 1) + " | " + bytesToSize(result.servers[i].swap_used*1024, 0) + " / " + bytesToSize(result.servers[i].swap_total*1024, 0);
|
|
||||||
|
|
||||||
// HDD
|
const cpuClass = server.cpu >= 90 ? "progress-bar progress-bar-danger" : server.cpu >= 80 ? "progress-bar progress-bar-warning" : "progress-bar progress-bar-success";
|
||||||
var HDD = ((result.servers[i].hdd_used/result.servers[i].hdd_total)*100.0).toFixed(0);
|
TableRow.find("#cpu .progress-bar").attr("class", cpuClass).css("width", `${server.cpu}%`).html(`${server.cpu}%`);
|
||||||
if (HDD >= 90)
|
|
||||||
TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
|
||||||
else if (HDD >= 80)
|
|
||||||
TableRow.children["hdd"].children[0].children[0].className = "progress-bar progress-bar-warning";
|
|
||||||
else
|
|
||||||
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 + "%";
|
|
||||||
// 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";
|
|
||||||
else
|
|
||||||
io += parseInt(result.servers[i].io_read/1024/1024) + "M";
|
|
||||||
io += " / "
|
|
||||||
if(result.servers[i].io_write < 1024*1024)
|
|
||||||
io += parseInt(result.servers[i].io_write/1024) + "K";
|
|
||||||
else
|
|
||||||
io += parseInt(result.servers[i].io_write/1024/1024) + "M";
|
|
||||||
// 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) + " | " + io;
|
|
||||||
|
|
||||||
// delay time
|
const Mem = ((server.memory_used / server.memory_total) * 100).toFixed(0);
|
||||||
|
const memClass = Mem >= 90 ? "progress-bar progress-bar-danger" : Mem >= 80 ? "progress-bar progress-bar-warning" : "progress-bar progress-bar-success";
|
||||||
|
TableRow.find("#memory .progress-bar").attr("class", memClass).css("width", `${Mem}%`).html(`${Mem}%`);
|
||||||
|
ExpandRow.find("#expand_mem").html(`内存|虚存: ${bytesToSize(server.memory_used * 1024, 1)} / ${bytesToSize(server.memory_total * 1024, 1)} | ${bytesToSize(server.swap_used * 1024, 0)} / ${bytesToSize(server.swap_total * 1024, 0)}`);
|
||||||
|
|
||||||
// tcp, udp, process, thread count
|
const HDD = ((server.hdd_used / server.hdd_total) * 100).toFixed(0);
|
||||||
ExpandRow[0].children["expand_tupd"].innerHTML = "TCP/UDP/进/线: " + result.servers[i].tcp_count + " / " + result.servers[i].udp_count + " / " + result.servers[i].process_count+ " / " + result.servers[i].thread_count;
|
const hddClass = HDD >= 90 ? "progress-bar progress-bar-danger" : HDD >= 80 ? "progress-bar progress-bar-warning" : "progress-bar progress-bar-success";
|
||||||
|
TableRow.find("#hdd .progress-bar").attr("class", hddClass).css("width", `${HDD}%`).html(`${HDD}%`);
|
||||||
|
const io = `${bytesToSize(server.io_read, 0, true)} / ${bytesToSize(server.io_write, 0, true)}`;
|
||||||
|
ExpandRow.find("#expand_hdd").html(`硬盘|读写: ${bytesToSize(server.hdd_used * 1024 * 1024, 2)} / ${bytesToSize(server.hdd_total * 1024 * 1024, 2)} | ${io}`);
|
||||||
|
|
||||||
// ping
|
ExpandRow.find("#expand_tupd").html(`TCP/UDP/进/线: ${server.tcp_count} / ${server.udp_count} / ${server.process_count} / ${server.thread_count}`);
|
||||||
var PING_10010 = result.servers[i].ping_10010.toFixed(0);
|
|
||||||
var PING_189 = result.servers[i].ping_189.toFixed(0);
|
|
||||||
var PING_10086 = result.servers[i].ping_10086.toFixed(0);
|
|
||||||
|
|
||||||
// ping ms + lost rate
|
const PING_10010 = server.ping_10010.toFixed(0);
|
||||||
ExpandRow[0].children["expand_ping"].innerHTML = "CU/CT/CM: " + result.servers[i].time_10010 + "ms ("+result.servers[i].ping_10010.toFixed(0)+"%) / " + result.servers[i].time_189 + "ms ("+result.servers[i].ping_189.toFixed(0)+"%) / " + result.servers[i].time_10086 + "ms ("+result.servers[i].ping_10086.toFixed(0)+"%)"
|
const PING_189 = server.ping_189.toFixed(0);
|
||||||
|
const PING_10086 = server.ping_10086.toFixed(0);
|
||||||
|
const pingClass = PING_10010 >= 20 || PING_189 >= 20 || PING_10086 >= 20 ? "progress-bar progress-bar-danger" : PING_10010 >= 10 || PING_189 >= 10 || PING_10086 >= 10 ? "progress-bar progress-bar-warning" : "progress-bar progress-bar-success";
|
||||||
|
TableRow.find("#ping .progress-bar").attr("class", pingClass).html(`${PING_10010}%💻${PING_189}%💻${PING_10086}%`);
|
||||||
|
ExpandRow.find("#expand_ping").html(`CU/CT/CM: ${server.time_10010}ms (${PING_10010}%) / ${server.time_189}ms (${PING_189}%) / ${server.time_10086}ms (${PING_10086}%)`);
|
||||||
|
|
||||||
if (PING_10010 >= 20 || PING_189 >= 20 || PING_10086 >= 20)
|
MableRow.find("#monitor_text").html(server.custom);
|
||||||
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-danger";
|
}
|
||||||
else if (PING_10010 >= 10 || PING_189 >= 10 || PING_10086 >= 10)
|
});
|
||||||
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-warning";
|
|
||||||
else
|
|
||||||
TableRow.children["ping"].children[0].children[0].className = "progress-bar progress-bar-success";
|
|
||||||
TableRow.children["ping"].children[0].children[0].innerHTML = PING_10010 + "%💻" + PING_189 + "%💻" + PING_10086 + "%";
|
|
||||||
|
|
||||||
// monitor
|
d = new Date(result.updated * 1000);
|
||||||
MableRow.children["monitor_text"].innerHTML = result.servers[i].custom;
|
error = 0;
|
||||||
}
|
}).fail(function() {
|
||||||
};
|
if (!error) {
|
||||||
|
$("#servers > tr.accordion-toggle").each(function(i) {
|
||||||
d = new Date(result.updated*1000);
|
const TableRow = $("#servers tr#r" + i);
|
||||||
error = 0;
|
const MableRow = $("#monitors tr#r" + i);
|
||||||
}).fail(function(update_error) {
|
const ExpandRow = $("#servers #rt" + i);
|
||||||
if (!error) {
|
TableRow.find(".progress-bar").attr("class", "progress-bar progress-bar-error").html("<small>错误</small>");
|
||||||
$("#servers > tr.accordion-toggle").each(function(i) {
|
MableRow.find(".progress-bar").attr("class", "progress-bar progress-bar-error").html("<small>错误</small>");
|
||||||
var TableRow = $("#servers tr#r" + i)[0];
|
if (ExpandRow.hasClass("in")) ExpandRow.collapse("hide");
|
||||||
var MableRow = $("#monitors tr#r" + i)[0];
|
TableRow.attr("data-target", "");
|
||||||
var ExpandRow = $("#servers #rt" + i);
|
MableRow.attr("data-target", "");
|
||||||
TableRow.children["online_status"].children[0].children[0].className = "progress-bar progress-bar-error";
|
server_status[i] = false;
|
||||||
TableRow.children["online_status"].children[0].children[0].innerHTML = "<small>错误</small>";
|
});
|
||||||
MableRow.children["monitor_status"].children[0].children[0].className = "progress-bar progress-bar-error";
|
}
|
||||||
MableRow.children["monitor_status"].children[0].children[0].innerHTML = "<small>错误</small>";
|
error = 1;
|
||||||
TableRow.children["month_traffic"].children[0].children[0].className = "progress-bar progress-bar-error";
|
$("#updated").html("更新错误.");
|
||||||
TableRow.children["month_traffic"].children[0].children[0].innerHTML = "<small>错误</small>";
|
});
|
||||||
TableRow.children["uptime"].children[0].children[0].className = "progress-bar progress-bar-error";
|
|
||||||
TableRow.children["uptime"].children[0].children[0].innerHTML = "<small>错误</small>";
|
|
||||||
TableRow.children["load"].children[0].children[0].className = "progress-bar progress-bar-error";
|
|
||||||
TableRow.children["load"].children[0].children[0].innerHTML = "<small>错误</small>";
|
|
||||||
TableRow.children["network"].children[0].children[0].className = "progress-bar progress-bar-error";
|
|
||||||
TableRow.children["network"].children[0].children[0].innerHTML = "<small>错误</small>";
|
|
||||||
TableRow.children["traffic"].children[0].children[0].className = "progress-bar progress-bar-error";
|
|
||||||
TableRow.children["traffic"].children[0].children[0].innerHTML = "<small>错误</small>";
|
|
||||||
TableRow.children["cpu"].children[0].children[0].className = "progress-bar progress-bar-error";
|
|
||||||
TableRow.children["cpu"].children[0].children[0].style.width = "100%";
|
|
||||||
TableRow.children["cpu"].children[0].children[0].innerHTML = "<small>错误</small>";
|
|
||||||
TableRow.children["memory"].children[0].children[0].className = "progress-bar progress-bar-error";
|
|
||||||
TableRow.children["memory"].children[0].children[0].style.width = "100%";
|
|
||||||
TableRow.children["memory"].children[0].children[0].innerHTML = "<small>错误</small>";
|
|
||||||
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["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>";
|
|
||||||
MableRow.children["monitor_text"].children[0].children[0].className = "progress-bar progress-bar-error";
|
|
||||||
MableRow.children["monitor_text"].children[0].children[0].innerHTML = "<small>错误</small>";
|
|
||||||
if(ExpandRow.hasClass("in")) {
|
|
||||||
ExpandRow.collapse("hide");
|
|
||||||
}
|
|
||||||
TableRow.setAttribute("data-target", "");
|
|
||||||
MableRow.setAttribute("data-target", "");
|
|
||||||
server_status[i] = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
error = 1;
|
|
||||||
$("#updated").html("更新错误.");
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateTime() {
|
function updateTime() {
|
||||||
if (!error)
|
if (!error) $("#updated").html("最后更新: " + timeSince(d));
|
||||||
$("#updated").html("最后更新: " + timeSince(d));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
uptime();
|
uptime();
|
||||||
@ -361,67 +183,44 @@ updateTime();
|
|||||||
setInterval(uptime, 2000);
|
setInterval(uptime, 2000);
|
||||||
setInterval(updateTime, 2000);
|
setInterval(updateTime, 2000);
|
||||||
|
|
||||||
|
|
||||||
// styleswitcher.js
|
// styleswitcher.js
|
||||||
function setActiveStyleSheet(title, cookie=false) {
|
function setActiveStyleSheet(title, cookie = false) {
|
||||||
var i, a, main;
|
Array.from(document.getElementsByTagName("link")).forEach(a => {
|
||||||
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
|
if (a.getAttribute("rel").includes("style") && a.getAttribute("title")) {
|
||||||
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
|
a.disabled = a.getAttribute("title") !== title;
|
||||||
a.disabled = true;
|
|
||||||
if(a.getAttribute("title") == title) a.disabled = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (true==cookie) {
|
|
||||||
createCookie("style", title, 365);
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
if (cookie) createCookie("style", title, 365);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getActiveStyleSheet() {
|
function getActiveStyleSheet() {
|
||||||
var i, a;
|
return Array.from(document.getElementsByTagName("link")).find(a => a.getAttribute("rel").includes("style") && a.getAttribute("title") && !a.disabled)?.getAttribute("title") || null;
|
||||||
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
|
|
||||||
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled)
|
|
||||||
return a.getAttribute("title");
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function createCookie(name,value,days) {
|
function createCookie(name, value, days) {
|
||||||
if (days) {
|
const expires = days ? `; expires=${new Date(Date.now() + days * 24 * 60 * 60 * 1000).toGMTString()}` : "";
|
||||||
var date = new Date();
|
document.cookie = `${name}=${value}${expires}; path=/`;
|
||||||
date.setTime(date.getTime()+(days*24*60*60*1000));
|
|
||||||
var expires = "; expires="+date.toGMTString();
|
|
||||||
}
|
|
||||||
else expires = "";
|
|
||||||
document.cookie = name+"="+value+expires+"; path=/";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function readCookie(name) {
|
function readCookie(name) {
|
||||||
var nameEQ = name + "=";
|
const nameEQ = name + "=";
|
||||||
var ca = document.cookie.split(';');
|
const ca = document.cookie.split(';');
|
||||||
for(var i=0;i < ca.length;i++) {
|
for (let i = 0; i < ca.length; i++) {
|
||||||
var c = ca[i];
|
let c = ca[i];
|
||||||
while (c.charAt(0)==' ')
|
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
|
||||||
c = c.substring(1,c.length);
|
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
|
||||||
if (c.indexOf(nameEQ) == 0)
|
}
|
||||||
return c.substring(nameEQ.length,c.length);
|
return null;
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onload = function(e) {
|
window.onload = function() {
|
||||||
var cookie = readCookie("style");
|
const cookie = readCookie("style");
|
||||||
if (cookie && cookie != 'null' ) {
|
if (cookie && cookie != 'null') {
|
||||||
setActiveStyleSheet(cookie);
|
setActiveStyleSheet(cookie);
|
||||||
} else {
|
} else {
|
||||||
function handleChange (mediaQueryListEvent) {
|
const handleChange = mediaQueryListEvent => setActiveStyleSheet(mediaQueryListEvent.matches ? 'dark' : 'light');
|
||||||
if (mediaQueryListEvent.matches) {
|
const mediaQueryListDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
setActiveStyleSheet('dark');
|
setActiveStyleSheet(mediaQueryListDark.matches ? 'dark' : 'light');
|
||||||
} else {
|
mediaQueryListDark.addEventListener("change", handleChange);
|
||||||
setActiveStyleSheet('light');
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
const mediaQueryListDark = window.matchMedia('(prefers-color-scheme: dark)');
|
|
||||||
setActiveStyleSheet(mediaQueryListDark.matches ? 'dark' : 'light');
|
|
||||||
mediaQueryListDark.addEventListener("change",handleChange);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user