|
|
|
|
@ -1,10 +1,10 @@ |
|
|
|
|
/*! @file |
|
|
|
|
|
|
|
|
|
@id $Id$ |
|
|
|
|
@id $Id$ |
|
|
|
|
|
|
|
|
|
This is the main application as it is fully run in the user's browser. |
|
|
|
|
This is the main application as it is fully run in the user's browser. |
|
|
|
|
|
|
|
|
|
*/ |
|
|
|
|
*/ |
|
|
|
|
// 1 2 3 4 5 6 7 8
|
|
|
|
|
// 45678901234567890123456789012345678901234567890123456789012345678901234567890
|
|
|
|
|
|
|
|
|
|
@ -14,225 +14,247 @@ var focused = null; |
|
|
|
|
var docker = new Docker(); |
|
|
|
|
|
|
|
|
|
function htmlenc(html) { |
|
|
|
|
return $('<div/>').text(html).html(); |
|
|
|
|
return $('<div/>').text(html).html(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function htmldec(data) { |
|
|
|
|
return $('<div/>').html(data).text(); |
|
|
|
|
return $('<div/>').html(data).text(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/// Show error messsage
|
|
|
|
|
/** Fades in an error message and logs to console. |
|
|
|
|
@param data (optional) The error can be a string or any structure. |
|
|
|
|
Strings are shown to the user, structures are logged only. |
|
|
|
|
@param stay (optional) If not given as @c true, reloads page after 5s. */ |
|
|
|
|
@param data (optional) The error can be a string or any structure. |
|
|
|
|
Strings are shown to the user, structures are logged only. |
|
|
|
|
@param stay (optional) If not given as @c true, reloads page after 5s. */ |
|
|
|
|
function error(data) { |
|
|
|
|
$("#status").fadeOut("slow", function() { |
|
|
|
|
$("#status").addClass("error") |
|
|
|
|
$("#status").removeClass("notice") |
|
|
|
|
$("#status").removeClass("success") |
|
|
|
|
if (data) { |
|
|
|
|
if (typeof data == 'string') { |
|
|
|
|
$("#status").html(data); |
|
|
|
|
console.log("error: "+data); |
|
|
|
|
} else { |
|
|
|
|
$("#status").html('unknown error: '+JSON.stringify(data)); |
|
|
|
|
console.log("error: ", data); |
|
|
|
|
console.log((new Error('stacktrace'))); |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
$("#status").html('error'); |
|
|
|
|
console.log("error"); |
|
|
|
|
} |
|
|
|
|
$("#status").fadeIn("slow"); |
|
|
|
|
}); |
|
|
|
|
$("#status").fadeOut("slow", function() { |
|
|
|
|
$("#status").addClass("error") |
|
|
|
|
$("#status").removeClass("notice") |
|
|
|
|
$("#status").removeClass("success") |
|
|
|
|
if (data) { |
|
|
|
|
if (typeof data == 'string') { |
|
|
|
|
$("#status").html(data); |
|
|
|
|
console.log("error: "+data); |
|
|
|
|
} else { |
|
|
|
|
$("#status").html('unknown error: '+JSON.stringify(data)); |
|
|
|
|
console.log("error: ", data); |
|
|
|
|
console.log((new Error('stacktrace'))); |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
$("#status").html('error'); |
|
|
|
|
console.log("error"); |
|
|
|
|
} |
|
|
|
|
$("#status").fadeIn("slow"); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/// Show notice messsage
|
|
|
|
|
/** Fades in an notice message and logs to console. |
|
|
|
|
@param text (optional) The data is a string. */ |
|
|
|
|
@param text (optional) The data is a string. */ |
|
|
|
|
function notice(text) { |
|
|
|
|
$("#status").fadeOut("slow", function() { |
|
|
|
|
$("#status").addClass("notice") |
|
|
|
|
$("#status").removeClass("error") |
|
|
|
|
$("#status").removeClass("success") |
|
|
|
|
if (text) { |
|
|
|
|
$("#status").html(text); |
|
|
|
|
console.log("notice: "+text); |
|
|
|
|
} else { |
|
|
|
|
$("#status").html(''); |
|
|
|
|
console.log("notice"); |
|
|
|
|
} |
|
|
|
|
$("#status").fadeIn("slow"); |
|
|
|
|
}); |
|
|
|
|
$("#status").fadeOut("slow", function() { |
|
|
|
|
$("#status").addClass("notice") |
|
|
|
|
$("#status").removeClass("error") |
|
|
|
|
$("#status").removeClass("success") |
|
|
|
|
if (text) { |
|
|
|
|
$("#status").html(text); |
|
|
|
|
console.log("notice: "+text); |
|
|
|
|
} else { |
|
|
|
|
$("#status").html(''); |
|
|
|
|
console.log("notice"); |
|
|
|
|
} |
|
|
|
|
$("#status").fadeIn("slow"); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/// Show notice messsage
|
|
|
|
|
/** Fades in an success message and logs to console. |
|
|
|
|
@param text (optional) The data is a string. */ |
|
|
|
|
@param text (optional) The data is a string. */ |
|
|
|
|
function success(text) { |
|
|
|
|
$("#status").fadeOut("slow", function() { |
|
|
|
|
$("#status").addClass("success") |
|
|
|
|
$("#status").removeClass("error") |
|
|
|
|
$("#status").removeClass("notice") |
|
|
|
|
if (text) { |
|
|
|
|
$("#status").html(text); |
|
|
|
|
console.log("success: "+text); |
|
|
|
|
} else { |
|
|
|
|
$("#status").html(''); |
|
|
|
|
console.log("success"); |
|
|
|
|
} |
|
|
|
|
$("#status").fadeIn("slow"); |
|
|
|
|
}); |
|
|
|
|
$("#status").fadeOut("slow", function() { |
|
|
|
|
$("#status").addClass("success") |
|
|
|
|
$("#status").removeClass("error") |
|
|
|
|
$("#status").removeClass("notice") |
|
|
|
|
if (text) { |
|
|
|
|
$("#status").html(text); |
|
|
|
|
console.log("success: "+text); |
|
|
|
|
} else { |
|
|
|
|
$("#status").html(''); |
|
|
|
|
console.log("success"); |
|
|
|
|
} |
|
|
|
|
$("#status").fadeIn("slow"); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/// Show status message in the main screen area
|
|
|
|
|
/** @param text Text is a message or some complex HTML from the server. |
|
|
|
|
@param msg The success message text */ |
|
|
|
|
@param msg The success message text */ |
|
|
|
|
function status(text, msg) { |
|
|
|
|
$("#main").hide(); |
|
|
|
|
$("#main").html(text); |
|
|
|
|
if (msg) success(msg); |
|
|
|
|
else setTimeout("$('#status').fadeOut('slow')", 5000); |
|
|
|
|
zoom(0); |
|
|
|
|
stats(); |
|
|
|
|
$("#main").show(); |
|
|
|
|
$("form input:first-child").focus(); |
|
|
|
|
docker.containers.contextmenu("#main"); |
|
|
|
|
$("#main").hide(); |
|
|
|
|
$("#main").html(text); |
|
|
|
|
if (msg) success(msg); |
|
|
|
|
else setTimeout("$('#status').fadeOut('slow')", 5000); |
|
|
|
|
zoom(0); |
|
|
|
|
$("#main").show(); |
|
|
|
|
$("form input:first-child").focus(); |
|
|
|
|
docker.containers.contextmenu("#main"); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function emit(signal, data) { |
|
|
|
|
console.log("<-snd "+signal, data); |
|
|
|
|
socket.emit(signal, data); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function connected() { |
|
|
|
|
console.log("server connected"); |
|
|
|
|
$("#connectionstatus #bad").hide(); |
|
|
|
|
$("#connectionstatus #good").show(); |
|
|
|
|
success("server connected"); |
|
|
|
|
console.log("<-snd "+signal, data); |
|
|
|
|
socket.emit(signal, data); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function connect() { |
|
|
|
|
$("#server").html($("#username").val()+'@'+window.location.hostname) |
|
|
|
|
console.log("server connect"); |
|
|
|
|
$("#connectionstatus #bad").hide(); |
|
|
|
|
$("#connectionstatus #authentication").show(); |
|
|
|
|
$("#connectionstatus #good").hide(); |
|
|
|
|
success("login to server"); |
|
|
|
|
socket.emit('authentication', { |
|
|
|
|
username: $("#username").val(), |
|
|
|
|
password: $("#password").val() |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function authenticated() { |
|
|
|
|
$("#server").html($("#username").val()+'@'+window.location.hostname) |
|
|
|
|
console.log("server authenticated"); |
|
|
|
|
$("#connectionstatus #bad").hide(); |
|
|
|
|
$("#connectionstatus #authentication").hide(); |
|
|
|
|
$("#connectionstatus #good").show(); |
|
|
|
|
success("server connected"); |
|
|
|
|
start(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function unauthorized() { |
|
|
|
|
$("#server").html($("#username").val()+'@'+window.location.hostname) |
|
|
|
|
console.log("authentication failed"); |
|
|
|
|
$("#connectionstatus #good").hide(); |
|
|
|
|
$("#connectionstatus #authentication").hide(); |
|
|
|
|
$("#connectionstatus #bad").show(); |
|
|
|
|
error("authentication failed", true); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function disconnected() { |
|
|
|
|
console.log("server disconnected"); |
|
|
|
|
$("#connectionstatus #good").hide(); |
|
|
|
|
$("#connectionstatus #bad").show(); |
|
|
|
|
error("server disconnected", true); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function connectionstatus() { |
|
|
|
|
if (socket.connected) connected(); else disconnected(); |
|
|
|
|
$("#server").html($("#username").val()+'@'+window.location.hostname) |
|
|
|
|
console.log("server disconnected"); |
|
|
|
|
$("#connectionstatus #good").hide(); |
|
|
|
|
$("#connectionstatus #authentication").hide(); |
|
|
|
|
$("#connectionstatus #bad").show(); |
|
|
|
|
error("server disconnected", true); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/// Toggle Menu Display
|
|
|
|
|
function togglemenu() { |
|
|
|
|
$("#menu").toggle(); |
|
|
|
|
$("#menu").toggle(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/// Upload a configuration and send it to server
|
|
|
|
|
function upload(evt) { |
|
|
|
|
if (!window.FileReader) |
|
|
|
|
return error("your browser does not support file upload", true); |
|
|
|
|
for (var i=0, f; f=evt.target.files[i]; ++i) { |
|
|
|
|
var file = f; |
|
|
|
|
var reader = new FileReader(); |
|
|
|
|
reader.onload = function(evt) { |
|
|
|
|
if (evt.target.error) return error("error reading file", true); |
|
|
|
|
if (evt.target.readyState==0) return notice("waiting for data …"); |
|
|
|
|
if (evt.target.readyState==1) return notice("loading data …"); |
|
|
|
|
tobecreated = JSON.parse(evt.target.result); |
|
|
|
|
showCreate(); |
|
|
|
|
} |
|
|
|
|
reader.readAsText(file); |
|
|
|
|
if (!window.FileReader) |
|
|
|
|
return error("your browser does not support file upload", true); |
|
|
|
|
for (var i=0, f; f=evt.target.files[i]; ++i) { |
|
|
|
|
var file = f; |
|
|
|
|
var reader = new FileReader(); |
|
|
|
|
reader.onload = function(evt) { |
|
|
|
|
if (evt.target.error) return error("error reading file", true); |
|
|
|
|
if (evt.target.readyState==0) return notice("waiting for data …"); |
|
|
|
|
if (evt.target.readyState==1) return notice("loading data …"); |
|
|
|
|
tobecreated = JSON.parse(evt.target.result); |
|
|
|
|
showCreate(); |
|
|
|
|
} |
|
|
|
|
reader.readAsText(file); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var tobecreated = {}; |
|
|
|
|
function previewCreate() { |
|
|
|
|
var name = $('#name').val(); |
|
|
|
|
var nodes = Object.create(tobecreated); |
|
|
|
|
if (name != '') { |
|
|
|
|
nodes[name] = { |
|
|
|
|
status: docker.containers.Status.Preview, |
|
|
|
|
id: null, |
|
|
|
|
name: name, |
|
|
|
|
image: { |
|
|
|
|
name: $('#image').val(), |
|
|
|
|
id: null |
|
|
|
|
}, |
|
|
|
|
ports: $('#createports option').map(function() {return $(this).data();}).get(), |
|
|
|
|
env: $('#createvars option').map(function() {return $(this).val();}).get(), |
|
|
|
|
volumes: $('#createvolumes option').map(function() {return $(this).data();}).get(), |
|
|
|
|
volumesfrom: $('#createvolumefroms option').map(function() {return $(this).val();}).get(), |
|
|
|
|
links: $('#createlinks option').map(function() {return $(this).data();}).get(), |
|
|
|
|
entrypoint: $('#createentrypoints option').map(function() {return $(this).val();}).get(), |
|
|
|
|
cmd: $('#createcommands option').map(function() {return $(this).val();}).get(), |
|
|
|
|
}; |
|
|
|
|
$('#doappend').unbind().click(function() { |
|
|
|
|
tobecreated[name] = Object.create(nodes[name]); |
|
|
|
|
tobecreated[name].status = docker.containers.Status.Prepared; |
|
|
|
|
$('#createpreview').append('<option>'+name+'</option>'); |
|
|
|
|
$('#create form input[type=text]').val(''); |
|
|
|
|
$('#create form select.collect option').remove(); |
|
|
|
|
previewCreate(); |
|
|
|
|
}); |
|
|
|
|
$('#doremove').unbind().click(function() { |
|
|
|
|
$(this).siblings('#createpreview').children('option:selected').each(function(a,b,c) { |
|
|
|
|
delete tobecreated[b.innerHTML]; |
|
|
|
|
}).remove(); |
|
|
|
|
previewCreate(); |
|
|
|
|
}); |
|
|
|
|
$('#dosend').unbind().click(function() { |
|
|
|
|
if (Object.keys(tobecreated).length>0) { |
|
|
|
|
emit("create", docker.containers.configuration(tobecreated)); |
|
|
|
|
tobecreated = {}; |
|
|
|
|
showImage(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
if ($('#image').val()!='') { |
|
|
|
|
var img = docker.images.get($('#image').val()); |
|
|
|
|
if (img) { |
|
|
|
|
$('#portintdata').empty().append(img.ports.map(function(i) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i.replace(/\/.*/g, ''); |
|
|
|
|
return option; |
|
|
|
|
})); |
|
|
|
|
$('#varnamedata').empty().append(img.env.map(function(i) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i.replace(/=.*/g, ''); |
|
|
|
|
return option; |
|
|
|
|
})); |
|
|
|
|
$('#varvaluedata').empty().append(img.env.map(function(i) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i.replace(/^[^=]*=/g, ''); |
|
|
|
|
return option; |
|
|
|
|
})); |
|
|
|
|
$('#volumeextdata').empty(); |
|
|
|
|
$('#volumeintdata').empty(); |
|
|
|
|
for (i in img.volumes) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i; |
|
|
|
|
$('#volumeextdata').append(option); |
|
|
|
|
$('#volumeintdata').append(option); |
|
|
|
|
} |
|
|
|
|
$('#volumesfromdata').empty().append(docker.containers.names(tobecreated).map(function(i) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i; |
|
|
|
|
return option; |
|
|
|
|
})); |
|
|
|
|
$('#linkcontainerdata').empty().append(docker.containers.names(tobecreated).map(function(i) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i; |
|
|
|
|
return option; |
|
|
|
|
})); |
|
|
|
|
} |
|
|
|
|
var name = $('#name').val(); |
|
|
|
|
var nodes = Object.create(tobecreated); |
|
|
|
|
if (name != '') { |
|
|
|
|
nodes[name] = { |
|
|
|
|
status: docker.containers.Status.Preview, |
|
|
|
|
id: null, |
|
|
|
|
name: name, |
|
|
|
|
image: { |
|
|
|
|
name: $('#image').val(), |
|
|
|
|
id: null |
|
|
|
|
}, |
|
|
|
|
ports: $('#createports option').map(function() {return $(this).data();}).get(), |
|
|
|
|
env: $('#createvars option').map(function() {return $(this).val();}).get(), |
|
|
|
|
volumes: $('#createvolumes option').map(function() {return $(this).data();}).get(), |
|
|
|
|
volumesfrom: $('#createvolumefroms option').map(function() {return $(this).val();}).get(), |
|
|
|
|
links: $('#createlinks option').map(function() {return $(this).data();}).get(), |
|
|
|
|
entrypoint: $('#createentrypoints option').map(function() {return $(this).val();}).get(), |
|
|
|
|
cmd: $('#createcommands option').map(function() {return $(this).val();}).get(), |
|
|
|
|
}; |
|
|
|
|
$('#doappend').unbind().click(function() { |
|
|
|
|
tobecreated[name] = Object.create(nodes[name]); |
|
|
|
|
tobecreated[name].status = docker.containers.Status.Prepared; |
|
|
|
|
$('#createpreview').append('<option>'+name+'</option>'); |
|
|
|
|
$('#create form input[type=text]').val(''); |
|
|
|
|
$('#create form select.collect option').remove(); |
|
|
|
|
previewCreate(); |
|
|
|
|
}); |
|
|
|
|
$('#doremove').unbind().click(function() { |
|
|
|
|
$(this).siblings('#createpreview').children('option:selected').each(function(a,b,c) { |
|
|
|
|
delete tobecreated[b.innerHTML]; |
|
|
|
|
}).remove(); |
|
|
|
|
previewCreate(); |
|
|
|
|
}); |
|
|
|
|
$('#dosend').unbind().click(function() { |
|
|
|
|
if (Object.keys(tobecreated).length>0) { |
|
|
|
|
emit("create", docker.containers.configuration(tobecreated)); |
|
|
|
|
tobecreated = {}; |
|
|
|
|
showImage(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
if ($('#image').val()!='') { |
|
|
|
|
var img = docker.images.get($('#image').val()); |
|
|
|
|
if (img) { |
|
|
|
|
$('#portintdata').empty().append(img.ports.map(function(i) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i.replace(/\/.*/g, ''); |
|
|
|
|
return option; |
|
|
|
|
})); |
|
|
|
|
$('#varnamedata').empty().append(img.env.map(function(i) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i.replace(/=.*/g, ''); |
|
|
|
|
return option; |
|
|
|
|
})); |
|
|
|
|
$('#varvaluedata').empty().append(img.env.map(function(i) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i.replace(/^[^=]*=/g, ''); |
|
|
|
|
return option; |
|
|
|
|
})); |
|
|
|
|
$('#volumeextdata').empty(); |
|
|
|
|
$('#volumeintdata').empty(); |
|
|
|
|
for (i in img.volumes) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i; |
|
|
|
|
$('#volumeextdata').append(option); |
|
|
|
|
$('#volumeintdata').append(option); |
|
|
|
|
} |
|
|
|
|
$('#volumesfromdata').empty().append(docker.containers.names(tobecreated).map(function(i) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i; |
|
|
|
|
return option; |
|
|
|
|
})); |
|
|
|
|
$('#linkcontainerdata').empty().append(docker.containers.names(tobecreated).map(function(i) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i; |
|
|
|
|
return option; |
|
|
|
|
})); |
|
|
|
|
} |
|
|
|
|
if (name=='' && nodes) for (name in nodes) break; |
|
|
|
|
if (name && name!='') $('#preview').html(Viz("digraph {\n"+" rankdir="+rankdir+";\n" |
|
|
|
|
+docker.containers.subgraph(name, nodes) |
|
|
|
|
+"\n}")); |
|
|
|
|
else $('#preview').html(''); |
|
|
|
|
} |
|
|
|
|
if (name=='' && nodes) for (name in nodes) break; |
|
|
|
|
if (name && name!='') $('#preview').html(Viz("digraph {\n"+" rankdir="+rankdir+";\n" |
|
|
|
|
+docker.containers.subgraph(name, nodes) |
|
|
|
|
+"\n}")); |
|
|
|
|
else $('#preview').html(''); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function create() { |
|
|
|
|
@ -240,389 +262,401 @@ function create() { |
|
|
|
|
|
|
|
|
|
var zoomlevel = 0; |
|
|
|
|
function zoom(incr = 0) { |
|
|
|
|
zoomlevel = (zoomlevel+incr)%2; |
|
|
|
|
switch (zoomlevel) { |
|
|
|
|
case 0: { |
|
|
|
|
$("#main svg, #preview svg").css("width", "auto"); |
|
|
|
|
$("#main svg, #preview svg").css("height", "auto"); |
|
|
|
|
$("#main svg, #preview svg").css("max-width", "100%"); |
|
|
|
|
$("#main svg, #preview svg").css("max-height", "100%"); |
|
|
|
|
} break; |
|
|
|
|
case 1: { |
|
|
|
|
$("#main svg, #preview svg").css("width", "100%"); |
|
|
|
|
$("#main svg, #preview svg").css("height", "auto"); |
|
|
|
|
$("#main svg, #preview svg").css("max-width", "100%"); |
|
|
|
|
$("#main svg, #preview svg").css("max-height", "none"); |
|
|
|
|
} break; |
|
|
|
|
case 2: { |
|
|
|
|
$("#main.svg, #preview svg").css("width", "auto"); |
|
|
|
|
$("#main.svg, #preview svg").css("height", "100%"); |
|
|
|
|
$("#main.svg, #preview svg").css("max-width", "none"); |
|
|
|
|
$("#main.svg, #preview svg").css("max-height", "100%"); |
|
|
|
|
} break; |
|
|
|
|
} |
|
|
|
|
zoomlevel = (zoomlevel+incr)%2; |
|
|
|
|
switch (zoomlevel) { |
|
|
|
|
case 0: { |
|
|
|
|
$("#main svg, #preview svg").css("width", "auto"); |
|
|
|
|
$("#main svg, #preview svg").css("height", "auto"); |
|
|
|
|
$("#main svg, #preview svg").css("max-width", "100%"); |
|
|
|
|
$("#main svg, #preview svg").css("max-height", "100%"); |
|
|
|
|
} break; |
|
|
|
|
case 1: { |
|
|
|
|
$("#main svg, #preview svg").css("width", "100%"); |
|
|
|
|
$("#main svg, #preview svg").css("height", "auto"); |
|
|
|
|
$("#main svg, #preview svg").css("max-width", "100%"); |
|
|
|
|
$("#main svg, #preview svg").css("max-height", "none"); |
|
|
|
|
} break; |
|
|
|
|
case 2: { |
|
|
|
|
$("#main.svg, #preview svg").css("width", "auto"); |
|
|
|
|
$("#main.svg, #preview svg").css("height", "100%"); |
|
|
|
|
$("#main.svg, #preview svg").css("max-width", "none"); |
|
|
|
|
$("#main.svg, #preview svg").css("max-height", "100%"); |
|
|
|
|
} break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var viz = null; |
|
|
|
|
var vizmore = null; |
|
|
|
|
var rankdir = "LR"; |
|
|
|
|
function rotateviz() { |
|
|
|
|
if (!viz) return; |
|
|
|
|
if (rankdir == "LR") |
|
|
|
|
rankdir = "TB"; |
|
|
|
|
else |
|
|
|
|
rankdir = "LR"; |
|
|
|
|
showviz(); |
|
|
|
|
previewCreate(); |
|
|
|
|
if (!viz) return; |
|
|
|
|
if (rankdir == "LR") |
|
|
|
|
rankdir = "TB"; |
|
|
|
|
else |
|
|
|
|
rankdir = "LR"; |
|
|
|
|
showviz(); |
|
|
|
|
previewCreate(); |
|
|
|
|
} |
|
|
|
|
function showviz(vizpath, more) { |
|
|
|
|
if (!vizpath) { |
|
|
|
|
vizpath = viz; |
|
|
|
|
more = vizmore; |
|
|
|
|
} else { |
|
|
|
|
viz = vizpath; |
|
|
|
|
vizmore = more; |
|
|
|
|
} |
|
|
|
|
res = "digraph {\n"+" rankdir="+rankdir+";\n"+viz+"\n}"; |
|
|
|
|
try { |
|
|
|
|
status(more?Viz(res)+more:Viz(res)); |
|
|
|
|
$('#main a > ellipse + text').attr('font-size', '12'); |
|
|
|
|
$('#main a > ellipse + text + text') |
|
|
|
|
.attr('font-weight', 'bold') |
|
|
|
|
.attr('font-size', '16') |
|
|
|
|
.each(function() {$(this).attr('y', parseFloat($(this).attr('y'))+1.0)}); |
|
|
|
|
$('#main 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; |
|
|
|
|
}); |
|
|
|
|
status("<h2>Exception Caught:</h2><p>"+e+"<p><pre>"+res.join("\n")+"</pre>"); |
|
|
|
|
} |
|
|
|
|
if (!vizpath) { |
|
|
|
|
vizpath = viz; |
|
|
|
|
more = vizmore; |
|
|
|
|
} else { |
|
|
|
|
viz = vizpath; |
|
|
|
|
vizmore = more; |
|
|
|
|
} |
|
|
|
|
res = "digraph {\n"+" rankdir="+rankdir+";\n"+viz+"\n}"; |
|
|
|
|
try { |
|
|
|
|
status(more?Viz(res)+more:Viz(res)); |
|
|
|
|
$('#main a > ellipse + text').attr('font-size', '12'); |
|
|
|
|
$('#main a > ellipse + text + text') |
|
|
|
|
.attr('font-weight', 'bold') |
|
|
|
|
.attr('font-size', '16') |
|
|
|
|
.each(function() {$(this).attr('y', parseFloat($(this).attr('y'))+1.0)}); |
|
|
|
|
$('#main 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; |
|
|
|
|
}); |
|
|
|
|
status("<h2>Exception Caught:</h2><p>"+e+"<p><pre>"+res.join("\n")+"</pre>"); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function details(name) { |
|
|
|
|
if (name) focused = name; |
|
|
|
|
else if (!focused) return overview(); |
|
|
|
|
showviz(docker.containers.subgraph(focused)); |
|
|
|
|
if (name) focused = name; |
|
|
|
|
else if (!focused) return overview(); |
|
|
|
|
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"; |
|
|
|
|
} |
|
|
|
|
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)+"kB"; |
|
|
|
|
return Math.round(num/1024/1024/1024)+"GB"; |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
return Math.round(num/1024/1024)+"MB"; |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
return num+"B"; |
|
|
|
|
return Math.round(num/1024)+"kB"; |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
return num+"B"; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var oldoldstats = null; |
|
|
|
|
var oldstats = null; |
|
|
|
|
function stats(data) { |
|
|
|
|
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; |
|
|
|
|
$('#main text + text:contains("'+name+'") + 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; |
|
|
|
|
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; |
|
|
|
|
$('#main text + text:contains("'+name+'") + 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) { |
|
|
|
|
console.log("->rcv images"); |
|
|
|
|
docker.images.set(i); |
|
|
|
|
$('#imagedata').empty().append(docker.images.tags().map(function(i) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i; |
|
|
|
|
return option; |
|
|
|
|
})); |
|
|
|
|
console.log("->rcv images"); |
|
|
|
|
docker.images.set(i); |
|
|
|
|
$('#imagedata').empty().append(docker.images.tags().map(function(i) { |
|
|
|
|
var option = document.createElement('option'); |
|
|
|
|
option.value = i; |
|
|
|
|
return option; |
|
|
|
|
})); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function containers(c) { |
|
|
|
|
console.log("->rcv containers"); |
|
|
|
|
docker.containers.set(c); |
|
|
|
|
if (focused && docker.containers.exists(focused)) |
|
|
|
|
details(focused); |
|
|
|
|
else |
|
|
|
|
overview(); |
|
|
|
|
console.log("->rcv containers"); |
|
|
|
|
docker.containers.set(c); |
|
|
|
|
if (focused && docker.containers.exists(focused)) |
|
|
|
|
details(focused); |
|
|
|
|
else |
|
|
|
|
overview(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function showLogin() { |
|
|
|
|
$("#close").hide(); |
|
|
|
|
$("#console").hide(); |
|
|
|
|
$("#create").hide(); |
|
|
|
|
$("#imagetools").hide(); |
|
|
|
|
$("#login").show(); |
|
|
|
|
$("#logs").hide(); |
|
|
|
|
$("#main").hide(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function showImage() { |
|
|
|
|
$("#create").hide(); |
|
|
|
|
$("#logs").hide(); |
|
|
|
|
$("#console").hide(); |
|
|
|
|
$("#close").hide(); |
|
|
|
|
$("#imagetools").show(); |
|
|
|
|
$("#main").show(); |
|
|
|
|
$("#close").hide(); |
|
|
|
|
$("#console").hide(); |
|
|
|
|
$("#create").hide(); |
|
|
|
|
$("#imagetools").show(); |
|
|
|
|
$("#login").hide(); |
|
|
|
|
$("#logs").hide(); |
|
|
|
|
$("#main").show(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function showCreate() { |
|
|
|
|
$("#main").hide(); |
|
|
|
|
$("#logs").hide(); |
|
|
|
|
$("#console").hide(); |
|
|
|
|
$("#imagetools").show(); |
|
|
|
|
$("#close").show(); |
|
|
|
|
$("#create").show(); |
|
|
|
|
previewCreate(); |
|
|
|
|
$("#close").show(); |
|
|
|
|
$("#console").hide(); |
|
|
|
|
$("#create").show(); |
|
|
|
|
$("#imagetools").show(); |
|
|
|
|
$("#login").hide(); |
|
|
|
|
$("#logs").hide(); |
|
|
|
|
$("#main").hide(); |
|
|
|
|
previewCreate(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function showConsole() { |
|
|
|
|
$("#main").hide(); |
|
|
|
|
$("#create").hide(); |
|
|
|
|
$("#logs").hide(); |
|
|
|
|
$("#imagetools").hide(); |
|
|
|
|
$("#console").show(); |
|
|
|
|
$("#close").show(); |
|
|
|
|
// $("#command").focus();
|
|
|
|
|
// $("#command").val("");
|
|
|
|
|
// if ($("#screen").val()!="") $("#screen").append("\n");
|
|
|
|
|
$("#close").show(); |
|
|
|
|
$("#console").show(); |
|
|
|
|
$("#create").hide(); |
|
|
|
|
$("#imagetools").hide(); |
|
|
|
|
$("#login").hide(); |
|
|
|
|
$("#logs").hide(); |
|
|
|
|
$("#main").hide(); |
|
|
|
|
// $("#command").focus();
|
|
|
|
|
// $("#command").val("");
|
|
|
|
|
// if ($("#screen").val()!="") $("#screen").append("\n");
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function showLogs() { |
|
|
|
|
$("#main").hide(); |
|
|
|
|
$("#create").hide(); |
|
|
|
|
$("#console").hide(); |
|
|
|
|
$("#imagetools").hide(); |
|
|
|
|
$("#close").show(); |
|
|
|
|
$("#logs").show(); |
|
|
|
|
$("#close").show(); |
|
|
|
|
$("#console").hide(); |
|
|
|
|
$("#create").hide(); |
|
|
|
|
$("#imagetools").hide(); |
|
|
|
|
$("#login").hide(); |
|
|
|
|
$("#logs").show(); |
|
|
|
|
$("#main").hide(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function logs(data) { |
|
|
|
|
console.log("->rcv logs("+data.name+")"); |
|
|
|
|
if (data.type=='done') { |
|
|
|
|
$("#logs").append('<span class="'+data.type+'">\nDONE</span>'); |
|
|
|
|
} else { |
|
|
|
|
$("#logs").append('<span class="'+data.type+'">'+htmlenc(data.text)+'</span>'); |
|
|
|
|
} |
|
|
|
|
console.log("->rcv logs("+data.name+")"); |
|
|
|
|
if (data.type=='done') { |
|
|
|
|
$("#logs").append('<span class="'+data.type+'">\nDONE</span>'); |
|
|
|
|
} else { |
|
|
|
|
$("#logs").append('<span class="'+data.type+'">'+htmlenc(data.text)+'</span>'); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function strInsert(str, pos, txt) { |
|
|
|
|
return str.slice(0, pos)+txt+str.slice(pos); |
|
|
|
|
return str.slice(0, pos)+txt+str.slice(pos); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function ansifilter(data) { |
|
|
|
|
console.log("ansifilter"); |
|
|
|
|
var res = data; |
|
|
|
|
var pos = -1; |
|
|
|
|
var spans = 0; |
|
|
|
|
while ((pos=res.indexOf("\x1B[")) >= 0) { |
|
|
|
|
var end = res.indexOf("m", pos+2); |
|
|
|
|
if (end>0) { |
|
|
|
|
var control= res.slice(pos+2, end); |
|
|
|
|
res = res.slice(0, pos)+res.slice(end+1); |
|
|
|
|
control.split(';').forEach(function(c) { |
|
|
|
|
switch (parseInt(c)) { |
|
|
|
|
// set
|
|
|
|
|
case 1: res = strInsert(res, pos, '<span class="bold">'); ++spans; break; |
|
|
|
|
case 2: res = strInsert(res, pos, '<span class="dim">'); ++spans; break; |
|
|
|
|
case 4: res = strInsert(res, pos, '<span class="underlined">'); ++spans; break; |
|
|
|
|
case 5: res = strInsert(res, pos, '<span class="blink">'); ++spans; break; |
|
|
|
|
case 7: res = strInsert(res, pos, '<span class="reverse">'); ++spans; break; |
|
|
|
|
case 8: res = strInsert(res, pos, '<span class="hidden">'); ++spans; break; |
|
|
|
|
// reset
|
|
|
|
|
case 0: for (;spans;--spans) res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
case 21: if (spans) --spans; res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
case 22: if (spans) --spans; res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
case 23: if (spans) --spans; res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
case 25: if (spans) --spans; res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
case 27: if (spans) --spans; res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
case 28: if (spans) --spans; res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
// fg colors
|
|
|
|
|
case 39: res = strInsert(res, pos, '<span class="fgdefault">'); ++spans; break; |
|
|
|
|
case 30: res = strInsert(res, pos, '<span class="fgblack">'); ++spans; break; |
|
|
|
|
case 31: res = strInsert(res, pos, '<span class="fgred">'); ++spans; break; |
|
|
|
|
case 32: res = strInsert(res, pos, '<span class="fggreen">'); ++spans; break; |
|
|
|
|
case 33: res = strInsert(res, pos, '<span class="fgyellow">'); ++spans; break; |
|
|
|
|
case 34: res = strInsert(res, pos, '<span class="fgblue">'); ++spans; break; |
|
|
|
|
case 35: res = strInsert(res, pos, '<span class="fgmagenta">'); ++spans; break; |
|
|
|
|
case 36: res = strInsert(res, pos, '<span class="fgcyan">'); ++spans; break; |
|
|
|
|
case 37: res = strInsert(res, pos, '<span class="fglightgrey">'); ++spans; break; |
|
|
|
|
case 90: res = strInsert(res, pos, '<span class="fgdarkgrey">'); ++spans; break; |
|
|
|
|
case 91: res = strInsert(res, pos, '<span class="fglightred">'); ++spans; break; |
|
|
|
|
case 92: res = strInsert(res, pos, '<span class="fglightgreen">'); ++spans; break; |
|
|
|
|
case 93: res = strInsert(res, pos, '<span class="fglightyellow">'); ++spans; break; |
|
|
|
|
case 94: res = strInsert(res, pos, '<span class="fglightblue">'); ++spans; break; |
|
|
|
|
case 95: res = strInsert(res, pos, '<span class="fglightmagenta">'); ++spans; break; |
|
|
|
|
case 96: res = strInsert(res, pos, '<span class="fglightcyan">'); ++spans; break; |
|
|
|
|
case 97: res = strInsert(res, pos, '<span class="fgwhite">'); ++spans; break; |
|
|
|
|
// bg colors
|
|
|
|
|
case 49: res = strInsert(res, pos, '<span class="bgdefault">'); ++spans; break; |
|
|
|
|
case 40: res = strInsert(res, pos, '<span class="bgblack">'); ++spans; break; |
|
|
|
|
case 41: res = strInsert(res, pos, '<span class="bgred">'); ++spans; break; |
|
|
|
|
case 42: res = strInsert(res, pos, '<span class="bggreen">'); ++spans; break; |
|
|
|
|
case 43: res = strInsert(res, pos, '<span class="bgyellow">'); ++spans; break; |
|
|
|
|
case 44: res = strInsert(res, pos, '<span class="bgblue">'); ++spans; break; |
|
|
|
|
case 45: res = strInsert(res, pos, '<span class="bgmagenta">'); ++spans; break; |
|
|
|
|
case 46: res = strInsert(res, pos, '<span class="bgcyan">'); ++spans; break; |
|
|
|
|
case 47: res = strInsert(res, pos, '<span class="bglightgrey">'); ++spans; break; |
|
|
|
|
case 100: res = strInsert(res, pos, '<span class="bgdarkgrey">'); ++spans; break; |
|
|
|
|
case 101: res = strInsert(res, pos, '<span class="bglightred">'); ++spans; break; |
|
|
|
|
case 102: res = strInsert(res, pos, '<span class="bglightgreen">'); ++spans; break; |
|
|
|
|
case 103: res = strInsert(res, pos, '<span class="bglightyellow">'); ++spans; break; |
|
|
|
|
case 104: res = strInsert(res, pos, '<span class="bglightblue">'); ++spans; break; |
|
|
|
|
case 105: res = strInsert(res, pos, '<span class="bglightmagenta">'); ++spans; break; |
|
|
|
|
case 106: res = strInsert(res, pos, '<span class="bglightcyan">'); ++spans; break; |
|
|
|
|
case 107: res = strInsert(res, pos, '<span class="bgwhite">'); ++spans; break; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
break; |
|
|
|
|
console.log("ansifilter"); |
|
|
|
|
var res = data; |
|
|
|
|
var pos = -1; |
|
|
|
|
var spans = 0; |
|
|
|
|
while ((pos=res.indexOf("\x1B[")) >= 0) { |
|
|
|
|
var end = res.indexOf("m", pos+2); |
|
|
|
|
if (end>0) { |
|
|
|
|
var control= res.slice(pos+2, end); |
|
|
|
|
res = res.slice(0, pos)+res.slice(end+1); |
|
|
|
|
control.split(';').forEach(function(c) { |
|
|
|
|
switch (parseInt(c)) { |
|
|
|
|
// set
|
|
|
|
|
case 1: res = strInsert(res, pos, '<span class="bold">'); ++spans; break; |
|
|
|
|
case 2: res = strInsert(res, pos, '<span class="dim">'); ++spans; break; |
|
|
|
|
case 4: res = strInsert(res, pos, '<span class="underlined">'); ++spans; break; |
|
|
|
|
case 5: res = strInsert(res, pos, '<span class="blink">'); ++spans; break; |
|
|
|
|
case 7: res = strInsert(res, pos, '<span class="reverse">'); ++spans; break; |
|
|
|
|
case 8: res = strInsert(res, pos, '<span class="hidden">'); ++spans; break; |
|
|
|
|
// reset
|
|
|
|
|
case 0: for (;spans;--spans) res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
case 21: if (spans) --spans; res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
case 22: if (spans) --spans; res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
case 23: if (spans) --spans; res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
case 25: if (spans) --spans; res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
case 27: if (spans) --spans; res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
case 28: if (spans) --spans; res = strInsert(res, pos, "</span>"); break; |
|
|
|
|
// fg colors
|
|
|
|
|
case 39: res = strInsert(res, pos, '<span class="fgdefault">'); ++spans; break; |
|
|
|
|
case 30: res = strInsert(res, pos, '<span class="fgblack">'); ++spans; break; |
|
|
|
|
case 31: res = strInsert(res, pos, '<span class="fgred">'); ++spans; break; |
|
|
|
|
case 32: res = strInsert(res, pos, '<span class="fggreen">'); ++spans; break; |
|
|
|
|
case 33: res = strInsert(res, pos, '<span class="fgyellow">'); ++spans; break; |
|
|
|
|
case 34: res = strInsert(res, pos, '<span class="fgblue">'); ++spans; break; |
|
|
|
|
case 35: res = strInsert(res, pos, '<span class="fgmagenta">'); ++spans; break; |
|
|
|
|
case 36: res = strInsert(res, pos, '<span class="fgcyan">'); ++spans; break; |
|
|
|
|
case 37: res = strInsert(res, pos, '<span class="fglightgrey">'); ++spans; break; |
|
|
|
|
case 90: res = strInsert(res, pos, '<span class="fgdarkgrey">'); ++spans; break; |
|
|
|
|
case 91: res = strInsert(res, pos, '<span class="fglightred">'); ++spans; break; |
|
|
|
|
case 92: res = strInsert(res, pos, '<span class="fglightgreen">'); ++spans; break; |
|
|
|
|
case 93: res = strInsert(res, pos, '<span class="fglightyellow">'); ++spans; break; |
|
|
|
|
case 94: res = strInsert(res, pos, '<span class="fglightblue">'); ++spans; break; |
|
|
|
|
case 95: res = strInsert(res, pos, '<span class="fglightmagenta">'); ++spans; break; |
|
|
|
|
case 96: res = strInsert(res, pos, '<span class="fglightcyan">'); ++spans; break; |
|
|
|
|
case 97: res = strInsert(res, pos, '<span class="fgwhite">'); ++spans; break; |
|
|
|
|
// bg colors
|
|
|
|
|
case 49: res = strInsert(res, pos, '<span class="bgdefault">'); ++spans; break; |
|
|
|
|
case 40: res = strInsert(res, pos, '<span class="bgblack">'); ++spans; break; |
|
|
|
|
case 41: res = strInsert(res, pos, '<span class="bgred">'); ++spans; break; |
|
|
|
|
case 42: res = strInsert(res, pos, '<span class="bggreen">'); ++spans; break; |
|
|
|
|
case 43: res = strInsert(res, pos, '<span class="bgyellow">'); ++spans; break; |
|
|
|
|
case 44: res = strInsert(res, pos, '<span class="bgblue">'); ++spans; break; |
|
|
|
|
case 45: res = strInsert(res, pos, '<span class="bgmagenta">'); ++spans; break; |
|
|
|
|
case 46: res = strInsert(res, pos, '<span class="bgcyan">'); ++spans; break; |
|
|
|
|
case 47: res = strInsert(res, pos, '<span class="bglightgrey">'); ++spans; break; |
|
|
|
|
case 100: res = strInsert(res, pos, '<span class="bgdarkgrey">'); ++spans; break; |
|
|
|
|
case 101: res = strInsert(res, pos, '<span class="bglightred">'); ++spans; break; |
|
|
|
|
case 102: res = strInsert(res, pos, '<span class="bglightgreen">'); ++spans; break; |
|
|
|
|
case 103: res = strInsert(res, pos, '<span class="bglightyellow">'); ++spans; break; |
|
|
|
|
case 104: res = strInsert(res, pos, '<span class="bglightblue">'); ++spans; break; |
|
|
|
|
case 105: res = strInsert(res, pos, '<span class="bglightmagenta">'); ++spans; break; |
|
|
|
|
case 106: res = strInsert(res, pos, '<span class="bglightcyan">'); ++spans; break; |
|
|
|
|
case 107: res = strInsert(res, pos, '<span class="bgwhite">'); ++spans; break; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
for (;spans;--spans) res += "</span>"; |
|
|
|
|
console.log(res); |
|
|
|
|
return res.replace(/\r\r\n/g, '\n'); |
|
|
|
|
} |
|
|
|
|
for (;spans;--spans) res += "</span>"; |
|
|
|
|
console.log(res); |
|
|
|
|
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; |
|
|
|
|
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 { |
|
|
|
|
var buff = ""; |
|
|
|
|
console.log("ASCII: ", ascii(data.text)); |
|
|
|
|
for (var i=0; i<data.text.length; ++i) { |
|
|
|
|
switch (data.text.charCodeAt(i)) { |
|
|
|
|
case 7: |
|
|
|
|
case 8: |
|
|
|
|
if (buff.length) $("#screen").append(ansifilter(htmlenc(buff))); |
|
|
|
|
buff = ""; |
|
|
|
|
$('#screen').html(function (_,txt) { |
|
|
|
|
return txt.slice(0, -1); |
|
|
|
|
}); |
|
|
|
|
break; |
|
|
|
|
default: buff += data.text[i]; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (buff.length) $("#screen").append(ansifilter(htmlenc(buff))); |
|
|
|
|
console.log("->rcv bash-data("+data.name+")", data); |
|
|
|
|
if (data.type=='done') { |
|
|
|
|
$("#screen").append('<span class="'+data.type+'">\nDONE</span>'); |
|
|
|
|
} else { |
|
|
|
|
var buff = ""; |
|
|
|
|
console.log("ASCII: ", ascii(data.text)); |
|
|
|
|
for (var i=0; i<data.text.length; ++i) { |
|
|
|
|
switch (data.text.charCodeAt(i)) { |
|
|
|
|
case 7: |
|
|
|
|
case 8: |
|
|
|
|
if (buff.length) $("#screen").append(ansifilter(htmlenc(buff))); |
|
|
|
|
buff = ""; |
|
|
|
|
$('#screen').html(function (_,txt) { |
|
|
|
|
return txt.slice(0, -1); |
|
|
|
|
}); |
|
|
|
|
break; |
|
|
|
|
default: buff += data.text[i]; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
$("#screen").animate({ |
|
|
|
|
scrollTop: $("#screen").prop('scrollHeight') |
|
|
|
|
}, 500); |
|
|
|
|
$("#screen").focus(); |
|
|
|
|
if (buff.length) $("#screen").append(ansifilter(htmlenc(buff))); |
|
|
|
|
} |
|
|
|
|
$("#screen").animate({ |
|
|
|
|
scrollTop: $("#screen").prop('scrollHeight') |
|
|
|
|
}, 500); |
|
|
|
|
$("#screen").focus(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function overview() { |
|
|
|
|
focused = null; |
|
|
|
|
showviz(docker.containers.graph()); |
|
|
|
|
focused = null; |
|
|
|
|
showviz(docker.containers.graph()); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/// Initial Function: Startup
|
|
|
|
|
/** Decide whether to login or to create a new user */ |
|
|
|
|
/** To be called after login */ |
|
|
|
|
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); |
|
|
|
|
} |
|
|
|
|
$("#imagetools").hide(); |
|
|
|
|
$("#close").hide(); |
|
|
|
|
$("#popup").hide(); |
|
|
|
|
$("#menu").hide(); |
|
|
|
|
try { |
|
|
|
|
status("Starting up ..."); |
|
|
|
|
emit("images"); |
|
|
|
|
emit("containers"); |
|
|
|
|
showImage(); |
|
|
|
|
} catch (m) { |
|
|
|
|
error(m); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function initForms() { |
|
|
|
|
$('#create form *').change(previewCreate); |
|
|
|
|
$("#create form fieldset .add").unbind().click(function() { |
|
|
|
|
$(this).siblings("select.collect") |
|
|
|
|
.append('<option '+$(this).siblings("input") |
|
|
|
|
.map(function() { |
|
|
|
|
if (this.hasAttribute('data-name')) { |
|
|
|
|
var res = ""; |
|
|
|
|
var obj = this; |
|
|
|
|
this.getAttribute('data-name').split(' ').forEach(function(n) { |
|
|
|
|
res += 'data-'+n+'="'+ |
|
|
|
|
(obj.type!='checkbox'||obj.checked |
|
|
|
|
$('#create form *').change(previewCreate); |
|
|
|
|
$("#create form fieldset .add").unbind().click(function() { |
|
|
|
|
$(this).siblings("select.collect") |
|
|
|
|
.append('<option '+$(this).siblings("input") |
|
|
|
|
.map(function() { |
|
|
|
|
if (this.hasAttribute('data-name')) { |
|
|
|
|
var res = ""; |
|
|
|
|
var obj = this; |
|
|
|
|
this.getAttribute('data-name').split(' ').forEach(function(n) { |
|
|
|
|
res += 'data-'+n+'="'+ |
|
|
|
|
(obj.type!='checkbox'||obj.checked |
|
|
|
|
?obj.value:obj.getAttribute('data-false')) |
|
|
|
|
.replace(/&/g, '&') |
|
|
|
|
.replace(/"/g, '"') |
|
|
|
|
+'"'; |
|
|
|
|
}) |
|
|
|
|
return res; |
|
|
|
|
} else return ''; |
|
|
|
|
}).get().join(' ')+'>'+$(this).siblings("input") |
|
|
|
|
.map(function() { |
|
|
|
|
var val = this.value; |
|
|
|
|
var sep = this.getAttribute('data-separator') || ''; |
|
|
|
|
if (this.type=='checkbox' && !this.checked) { |
|
|
|
|
val=''; sep='' |
|
|
|
|
} |
|
|
|
|
return sep+val; |
|
|
|
|
}).get().join('')+'</option>'); |
|
|
|
|
$(this).siblings("input[type=text]").val(''); |
|
|
|
|
previewCreate(); |
|
|
|
|
});
|
|
|
|
|
$("#create form fieldset .remove").unbind().click(function() { |
|
|
|
|
$(this).siblings('select.collect').children('option:selected').remove(); |
|
|
|
|
previewCreate(); |
|
|
|
|
}); |
|
|
|
|
.replace(/&/g, '&') |
|
|
|
|
.replace(/"/g, '"') |
|
|
|
|
+'"'; |
|
|
|
|
}) |
|
|
|
|
return res; |
|
|
|
|
} else return ''; |
|
|
|
|
}).get().join(' ')+'>'+$(this).siblings("input") |
|
|
|
|
.map(function() { |
|
|
|
|
var val = this.value; |
|
|
|
|
var sep = this.getAttribute('data-separator') || ''; |
|
|
|
|
if (this.type=='checkbox' && !this.checked) { |
|
|
|
|
val=''; sep='' |
|
|
|
|
} |
|
|
|
|
return sep+val; |
|
|
|
|
}).get().join('')+'</option>'); |
|
|
|
|
$(this).siblings("input[type=text]").val(''); |
|
|
|
|
previewCreate(); |
|
|
|
|
});
|
|
|
|
|
$("#create form fieldset .remove").unbind().click(function() { |
|
|
|
|
$(this).siblings('select.collect').children('option:selected').remove(); |
|
|
|
|
previewCreate(); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function init() { |
|
|
|
|
$("#logout").attr("href", |
|
|
|
|
window.location.protocol+"//X:X@" |
|
|
|
|
+window.location.hostname |
|
|
|
|
+(window.location.port?":":"")+window.location.port |
|
|
|
|
+window.location.pathname); |
|
|
|
|
socket = io.connect(); |
|
|
|
|
socket.io |
|
|
|
|
.on("connect", connected) |
|
|
|
|
.on("reconnect", connected) |
|
|
|
|
.on("disconnect", disconnected) |
|
|
|
|
.on("error", disconnected); |
|
|
|
|
socket |
|
|
|
|
.on("fail", error) |
|
|
|
|
.on("containers", containers) |
|
|
|
|
.on("images", images) |
|
|
|
|
.on("stats", stats) |
|
|
|
|
.on("logs", logs) |
|
|
|
|
.on("bash-data", bash_data); |
|
|
|
|
initForms(); |
|
|
|
|
start(); |
|
|
|
|
socket = io.connect(); |
|
|
|
|
socket |
|
|
|
|
.io |
|
|
|
|
.on("connect", connect) |
|
|
|
|
.on("reconnect", connect) |
|
|
|
|
.on("disconnect", disconnected) |
|
|
|
|
.on("error", disconnected); |
|
|
|
|
socket |
|
|
|
|
.on("authenticated", authenticated) |
|
|
|
|
.on("unauthorized", unauthorized) |
|
|
|
|
.on("fail", error) |
|
|
|
|
.on("containers", containers) |
|
|
|
|
.on("images", images) |
|
|
|
|
.on("stats", stats) |
|
|
|
|
.on("logs", logs) |
|
|
|
|
.on("bash-data", bash_data); |
|
|
|
|
$("#server").html($("#username").value+'@'+window.location.hostname) |
|
|
|
|
initForms(); |
|
|
|
|
showLogin(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/// On Load, Call @ref start
|
|
|
|
|
/* |
|
|
|
|
$(window.onbeforeunload = function() { |
|
|
|
|
return "Are you sure you want to navigate away?"; |
|
|
|
|
}); |
|
|
|
|
$(window.onbeforeunload = function() { |
|
|
|
|
return "Are you sure you want to navigate away?"; |
|
|
|
|
}); |
|
|
|
|
*/ |
|
|
|
|
$(init); |
|
|
|
|
|
Marc Wäckerlin
9 years ago