From 0baaccf273a33b1c755c17e0254f5e19dd59e8cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20W=C3=A4ckerlin?= Date: Fri, 29 Jan 2016 15:55:54 +0000 Subject: [PATCH] create continued --- nodejs/docker/docker.js | 17 ++++---- nodejs/public/javascripts/servicedock.js | 52 ++++++++++++++++-------- nodejs/views/index.ejs | 4 +- 3 files changed, 47 insertions(+), 26 deletions(-) diff --git a/nodejs/docker/docker.js b/nodejs/docker/docker.js index 03d241c..bfee14c 100644 --- a/nodejs/docker/docker.js +++ b/nodejs/docker/docker.js @@ -74,8 +74,8 @@ var Docker = function() { var _containers = this; this.Status = Object.freeze({ - Error: {color: "red", action1: "start", action2: "remove", bash: false}, - Terminated: {color: "yellow", action1: "start", action2: "remove", bash: false}, + Error: {color: "indianred1", action1: "start", action2: "remove", bash: false}, + Terminated: {color: "yellow2", action1: "start", action2: "remove", bash: false}, Restarting: {color: "lightblue", action1: "start", action2: "remove", bash: false}, Paused: {color: "grey", action1: "unpause", action2: null, bash: false}, Running: {color: "lightgreen", action1: "pause", action2: "stop", bash: true}, @@ -95,6 +95,8 @@ var Docker = function() { } function getIps(n, ips) { if (n.ports) n.ports.forEach(function(p) { + if (!p.ip||p.ip==""||p.ip=="0.0.0.0"||p.ip==0) + p.ip=window.location.hostname; if (!ips[p.ip]) ips[p.ip] = []; ips[p.ip].push(p); }); @@ -122,12 +124,13 @@ var Docker = function() { } function graphNode(n, omitstats) { var res = ""; - var label = n.image.name+'\\n'+n.name + var label = (n.image?n.image.name:'UNDEFINED')+'\\n' + +(n.name?n.name:"UNKNOWN") +(omitstats?'':'\\ncpu: ????? mem: ?????'); res += '"'+n.name+'"' +' [label="'+label +'",URL="#'+n.name - +'",style=filled,fillcolor='+n.status.color+"];\n"; + +'",fillcolor='+(n.status?n.status.color+',style=filled':'red,shape=octagon,style=filled')+"];\n"; if (n.ports) n.ports.forEach(function(p) { res += '"'+(p.ip?p.ip+":":"")+p.external+'" -> "'+n.name +'" [label="'+p.internal+'"];\n'; @@ -152,7 +155,7 @@ var Docker = function() { }); return res; } - function graphVolumesConnections(n) { + function graphVolumesConnections(n, nodes) { var res = ""; if (n.volumes) n.volumes.forEach(function(v) { if (v.host) @@ -177,11 +180,11 @@ var Docker = function() { res += "{rank=same;\n"; for (name in n) res += graphVolumesOutside(n[name]); res+="}\n"; - for (name in n) res += graphVolumesConnections(n[name]); + for (name in n) res += graphVolumesConnections(n[name], n); return res; } function addNodes(ns, name) { - var n = nodes[name] || ns[name]; + var n = nodes[name] || ns[name] || {name: name}; ns[name] = n; if (n.links) n.links.forEach(function(peer) { if (!ns[peer.container]) addNodes(ns, peer.container); diff --git a/nodejs/public/javascripts/servicedock.js b/nodejs/public/javascripts/servicedock.js index b1bc549..21e725c 100644 --- a/nodejs/public/javascripts/servicedock.js +++ b/nodejs/public/javascripts/servicedock.js @@ -157,9 +157,15 @@ function previewCreate() { name: $('#image').val(), id: null }, - links: [], - volumesfrom: [], + 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(), }; + console.log("PREVIEW", nodes[name]); $('#preview').html(Viz("digraph {\n"+" rankdir="+rankdir+";\n"+docker.containers.subgraph(name, nodes)+"\n}")); } @@ -171,22 +177,22 @@ 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%"); + $("#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").css("width", "100%"); - $("#main svg").css("height", "auto"); - $("#main svg").css("max-width", "100%"); - $("#main svg").css("max-height", "none"); + $("#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").css("width", "auto"); - $("#main.svg").css("height", "100%"); - $("#main.svg").css("max-width", "none"); - $("#main.svg").css("max-height", "100%"); + $("#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; } } @@ -201,6 +207,7 @@ function rotateviz() { else rankdir = "LR"; showviz(); + previewCreate(); } function showviz(vizpath, more) { if (!vizpath) { @@ -488,7 +495,17 @@ function initForms() { .append('') - $(this).siblings("input").value(); + }).get().join('')+''); + $(this).siblings("input").val(); + previewCreate(); }); //$("#preview").html(Viz("digraph {\nrankdir="+rankdir+";\n"+docker.containers.graph()+"\n}")); } diff --git a/nodejs/views/index.ejs b/nodejs/views/index.ejs index fe71df7..783b8f4 100644 --- a/nodejs/views/index.ejs +++ b/nodejs/views/index.ejs @@ -65,14 +65,14 @@
Mount Volumes - ::
+ ::
Volumes From
-