create continued

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);

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('<option '+$(this).siblings("input")
                     .map(function() {
                         if (this.hasAttribute('data-name')) {
-                            return this.getAttribute('data-name')+'="'+this.value.replace(/"/g, '&quot;')+'"';
+                            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, '&amp;')
+                                    .replace(/"/g, '&quot;')
+                                    +'"';
+                            })
+                            return res;
                         } else return '';
                     }).get().join(' ')+'>'+$(this).siblings("input")
                     .map(function() {
@@ -498,8 +515,9 @@ function initForms() {
                             val=''; sep=''
                         }
                         return sep+val;
-                    }).get().join('')+'</option>')
-        $(this).siblings("input").value();
+                    }).get().join('')+'</option>');
+        $(this).siblings("input").val();
+        previewCreate();
     });
     //$("#preview").html(Viz("digraph {\nrankdir="+rankdir+";\n"+docker.containers.graph()+"\n}"));
 }

nodejs/views/index.ejs

@@ -65,14 +65,14 @@
         </fieldset>
         <fieldset>
           <legend>Mount Volumes</legend>
-          <input placeholder="on host" type="text" id="volumeext" size="10" data-name="outside" />:<input placeholder="inside container" type="text" id="volumeint" size="10" data-name="inside" data-separator=":" />:<input placeholder="ro" value="ro" type="checkbox" id="volumero" data-name="rw" data-separator=":" /><label for="volumero" >ro</label><button id="volumeadd" type="button" class="add">+</button><button id="volumeremove" type="button">-</button><br/>
+          <input placeholder="on host" type="text" id="volumeext" size="10" data-name="outside host" />:<input placeholder="inside container" type="text" id="volumeint" size="10" data-name="inside id" data-separator=":" />:<input placeholder="ro" value="ro" type="checkbox" id="volumero" data-name="rw" data-false="rw" data-separator=":" /><label for="volumero" >ro</label><button id="volumeadd" type="button" class="add">+</button><button id="volumeremove" type="button">-</button><br/>
           <select class="collect" size="5" id="createvolumes">
           </select>
         </fieldset>
         <fieldset>
           <legend>Volumes From</legend>
           <input placeholder="container" type="text" id="volumesfrom" size="10" /><button id="volumesfromadd" type="button" class="add">+</button><button id="volumesfromremove" type="button">-</button><br/>
-          <select class="collect" size="5" id="createcolumesfroms" >
+          <select class="collect" size="5" id="createvolumefroms" >
           </select>
         </fieldset>
         <fieldset>