redisign using callback to render and show images

client/servicedock.js

@@ -1,10 +1,23 @@
 var socket = null;
 var docker = null;
-function error(msg) {
+
-  // handle display errors
+function error(msg, data) {
+  $('#error').html('<h1>Error</h1><p>'+(new Date()).toLocaleString()+'</p><p>'+msg+'</p><pre>'+data+'</pre>').show()
 }
+
+function sigstack() {
+  $('#error').hide()
+  var dot = docker.graphics.stack()
+  var svg = docker.graphics.viz(dot, error)
+  $('#stacks').html(svg)
+  $('a#svgStacks').attr('href', 'data:image/svg;base64,'+btoa(svg))
+                  .attr('target', '_blank')
+                  .attr('download', window.location.hostname+'.svg')
+                  .show()
+}
+
 function init() {
   socket = io.connect()
-  docker = new Docker(socket, error, '#containers', '#nodes', '#stacks')
+  docker = new Docker(socket, error, sigstack)
 }
 $(init)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ServiceDock",
-  "version": "2.1.0",
+  "version": "2.1.3",
   "private": true,
   "scripts": {
     "start": "./bin/www"
@@ -10,7 +10,8 @@
     "child_process": "^1.0.2",
     "cookie-parser": "*",
     "debug": "*",
-    "docker.js": "^1.2.2",
+    "docker.js": "^1.4.0",
+    "dockerode": "^2.5.7",
     "express": "*",
     "jquery": "^3.1.1",
     "morgan": "*",

style/style.styl

@@ -1,9 +1,10 @@
-body
+svg
-  padding: 50px
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
-a
-  color: #00B7FF
-  
-#stacks > svg
   width: 100%
-  height: auto
+  height: auto
+
+#error
+  display: none
+  background-color: red
+
+#svgStacks
+  display: none

views/index.pug

@@ -1,5 +1,5 @@
 extends layout
 
 block content
-  h1 ServiceDock
+  div#stacks loading...
-  div#stacks
+  a#svgStacks download image

views/layout.pug

@@ -9,4 +9,6 @@ html
     script(type="text/javascript", src="/socket.io.js")
     script(type="text/javascript", src="/servicedock.js")
   body
-    block content
+    block content
+    footer
+      div#error