picluster/web/containers-layout.html
Verita84 48111c89c0 fix
2021-08-25 08:44:55 -06:00

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">&times;</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>