webservices
/
servicedock
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

create works

Browse Source
single-host
Marc Wäckerlin 9 years ago
parent 0baaccf273
commit ecba312335
5 changed files with 181 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      ChangeLog
  2. 32
      nodejs/docker/docker.js
  3. 120
      nodejs/public/javascripts/servicedock.js
  4. 8
      nodejs/public/stylesheets/servicedock.css
  5. 28
      nodejs/views/index.ejs

38
ChangeLog
Unescape View File

@ -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 2016-01-25 08:00 marc
* ChangeLog: small fixes * ChangeLog: small fixes

32
nodejs/docker/docker.js
Unescape View File

@ -40,10 +40,13 @@ var Docker = function() {
nodes[c.Id].author = c.Author; nodes[c.Id].author = c.Author;
nodes[c.Id].os = c.Os+"/"+c.Architecture; nodes[c.Id].os = c.Os+"/"+c.Architecture;
nodes[c.Id].parent = c.Parent; 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].cmd = c.Config.Cmd;
nodes[c.Id].entrypoint = c.Config.Entrypoint; 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; nodes[c.Id].volumes = c.Config.Volumes;
if (c.Parent) { if (c.Parent) {
if (!nodes[c.Parent]) nodes[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) { this.cleanup = function(id, instance) {
if (!nodes[id]) return if (!nodes[id]) return
nodes[id].env.forEach(function(e) { nodes[id].env.forEach(function(e) {
@ -79,7 +91,8 @@ var Docker = function() {
Restarting: {color: "lightblue", action1: "start", action2: "remove", bash: false}, Restarting: {color: "lightblue", action1: "start", action2: "remove", bash: false},
Paused: {color: "grey", action1: "unpause", action2: null, bash: false}, Paused: {color: "grey", action1: "unpause", action2: null, bash: false},
Running: {color: "lightgreen", action1: "pause", action2: "stop", bash: true}, Running: {color: "lightgreen", action1: "pause", action2: "stop", bash: true},
Preview: {color: "lightgrey"} Preview: {color: "orangered"},
Prepared: {color: "lightgrey"}
}); });
var containers = []; var containers = [];
var nodes = []; var nodes = [];
@ -143,7 +156,7 @@ var Docker = function() {
function graphVolumesInside(n) { function graphVolumesInside(n) {
var res = ""; var res = "";
if (n.volumes) n.volumes.forEach(function(v) { 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; return res;
} }
@ -159,8 +172,8 @@ var Docker = function() {
var res = ""; var res = "";
if (n.volumes) n.volumes.forEach(function(v) { if (n.volumes) n.volumes.forEach(function(v) {
if (v.host) 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) { if (n.volumesfrom) n.volumesfrom.forEach(function(o) {
res += '"'+n.name+'" -> "'+nodes[o].name+'" [label="volumes from"]\n'; 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); return this.graph(this.subnet(name, nodes), nodes);
} }
this.configuration = function(name) { this.configuration = function(name) {
var ns = this.subnet(name); var ns = name;
if (typeof name == 'string') ns = this.subnet(name);
var creates = []; var creates = [];
for (n in ns) { for (n in ns) {
var instance = { var instance = {
@ -280,6 +294,10 @@ var Docker = function() {
} }
return res; return res;
} }
this.names = function(more) {
if (more) return Object.keys(nodes).concat(Object.keys(more))
else return Object.keys(nodes);
}
function setup() { function setup() {
delete nodes; nodes = []; delete nodes; nodes = [];
containers.forEach(function(c, i) { containers.forEach(function(c, i) {

120
nodejs/public/javascripts/servicedock.js
Unescape View File

@ -140,33 +140,99 @@ function upload(evt) {
if (evt.target.error) return error("error reading file", true); if (evt.target.error) return error("error reading file", true);
if (evt.target.readyState==0) return notice("waiting for data …"); if (evt.target.readyState==0) return notice("waiting for data …");
if (evt.target.readyState==1) return notice("loading 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); reader.readAsText(file);
} }
} }
var tobecreated = {};
function previewCreate() { function previewCreate() {
var name = $('#name').val(); var name = $('#name').val();
var nodes = {}; var nodes = Object.create(tobecreated);
nodes[name] = { if (name != '') {
status: docker.containers.Status.Preview, nodes[name] = {
id: null, status: docker.containers.Status.Preview,
name: name, id: null,
image: { name: name,
name: $('#image').val(), image: {
id: null name: $('#image').val(),
}, id: null
ports: $('#createports option').map(function() {return $(this).data();}).get(), },
env: $('#createvars option').map(function() {return $(this).val();}).get(), ports: $('#createports option').map(function() {return $(this).data();}).get(),
volumes: $('#createvolumes option').map(function() {return $(this).data();}).get(), env: $('#createvars option').map(function() {return $(this).val();}).get(),
volumesfrom: $('#createvolumefroms option').map(function() {return $(this).val();}).get(), volumes: $('#createvolumes option').map(function() {return $(this).data();}).get(),
links: $('#createlinks option').map(function() {return $(this).data();}).get(), volumesfrom: $('#createvolumefroms option').map(function() {return $(this).val();}).get(),
entrypoint: $('#createentrypoints option').map(function() {return $(this).val();}).get(), links: $('#createlinks option').map(function() {return $(this).data();}).get(),
cmd: $('#createcommands option').map(function() {return $(this).val();}).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}")); $('#doappend').unbind().click(function() {
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() { function create() {
@ -289,6 +355,11 @@ function stats(data) {
function images(i) { function images(i) {
console.log("->rcv images"); console.log("->rcv images");
docker.images.set(i); 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) { function containers(c) {
@ -490,7 +561,7 @@ function start() {
function initForms() { function initForms() {
$('#create form *').change(previewCreate); $('#create form *').change(previewCreate);
$("#create form fieldset .add").click(function() { $("#create form fieldset .add").unbind().click(function() {
$(this).siblings("select.collect") $(this).siblings("select.collect")
.append('<option '+$(this).siblings("input") .append('<option '+$(this).siblings("input")
.map(function() { .map(function() {
@ -516,10 +587,13 @@ function initForms() {
} }
return sep+val; return sep+val;
}).get().join('')+'</option>'); }).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(); previewCreate();
}); });
//$("#preview").html(Viz("digraph {\nrankdir="+rankdir+";\n"+docker.containers.graph()+"\n}"));
} }
function init() { function init() {

8
nodejs/public/stylesheets/servicedock.css
Unescape View File

@ -67,9 +67,15 @@ select {
width: 100%; width: 100%;
} }
input:invalid { input:invalid, select:invalid {
background-color: #FDD; 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] { form:invalid input[type=submit] {
opacity: .5; opacity: .5;
pointer-events: none; pointer-events: none;

28
nodejs/views/index.ejs
Unescape View File

@ -51,57 +51,57 @@
<legend>Name</legend> <legend>Name</legend>
<input placeholder="name" type="text" id="name" pattern="^[-_a-zA-Z0-9]*$" size="20" required /> <input placeholder="name" type="text" id="name" pattern="^[-_a-zA-Z0-9]*$" size="20" required />
</fieldset> </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> <fieldset>
<legend>Open Ports</legend> <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 class="collect" size="5" id="createports">
</select> </select>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Environment</legend> <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 class="collect" size="5" id="createvars">
</select> </select>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Mount Volumes</legend> <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 class="collect" size="5" id="createvolumes">
</select> </select>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Volumes From</legend> <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 class="collect" size="5" id="createvolumefroms" >
</select> </select>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Links</legend> <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 class="collect" size="5" id="createlinks">
</select> </select>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Entry Point</legend> <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 class="collect" size="5" id="createentrypoints">
</select> </select>
</fieldset> </fieldset>
<fieldset>
<legend>Image</legend>
<input placeholder="image" type="text" id="image" size="20" pattern="^[-_:/a-zA-Z0-9]*$" required />
</fieldset>
<fieldset> <fieldset>
<legend>Command</legend> <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 class="collect" size="5" id="createcommands">
</select> </select>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Action</legend> <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> </fieldset>
</form> </form>
<div id="preview"></div> <div id="preview"></div>

Write Preview
Loading…
Cancel
Save