allow image zoom and rotate

single-host
Marc Wäckerlin 9 years ago
parent 299bf06591
commit e76e556ee6
  1. 7
      html/images.php
  2. 4
      html/index.html.in
  3. 7
      html/overview.php
  4. 69
      html/rotate.svg
  5. 4
      html/servicedock.css
  6. 62
      html/servicedock.js
  7. 64
      html/zoom.svg

@ -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;
}

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

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

Loading…
Cancel
Save