diff --git a/client/servicedock.js b/client/servicedock.js index 61f00ea..e9b6a10 100644 --- a/client/servicedock.js +++ b/client/servicedock.js @@ -1,22 +1,30 @@ var socket = io.connect() -var docker = new Docker(socket, error, sigstack) +var docker = new Docker(socket, error, sigstack, sigcontainer) var parameters = docker.graphics.parameters +var showstack = true +var showcontainer = true + +function showdate() { + $('#clock').text((new Date()).toLocaleString()) +} function error(e) { + showdate() $('#status').removeClass().addClass('error') $('#error').html('

Error

'+(new Date()).toLocaleString()+'

'+e.msg+'

'+e.data+'
').show() } function sigstack() { - $('#error').hide() - $('#clock').text((new Date()).toLocaleString()) + if (!showstack) return; + showdate() $('#status').removeClass().addClass('wait') var dot = docker.graphics.stack(parameters) $('a#dot').attr('href', 'data:text/vnd.graphviz;base64,'+btoa(dot)) .attr('target', '_blank') .attr('download', window.location.hostname+'.dot') + $('#error').hide() + showdate() try { - $('#clock').text((new Date()).toLocaleString()) var svg = docker.graphics.viz(dot) $('#stacks').html(svg) $('#status').removeClass().addClass('success') @@ -26,7 +34,35 @@ function sigstack() { } catch (e) { error(e) } - $('#clock').text((new Date()).toLocaleString()) + showdate() +} + +function sigcontainer() { + if (!showcontainer) return; + console.log(docker.containers.get()) + showdate() + $('#status').removeClass().addClass('wait') + var dot = docker.graphics.standalone(parameters) + /* + $('a#dot').attr('href', 'data:text/vnd.graphviz;base64,'+btoa(dot)) + .attr('target', '_blank') + .attr('download', window.location.hostname+'.dot') + */ + $('#error').hide() + showdate() + try { + var svg = docker.graphics.viz(dot) + $('#standalone').html(svg) + $('#status').removeClass().addClass('success') + /* + $('a#svg').attr('href', 'data:image/svg;base64,'+btoa(svg)) + .attr('target', '_blank') + .attr('download', window.location.hostname+'.svg') + */ + } catch (e) { + error(e) + } + showdate() } function setParameters() { @@ -41,6 +77,8 @@ else --localStorage.rankdir function init() { + showdate() + $('#status').removeClass().addClass('wait') setParameters() $('#orientation').on('click', () => { setParameters() diff --git a/package.json b/package.json index 4581a7f..c99ac85 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "child_process": "^1.0.2", "cookie-parser": "*", "debug": "*", - "docker.js": "^1.4.10", + "docker.js": "^1.4.12", "dockerode": "^2.5.7", "express": "*", "jquery": "^3.1.1", diff --git a/style/style.styl b/style/style.styl index 51367b6..e0c2eda 100644 --- a/style/style.styl +++ b/style/style.styl @@ -91,7 +91,7 @@ header .top header - position: absolute + position: fixed top: 0 left: 0 width: 100% @@ -108,7 +108,7 @@ header .bottom header - position: absolute + position: fixed bottom: 0 left: 0 width: 100% @@ -126,15 +126,15 @@ header .left header - transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(1em) - position: absolute + position: fixed top: 0 left: 0 width: 100vh height: 2em + transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(1em) #orientation transform: rotate(90deg) - #menu + #menu position: absolute left: -3em transform: rotate(90deg) translate(50%) translate(-2em) @@ -147,7 +147,7 @@ header .right header - position: absolute + position: fixed top: 0 right: 0 width: 100vh @@ -166,6 +166,9 @@ header right: 2em bottom: 0 overflow: auto + +.imagecontainer + padding: 1em #image height: 100% diff --git a/views/index.pug b/views/index.pug index 186f799..0cae4c5 100644 --- a/views/index.pug +++ b/views/index.pug @@ -1,7 +1,9 @@ extends layout block content - div#stacks + div.imagecontainer#stacks div#loading loading... noscript p.error this site requires javascript + div.imagecontainer#standalone + div#loading loading... diff --git a/views/layout.pug b/views/layout.pug index 72a16ff..c7e54cb 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -20,8 +20,8 @@ html a#dot download source div#info div#orientation - div#clock - div#status + div#clock= (new Date()).toLocaleString() + div#status.error main block content footer