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

create continued

Browse Source
This commit is contained in:
Marc Wäckerlin
2016-01-29 15:55:54 +00:00
parent e4f48c46d2
commit 0baaccf273
3 changed files with 47 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
nodejs/docker/docker.js
View File

@@ -74,8 +74,8 @@ var Docker = function() {
var _containers = this; var _containers = this;
this.Status = Object.freeze({ this.Status = Object.freeze({
Error: {color: "red", action1: "start", action2: "remove", bash: false}, Error: {color: "indianred1", action1: "start", action2: "remove", bash: false},
Terminated: {color: "yellow", action1: "start", action2: "remove", bash: false}, Terminated: {color: "yellow2", action1: "start", action2: "remove", bash: false},
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},
@@ -95,6 +95,8 @@ var Docker = function() {
} }
function getIps(n, ips) { function getIps(n, ips) {
if (n.ports) n.ports.forEach(function(p) { 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] = []; if (!ips[p.ip]) ips[p.ip] = [];
ips[p.ip].push(p); ips[p.ip].push(p);
}); });
@@ -122,12 +124,13 @@ var Docker = function() {
} }
function graphNode(n, omitstats) { function graphNode(n, omitstats) {
var res = ""; 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: ?????'); +(omitstats?'':'\\ncpu: ????? mem: ?????');
res += '"'+n.name+'"' res += '"'+n.name+'"'
+' [label="'+label +' [label="'+label
+'",URL="#'+n.name +'",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) { if (n.ports) n.ports.forEach(function(p) {
res += '"'+(p.ip?p.ip+":":"")+p.external+'" -> "'+n.name res += '"'+(p.ip?p.ip+":":"")+p.external+'" -> "'+n.name
+'" [label="'+p.internal+'"];\n'; +'" [label="'+p.internal+'"];\n';
@@ -152,7 +155,7 @@ var Docker = function() {
}); });
return res; return res;
} }
function graphVolumesConnections(n) { function graphVolumesConnections(n, nodes) {
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)
@@ -177,11 +180,11 @@ var Docker = function() {
res += "{rank=same;\n"; res += "{rank=same;\n";
for (name in n) res += graphVolumesOutside(n[name]); for (name in n) res += graphVolumesOutside(n[name]);
res+="}\n"; res+="}\n";
for (name in n) res += graphVolumesConnections(n[name]); for (name in n) res += graphVolumesConnections(n[name], n);
return res; return res;
} }
function addNodes(ns, name) { function addNodes(ns, name) {
var n = nodes[name] || ns[name]; var n = nodes[name] || ns[name] || {name: name};
ns[name] = n; ns[name] = n;
if (n.links) n.links.forEach(function(peer) { if (n.links) n.links.forEach(function(peer) {
if (!ns[peer.container]) addNodes(ns, peer.container); if (!ns[peer.container]) addNodes(ns, peer.container);

52
nodejs/public/javascripts/servicedock.js
View File

@@ -157,9 +157,15 @@ function previewCreate() {
name: $('#image').val(), name: $('#image').val(),
id: null id: null
}, },
links: [], ports: $('#createports option').map(function() {return $(this).data();}).get(),
volumesfrom: [], 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}")); $('#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; zoomlevel = (zoomlevel+incr)%2;
switch (zoomlevel) { switch (zoomlevel) {
case 0: { case 0: {
$("#main svg").css("width", "auto"); $("#main svg, #preview svg").css("width", "auto");
$("#main svg").css("height", "auto"); $("#main svg, #preview svg").css("height", "auto");
$("#main svg").css("max-width", "100%"); $("#main svg, #preview svg").css("max-width", "100%");
$("#main svg").css("max-height", "100%"); $("#main svg, #preview svg").css("max-height", "100%");
} break; } break;
case 1: { case 1: {
$("#main svg").css("width", "100%"); $("#main svg, #preview svg").css("width", "100%");
$("#main svg").css("height", "auto"); $("#main svg, #preview svg").css("height", "auto");
$("#main svg").css("max-width", "100%"); $("#main svg, #preview svg").css("max-width", "100%");
$("#main svg").css("max-height", "none"); $("#main svg, #preview svg").css("max-height", "none");
} break; } break;
case 2: { case 2: {
$("#main.svg").css("width", "auto"); $("#main.svg, #preview svg").css("width", "auto");
$("#main.svg").css("height", "100%"); $("#main.svg, #preview svg").css("height", "100%");
$("#main.svg").css("max-width", "none"); $("#main.svg, #preview svg").css("max-width", "none");
$("#main.svg").css("max-height", "100%"); $("#main.svg, #preview svg").css("max-height", "100%");
} break; } break;
} }
} }
@@ -201,6 +207,7 @@ function rotateviz() {
else else
rankdir = "LR"; rankdir = "LR";
showviz(); showviz();
previewCreate();
} }
function showviz(vizpath, more) { function showviz(vizpath, more) {
if (!vizpath) { if (!vizpath) {
@@ -488,7 +495,17 @@ function initForms() {
.append('<option '+$(this).siblings("input") .append('<option '+$(this).siblings("input")
.map(function() { .map(function() {
if (this.hasAttribute('data-name')) { 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 ''; } else return '';
}).get().join(' ')+'>'+$(this).siblings("input") }).get().join(' ')+'>'+$(this).siblings("input")
.map(function() { .map(function() {
@@ -498,8 +515,9 @@ function initForms() {
val=''; sep='' val=''; sep=''
} }
return sep+val; return sep+val;
}).get().join('')+'</option>') }).get().join('')+'</option>');
$(this).siblings("input").value(); $(this).siblings("input").val();
previewCreate();
}); });
//$("#preview").html(Viz("digraph {\nrankdir="+rankdir+";\n"+docker.containers.graph()+"\n}")); //$("#preview").html(Viz("digraph {\nrankdir="+rankdir+";\n"+docker.containers.graph()+"\n}"));
} }

4
nodejs/views/index.ejs
View File

@@ -65,14 +65,14 @@
</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" />:<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 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" 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> </select>
</fieldset> </fieldset>
<fieldset> <fieldset>