luci/applications/luci-app-dockerman/luasrc/view/dockerman/container_stats.htm
Mustafa Can Elmacı ae8bbb814f treewide: HTML Cleanup
* HTML Cleanup: Meta tags.
* Converted charset to shorthand.
* Removed meta tags with `Content-Script-Type` attribute. (Invalid in HTML5 spec.)

* HTML Cleanup: CSS tags.
* Removed `type` attribute with CSS files from link tags. (HTML5 spec recommends omitting it.)
* Removed `type` attribute from style tags. (Deprecated in HTML5 spec.)
https://html.spec.whatwg.org/#attr-link-type
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

* HTML Cleanup: Convert from XHTML to HTML5
* Removed XML declaration.
* Removed XML namespace.
* Changed doctype to HTML5.

* HTML Cleanup: CDATA tags.
* CDATA sections should not be used within HTML they are considered as comments and not displayed.
https://developer.mozilla.org/en-US/docs/Web/API/CDATASection

* HTML Cleanup: Script tags.
* Removed `language` attribute from script tags. (No longer valid in HTML5)
* Removed `type` attribute with JavaScript MIME type from script tags. (HTML5 spec recommends omitting it.)
https://html.spec.whatwg.org/multipage/scripting.html#attr-script-type
https://mimesniff.spec.whatwg.org/#javascript-mime-type

Signed-off-by: Mustafa Can Elmacı <mustafacan@elmaci.net>
2024-11-22 22:39:46 +01:00

81 line
3 KiB
HTML

<script>
let last_bw_tx
let last_bw_rx
let interval = 3
function progressbar(v, m, pc, np, f) {
m = m || 100
return String.format(
'<div style="width:100%%; max-width:500px; position:relative; border:1px solid #999999">' +
'<div style="background-color:#CCCCCC; width:%d%%; height:15px">' +
'<div style="position:absolute; left:0; top:0; text-align:center; width:100%%; color:#000000">' +
'<small>%s '+(f?f:'/')+' %s ' + (np ? "" : '(%d%%)') + '</small>' +
'</div>' +
'</div>' +
'</div>', pc, v, m, pc, f
);
}
function niceBytes(bytes, decimals) {
if (bytes == 0) return '0 Bytes';
var k = 1000,
dm = decimals + 1 || 3,
sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
XHR.poll(interval, '<%=luci.dispatcher.build_url("admin/docker/container_stats")%>/<%=self.container_id%>', { status: 1 },
function (x, info) {
var e;
if (e = document.getElementById('cbi-table-cpu-value'))
e.innerHTML = progressbar(
(info.cpu_percent), 100, (info.cpu_percent ? info.cpu_percent : 0));
if (e = document.getElementById('cbi-table-memory-value'))
e.innerHTML = progressbar(
niceBytes(info.memory.mem_useage),
niceBytes(info.memory.mem_limit),
((100 / (info.memory.mem_limit ? info.memory.mem_limit : 100)) * (info.memory.mem_useage ? info.memory.mem_useage : 0))
);
for (var eth in info.bw_rxtx) {
if (!document.getElementById("cbi-table-speed_" + eth + "-value")) {
let tab = document.getElementById("cbi-table-cpu").parentNode
let div = document.getElementById('cbi-table-cpu').cloneNode(true);
div.id = "cbi-table-speed_" + eth;
div.children[0].innerHTML = "<%:Upload/Download%>: " + eth
div.children[1].id = "cbi-table-speed_" + eth + "-value"
tab.appendChild(div)
}
if (!document.getElementById("cbi-table-network_" + eth + "-value")) {
let tab = document.getElementById("cbi-table-cpu").parentNode
let div = document.getElementById('cbi-table-cpu').cloneNode(true);
div.id = "cbi-table-network_" + eth;
div.children[0].innerHTML = "<%:TX/RX%>: " + eth
div.children[1].id = "cbi-table-network_" + eth + "-value"
tab.appendChild(div)
}
e = document.getElementById("cbi-table-network_" + eth + "-value")
e.innerHTML = progressbar(
'↑'+niceBytes(info.bw_rxtx[eth].bw_tx),
'↓'+niceBytes(info.bw_rxtx[eth].bw_rx),
null,
true, " "
);
e = document.getElementById("cbi-table-speed_" + eth + "-value")
if (! last_bw_tx) last_bw_tx = info.bw_rxtx[eth].bw_tx
if (! last_bw_rx) last_bw_rx = info.bw_rxtx[eth].bw_rx
e.innerHTML = progressbar(
'↑'+niceBytes((info.bw_rxtx[eth].bw_tx - last_bw_tx)/interval)+'/s',
'↓'+niceBytes((info.bw_rxtx[eth].bw_rx - last_bw_rx)/interval)+'/s',
null,
true, " "
);
last_bw_tx = info.bw_rxtx[eth].bw_tx
last_bw_rx = info.bw_rxtx[eth].bw_rx
}
});
</script>