187 lines
8.5 KiB
HTML
187 lines
8.5 KiB
HTML
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<script src="/assets/jquery.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="/assets/jquery-ui.css">
|
||
|
|
<script src="/assets/jquery-ui.js"></script>
|
||
|
|
<script src="/assets/distLogo.js"></script>
|
||
|
|
<link rel="stylesheet" href="/assets/circle.css">
|
||
|
|
<link rel="stylesheet" href="/assets/picluster-iframe.css">
|
||
|
|
<script>
|
||
|
|
function exec() {
|
||
|
|
var div = document.getElementById('nodes-list-modal-body');
|
||
|
|
div ? div.innerHTML = div.innerHTML +
|
||
|
|
'<br><div id="node_searching"><img heigth="200" width="200" src="/assets/images/searching.jpg"><br><font size=+3><label>Searching for nodes</label></font></div>' :
|
||
|
|
div;
|
||
|
|
|
||
|
|
$.get("/nodes?token=" + parent.token, function(data) {
|
||
|
|
var check_data = data;
|
||
|
|
div ? div.innerHTML = '' : div;
|
||
|
|
|
||
|
|
for (var i in check_data.data) {
|
||
|
|
if (div) {
|
||
|
|
|
||
|
|
var dist = (check_data.data[i].os_type || '').toLowerCase();
|
||
|
|
var div_logo = document.createElement('div');
|
||
|
|
div_logo.className = 'node_status_div';
|
||
|
|
div_logo.innerHTML = distLogo(dist) + '<p class="div_logo_text">' + check_data.data[i].hostname + '</p><br>';
|
||
|
|
|
||
|
|
var node_network_tx = check_data.data[i].network_tx;
|
||
|
|
var node_network_rx = check_data.data[i].network_rx;
|
||
|
|
node_network_rx.className = 'node_status_div';
|
||
|
|
node_network_tx.className = 'node_status_div';
|
||
|
|
|
||
|
|
var node_network_tx_label = document.createElement('label');
|
||
|
|
var node_network_rx_label = document.createElement('label');
|
||
|
|
|
||
|
|
var network_image = document.createElement('IMG');
|
||
|
|
network_image.className = 'node_status_div';
|
||
|
|
network_image.style.height = "30";
|
||
|
|
network_image.style.width = "60";
|
||
|
|
network_image.src = '/assets/images/network.png';
|
||
|
|
|
||
|
|
node_network_rx_label.innerHTML = '<br><b><font class="node_status_text">Out:</b> ' + node_network_rx +
|
||
|
|
' KB/s ';
|
||
|
|
node_network_tx_label.innerHTML = '<b><font class="node_status_text">In:</b> ' + node_network_tx + ' KB/s';
|
||
|
|
|
||
|
|
var div_disk = document.createElement('div');
|
||
|
|
div_disk.className = 'node_status_div';
|
||
|
|
|
||
|
|
var div_disk_clearfix = document.createElement('div');
|
||
|
|
div_disk_clearfix.className = 'clearfix';
|
||
|
|
|
||
|
|
var div_disk_running = document.createElement('div');
|
||
|
|
div_disk_running.className = 'c100 p' + Math.round(check_data.data[i].disk_percentage) + ' small';
|
||
|
|
div_disk_running.innerHTML = '<span id="' + check_data.data[i] + '">' + Math.round(check_data.data[i].disk_percentage) +
|
||
|
|
'%</span>';
|
||
|
|
|
||
|
|
var div_disk_slice = document.createElement('div');
|
||
|
|
div_disk_slice.className = "slice";
|
||
|
|
|
||
|
|
var div_disk_bar = document.createElement('div');
|
||
|
|
div_disk_bar.className = "bar";
|
||
|
|
|
||
|
|
var div_disk_fill = document.createElement('div');
|
||
|
|
div_disk_fill.className = "fill";
|
||
|
|
|
||
|
|
var div_cpu = document.createElement('div');
|
||
|
|
div_cpu.className = "node_status_div";
|
||
|
|
|
||
|
|
var div_cpu_clearfix = document.createElement('div');
|
||
|
|
div_cpu_clearfix.className = 'clearfix';
|
||
|
|
|
||
|
|
var div_cpu_running = document.createElement('div');
|
||
|
|
div_cpu_running.className = 'c100 p' + Math.round(check_data.data[i].cpu_percent / check_data.data[i].cpu_cores) +
|
||
|
|
' small';
|
||
|
|
div_cpu_running.innerHTML = '<span id="' + i + '">' + Math.round(check_data.data[i].cpu_percent / check_data.data[
|
||
|
|
i].cpu_cores) + '%</span>';
|
||
|
|
|
||
|
|
var div_cpu_slice = document.createElement('div');
|
||
|
|
div_cpu_slice.className = "slice";
|
||
|
|
|
||
|
|
var div_cpu_bar = document.createElement('div');
|
||
|
|
div_cpu_bar.className = "bar";
|
||
|
|
|
||
|
|
var div_cpu_fill = document.createElement('div');
|
||
|
|
div_cpu_fill.className = "fill";
|
||
|
|
|
||
|
|
var div_memory = document.createElement('div_memory');
|
||
|
|
div_memory.className = "node_status_div";
|
||
|
|
|
||
|
|
var div_memory_clearfix = document.createElement('div');
|
||
|
|
div_memory_clearfix.className = 'clearfix';
|
||
|
|
|
||
|
|
var div_memory_running_class = document.createElement('div');
|
||
|
|
div_memory_running_class.className = 'c100 p' + check_data.data[i].memory_percentage + ' small';
|
||
|
|
div_memory_running_class.innerHTML = '<span id="' + i + '">' + check_data.data[i].memory_percentage +
|
||
|
|
'%</span>';
|
||
|
|
|
||
|
|
var div_memory_slice = document.createElement('div');
|
||
|
|
div_memory_slice.className = "slice";
|
||
|
|
|
||
|
|
var div_memory_bar = document.createElement('div');
|
||
|
|
div_memory_bar.className = "bar";
|
||
|
|
|
||
|
|
var div_memory_fill = document.createElement('div');
|
||
|
|
div_memory_fill.className = "fill";
|
||
|
|
|
||
|
|
div_disk.appendChild(div_disk_clearfix);
|
||
|
|
div_disk_clearfix.appendChild(div_disk_running);
|
||
|
|
div_disk_running.appendChild(div_disk_slice);
|
||
|
|
div_disk_slice.appendChild(div_disk_bar);
|
||
|
|
div_disk_bar.appendChild(div_disk_fill);
|
||
|
|
div_disk.innerHTML += '<font class="node_status_text"><b>Disk</b>';
|
||
|
|
|
||
|
|
div_cpu.appendChild(div_cpu_clearfix);
|
||
|
|
div_cpu_clearfix.appendChild(div_cpu_running);
|
||
|
|
div_cpu_running.appendChild(div_cpu_slice);
|
||
|
|
div_cpu_slice.appendChild(div_cpu_bar);
|
||
|
|
div_cpu_bar.appendChild(div_cpu_fill);
|
||
|
|
div_cpu.innerHTML += '<font class="node_status_text"><b>CPU</b>';
|
||
|
|
|
||
|
|
div_memory.appendChild(div_memory_clearfix);
|
||
|
|
div_memory_clearfix.appendChild(div_memory_running_class);
|
||
|
|
div_memory_running_class.appendChild(div_memory_slice);
|
||
|
|
div_memory_slice.appendChild(div_memory_bar);
|
||
|
|
div_memory_bar.appendChild(div_memory_fill);
|
||
|
|
div_memory.innerHTML += '<font class="node_status_text"><b>Memory</b>';
|
||
|
|
|
||
|
|
var node_card = document.createElement("div")
|
||
|
|
node_card.className = "node_card";
|
||
|
|
|
||
|
|
node_card.appendChild(div_logo);
|
||
|
|
node_card.appendChild(div_disk);
|
||
|
|
node_card.appendChild(div_cpu);
|
||
|
|
node_card.appendChild(div_memory);
|
||
|
|
|
||
|
|
var hr = document.createElement('hr');
|
||
|
|
div.appendChild(node_card);
|
||
|
|
div.appendChild(network_image);
|
||
|
|
div.appendChild(node_network_rx_label);
|
||
|
|
div.appendChild(node_network_tx_label);
|
||
|
|
div.appendChild(hr);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
addFontLinux();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="output" class="modal">
|
||
|
|
<div class="modal-content modal-large">
|
||
|
|
<div class="modal-header">
|
||
|
|
<span class="close">×</span>
|
||
|
|
<h2>PiCluster Nodes</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="nodes-list-modal-body" class="modal-body">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var output_modal = document.getElementById('output');
|
||
|
|
var output_span = document.getElementsByClassName("close")[0];
|
||
|
|
|
||
|
|
output_span.onclick = function() {
|
||
|
|
output_modal.style.display = "none";
|
||
|
|
}
|
||
|
|
|
||
|
|
output_modal.style.display = "block";
|
||
|
|
|
||
|
|
exec()
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
window_reloader();
|
||
|
|
|
||
|
|
function window_reloader() {
|
||
|
|
setTimeout(() => {
|
||
|
|
exec();
|
||
|
|
window_reloader();
|
||
|
|
}, 15000);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|