servicedock/nodejs/public/javascripts/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

var socket = io.connect();
var focused = null;

function DockerContainers() {
    var Status = Object.freeze({
        Error:      {color: "red", action1: "start", action2: "remove", bash: false},
        Terminated: {color: "yellow", action1: "start", action2: "remove", bash: false},
        Restarting: {color: "lightblue", action1: "start", action2: "remove", bash: false},
        Paused:     {color: "lightgrey", action1: "unpause", action2: null, bash: false},
        Running:    {color: "lightgreen", action1: "pause", action2: "stop", bash: true}
    });
    var containers = [];
    var nodes = [];
    function protocol(port) {
        if (port.toString().match("443")) return "https://";
        if (port.toString().match("3304")) return "mysql://";
        if (port.toString().match("22")) return "ssh://";
        return "http://";
    }
    this.exists = function(name) {
        if (nodes[name]) return true;
        return false;
    }
    this.contextmenu = function(selector) {
        $('a[xlink\\:href^=#]').click(function(e) {
            name = $(this).attr("xlink:href").replace(/^#/, "");
            var n = nodes[name];
            $(selector).prepend('<div id="popup"></div>')
            $("#popup").empty();
            if (n.status.action1) {
                $("#popup").append('<button id="popup1">'+n.status.action1+'</button>');
                $("#popup1").click(function() {
                    emit(n.status.action1, name);
                });
            }
            $("#popup").append('<button id="popup2">'+(focused?"overview":"focus")+'</button>');
            $("#popup2").click(function() {
                if (focused) overview(); else details(name);
            });
            if (n.status.action2) {
                $("#popup").append('<button id="popup3">'+n.status.action2+'</button>');
                $("#popup3").click(function() {
                    emit(n.status.action2, name);
            });
            }
            $("#popup").append('<br/>');
            $("#popup").append('<button id="popup4">logs</button>');
            $("#popup4").click(function() {
                emit("logs", name);
            });
            if (n.status.bash) {
                $("#popup").append('<button id="popup5">bash</button>');
                $("#popup5").click(function() {
                    emit("bash-start", name);
                    $("#console").show();
                    $("#main").hide();
                    $("#bash").submit(function() {
                        emit("bash-input", {name: name, text: $("#command").val()+"\n"});
                        $("#command").val("");
                    })
                });
            }
            $("#popup").append('<button id="popup6">download</button>');
            $("#popup").css("position", "fixed");
            $("#popup").css("top", e.pageY-$("#popup").height()/4);
            $("#popup").css("left", e.pageX-$("#popup").width()/2);
            $("#popup").mouseleave(function() {
                $("#popup").hide();
            }).click(function() {
                $("#popup").hide();
            });
            $("#popup").show();
        })
    }
    function getIps(n, ips) {
        n.ports.forEach(function(p) {
            if (!ips[p.ip]) ips[p.ip] = [];
            ips[p.ip].push(p);
        });
    }
    function graphIpClusters(ips) {
        var res = "newrank=true;\n";
        var i = 0;
        for (ip in ips) {
            res += "subgraph clusterIp"+(++i)+' {\nlabel="'+ip+'";\n';
            ips[ip].forEach(function(p) {
                res += '"'+p.ip+":"+p.external
                    +'" [label="'+p.external+'",URL="'
                    +protocol(p.internal)+p.ip+':'+p.external+'",shape=box];\n';
            });
            res+="}\n";
        }
        res += "{rank=same;\n";
        for (ip in ips) {
            ips[ip].forEach(function(p) {
                res += '"'+p.ip+":"+p.external+'";\n';
            });
        }
        res+="}\n";
        return res;
    }
    function graphNode(n) {
        var res = "";
        var label = n.name+'\\n'+n.image;
        res += '"'+n.name+'"'
            +' [label="'+label
            +'",URL="#'+n.name
            +'",style=filled,fillcolor='+n.status.color+"];\n";
        n.ports.forEach(function(p) {
            res += '"'+(p.ip?p.ip+":":"")+p.external+'" -> "'+n.name
                +'" [label="'+p.internal+'"];\n';
        });
        n.links.forEach(function(l) {
            res += '"'+n.name+'" -> "'+l.to+'" [label="link: '+l.link+'"];\n'
        });
        return res;
    }
    function graphVolumesInside(n) {
        var res = "";
        n.volumes.forEach(function(v) {
            res += '"'+v.id+'" [label="'+v.inside+'",shape=box];\n';
        });
        return res;
    }
    function graphVolumesOutside(n) {
        var res = "";
        n.volumes.forEach(function(v) {
            if (v.host)
                res += '"'+v.outside+'" [label="'+v.host+'",shape=box];\n';
        });
        return res;
    }
    function graphVolumesConnections(n) {
        var res = "";
        n.volumes.forEach(function(v) {
            if (v.host)
                res += '"'+v.id+'" -> "'+v.outside+'" [label="mounted from"]\n';
            res += '"'+n.name+'" -> "'+v.id+'" [label="volume/'+v.rw+'"]\n';
        });
        n.volumesfrom.forEach(function(o) {
            res += '"'+n.name+'" -> "'+nodes[o].name+'" [label="volumes from"]\n';
        });
        return res;
    }
    this.graph = function(n) {
        var res = "";
        var ips = [];
        n = n || nodes;
        for (name in n) getIps(n[name], ips);
        res += graphIpClusters(ips);
        for (name in n) res += graphNode(n[name]);
        res += "{rank=same;\n";
        for (name in n) res += graphVolumesInside(n[name]);
        res+="}\n";
        res += "{rank=same;\n";
        for (name in n) res += graphVolumesOutside(n[name]);
        res+="}\n";
        for (name in n) res += graphVolumesConnections(n[name]);
        return res;
    }
    function addNodes(ns, name) {
        var n = nodes[name];
        ns[name] = n;
        n.links.forEach(function(peer) {
            if (!ns[peer.to]) addNodes(ns, peer.to);
        });
        n.usedby.forEach(function(peer) {
            if (!ns[peer]) addNodes(ns, peer);
        });
        n.volumesfrom.forEach(function(peer) {
            if (!ns[peer]) addNodes(ns, peer);
        });
        n.volumesto.forEach(function(peer) {
            if (!ns[peer]) addNodes(ns, peer);
        });
    }
    this.subgraph = function(name) {
        var ns = [];
        addNodes(ns, name);
        return this.graph(ns);
    }
    function setup() {
        delete nodes; nodes = [];
        containers.forEach(function(c, i) {
            var name = c.Name.replace(/^\//, "");
            if (!nodes[name]) nodes[name] = {};
            nodes[name].id = i;
            nodes[name].name = name;
            nodes[name].image = c.Config.Image;
            nodes[name].ports = [];
            var ports = c.NetworkSettings.Ports || c.NetworkSettings.PortBindings;
            if (ports)
                for (var port in ports)
                    if (ports[port])
                        for (var expose in ports[port]) {
                            var ip = ports[port][expose].HostIp;
                            if (!ip||ip==""||ip=="0.0.0.0"||ip==0) ip=window.location.hostname;
                            nodes[name].ports.push({
                                internal: port,
                                external: ports[port][expose].HostPort,
                                ip: ip
                            });
                        }
            if (c.State.Paused) nodes[name].status = Status.Paused;
            else if (c.State.Running) nodes[name].status = Status.Running;
            else if (c.State.Restarting) nodes[name].status = Status.Restarting;
            else if (c.State.ExitCode == 0) nodes[name].status = Status.Terminated;
            else nodes[name].status = Status.Error;
            nodes[name].volumes = [];
            var volumes = c.Volumes || c.Config.Volumes;
            nodes[name].volumes = [];
            if (volumes)
                for (var volume in volumes) {
                    var rw = "rw";
                    var outside = (typeof volumes[volume]=="string")?volumes[volume]:null;
                    if (c.Mounts) c.Mounts.forEach(function(mnt) {
                        if (mnt.Destination==volume) {
                            outside = mnt.Source;
                            rw = mnt.RW ? "rw" : "ro";
                        }
                    });
                    nodes[name].volumes.push({
                        id: volume+':'+(outside?outside:name),
                        rw:rw,
                        inside: volume,
                        outside: outside,
                        host: outside && !outside.match(/^\/var\/lib\/docker/)
                            ? outside : null
                    });
                }
            nodes[name].volumesfrom = [];
            if (!nodes[name].volumesto) nodes[name].volumesto = [];
            if (c.HostConfig.VolumesFrom) c.HostConfig.VolumesFrom.forEach(function(id) {
                containers.forEach(function(c) {
                    if (c.Id == id || c.Name == "/"+id || c.Name == id) {
                        var src = c.Name.replace(/^\//, "");
                        nodes[name].volumesfrom.push(src);
                        if (!nodes[src]) nodes[src] = {};
                        if (!nodes[src].volumesto) nodes[src].volumesto = [];
                        nodes[src].volumesto.push(name);
                    }
                });
            });
            nodes[name].links = [];
            if (!nodes[name].usedby) nodes[name].usedby = [];
            if (c.HostConfig && c.HostConfig.Links)
                c.HostConfig.Links.forEach(function(l) {
                    var target = {
                        to:   l.replace(/^\/?([^:]*).*$/, "$1"),
                        link: l.replace(new RegExp("^.*:/?"+name+"/"), "")
                    };
                    nodes[name].links.push(target);
                    if (!nodes[target.to]) nodes[target.to] = {};
                    if (!nodes[target.to].usedby) nodes[target.to].usedby = [];
                    nodes[target.to].usedby.push(name);
                });
        });
        for (name in nodes) { // cleanup duplicate links to volumes when using volumes-from
            var n = nodes[name];
            n.volumesfrom.forEach(function(other) {
                var o = nodes[other];
                o.volumes.forEach(function(ovol) {
                    n.volumes.reduceRight(function(x, nvol, i, arr) {
                        if (nvol.id == ovol.id)
                            arr.splice(i, 1);
                    }, [])
                })
            })
        }
    }
    this.setContainers = function(c) {
        if (typeof c == "string") c = JSON.parse(c);
        if (typeof c != "object") throw "wrong format: "+(typeof c);
        containers = c;
        setup();
    }
}

var dc = new DockerContainers();

function htmlenc(html) {
    return $('<div/>').text(html).html();
}

function htmldec(data) {
    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. */
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: "+JSON.stringify(data));
            }
        } 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. */
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").hide();
    $("#main").html(text);
    $("#popup").hide();
    if (msg) success(msg);
    else setTimeout("$('#status').fadeOut('slow')", 5000);
    zoom(0);
    $("#main").show();
    $("form input:first-child").focus();
    dc.contextmenu("#main");
}

function emit(signal, data) {
    console.log("<-snd "+signal);
    socket.emit(signal, data);
}

function connected() {
    console.log("server connected");
    $("#connectionstatus #bad").hide();
    $("#connectionstatus #good").show();
    success("server connected");
}

function disconnected() {
    console.log("server disconnected");
    $("#connectionstatus #good").hide();
    $("#connectionstatus #bad").show();
    error("server disconnected", true);
}

function connectionstatus() {
    if (socket.connected) connected(); else disconnected();
}

/// 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 vizmore = null;
var rankdir = "LR";
function rotateviz() {
    if (!viz) return;
    if (rankdir == "LR")
        rankdir = "TB";
    else
        rankdir = "LR";
    showviz();
}
function showviz(vizpath, more) {
    $("#imagetools").show();
    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));
    } 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(dc.subgraph(focused));
}

function containers(c) {
    console.log("->rcv containers");
    dc.setContainers(c);
    if (focused && dc.exists(focused))
        details(focused);
    else
        overview();
}

function logs(data) {
    console.log("->rcv logs("+data.name+")");
    $("#main").hide();
    $("#console").hide();
    $("#logs").show();
    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);
}

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;
        }
    }
    for (;spans;--spans) res += "</span>";
    console.log(res);
    return res.replace(/\r\r\n/g, '\n');
}

function bash_data(data) {
    console.log("->rcv bash-data("+data.name+")", data);
    $("#main").hide();
    $("#logs").hide();
    $("#console").show();
    if (data.type=='done') {
        $("#screen").append('<span class="'+data.type+'">\nDONE</span>');
    } else {
        $("#screen").append('<span class="'+data.type+'">'+ansifilter(htmlenc(data.text))+'</span>');
    }
}

function overview() {
    focused = null;
    showviz(dc.graph());
}

/// 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 ...");
        emit("containers");
    } catch (m) {
        error(m);
    }
}

function init() {
    socket.io
        .on("connect", connected)
        .on("reconnect", connected)
        .on("disconnect", disconnected)
        .on("error", disconnected);
    socket
        .on("fail", error)
        .on("containers", containers)
        .on("logs", logs)
        .on("bash-data", bash_data);
    start();
}

/// On Load, Call @ref start
/*
 $(window.onbeforeunload = function() {
    return "Are you sure you want to navigate away?";
});
 */
$(init);