new feature: download and upload historic data, provide view to uploaded data

client/servicedock.js

@@ -1,8 +1,8 @@
 var socket = io.connect()
 var docker = new Docker(socket, error, sigstack, sigcontainer)
 var parameters = docker.graphics.parameters
-var showstack = true
-var showcontainer = true
+var stack = null
+var standalone = null
 
 function showdate() {
   $('#clock').text((new Date()).toLocaleString())
@@ -14,11 +14,22 @@ function error(e) {
   $('#error').html('<h1>Error</h1><p>'+(new Date()).toLocaleString()+'</p><p>'+e.msg+'</p><pre>'+e.data+'</pre>').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')
@@ -26,7 +37,7 @@ function sigstack() {
   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

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",

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

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...

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()