create works

ChangeLog

@@ -1,3 +1,41 @@
+2016-01-29 15:55  marc
+
+	* nodejs/docker/docker.js,
+	  nodejs/public/javascripts/servicedock.js, nodejs/views/index.ejs:
+	  create continued
+
+2016-01-28 15:42  marc
+
+	* nodejs/docker/docker.js,
+	  nodejs/public/javascripts/servicedock.js,
+	  nodejs/public/stylesheets/servicedock.css,
+	  nodejs/views/index.ejs: more of create
+
+2016-01-28 08:01  marc
+
+	* nodejs/makefile.am: first part of create new nodes - added
+	  missing folder
+
+2016-01-28 08:01  marc
+
+	* nodejs/docker, nodejs/docker/docker.js, nodejs/docker/index.js:
+	  first part of create new nodes - added missing folder
+
+2016-01-27 16:06  marc
+
+	* doc/screenshot-main-43.png, doc/screenshot.png,
+	  doc/servicedock.ogv, nodejs/public/javascripts/servicedock.js,
+	  nodejs/public/stylesheets/servicedock.css, nodejs/servicedock.js,
+	  nodejs/sockets/index.js, nodejs/views/index.ejs: first part of
+	  create neew nodes
+
+2016-01-25 15:52  marc
+
+	* ChangeLog, ax_init_standard_project.m4, build-in-docker.sh,
+	  nodejs/etc, nodejs/etc/servicedock.json, nodejs/makefile.am,
+	  nodejs/package.json.in, nodejs/public/javascripts/servicedock.js,
+	  nodejs/servicedock.js: more bashing
+
 2016-01-25 08:00  marc
 
 	* ChangeLog: small fixes

nodejs/docker/docker.js

@@ -40,10 +40,13 @@ var Docker = function() {
                 nodes[c.Id].author = c.Author;
                 nodes[c.Id].os = c.Os+"/"+c.Architecture;
                 nodes[c.Id].parent = c.Parent;
-                nodes[c.Id].env = c.Config.Env;
+                nodes[c.Id].env = c.Config.Env || [];
                 nodes[c.Id].cmd = c.Config.Cmd;
                 nodes[c.Id].entrypoint = c.Config.Entrypoint;
-                nodes[c.Id].ports = c.Config.ExposedPorts;
+                nodes[c.Id].ports = [];
+                if (c.Config.ExposedPorts)
+                    for (p in c.Config.ExposedPorts)
+                        nodes[c.Id].ports.push(p);
                 nodes[c.Id].volumes = c.Config.Volumes;
                 if (c.Parent) {
                     if (!nodes[c.Parent]) nodes[c.Parent] = {};
@@ -52,6 +55,15 @@ var Docker = function() {
                 }
             });
         }
+        this.tags = function() {
+            var res = [];
+            for (n in nodes) if (nodes[n].tags) res = res.concat(nodes[n].tags);
+            return res;
+        }
+        this.get = function(tag) {
+            for (n in nodes) if (nodes[n].tags && nodes[n].tags.indexOf(tag)>-1) return nodes[n];
+            return null;
+        }
         this.cleanup = function(id, instance) {
             if (!nodes[id]) return
             nodes[id].env.forEach(function(e) {
@@ -79,7 +91,8 @@ var Docker = function() {
             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},
-            Preview:    {color: "lightgrey"}
+            Preview:    {color: "orangered"},
+            Prepared:   {color: "lightgrey"}
         });
         var containers = [];
         var nodes = [];
@@ -143,7 +156,7 @@ var Docker = function() {
         function graphVolumesInside(n) {
             var res = "";
             if (n.volumes) n.volumes.forEach(function(v) {
-                res += '"'+v.id+'" [label="'+v.inside+'",shape=box];\n';
+                res += '"'+v.id+v.inside+'" [label="'+v.inside+'",shape=box];\n';
             });
             return res;
         }
@@ -159,8 +172,8 @@ var Docker = function() {
             var res = "";
             if (n.volumes) n.volumes.forEach(function(v) {
                 if (v.host)
-                    res += '"'+v.id+'" -> "'+v.outside+'" [label="mounted from"]\n';
+                    res += '"'+v.id+v.inside+'" -> "'+v.outside+'" [label="mounted from"]\n';
-                res += '"'+n.name+'" -> "'+v.id+'" [label="volume/'+v.rw+'"]\n';
+                res += '"'+n.name+'" -> "'+v.id+v.inside+'" [label="volume/'+v.rw+'"]\n';
             });
             if (n.volumesfrom) n.volumesfrom.forEach(function(o) {
                 res += '"'+n.name+'" -> "'+nodes[o].name+'" [label="volumes from"]\n';
@@ -208,7 +221,8 @@ var Docker = function() {
             return this.graph(this.subnet(name, nodes), nodes);
         }
         this.configuration = function(name) {
-            var ns = this.subnet(name);
+            var ns = name;
+            if (typeof name == 'string') ns = this.subnet(name);
             var creates = [];
             for (n in ns) {
                 var instance = {
@@ -280,6 +294,10 @@ var Docker = function() {
             }
             return res;
         }
+        this.names = function(more) {
+            if (more) return Object.keys(nodes).concat(Object.keys(more))
+            else return Object.keys(nodes);
+        }
         function setup() {
             delete nodes; nodes = [];
             containers.forEach(function(c, i) {

nodejs/public/javascripts/servicedock.js

@@ -140,15 +140,18 @@ function upload(evt) {
             if (evt.target.error) return error("error reading file", true);
             if (evt.target.readyState==0) return notice("waiting for data …");
             if (evt.target.readyState==1) return notice("loading data …");
-            emit("create", evt.target.result);
+            tobecreated = JSON.parse(evt.target.result);
+            showCreate();
         }
         reader.readAsText(file);
     }
 }
 
+var tobecreated = {};
 function previewCreate() {
     var name = $('#name').val();
-    var nodes = {};
+    var nodes = Object.create(tobecreated);
+    if (name != '') {
         nodes[name] =  {
             status: docker.containers.Status.Preview,
             id: null,
@@ -165,8 +168,71 @@ function previewCreate() {
             entrypoint: $('#createentrypoints option').map(function() {return $(this).val();}).get(),
             cmd: $('#createcommands option').map(function() {return $(this).val();}).get(),
         };
-    console.log("PREVIEW", nodes[name]);
+        $('#doappend').unbind().click(function() {
-    $('#preview').html(Viz("digraph {\n"+"  rankdir="+rankdir+";\n"+docker.containers.subgraph(name, nodes)+"\n}"));
+            tobecreated[name] = Object.create(nodes[name]);
+            tobecreated[name].status = docker.containers.Status.Prepared;
+            $('#createpreview').append('<option>'+name+'</option>');
+            $('#create form input[type=text]').val('');
+            $('#create form select.collect option').remove();
+            previewCreate();
+        });
+        $('#doremove').unbind().click(function() {
+            $(this).siblings('#createpreview').children('option:selected').each(function(a,b,c) {
+                delete tobecreated[b.innerHTML];
+            }).remove();
+            previewCreate();
+        });
+        $('#dosend').unbind().click(function() {
+            if (Object.keys(tobecreated).length>0) {
+                emit("create", docker.containers.configuration(tobecreated));
+                tobecreated = {};
+                showImage();
+            }
+        });
+    }
+    if ($('#image').val()!='') {
+        var img = docker.images.get($('#image').val());
+        if (img) {
+            $('#portintdata').empty().append(img.ports.map(function(i) {
+                var option =  document.createElement('option');
+                option.value = i.replace(/\/.*/g, '');
+                return option;
+            }));
+            $('#varnamedata').empty().append(img.env.map(function(i) {
+                var option =  document.createElement('option');
+                option.value = i.replace(/=.*/g, '');
+                return option;
+            }));
+            $('#varvaluedata').empty().append(img.env.map(function(i) {
+                var option =  document.createElement('option');
+                option.value = i.replace(/^[^=]*=/g, '');
+                return option;
+            }));
+            $('#volumeextdata').empty();
+            $('#volumeintdata').empty();
+            for (i in img.volumes) {
+                var option =  document.createElement('option');
+                option.value = i;
+                $('#volumeextdata').append(option);
+                $('#volumeintdata').append(option);
+            }
+            $('#volumesfromdata').empty().append(docker.containers.names(tobecreated).map(function(i) {
+                var option =  document.createElement('option');
+                option.value = i;
+                return option;
+            }));
+            $('#linkcontainerdata').empty().append(docker.containers.names(tobecreated).map(function(i) {
+                var option =  document.createElement('option');
+                option.value = i;
+                return option;
+            }));
+        }
+    }
+    if (name=='' && nodes) for (name in nodes) break;
+    if (name && name!='') $('#preview').html(Viz("digraph {\n"+"  rankdir="+rankdir+";\n"
+                                                 +docker.containers.subgraph(name, nodes)
+                                                 +"\n}"));
+    else $('#preview').html('');
 }
 
 function create() {
@@ -289,6 +355,11 @@ function stats(data) {
 function images(i) {
     console.log("->rcv images");
     docker.images.set(i);
+    $('#imagedata').empty().append(docker.images.tags().map(function(i) {
+        var option =  document.createElement('option');
+        option.value = i;
+        return option;
+    }));
 }
 
 function containers(c) {
@@ -490,7 +561,7 @@ function start() {
 
 function initForms() {
     $('#create form *').change(previewCreate);
-    $("#create form fieldset .add").click(function() {
+    $("#create form fieldset .add").unbind().click(function() {
         $(this).siblings("select.collect")
             .append('<option '+$(this).siblings("input")
                     .map(function() {
@@ -516,10 +587,13 @@ function initForms() {
                         }
                         return sep+val;
                     }).get().join('')+'</option>');
-        $(this).siblings("input").val();
+        $(this).siblings("input[type=text]").val('');
+        previewCreate();
+    });    
+    $("#create form fieldset .remove").unbind().click(function() {
+        $(this).siblings('select.collect').children('option:selected').remove();
         previewCreate();
     });
-    //$("#preview").html(Viz("digraph {\nrankdir="+rankdir+";\n"+docker.containers.graph()+"\n}"));
 }
 
 function init() {

nodejs/public/stylesheets/servicedock.css

@@ -67,9 +67,15 @@ select {
   width: 100%;
 }
 
-input:invalid {
+input:invalid, select:invalid {
   background-color: #FDD;
 }
+
+form #name:valid ~ button#dosend, form !button#dosend ~ #createpreview:invalid, form:invalid button#doappend, input:invalid ~ button.add {
+  opacity: .5;
+  pointer-events: none;
+}
+
 form:invalid input[type=submit] {
   opacity: .5;
   pointer-events: none;

nodejs/views/index.ejs

@@ -51,57 +51,57 @@
           <legend>Name</legend>
           <input placeholder="name" type="text" id="name" pattern="^[-_a-zA-Z0-9]*$" size="20" required />
         </fieldset>
+        <fieldset>
+          <legend>Image</legend>
+          <input placeholder="image" type="text" id="image" size="20" pattern="^[-_:/a-zA-Z0-9]*$" list="imagedata" required /><datalist id="imagedata"></datalist>
+        </fieldset>
         <fieldset>
           <legend>Open Ports</legend>
-          <input placeholder="ip" type="text" pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$" id="portip" size="15" style="width: 13ex" data-name="ip" />:<input placeholder="ext" type="number" id="portext" size="4" style="width: 6ex" data-name="external" data-separator=":" />:<input placeholder="int" type="number" id="portint" size="3" style="width: 6ex" data-name="internal" data-separator=":" /><button id="portadd" type="button" class="add">+</button><button id="portremove" type="button">-</button><br/>
+          <input placeholder="ip" type="text" pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$" id="portip" size="15" style="width: 13ex" data-name="ip" />:<input placeholder="ext" type="number" id="portext" size="4" style="width: 6ex" data-name="external" data-separator=":" />:<input placeholder="int" type="text" id="portint" list="portintdata" size="3" style="width: 6ex" data-name="internal" data-separator=":" /><datalist id="portintdata"></datalist><button id="portadd" type="button" class="add">+</button><button id="portremove" type="button" class="remove">-</button><br/>
           <select class="collect" size="5" id="createports">
           </select>
         </fieldset>
         <fieldset>
           <legend>Environment</legend>
-          <input placeholder="name" type="text" id="varname" size="10" />=<input placeholder="value" type="text" id="varvalue" size="10" data-separator="=" /><button id="varadd" type="button" class="add">+</button><button id="varremove" type="button">-</button><br/>
+          <input placeholder="name" type="text" id="varname" list="varnamedata" size="10" /><datalist id="varnamedata"></datalist>=<input placeholder="value" type="text" id="varvalue" list="varvaluedata" size="10" data-separator="=" /><datalist id="varvaluedata"></datalist><button id="varadd" type="button" class="add">+</button><button id="varremove" type="button" class="remove">-</button><br/>
           <select class="collect" size="5" id="createvars">
           </select>
         </fieldset>
         <fieldset>
           <legend>Mount Volumes</legend>
-          <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/>
+          <input placeholder="on host" type="text" id="volumeext" list="volumeextdata" size="10" data-name="outside host" /><datalist id="volumeextdata"></datalist>:<input placeholder="inside container" type="text" id="volumeint" list="volumeintdata" size="10" data-name="inside id" data-separator=":" /><datalist id="volumeintdata"></datalist>:<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" class="remove">-</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/>
+          <input placeholder="container" type="text" id="volumesfrom" list="volumesfromdata" size="10" /><datalist id="volumesfromdata"></datalist><button id="volumesfromadd" type="button" class="add">+</button><button id="volumesfromremove" type="button" class="remove">-</button><br/>
           <select class="collect" size="5" id="createvolumefroms" >
           </select>
         </fieldset>
         <fieldset>
           <legend>Links</legend>
-          <input placeholder="container" type="text" id="linkcontainer" size="10" data-name="container" />:<input placeholder="name" type="text" id="linkname" size="10" data-name="name" data-separator=":" /><button id="linkadd" type="button" class="add">+</button><button id="linkremove" type="button">-</button><br/>
+          <input placeholder="container" type="text" id="linkcontainer" list="linkcontainerdata" size="10" data-name="container" /><datalist id="linkcontainerdata"></datalist>:<input placeholder="name" type="text" id="linkname" size="10" data-name="name" data-separator=":" /><button id="linkadd" type="button" class="add">+</button><button id="linkremove" type="button" class="remove">-</button><br/>
           <select class="collect" size="5" id="createlinks">
           </select>
         </fieldset>
         <fieldset>
           <legend>Entry Point</legend>
-          <input placeholder="entrypoint" type="text" id="entrypoint" size="10" /><button id="entrypointadd" type="button" class="add">+</button><button id="entrypointremove" type="button">-</button><br/>
+          <input placeholder="entrypoint" type="text" id="entrypoint" size="10" /><button id="entrypointadd" type="button" class="add">+</button><button id="entrypointremove" type="button" class="remove">-</button><br/>
           <select class="collect" size="5" id="createentrypoints">
           </select>
         </fieldset>
-        <fieldset>
-          <legend>Image</legend>
-          <input placeholder="image" type="text" id="image" size="20" pattern="^[-_:/a-zA-Z0-9]*$" required />
-        </fieldset>
         <fieldset>
           <legend>Command</legend>
-          <input placeholder="command" type="text" id="command" size="10" /><button id="commandadd" type="button" class="add">+</button><button id="commandremove" type="button">-</button><br/>
+          <input placeholder="command" type="text" id="command" size="10" /><button id="commandadd" type="button" class="add">+</button><button id="commandremove" type="button" class="remove">-</button><br/>
           <select class="collect" size="5" id="createcommands">
           </select>
         </fieldset>
         <fieldset>
           <legend>Action</legend>
-          <input class="listbutton" type="submit" id="doappend" value="Append to Queue" /><br/>
+          <button type="button" class="submit" id="doappend">+</button><button class="remove" type="button" id="doremove">-</button><button type="button" class="submit" id="dosend">Send</button><br/>
-          <input class="listbutton" type="submit" id="dodownload" value="Download Changes" /><br/>
+          <select size="5" id="createpreview" required>
-          <input class="listbutton" type="submit" id="docreate" value="Execute on Server" />
+          </select>
         </fieldset>
       </form>
       <div id="preview"></div>