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

create works

Browse Source
This commit is contained in:
Marc Wäckerlin
2016-01-31 21:58:42 +00:00
parent 0baaccf273
commit ecba312335
5 changed files with 181 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
nodejs/docker/docker.js
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
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
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
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>