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

create continued

Browse Source
single-host
Marc Wäckerlin 8 years ago
parent e4f48c46d2
commit 0baaccf273
3 changed files with 47 additions and 26 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. 17
      nodejs/docker/docker.js
  2. 52
      nodejs/public/javascripts/servicedock.js
  3. 4
      nodejs/views/index.ejs

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

Write Preview
Loading…
Cancel
Save