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

create works

Browse Source
single-host
Marc Wäckerlin 8 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
Split 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
* 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].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 += '"'+n.name+'" -> "'+v.id+'" [label="volume/'+v.rw+'"]\n';
res += '"'+v.id+v.inside+'" -> "'+v.outside+'" [label="mounted from"]\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) {

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.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 = {};
nodes[name] = {
status: docker.containers.Status.Preview,
id: null,
name: name,
image: {
name: $('#image').val(),
id: null
},
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}"));
var nodes = Object.create(tobecreated);
if (name != '') {
nodes[name] = {
status: docker.containers.Status.Preview,
id: null,
name: name,
image: {
name: $('#image').val(),
id: null
},
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(),
};
$('#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() {
@ -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() {

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

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

28
nodejs/views/index.ejs
Unescape View File

@ -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/>
<input class="listbutton" type="submit" id="dodownload" value="Download Changes" /><br/>
<input class="listbutton" type="submit" id="docreate" value="Execute on Server" />
<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/>
<select size="5" id="createpreview" required>
</select>
</fieldset>
</form>
<div id="preview"></div>

Write Preview
Loading…
Cancel
Save