allow image zoom and rotate
This commit is contained in:
Marc Wäckerlin
@@ -1,18 +1,14 @@
|
||||
<?php
|
||||
exec("docker images -aq", $res, $ret);
|
||||
if ($ret!=0) {
|
||||
echo 'digraph {';
|
||||
echo ' A [label="Error\nCannot get Docker Images"];';
|
||||
echo ' B [label="Does the Webserver have Docker rights?"];';
|
||||
echo ' A->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;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,6 +18,10 @@
|
||||
<h1>ServiceDock @PACKAGE_VERSION@ - Docker as a Service</h1>
|
||||
<div id="togglemenu">
|
||||
<span id="username">[unknown]</span>
|
||||
<span id="imagetools" style="display: none">
|
||||
<img onclick="zoom(1)" src="zoom.svg" />
|
||||
<img onclick="rotateviz()" src="rotate.svg" />
|
||||
</span>
|
||||
<img id="menuicon" onclick="togglemenu()" onmouseover="$('#menu').show();" src="menu.svg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,14 @@
|
||||
<?php
|
||||
exec("docker ps -aq", $res, $ret);
|
||||
if ($ret!=0) {
|
||||
echo 'digraph {';
|
||||
echo ' A [label="Error\nCannot get Docker Containers"];';
|
||||
echo ' B [label="Does the Webserver have Docker rights?"];';
|
||||
echo ' A->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;
|
||||
}
|
||||
|
||||
|
||||
69
html/rotate.svg
Normal file
69
html/rotate.svg
Normal file
@@ -0,0 +1,69 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="320.00009"
|
||||
height="399.09518"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="rotate.svg"
|
||||
inkscape:export-filename="C:\Documents and Settings\bstawarz\Bureau\Projects\Projet Site\v1.0\rotate.png"
|
||||
inkscape:export-xdpi="90"
|
||||
inkscape:export-ydpi="90">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.49497475"
|
||||
inkscape:cx="298.93872"
|
||||
inkscape:cy="148.35498"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="986"
|
||||
inkscape:window-height="626"
|
||||
inkscape:window-x="795"
|
||||
inkscape:window-y="170"
|
||||
inkscape:window-maximized="0"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-96,-600.56108)">
|
||||
<path
|
||||
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:20;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
|
||||
d="m 257.07809,610.54565 -30.23438,30.25 70.5625,70.5625 -70.5625,70.5625 30.23438,30.25 100.79687,-100.8125 z m -30.03125,81.90625 c -68.98721,13.49148 -121.04688,74.26563 -121.04688,147.20316 0,82.8427 67.15729,150 150,150 82.84272,0 150,-67.1573 150,-150 0,-0.099 1.9e-4,-0.1978 0,-0.2969 l -37.5,0 c 2.6e-4,0.099 0,0.1977 0,0.2969 0,62.132 -50.36796,112.5 -112.5,112.5 -62.13203,0 -112.5,-50.368 -112.5,-112.5 0,-51.78645 53.17878,-133.78172 155.35598,-120.60624 l -52.91848,-7.69067 c 48.80967,-27.7324 28.86366,-28.72649 -18.89062,-18.90625 z"
|
||||
id="path3795"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccccccsssccsssccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -189,8 +189,10 @@ table.docker li+li {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#menuicon {
|
||||
#menuicon, #imagetools img {
|
||||
cursor: pointer;
|
||||
height: 1em;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#menu {
|
||||
|
||||
@@ -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("<h2>Exception Caught:</h2><p>"+e+"<p><pre>"+res.join("\n")+"</pre>");
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
|
||||
64
html/zoom.svg
Normal file
64
html/zoom.svg
Normal file
@@ -0,0 +1,64 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
viewBox="0 -256 1664 1664"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
width="100%"
|
||||
height="100%"
|
||||
sodipodi:docname="zoom.svg">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1545"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.13169643"
|
||||
inkscape:cx="827.66103"
|
||||
inkscape:cy="840.67801"
|
||||
inkscape:window-x="-2"
|
||||
inkscape:window-y="32"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<g
|
||||
transform="matrix(1,0,0,-1,0,1152)"
|
||||
id="g4"
|
||||
style="fill:#ffffff">
|
||||
<path
|
||||
d="m 1024,736 v -64 q 0,-13 -9.5,-22.5 Q 1005,640 992,640 H 768 V 416 q 0,-13 -9.5,-22.5 Q 749,384 736,384 h -64 q -13,0 -22.5,9.5 Q 640,403 640,416 V 640 H 416 q -13,0 -22.5,9.5 Q 384,659 384,672 v 64 q 0,13 9.5,22.5 9.5,9.5 22.5,9.5 h 224 v 224 q 0,13 9.5,22.5 9.5,9.5 22.5,9.5 h 64 q 13,0 22.5,-9.5 Q 768,1005 768,992 V 768 h 224 q 13,0 22.5,-9.5 9.5,-9.5 9.5,-22.5 z m 128,-32 q 0,185 -131.5,316.5 Q 889,1152 704,1152 519,1152 387.5,1020.5 256,889 256,704 256,519 387.5,387.5 519,256 704,256 889,256 1020.5,387.5 1152,519 1152,704 z m 512,-832 q 0,-53 -37.5,-90.5 -37.5,-37.5 -90.5,-37.5 -54,0 -90,38 L 1103,124 Q 924,0 704,0 561,0 430.5,55.5 300,111 205.5,205.5 111,300 55.5,430.5 0,561 0,704 q 0,143 55.5,273.5 55.5,130.5 150,225 94.5,94.5 225,150 130.5,55.5 273.5,55.5 143,0 273.5,-55.5 130.5,-55.5 225,-150 94.5,-94.5 150,-225 Q 1408,847 1408,704 1408,484 1284,305 l 343,-343 q 37,-37 37,-90 z"
|
||||
id="path6"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ffffff" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
Reference in New Issue
Block a user