create continued
This commit is contained in:
Marc Wäckerlin
@@ -74,8 +74,8 @@ var Docker = function() {
|
||||
var _containers = this;
|
||||
|
||||
this.Status = Object.freeze({
|
||||
Error: {color: "red", action1: "start", action2: "remove", bash: false},
|
||||
Terminated: {color: "yellow", action1: "start", action2: "remove", bash: false},
|
||||
Error: {color: "indianred1", action1: "start", action2: "remove", bash: false},
|
||||
Terminated: {color: "yellow2", action1: "start", action2: "remove", bash: false},
|
||||
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},
|
||||
@@ -95,6 +95,8 @@ var Docker = function() {
|
||||
}
|
||||
function getIps(n, ips) {
|
||||
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] = [];
|
||||
ips[p.ip].push(p);
|
||||
});
|
||||
@@ -122,12 +124,13 @@ var Docker = function() {
|
||||
}
|
||||
function graphNode(n, omitstats) {
|
||||
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: ?????');
|
||||
res += '"'+n.name+'"'
|
||||
+' [label="'+label
|
||||
+'",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) {
|
||||
res += '"'+(p.ip?p.ip+":":"")+p.external+'" -> "'+n.name
|
||||
+'" [label="'+p.internal+'"];\n';
|
||||
@@ -152,7 +155,7 @@ var Docker = function() {
|
||||
});
|
||||
return res;
|
||||
}
|
||||
function graphVolumesConnections(n) {
|
||||
function graphVolumesConnections(n, nodes) {
|
||||
var res = "";
|
||||
if (n.volumes) n.volumes.forEach(function(v) {
|
||||
if (v.host)
|
||||
@@ -177,11 +180,11 @@ var Docker = function() {
|
||||
res += "{rank=same;\n";
|
||||
for (name in n) res += graphVolumesOutside(n[name]);
|
||||
res+="}\n";
|
||||
for (name in n) res += graphVolumesConnections(n[name]);
|
||||
for (name in n) res += graphVolumesConnections(n[name], n);
|
||||
return res;
|
||||
}
|
||||
function addNodes(ns, name) {
|
||||
var n = nodes[name] || ns[name];
|
||||
var n = nodes[name] || ns[name] || {name: name};
|
||||
ns[name] = n;
|
||||
if (n.links) n.links.forEach(function(peer) {
|
||||
if (!ns[peer.container]) addNodes(ns, peer.container);
|
||||
|
||||
@@ -157,9 +157,15 @@ function previewCreate() {
|
||||
name: $('#image').val(),
|
||||
id: null
|
||||
},
|
||||
links: [],
|
||||
volumesfrom: [],
|
||||
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}"));
|
||||
}
|
||||
|
||||
@@ -171,22 +177,22 @@ function zoom(incr = 0) {
|
||||
zoomlevel = (zoomlevel+incr)%2;
|
||||
switch (zoomlevel) {
|
||||
case 0: {
|
||||
$("#main svg").css("width", "auto");
|
||||
$("#main svg").css("height", "auto");
|
||||
$("#main svg").css("max-width", "100%");
|
||||
$("#main svg").css("max-height", "100%");
|
||||
$("#main svg, #preview svg").css("width", "auto");
|
||||
$("#main svg, #preview svg").css("height", "auto");
|
||||
$("#main svg, #preview svg").css("max-width", "100%");
|
||||
$("#main svg, #preview svg").css("max-height", "100%");
|
||||
} break;
|
||||
case 1: {
|
||||
$("#main svg").css("width", "100%");
|
||||
$("#main svg").css("height", "auto");
|
||||
$("#main svg").css("max-width", "100%");
|
||||
$("#main svg").css("max-height", "none");
|
||||
$("#main svg, #preview svg").css("width", "100%");
|
||||
$("#main svg, #preview svg").css("height", "auto");
|
||||
$("#main svg, #preview svg").css("max-width", "100%");
|
||||
$("#main svg, #preview svg").css("max-height", "none");
|
||||
} break;
|
||||
case 2: {
|
||||
$("#main.svg").css("width", "auto");
|
||||
$("#main.svg").css("height", "100%");
|
||||
$("#main.svg").css("max-width", "none");
|
||||
$("#main.svg").css("max-height", "100%");
|
||||
$("#main.svg, #preview svg").css("width", "auto");
|
||||
$("#main.svg, #preview svg").css("height", "100%");
|
||||
$("#main.svg, #preview svg").css("max-width", "none");
|
||||
$("#main.svg, #preview svg").css("max-height", "100%");
|
||||
} break;
|
||||
}
|
||||
}
|
||||
@@ -201,6 +207,7 @@ function rotateviz() {
|
||||
else
|
||||
rankdir = "LR";
|
||||
showviz();
|
||||
previewCreate();
|
||||
}
|
||||
function showviz(vizpath, more) {
|
||||
if (!vizpath) {
|
||||
@@ -488,7 +495,17 @@ function initForms() {
|
||||
.append('<option '+$(this).siblings("input")
|
||||
.map(function() {
|
||||
if (this.hasAttribute('data-name')) {
|
||||
return this.getAttribute('data-name')+'="'+this.value.replace(/"/g, '"')+'"';
|
||||
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, '&')
|
||||
.replace(/"/g, '"')
|
||||
+'"';
|
||||
})
|
||||
return res;
|
||||
} else return '';
|
||||
}).get().join(' ')+'>'+$(this).siblings("input")
|
||||
.map(function() {
|
||||
@@ -498,8 +515,9 @@ function initForms() {
|
||||
val=''; sep=''
|
||||
}
|
||||
return sep+val;
|
||||
}).get().join('')+'</option>')
|
||||
$(this).siblings("input").value();
|
||||
}).get().join('')+'</option>');
|
||||
$(this).siblings("input").val();
|
||||
previewCreate();
|
||||
});
|
||||
//$("#preview").html(Viz("digraph {\nrankdir="+rankdir+";\n"+docker.containers.graph()+"\n}"));
|
||||
}
|
||||
|
||||
@@ -65,14 +65,14 @@
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<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>
|
||||
</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/>
|
||||
<select class="collect" size="5" id="createcolumesfroms" >
|
||||
<select class="collect" size="5" id="createvolumefroms" >
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
|
||||
Reference in New Issue
Block a user