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
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 @@
+
+
+
+
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 @@
+
+