186 lines
8.5 KiB
HTML
186 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/picluster-iframe.css">
|
||
|
|
<link rel="stylesheet" href="/assets/circle.css">
|
||
|
|
<script>
|
||
|
|
function link_function(container) {
|
||
|
|
parent.manage_container = container;
|
||
|
|
};
|
||
|
|
|
||
|
|
function exec() {
|
||
|
|
|
||
|
|
|
||
|
|
var div = document.getElementById('container-layout-modal-body');
|
||
|
|
|
||
|
|
div.innerHTML = (div) ? div.innerHTML +
|
||
|
|
'<div class="container_searching"><img heigth="200" width="200" src="/assets/images/searching.jpg"><br><font size=+3><label>Searching for containers</label></font></div>' :
|
||
|
|
div;
|
||
|
|
|
||
|
|
$.get("/nodes?token=" + parent.token, function(data) {
|
||
|
|
var check_data = data;
|
||
|
|
(div) ? div.innerHTML = '': div;
|
||
|
|
var offline_containers = [];
|
||
|
|
var running_containers = [];
|
||
|
|
var configured_containers = check_data.container_list;
|
||
|
|
|
||
|
|
for (var i in check_data.data) {
|
||
|
|
if (div) {
|
||
|
|
var dist = check_data.data[i].os_type.toLowerCase() || '';
|
||
|
|
var container_layout = check_data.data[i].running_containers;
|
||
|
|
running_containers.push(container_layout);
|
||
|
|
//alert(running_containers);
|
||
|
|
var container_uptime = check_data.data[i].container_uptime;
|
||
|
|
var get_container_cpu = check_data.data[i].container_cpu_stats;
|
||
|
|
var get_container_mem = check_data.data[i].container_mem_stats;
|
||
|
|
var cpu_cores = check_data.data[i].cpu_cores;
|
||
|
|
var total_containers = check_data.data[i].total_containers;
|
||
|
|
|
||
|
|
div.innerHTML += '<div class="container_card"><div class="container_card_logo"><b>' + distLogo(dist) +
|
||
|
|
check_data.data[i].hostname + '</b></div><div class="container_card_list"><ul id ="ul_' + i + '">';
|
||
|
|
var container_layout_ul = document.getElementById('ul_' + i);
|
||
|
|
|
||
|
|
for (var j in container_layout) {
|
||
|
|
if (container_layout[j]) {
|
||
|
|
|
||
|
|
var node_card = document.createElement("div")
|
||
|
|
node_card.className = "node_card";
|
||
|
|
|
||
|
|
var div_cpu = document.createElement('div');
|
||
|
|
div_cpu.className = "container_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(get_container_cpu[j] / cpu_cores) + ' small';
|
||
|
|
div_cpu_running.innerHTML = '<span id="' + i + '">' + Math.round(get_container_cpu[j] / 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 = "container_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' + Math.round(get_container_mem[j]) + ' small';
|
||
|
|
div_memory_running_class.innerHTML = '<span id="' + i + '">' + Math.round(get_container_mem[j]) + '%</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_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>';
|
||
|
|
|
||
|
|
node_card.appendChild(div_cpu);
|
||
|
|
node_card.appendChild(div_memory);
|
||
|
|
|
||
|
|
container_layout_ul.innerHTML += '<br><br><li><a href="/containers-manage.html" onclick="link_function(\'' +
|
||
|
|
container_layout[j] + '\')">' + container_layout[j] + ' - ' + container_uptime[j] + '</a>';
|
||
|
|
container_layout_ul.append(node_card);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
div.innerHTML += '</ul></div></div><hr>'
|
||
|
|
}
|
||
|
|
|
||
|
|
addFontLinux();
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var k = 0; k != configured_containers.length; k++) { //Configured Containers
|
||
|
|
var proceed = 1;
|
||
|
|
for (var l = 0; l != running_containers.length; l++) { //Running Containers
|
||
|
|
if (running_containers[l].indexOf(configured_containers[k]) > -1) {
|
||
|
|
proceed = 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (proceed === 1) {
|
||
|
|
offline_containers.push(configured_containers[k]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (offline_containers.length > 0) {
|
||
|
|
var header =
|
||
|
|
'<hr><img src="/assets/images/alert.png" style="width:75px;height:75px;"><br><b>Stopped/Missing Containers:</b>';
|
||
|
|
var divbackup = div.innerHTML;
|
||
|
|
var data = '';
|
||
|
|
for (var z = 0; z != offline_containers.length; z++) {
|
||
|
|
data += '<br><br><a href="/containers-manage.html" onclick="link_function(\'' + offline_containers[z] + '\')">' +
|
||
|
|
offline_containers[z] + '</a>';
|
||
|
|
}
|
||
|
|
div.innerHTML = header + data + '<hr>' + div.innerHTML;
|
||
|
|
divbackup;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="output" class="modal">
|
||
|
|
<div class="modal-content modal-large">
|
||
|
|
<div class="modal-header">
|
||
|
|
<span class="close">×</span>
|
||
|
|
<h2>PiCluster Containers</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="container-layout-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>
|