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,19 +14,30 @@ 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')
+            .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