|
|
|
/*! @file
|
|
|
|
|
|
|
|
@id $Id$
|
|
|
|
|
|
|
|
This is the main application as it is fully run in the user's browser.
|
|
|
|
|
|
|
|
*/
|
|
|
|
// 1 2 3 4 5 6 7 8
|
|
|
|
// 45678901234567890123456789012345678901234567890123456789012345678901234567890
|
|
|
|
|
|
|
|
/// 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. */
|
|
|
|
function error(data, stay) {
|
|
|
|
$("#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: "+JSON.stringify(data));
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
$("#status").html('error');
|
|
|
|
console.log("error");
|
|
|
|
}
|
|
|
|
$("#status").fadeIn("slow");
|
|
|
|
if (!stay) setTimeout(start, 5000);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/// Show notice messsage
|
|
|
|
/** Fades in an notice message and logs to console.
|
|
|
|
@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");
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/// Show notice messsage
|
|
|
|
/** Fades in an success message and logs to console.
|
|
|
|
@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");
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/// 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 */
|
|
|
|
function status(text, msg) {
|
|
|
|
$("#main").fadeOut("slow", function() {
|
|
|
|
$("#main").html(text);
|
|
|
|
if (msg) success(msg);
|
|
|
|
else setTimeout("$('#status').fadeOut('slow')", 5000);
|
|
|
|
$("#main").fadeIn("slow", function() {
|
|
|
|
$("form input:first-child").focus();
|
|
|
|
})
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/// Toggle Menu Display
|
|
|
|
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;
|
|
|
|
switch (zoomlevel) {
|
|
|
|
case 0: {
|
|
|
|
$("#main svg").css("width", "auto");
|
|
|
|
$("#main svg").css("height", "auto");
|
|
|
|
$("#main svg").css("max-width", "100%");
|
|
|
|
$("#main svg").css("max-height", "100%");
|
|
|
|
} break;
|
|
|
|
case 1: {
|
|
|
|
$("#main svg").css("width", "100%");
|
|
|
|
$("#main svg").css("height", "auto");
|
|
|
|
$("#main svg").css("max-width", "100%");
|
|
|
|
$("#main svg").css("max-height", "none");
|
|
|
|
} break;
|
|
|
|
case 2: {
|
|
|
|
$("#main.svg").css("width", "auto");
|
|
|
|
$("#main.svg").css("height", "100%");
|
|
|
|
$("#main.svg").css("max-width", "none");
|
|
|
|
$("#main.svg").css("max-height", "100%");
|
|
|
|
} break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var viz = null;
|
|
|
|
var rankdir = "LR";
|
|
|
|
function rotateviz() {
|
|
|
|
if (!viz) return;
|
|
|
|
if (rankdir == "LR")
|
|
|
|
rankdir = "TB";
|
|
|
|
else
|
|
|
|
rankdir = "LR";
|
|
|
|
showviz(viz);
|
|
|
|
}
|
|
|
|
function showviz(vizpath) {
|
|
|
|
$("#imagetools").show();
|
|
|
|
viz = vizpath;
|
|
|
|
res = "digraph {\n"+" rankdir="+rankdir+";\n"+viz+"\n}";
|
|
|
|
try {
|
|
|
|
zoomlevel = 0;
|
|
|
|
status(Viz(res));
|
|
|
|
} 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(c) {
|
|
|
|
$("#imagetools").hide();
|
|
|
|
$.ajax({url: "details.php?container="+c, success: function(res) {
|
|
|
|
try {
|
|
|
|
status(res);
|
|
|
|
} catch(e) {
|
|
|
|
status("<pre>"+res+"</pre>");
|
|
|
|
error("Exception Caught: "+e);
|
|
|
|
}
|
|
|
|
}}).fail(function() {
|
|
|
|
error("offline");
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function action(container, action) {
|
|
|
|
$("#imagetools").hide();
|
|
|
|
$.ajax({url: "action.php?container="+container+"&action="+action, success: function(res) {
|
|
|
|
success(res);
|
|
|
|
manage();
|
|
|
|
}}).fail(function() {
|
|
|
|
error("offline");
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/** Manage Docker Services */
|
|
|
|
function manage() {
|
|
|
|
$("#imagetools").hide();
|
|
|
|
$.ajax({url: "manage.php", success: function(res) {
|
|
|
|
status(res);
|
|
|
|
}}).fail(function() {
|
|
|
|
error("offline");
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/** Show an Overview of all Docker Services */
|
|
|
|
function overview() {
|
|
|
|
$("#imagetools").hide();
|
|
|
|
$.ajax({url: "overview.php", success: function(res) {
|
|
|
|
try {
|
|
|
|
showviz(res);
|
|
|
|
} 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>");
|
|
|
|
}
|
|
|
|
}}).fail(function() {
|
|
|
|
error("offline");
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/** Show an Overview of all Docker Images */
|
|
|
|
function imgs() {
|
|
|
|
$("#imagetools").hide();
|
|
|
|
$.ajax({url: "images.php", success: function(res) {
|
|
|
|
try {
|
|
|
|
showviz(res);
|
|
|
|
} 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>");
|
|
|
|
}
|
|
|
|
}}).fail(function() {
|
|
|
|
error("offline");
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/// Initial Function: Startup
|
|
|
|
/** Decide whether to login or to create a new user */
|
|
|
|
function start() {
|
|
|
|
$("#imagetools").hide();
|
|
|
|
$("#menu").hide();
|
|
|
|
$("#username").html(window.location.hostname)
|
|
|
|
try {
|
|
|
|
status("Starting up ...");
|
|
|
|
overview();
|
|
|
|
} catch (m) {
|
|
|
|
error(m);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/// On Load, Call @ref start
|
|
|
|
/*
|
|
|
|
$(window.onbeforeunload = function() {
|
|
|
|
return "Are you sure you want to navigate away?";
|
|
|
|
});
|
|
|
|
*/
|
|
|
|
$(start);
|
|
|
|
|