From e76e556ee651e9be12954c0a2a71a59bec33567a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20W=C3=A4ckerlin?= Date: Wed, 25 Nov 2015 15:26:26 +0000 Subject: [PATCH] allow image zoom and rotate --- html/images.php | 7 ----- html/index.html.in | 4 +++ html/overview.php | 7 ----- html/rotate.svg | 69 ++++++++++++++++++++++++++++++++++++++++++++ html/servicedock.css | 4 ++- html/servicedock.js | 62 +++++++++++++++++++++++++++++++++++++-- html/zoom.svg | 64 ++++++++++++++++++++++++++++++++++++++++ 7 files changed, 199 insertions(+), 18 deletions(-) create mode 100644 html/rotate.svg create mode 100644 html/zoom.svg diff --git a/html/images.php b/html/images.php index 4ac9829..82ec449 100644 --- a/html/images.php +++ b/html/images.php @@ -1,18 +1,14 @@ B [label="Probable\nCause"];'; - echo '}'; return; } exec("docker inspect ".join(" ", $res), $res2, $ret); if ($ret==0) { $images=json_decode(join($res2), true); - echo "digraph {\n"; - echo " rankdir=TB;\n"; foreach ($images as $i) { $name = ""; @@ -42,11 +38,8 @@ if ($ret==0) { } } - echo "}"; } else { - echo 'digraph {'; echo ' A [label="Error\nCannot Inspect Docker Container"];'; - echo '}'; return; } diff --git a/html/index.html.in b/html/index.html.in index 21337a2..75dd6c5 100644 --- a/html/index.html.in +++ b/html/index.html.in @@ -18,6 +18,10 @@

ServiceDock @PACKAGE_VERSION@ - Docker as a Service

[unknown] +
diff --git a/html/overview.php b/html/overview.php index c434fa2..96eae73 100644 --- a/html/overview.php +++ b/html/overview.php @@ -1,18 +1,14 @@ B [label="Probable\nCause"];'; - echo '}'; return; } exec("docker inspect ".join(" ", $res), $res2, $ret); if ($ret==0) { $containers=json_decode(join($res2), true); - echo "digraph {\n"; - echo " rankdir=LR;\n"; foreach ($containers as $c) { $name = preg_replace(',^/,', '', $c['Name']); @@ -82,11 +78,8 @@ if ($ret==0) { echo '"'.$name.'" -> "'.$in.':'.$out.'";',"\n"; } } - echo "}"; } else { - echo 'digraph {'; echo ' A [label="Error\nCannot Inspect Docker Container"];'; - echo '}'; return; } diff --git a/html/rotate.svg b/html/rotate.svg new file mode 100644 index 0000000..9ff3510 --- /dev/null +++ b/html/rotate.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/html/servicedock.css b/html/servicedock.css index cf6dbfc..a2cb4ea 100644 --- a/html/servicedock.css +++ b/html/servicedock.css @@ -189,8 +189,10 @@ table.docker li+li { color: black; } -#menuicon { +#menuicon, #imagetools img { cursor: pointer; + height: 1em; + width: auto; } #menu { diff --git a/html/servicedock.js b/html/servicedock.js index b03c01e..439f09f 100644 --- a/html/servicedock.js +++ b/html/servicedock.js @@ -93,6 +93,7 @@ function togglemenu() { } function about(c) { + $("#imagetools").hide(); $.ajax({url: "about.php", success: function(res) { try { var a = JSON.parse(res); @@ -110,7 +111,58 @@ function about(c) { }); } +var zoomlevel = 0; +function zoom(incr = 0) { + zoomlevel = (zoomlevel+incr)%2; + switch (zoomlevel) { + case 0: { + $("#main svg").css("width", "auto"); + $("#main svg").css("height", "auto"); + $("#main svg").css("max-width", "100%"); + $("#main svg").css("max-height", "100%"); + } break; + case 1: { + $("#main svg").css("width", "100%"); + $("#main svg").css("height", "auto"); + $("#main svg").css("max-width", "100%"); + $("#main svg").css("max-height", "none"); + } break; + case 2: { + $("#main.svg").css("width", "auto"); + $("#main.svg").css("height", "100%"); + $("#main.svg").css("max-width", "none"); + $("#main.svg").css("max-height", "100%"); + } break; + } +} + +var viz = null; +var rankdir = "LR"; +function rotateviz() { + if (!viz) return; + if (rankdir == "LR") + rankdir = "TB"; + else + rankdir = "LR"; + showviz(viz); +} +function showviz(vizpath) { + $("#imagetools").show(); + viz = vizpath; + res = "digraph {\n"+" rankdir="+rankdir+";\n"+viz+"\n}"; + try { + zoomlevel = 0; + status(Viz(res)); + } catch(e) { + (res = res.split("\n")).forEach(function(v, i, a) { + a[i] = ("000"+(i+1)).slice(-3)+": "+v; + }); + status("

Exception Caught:

"+e+"

"+res.join("\n")+"
"); + } +} + function details(c) { + $("#imagetools").hide(); $.ajax({url: "details.php?container="+c, success: function(res) { try { status(res); @@ -124,6 +176,7 @@ function details(c) { } function action(container, action) { + $("#imagetools").hide(); $.ajax({url: "action.php?container="+container+"&action="+action, success: function(res) { success(res); manage(); @@ -134,6 +187,7 @@ function action(container, action) { /** Manage Docker Services */ function manage() { + $("#imagetools").hide(); $.ajax({url: "manage.php", success: function(res) { status(res); }}).fail(function() { @@ -143,9 +197,10 @@ function manage() { /** Show an Overview of all Docker Services */ function overview() { + $("#imagetools").hide(); $.ajax({url: "overview.php", success: function(res) { try { - status(Viz(res)); + showviz(res); } catch(e) { (res = res.split("\n")).forEach(function(v, i, a) { a[i] = ("000"+(i+1)).slice(-3)+": "+v; @@ -159,10 +214,10 @@ function overview() { /** Show an Overview of all Docker Images */ function imgs() { + $("#imagetools").hide(); $.ajax({url: "images.php", success: function(res) { try { - status(Viz(res)); - //status(res); + showviz(res); } catch(e) { (res = res.split("\n")).forEach(function(v, i, a) { a[i] = ("000"+(i+1)).slice(-3)+": "+v; @@ -177,6 +232,7 @@ function imgs() { /// Initial Function: Startup /** Decide whether to login or to create a new user */ function start() { + $("#imagetools").hide(); $("#menu").hide(); $("#username").html(window.location.hostname) try { diff --git a/html/zoom.svg b/html/zoom.svg new file mode 100644 index 0000000..71fe67e --- /dev/null +++ b/html/zoom.svg @@ -0,0 +1,64 @@ + + + + + + image/svg+xml + + + + + + + + + +