stats displayed; about to rework bash
This commit is contained in:
Marc Wäckerlin
@@ -131,7 +131,7 @@ function Docker() {
|
||||
}
|
||||
function graphNode(n) {
|
||||
var res = "";
|
||||
var label = n.name+'\\n'+n.image.name;
|
||||
var label = n.image.name+'\\n'+n.name+'\\ncpu: ????? mem: ?????';
|
||||
res += '"'+n.name+'"'
|
||||
+' [label="'+label
|
||||
+'",URL="#'+n.name
|
||||
@@ -372,7 +372,7 @@ function Docker() {
|
||||
}
|
||||
this.contextmenu = function(selector) {
|
||||
$('a[xlink\\:href^=#]').click(function(e) {
|
||||
name = $(this).attr("xlink:href").replace(/^#/, "");
|
||||
var name = $(this).attr("xlink:href").replace(/^#/, "");
|
||||
var n = nodes[name];
|
||||
$(selector).prepend('<div id="popup"></div>')
|
||||
$("#popup").empty();
|
||||
@@ -403,10 +403,17 @@ function Docker() {
|
||||
$("#popup5").click(function() {
|
||||
showConsole();
|
||||
emit("bash-start", name);
|
||||
$("#bash").submit(function() {
|
||||
emit("bash-input", {name: name, text: $("#command").val()+"\n"});
|
||||
$("#command").val("");
|
||||
})
|
||||
$("#screen").focus();
|
||||
$("#screen").keypress(function(e) {
|
||||
console.log("keypress", e);
|
||||
if (e.keyCode) emit("bash-input", {name: name, text: String.fromCharCode(e.keyCode)});
|
||||
else if (e.charCode) emit("bash-input", {name: name, text: String.fromCharCode(e.charCode)});
|
||||
$("#screen").focus();
|
||||
});
|
||||
// $("#bash").submit(function() {
|
||||
// emit("bash-input", {name: name, text: $("#command").val()+"\n"});
|
||||
// $("#command").val("");
|
||||
// })
|
||||
});
|
||||
}
|
||||
$("#popup").append('<button id="popup6">download</button>');
|
||||
@@ -528,17 +535,17 @@ function success(text) {
|
||||
function status(text, msg) {
|
||||
$("#main").hide();
|
||||
$("#main").html(text);
|
||||
$("#popup").hide();
|
||||
if (msg) success(msg);
|
||||
else setTimeout("$('#status').fadeOut('slow')", 5000);
|
||||
zoom(0);
|
||||
stats();
|
||||
$("#main").show();
|
||||
$("form input:first-child").focus();
|
||||
docker.containers.contextmenu("#main");
|
||||
}
|
||||
|
||||
function emit(signal, data) {
|
||||
console.log("<-snd "+signal);
|
||||
console.log("<-snd "+signal, data);
|
||||
socket.emit(signal, data);
|
||||
}
|
||||
|
||||
@@ -565,25 +572,6 @@ function togglemenu() {
|
||||
$("#menu").toggle();
|
||||
}
|
||||
|
||||
function about(c) {
|
||||
$("#imagetools").hide();
|
||||
$.ajax({url: "about.php", success: function(res) {
|
||||
try {
|
||||
var a = JSON.parse(res);
|
||||
status("<h2>"+a.description+"</h2>"+
|
||||
"<p>"+a.project+"-"+a.version+"</p>"+
|
||||
"<p>"+a.docker+"</p>"+
|
||||
"<h3>README</h3>"+
|
||||
"<pre>"+a.readme+"</pre>");
|
||||
} catch(e) {
|
||||
status("<pre>"+res+"</pre>");
|
||||
error("Exception Caught: "+e);
|
||||
}
|
||||
}}).fail(function() {
|
||||
error("offline");
|
||||
});
|
||||
}
|
||||
|
||||
var zoomlevel = 0;
|
||||
function zoom(incr = 0) {
|
||||
zoomlevel = (zoomlevel+incr)%2;
|
||||
@@ -621,7 +609,6 @@ function rotateviz() {
|
||||
showviz();
|
||||
}
|
||||
function showviz(vizpath, more) {
|
||||
$("#imagetools").show();
|
||||
if (!vizpath) {
|
||||
vizpath = viz;
|
||||
more = vizmore;
|
||||
@@ -632,6 +619,12 @@ function showviz(vizpath, more) {
|
||||
res = "digraph {\n"+" rankdir="+rankdir+";\n"+viz+"\n}";
|
||||
try {
|
||||
status(more?Viz(res)+more:Viz(res));
|
||||
$('a > ellipse + text').attr('font-size', '12');
|
||||
$('a > ellipse + text + text')
|
||||
.attr('font-weight', 'bold')
|
||||
.attr('font-size', '16')
|
||||
.each(function() {$(this).attr('y', parseFloat($(this).attr('y'))+1.0)});
|
||||
$('a > ellipse + text + text + text').attr('font-size', '12');
|
||||
} catch(e) {
|
||||
(res = res.split("\n")).forEach(function(v, i, a) {
|
||||
a[i] = ("000"+(i+1)).slice(-3)+": "+v;
|
||||
@@ -646,8 +639,51 @@ function details(name) {
|
||||
showviz(docker.containers.subgraph(focused));
|
||||
}
|
||||
|
||||
/// Convert number of bytes to readable text
|
||||
function size(num) {
|
||||
if (num>0.6*1024) {
|
||||
if (num>0.6*1024*1024) {
|
||||
if (num>0.6*1024*1024*1024) {
|
||||
if (num>0.6*1024*1024*1024*1024) {
|
||||
return Math.round(num/1024/1024/1024/1024)+"TB";
|
||||
} else {
|
||||
return Math.round(num/1024/1024/1024)+"GB";
|
||||
}
|
||||
} else {
|
||||
return Math.round(num/1024/1024)+"MB";
|
||||
}
|
||||
} else {
|
||||
return Math.round(num/1024)+"kB";
|
||||
}
|
||||
} else {
|
||||
return num+"B";
|
||||
}
|
||||
}
|
||||
|
||||
var oldoldstats = null;
|
||||
var oldstats = null;
|
||||
function stats(data) {
|
||||
console.log("->rcv stats")
|
||||
console.log("->rcv stats");
|
||||
if (!data && oldstats && oldoldstats) {
|
||||
data = oldstats;
|
||||
oldstats = oldoldstats;
|
||||
}
|
||||
if (oldstats) for (name in data) {
|
||||
var s = data[name];
|
||||
var o = oldstats[name];
|
||||
if (!o|| !s) continue;
|
||||
$('text:contains("'+name+'") + text + text').css('background-color: red');
|
||||
$('text:contains("'+name+'") + text + text')
|
||||
.html('cpu: '
|
||||
+(Math.round((s.cpuacct.usage.data-o.cpuacct.usage.data)
|
||||
/(s.cpuacct.usage.date-o.cpuacct.usage.date)
|
||||
/100)
|
||||
/100)
|
||||
+'% mem: '
|
||||
+size(s.memory.usage_in_bytes.data));
|
||||
}
|
||||
oldoldstats = oldstats;
|
||||
oldstats = data;
|
||||
}
|
||||
|
||||
function images(i) {
|
||||
@@ -658,7 +694,6 @@ function images(i) {
|
||||
function containers(c) {
|
||||
console.log("->rcv containers");
|
||||
docker.containers.set(c);
|
||||
showImage();
|
||||
if (focused && docker.containers.exists(focused))
|
||||
details(focused);
|
||||
else
|
||||
@@ -666,27 +701,30 @@ function containers(c) {
|
||||
}
|
||||
|
||||
function showImage() {
|
||||
$("#close").hide();
|
||||
$("#logs").hide();
|
||||
$("#console").hide();
|
||||
$("#close").hide();
|
||||
$("#imagetools").show();
|
||||
$("#main").show();
|
||||
}
|
||||
|
||||
function showConsole() {
|
||||
$("#main").hide();
|
||||
$("#logs").hide();
|
||||
$("#imagetools").hide();
|
||||
$("#console").show();
|
||||
$("#close").show();
|
||||
$("#command").focus();
|
||||
$("#command").val("");
|
||||
if ($("#screen").val()!="") $("#screen").append("\n");
|
||||
// $("#command").focus();
|
||||
// $("#command").val("");
|
||||
// if ($("#screen").val()!="") $("#screen").append("\n");
|
||||
}
|
||||
|
||||
function showLogs() {
|
||||
$("#main").hide();
|
||||
$("#logs").show();
|
||||
$("#console").hide();
|
||||
$("#imagetools").hide();
|
||||
$("#close").show();
|
||||
$("#logs").show();
|
||||
}
|
||||
|
||||
function logs(data) {
|
||||
@@ -777,16 +815,39 @@ function ansifilter(data) {
|
||||
return res.replace(/\r\r\n/g, '\n');
|
||||
}
|
||||
|
||||
function ascii(txt) {
|
||||
var res = "";
|
||||
for (i=0; i<txt.length; ++i) {
|
||||
if (res) res += ",";
|
||||
res += txt.charCodeAt(i).toString();
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function bash_data(data) {
|
||||
console.log("->rcv bash-data("+data.name+")", data);
|
||||
if (data.type=='done') {
|
||||
$("#screen").append('<span class="'+data.type+'">\nDONE</span>');
|
||||
} else {
|
||||
$("#screen").append('<span class="'+data.type+'">'+ansifilter(htmlenc(data.text))+'</span>');
|
||||
var done = false;
|
||||
console.log("ASCII: ", ascii(data.text));
|
||||
if (data.text.length==1) {
|
||||
switch (data.text.charCodeAt(0)) {
|
||||
case 7:
|
||||
$('#screen').text(function (_,txt) {
|
||||
return txt.slice(0, -1);
|
||||
});
|
||||
done = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!done) $("#screen").append(ansifilter(htmlenc(data.text)));
|
||||
}
|
||||
$("#screen").animate({
|
||||
scrollTop: $("#screen").prop('scrollHeight')
|
||||
}, 500);}
|
||||
}, 500);
|
||||
$("#screen").focus();
|
||||
}
|
||||
|
||||
function overview() {
|
||||
focused = null;
|
||||
@@ -797,12 +858,15 @@ function overview() {
|
||||
/** Decide whether to login or to create a new user */
|
||||
function start() {
|
||||
$("#imagetools").hide();
|
||||
$("#close").hide();
|
||||
$("#popup").hide();
|
||||
$("#menu").hide();
|
||||
$("#username").html(window.location.hostname)
|
||||
try {
|
||||
status("Starting up ...");
|
||||
emit("images");
|
||||
emit("containers");
|
||||
showImage();
|
||||
} catch (m) {
|
||||
error(m);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user