From cdb0a28bb9c79546d429106977cad88d8c005024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20W=C3=A4ckerlin?= <marc@mrw.sh>
Date: Mon, 26 Nov 2018 23:19:34 +0100
Subject: [PATCH] redisign using callback to render and show images

---
 client/servicedock.js | 19 ++++++++++++++++---
 package.json          |  5 +++--
 style/style.styl      | 17 +++++++++--------
 views/index.pug       |  4 ++--
 views/layout.pug      |  4 +++-
 5 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/client/servicedock.js b/client/servicedock.js
index 2bd3ab0..90c2c42 100644
--- a/client/servicedock.js
+++ b/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)
diff --git a/package.json b/package.json
index 3527de9..1e6656c 100644
--- a/package.json
+++ b/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": "*",
diff --git a/style/style.styl b/style/style.styl
index 8e17481..61dc57a 100644
--- a/style/style.styl
+++ b/style/style.styl
@@ -1,9 +1,10 @@
-body
-  padding: 50px
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
-a
-  color: #00B7FF
-  
-#stacks > svg
+svg
   width: 100%
-  height: auto
\ No newline at end of file
+  height: auto
+
+#error
+  display: none
+  background-color: red
+
+#svgStacks
+  display: none
\ No newline at end of file
diff --git a/views/index.pug b/views/index.pug
index 9f1a75d..48c2bbf 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -1,5 +1,5 @@
 extends layout
 
 block content
-  h1 ServiceDock
-  div#stacks
+  div#stacks loading...
+  a#svgStacks download image
\ No newline at end of file
diff --git a/views/layout.pug b/views/layout.pug
index 95cf175..7a5944f 100644
--- a/views/layout.pug
+++ b/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
\ No newline at end of file
+    block content
+    footer
+      div#error
\ No newline at end of file