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

possibility to download configuration

Browse Source
single-host
Marc Wäckerlin 9 years ago
parent 6a5dad3c93
commit 43448d9ed7
4 changed files with 471 additions and 279 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. 292
      nodejs/public/javascripts/servicedock.js
  2. 2
      nodejs/public/stylesheets/servicedock.css
  3. 71
      nodejs/sockets/index.js
  4. 1
      nodejs/views/index.ejs

292
nodejs/public/javascripts/servicedock.js
Unescape View File

@ -11,7 +11,68 @@
var socket = io.connect(); var socket = io.connect();
var focused = null; var focused = null;
function DockerContainers() { function Docker() {
function same(array1, array2) {
return (array1.length == array2.length)
&& array1.every(function(element, index) {
return element === array2[index];
});
}
var _docker = this;
this.Images = function() {
var _images = this;
var images = [];
var nodes = [];
function setup() {
delete nodes; nodes = [];
images.forEach(function(c, i) {
if (!nodes[c.Id]) nodes[c.Id] = {};
nodes[c.Id].id = c.Id;
nodes[c.Id].tags = c.RepoTags;
nodes[c.Id].created = c.Created;
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].cmd = c.Config.Cmd;
nodes[c.Id].entrypoint = c.Config.Entrypoint;
nodes[c.Id].ports = c.Config.ExposedPorts;
nodes[c.Id].volumes = c.Config.Volumes;
if (c.Parent) {
if (!nodes[c.Parent]) nodes[c.Parent] = {};
if (!nodes[c.Parent].children) nodes[c.Parent].children = [];
nodes[c.Parent].children.push(c.Id);
}
});
}
this.cleanup = function(id, instance) {
if (!nodes[id]) return
nodes[id].env.forEach(function(e) {
if ((pos=instance.env.indexOf(e))>-1) instance.env.splice(pos, 1)
})
if (same(nodes[id].cmd, instance.cmd)) instance.cmd = null
else console.log(instance.cmd+" != "+nodes[id].cmd)
if (same(nodes[id].entrypoint, instance.entrypoint)) instance.entrypoint = null
else console.log(instance.entrypoint+" != "+nodes[id].entrypoint)
}
this.set = function(c) {
if (typeof c == "string") c = JSON.parse(c);
if (typeof c != "object") throw "wrong format: "+(typeof c);
images = c;
setup();
}
}
this.Containers = function() {
var _containers = this;
var Status = Object.freeze({ var Status = Object.freeze({
Error: {color: "red", action1: "start", action2: "remove", bash: false}, Error: {color: "red", action1: "start", action2: "remove", bash: false},
Terminated: {color: "yellow", action1: "start", action2: "remove", bash: false}, Terminated: {color: "yellow", action1: "start", action2: "remove", bash: false},
@ -31,57 +92,6 @@ function DockerContainers() {
if (nodes[name]) return true; if (nodes[name]) return true;
return false; return false;
} }
this.contextmenu = function(selector) {
$('a[xlink\\:href^=#]').click(function(e) {
name = $(this).attr("xlink:href").replace(/^#/, "");
var n = nodes[name];
$(selector).prepend('<div id="popup"></div>')
$("#popup").empty();
if (n.status.action1) {
$("#popup").append('<button id="popup1">'+n.status.action1+'</button>');
$("#popup1").click(function() {
emit(n.status.action1, name);
});
}
$("#popup").append('<button id="popup2">'+(focused?"overview":"focus")+'</button>');
$("#popup2").click(function() {
if (focused) overview(); else details(name);
});
if (n.status.action2) {
$("#popup").append('<button id="popup3">'+n.status.action2+'</button>');
$("#popup3").click(function() {
emit(n.status.action2, name);
});
}
$("#popup").append('<br/>');
$("#popup").append('<button id="popup4">logs</button>');
$("#popup4").click(function() {
emit("logs", name);
});
if (n.status.bash) {
$("#popup").append('<button id="popup5">bash</button>');
$("#popup5").click(function() {
emit("bash-start", name);
$("#console").show();
$("#main").hide();
$("#bash").submit(function() {
emit("bash-input", {name: name, text: $("#command").val()+"\n"});
$("#command").val("");
})
});
}
$("#popup").append('<button id="popup6">download</button>');
$("#popup").css("position", "fixed");
$("#popup").css("top", e.pageY-$("#popup").height()/4);
$("#popup").css("left", e.pageX-$("#popup").width()/2);
$("#popup").mouseleave(function() {
$("#popup").hide();
}).click(function() {
$("#popup").hide();
});
$("#popup").show();
})
}
function getIps(n, ips) { function getIps(n, ips) {
n.ports.forEach(function(p) { n.ports.forEach(function(p) {
if (!ips[p.ip]) ips[p.ip] = []; if (!ips[p.ip]) ips[p.ip] = [];
@ -111,7 +121,7 @@ function DockerContainers() {
} }
function graphNode(n) { function graphNode(n) {
var res = ""; var res = "";
var label = n.name+'\\n'+n.image; var label = n.name+'\\n'+n.image.name;
res += '"'+n.name+'"' res += '"'+n.name+'"'
+' [label="'+label +' [label="'+label
+'",URL="#'+n.name +'",URL="#'+n.name
@ -184,19 +194,61 @@ function DockerContainers() {
if (!ns[peer]) addNodes(ns, peer); if (!ns[peer]) addNodes(ns, peer);
}); });
} }
this.subgraph = function(name) { this.subnet = function(name) {
var ns = []; var ns = {};
addNodes(ns, name); addNodes(ns, name);
return this.graph(ns); return ns;
}
this.subgraph = function(name) {
return this.graph(this.subnet(name));
}
this.creation = function(name) {
var ns = this.subnet(name);
var creates = [];
for (n in ns) {
var instance = {
name: ns[n].name,
image: ns[n].image.name,
ports: ns[n].ports,
env: ns[n].env,
cmd: ns[n].cmd,
entrypoint: ns[n].entrypoint,
volumesfrom: ns[n].volumesfrom,
links: ns[n].links,
volumes: []
};
ns[n].volumes.forEach(function(v) {
if (v.host) instance.volumes.push({
inside: v.inside,
outside: v.host
});
});
_docker.images.cleanup(ns[n].image.id, instance);
creates.push(instance);
}
creates.sort(function(a, b) {
if (a.volumesfrom.indexOf(b)>=0) return 1; // a after b
if (b.volumesfrom.indexOf(a)>=0) return -1; // a before b
for (var i=0; i<a.links.length; ++i) if (a.links[i].to == b.name) return 1; // a after b;
for (var i=0; i<b.links.length; ++i) if (b.links[i].to == a.name) return -1; // a before b;
return 0; // a and b do not depend on each other
});
return creates;
} }
function setup() { function setup() {
delete nodes; nodes = []; delete nodes; nodes = [];
containers.forEach(function(c, i) { containers.forEach(function(c, i) {
var name = c.Name.replace(/^\//, ""); var name = c.Name.replace(/^\//, "");
if (!nodes[name]) nodes[name] = {}; if (!nodes[name]) nodes[name] = {};
nodes[name].id = i; nodes[name].id = c.Id;
nodes[name].name = name; nodes[name].name = name;
nodes[name].image = c.Config.Image; nodes[name].image = {
name: c.Config.Image,
id: c.Image
};
nodes[name].env = c.Config.Env;
nodes[name].cmd = c.Config.Cmd;
nodes[name].entrypoint = c.Entrypoint;
nodes[name].ports = []; nodes[name].ports = [];
var ports = c.NetworkSettings.Ports || c.NetworkSettings.PortBindings; var ports = c.NetworkSettings.Ports || c.NetworkSettings.PortBindings;
if (ports) if (ports)
@ -278,15 +330,84 @@ function DockerContainers() {
}) })
} }
} }
this.setContainers = function(c) { this.contextmenu = function(selector) {
$('a[xlink\\:href^=#]').click(function(e) {
name = $(this).attr("xlink:href").replace(/^#/, "");
var n = nodes[name];
$(selector).prepend('<div id="popup"></div>')
$("#popup").empty();
if (n.status.action1) {
$("#popup").append('<button id="popup1">'+n.status.action1+'</button>');
$("#popup1").click(function() {
emit(n.status.action1, name);
});
}
$("#popup").append('<button id="popup2">'+(focused?"overview":"focus")+'</button>');
$("#popup2").click(function() {
if (focused) overview(); else details(name);
});
if (n.status.action2) {
$("#popup").append('<button id="popup3">'+n.status.action2+'</button>');
$("#popup3").click(function() {
emit(n.status.action2, name);
});
}
$("#popup").append('<br/>');
$("#popup").append('<button id="popup4">logs</button>');
$("#popup4").click(function() {
showLogs();
emit("logs", name);
});
if (n.status.bash) {
$("#popup").append('<button id="popup5">bash</button>');
$("#popup5").click(function() {
showConsole();
emit("bash-start", name);
$("#bash").submit(function() {
emit("bash-input", {name: name, text: $("#command").val()+"\n"});
$("#command").val("");
})
});
}
$("#popup").append('<button id="popup6">download</button>');
$("#popup6").click(function() {
var download = document.createElement('a');
download.href = 'data:application/json,'
+ encodeURI(JSON.stringify(_containers.creation(name), null, 2));
download.target = '_blank';
download.download = name+'.json';
var clickEvent = new MouseEvent("click", {
"view": window,
"bubbles": true,
"cancelable": false
});
download.dispatchEvent(clickEvent);
});
$("#popup").css("position", "fixed");
$("#popup").css("top", e.pageY-$("#popup").height()/4);
$("#popup").css("left", e.pageX-$("#popup").width()/2);
$("#popup").mouseleave(function() {
$("#popup").hide();
}).click(function() {
$("#popup").hide();
});
$("#popup").show();
})
}
this.set = function(c) {
if (typeof c == "string") c = JSON.parse(c); if (typeof c == "string") c = JSON.parse(c);
if (typeof c != "object") throw "wrong format: "+(typeof c); if (typeof c != "object") throw "wrong format: "+(typeof c);
containers = c; containers = c;
setup(); setup();
} }
}
this.images = new this.Images();
this.containers = new this.Containers();
} }
var dc = new DockerContainers(); var docker = new Docker();
function htmlenc(html) { function htmlenc(html) {
return $('<div/>').text(html).html(); return $('<div/>').text(html).html();
@ -312,7 +433,8 @@ function error(data) {
console.log("error: "+data); console.log("error: "+data);
} else { } else {
$("#status").html('unknown error: '+JSON.stringify(data)); $("#status").html('unknown error: '+JSON.stringify(data));
console.log("error: "+JSON.stringify(data)); console.log("error: ", data);
console.log((new Error('stacktrace')));
} }
} else { } else {
$("#status").html('error'); $("#status").html('error');
@ -372,7 +494,7 @@ function status(text, msg) {
zoom(0); zoom(0);
$("#main").show(); $("#main").show();
$("form input:first-child").focus(); $("form input:first-child").focus();
dc.contextmenu("#main"); docker.containers.contextmenu("#main");
} }
function emit(signal, data) { function emit(signal, data) {
@ -481,23 +603,50 @@ function showviz(vizpath, more) {
function details(name) { function details(name) {
if (name) focused = name; if (name) focused = name;
else if (!focused) return overview(); else if (!focused) return overview();
showviz(dc.subgraph(focused)); showviz(docker.containers.subgraph(focused));
}
function images(i) {
console.log("->rcv images");
docker.images.set(i);
} }
function containers(c) { function containers(c) {
console.log("->rcv containers"); console.log("->rcv containers");
dc.setContainers(c); docker.containers.set(c);
if (focused && dc.exists(focused)) showImage();
if (focused && docker.containers.exists(focused))
details(focused); details(focused);
else else
overview(); overview();
} }
function logs(data) { function showImage() {
console.log("->rcv logs("+data.name+")"); $("#close").hide();
$("#main").hide(); $("#logs").hide();
$("#console").hide(); $("#console").hide();
$("#main").show();
}
function showConsole() {
$("#main").hide();
$("#logs").hide();
$("#console").show();
$("#close").show();
$("#command").focus();
$("#command").val("");
if ($("#screen").val()!="") $("#screen").append("\n");
}
function showLogs() {
$("#main").hide();
$("#logs").show(); $("#logs").show();
$("#console").hide();
$("#close").show();
}
function logs(data) {
console.log("->rcv logs("+data.name+")");
if (data.type=='done') { if (data.type=='done') {
$("#logs").append('<span class="'+data.type+'">\nDONE</span>'); $("#logs").append('<span class="'+data.type+'">\nDONE</span>');
} else { } else {
@ -586,9 +735,6 @@ function ansifilter(data) {
function bash_data(data) { function bash_data(data) {
console.log("->rcv bash-data("+data.name+")", data); console.log("->rcv bash-data("+data.name+")", data);
$("#main").hide();
$("#logs").hide();
$("#console").show();
if (data.type=='done') { if (data.type=='done') {
$("#screen").append('<span class="'+data.type+'">\nDONE</span>'); $("#screen").append('<span class="'+data.type+'">\nDONE</span>');
} else { } else {
@ -598,7 +744,7 @@ function bash_data(data) {
function overview() { function overview() {
focused = null; focused = null;
showviz(dc.graph()); showviz(docker.containers.graph());
} }
/// Initial Function: Startup /// Initial Function: Startup
@ -609,6 +755,7 @@ function start() {
$("#username").html(window.location.hostname) $("#username").html(window.location.hostname)
try { try {
status("Starting up ..."); status("Starting up ...");
emit("images");
emit("containers"); emit("containers");
} catch (m) { } catch (m) {
error(m); error(m);
@ -624,6 +771,7 @@ function init() {
socket socket
.on("fail", error) .on("fail", error)
.on("containers", containers) .on("containers", containers)
.on("images", images)
.on("logs", logs) .on("logs", logs)
.on("bash-data", bash_data); .on("bash-data", bash_data);
start(); start();

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

@ -195,7 +195,7 @@ table.docker li+li {
color: black; color: black;
} }
#menuicon, #imagetools img { #menuicon, #imagetools img, #close {
cursor: pointer; cursor: pointer;
height: 1em; height: 1em;
width: auto; width: auto;

71
nodejs/sockets/index.js
Unescape View File

@ -70,6 +70,46 @@ module.exports = function() {
updatecontainers(); updatecontainers();
} }
function imageinspect(error, stdout, stderr) {
if (error || stderr)
return fail("inspect docker images failed", {
error: error, stderr: stderr, stdout: stdout
});
emit("images", stdout);
}
function imagelist(error, stdout, stderr) {
if (error || stderr)
return fail("list docker images failed", {
error: error, stderr: stderr, stdout: stdout
});
exec("docker inspect "+stdout.trim().replace(/\n/g, " "), imageinspect);
}
function updateimages(error, stdout, stderr) {
if (error || stderr)
return fail("update docker images failed", {
error: error, stderr: stderr, stdout: stdout
});
exec("docker images -q", imagelist);
}
function modify(cmd, name) {
if (!name.match(/^[a-z0-9][-_:.+a-z0-9]*$/i))
return fail("illegal instance name");
exec("docker "+cmd+" "+name, updatecontainers);
}
function containers() {
console.log("-> containers");
updatecontainers();
}
function images() {
console.log("-> images");
updateimages();
}
function start(name) { function start(name) {
console.log("-> start("+name+")"); console.log("-> start("+name+")");
modify("start", name); modify("start", name);
@ -111,36 +151,39 @@ module.exports = function() {
var bash_connections = {}; var bash_connections = {};
function bash_start(name) { function new_bash(name) {
console.log("-> bash-start("+name+")");
if (!name.match(/^[a-z0-9][-_:.+a-z0-9]*$/i)) if (!name.match(/^[a-z0-9][-_:.+a-z0-9]*$/i))
return fail("illegal instance name"); return fail("illegal instance name");
if (bash_connections[name]) return fail("bash already open"); if (bash_connections[name]) return;
bash_connections[name] = bash_connections[name] =
pty.spawn("docker", ["exec", "-it", name, "bash", "-i"]); pty.spawn("docker", ["exec", "-it", name, "bash", "-i"]);
bash_connections[name].stdout.on('data', function(data) { bash_connections[name].stdout.on('data', function(data) {
emit('bash-data', {name: name, type: 'stdout', text: data.toString()}); emit('bash-data', {name: name, type: 'stdout', text: data.toString()});
}); });
// bash_connections[name].stderr.on('data', function(data) { }
// emit('bash-data', {name: name, type: 'stdout', text: data.toString()});
// }); function bash_start(name) {
console.log("-> bash-start("+name+")");
new_bash(name);
} }
function bash_input(data) { function bash_input(data) {
console.log("-> bash-input("+data.name+", "+data.text+")"); console.log("-> bash-input("+data.name+", "+data.text+")");
if (!bash_connections[data.name]) return fail("bash not open"); new_bash(name);
bash_connections[data.name].stdin.resume(); bash_connections[data.name].stdin.resume();
bash_connections[data.name].stdin.write(data.text); bash_connections[data.name].stdin.write(data.text);
} }
// function bash_end(name, text) { function bash_end(name, text) {
// console.log("-> bash-end("+name+")"); console.log("-> bash-end("+name+")");
// if (!bash_connections[name]) return fail("bash not open"); if (!bash_connections[name]) return;
// bash_connections[name].stdin.close(); bash_connections[name].stdin.close();
// } delete bash_connections[name]; bash_connections[name] = null;
}
socket socket
.on("containers", containers) .on("containers", containers)
.on("images", images)
.on("start", start) .on("start", start)
.on("stop", stop) .on("stop", stop)
.on("pause", pause) .on("pause", pause)
@ -148,8 +191,8 @@ module.exports = function() {
.on("remove", remove) .on("remove", remove)
.on('logs', logs) .on('logs', logs)
.on('bash-start', bash_start) .on('bash-start', bash_start)
.on('bash-input', bash_input); .on('bash-input', bash_input)
//.on('bash-end', bash_end); .on('bash-end', bash_end);
} }

1
nodejs/views/index.ejs
Unescape View File

@ -27,6 +27,7 @@
<img onclick="zoom(1)" src="images/zoom.svg" /> <img onclick="zoom(1)" src="images/zoom.svg" />
<img onclick="rotateviz()" src="images/rotate.svg" /> <img onclick="rotateviz()" src="images/rotate.svg" />
</span> </span>
<span id="close" onclick="showImage()" style="display: none">×</span>
<img id="menuicon" onclick="togglemenu()" onmouseover="$('#menu').show();" src="images/menu.svg" /> <img id="menuicon" onclick="togglemenu()" onmouseover="$('#menu').show();" src="images/menu.svg" />
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save