servicedock/html/servicedock.js

/*! @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", "none");
            $("#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", "none");
        } break;
        case 3: {
            $("#main svg").css("width", "200%");
            $("#main svg").css("height", "auto");
            $("#main svg").css("max-width", "none");
            $("#main svg").css("max-height", "none");
        } break;
        case 4: {
            $("#main.svg").css("width", "auto");
            $("#main.svg").css("height", "200%");
            $("#main.svg").css("max-width", "none");
            $("#main.svg").css("max-height", "none");
        } 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);