'+(new Date()).toLocaleString()+'
'+e.msg+'
'+e.data+'').show() } -function sigstack() { - if (!showstack) return; - showdate() - $('#status').removeClass().addClass('wait') - var dot = docker.graphics.stack(parameters) + +function update() { + var data = { + 'containers': docker.containers.get(), + 'volumes': docker.volumes.get(), + 'nodes': docker.nodes.get(), + 'services': docker.services.get(), + 'tasks': docker.tasks.get() + } + $('a#data').attr('href', 'data:application/json;base64,'+btoa(JSON.stringify(data))) + .attr('target', '_blank') + .attr('download', window.location.hostname+'.json') + var dot = docker.graphics.header(parameters) + if (stack) dot += stack; + if (standalone) dot += standalone; + dot += docker.graphics.footer() $('a#dot').attr('href', 'data:text/vnd.graphviz;base64,'+btoa(dot)) - .attr('target', '_blank') - .attr('download', window.location.hostname+'.dot') + .attr('target', '_blank') + .attr('download', window.location.hostname+'.dot') $('#error').hide() showdate() try { var svg = docker.graphics.viz(dot) - $('#stacks').html(svg) + $('#wizard').html(svg) $('#status').removeClass().addClass('success') $('a#svg').attr('href', 'data:image/svg;base64,'+btoa(svg)) .attr('target', '_blank') @@ -37,32 +48,18 @@ function sigstack() { showdate() } -function sigcontainer() { - if (!showcontainer) return; - console.log(docker.containers.get()) +function sigstack() { 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) - } + stack = docker.graphics.stack() + update() +} + +function sigcontainer() { showdate() + $('#status').removeClass().addClass('wait') + standalone = docker.graphics.standalone() + update() } function setParameters() { @@ -77,12 +74,13 @@ else --localStorage.rankdir function init() { + // status and parameters showdate() $('#status').removeClass().addClass('wait') setParameters() $('#orientation').on('click', () => { setParameters() - sigstack() + update() }) if (localStorage.position) $('body').removeClass().addClass(localStorage.position) @@ -90,6 +88,32 @@ function init() { .on('dragstart', (event) => { event.originalEvent.dataTransfer.setData("text", ""); }) + // restart on click on status + $('#status').on('click', () => { + docker.unpause() + }) + // data file upload + $('#upload').on('change', (ev) => { + for (var i = 0, file; file = ev.currentTarget.files[i]; ++i) { + if (file.type=='application/json') { + var reader = new FileReader() + reader.onload = (e) => { + if (e.target.error) return error('cannot upload file', file); + if (e.target.readyState==0||e.target.readyState==1) return; + try { + var data = JSON.parse(e.target.result) + if (docker.upload(data)) + $('#status').removeClass().addClass('paused') + } catch (e) { + error(e) + } + } + reader.readAsText(file) + $('#upload').val('') + } + } + }) + // drag and drop $('*').on('dragover', (event) => { event.preventDefault() var e = event.originalEvent diff --git a/package.json b/package.json index c99ac85..1e438aa 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "child_process": "^1.0.2", "cookie-parser": "*", "debug": "*", - "docker.js": "^1.4.12", + "docker.js": "^1.4.15", "dockerode": "^2.5.7", "express": "*", "jquery": "^3.1.1", diff --git a/style/style.styl b/style/style.styl index e0c2eda..d01fb43 100644 --- a/style/style.styl +++ b/style/style.styl @@ -36,12 +36,15 @@ header padding: 0 border: 1px solid black z-index: 100 - a + .menu margin: 0 padding: .5em + label::after + content: ':' + padding-right: 1ex &:hover background-color: #eee - a + a + .menu + .menu border-top: 1px solid black &:hover display: block @@ -70,6 +73,10 @@ header &::before content: "✔" color: green + &.paused + &::before + content: "⏯" + color: gray #orientation margin: 0.5em &.lr @@ -131,13 +138,13 @@ header left: 0 width: 100vh height: 2em - transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(1em) + transform-origin: right top + transform: translate(-100%) rotate(270deg) #orientation transform: rotate(90deg) #menu - position: absolute - left: -3em - transform: rotate(90deg) translate(50%) translate(-2em) + transform-origin: top left + transform: rotate(90deg) translate(0, -100%) main position: absolute top: 0 @@ -152,13 +159,13 @@ header right: 0 width: 100vh height: 2em - transform: translate(50%) translate(-1em) rotate(90deg) translate(50%) translate(-1em) + transform-origin: left top + transform: translate(100%) rotate(90deg) #orientation transform: rotate(270deg) #menu - position: absolute - left: -3em - transform: rotate(270deg) translate(-50%) translate(2em) + transform-origin: top left + transform: rotate(270deg) translate(-100%) main position: absolute top: 0 diff --git a/views/index.pug b/views/index.pug index 0cae4c5..62f0287 100644 --- a/views/index.pug +++ b/views/index.pug @@ -1,9 +1,7 @@ extends layout block content - div.imagecontainer#stacks + div.imagecontainer#wizard 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 c7e54cb..9be7aaf 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -16,8 +16,12 @@ html header#header h1 ServiceDock nav#menu - a#svg download image - a#dot download source + a.menu#svg download image + a.menu#dot download source + a.menu#data download data + div.menu + label(for="upload") upload data + input(type="file", name="upload")#upload div#info div#orientation div#clock= (new Date()).toLocaleString()