replace the ajax expand system by a navigation menu

Signed-off-by: Pim van den Berg <pim@nethuis.nl>
author: xian310 2012-12-21 19:59:39 +0100
committer: Pim van den Berg 2012-12-21 19:59:39 +0100
commit: ea946240c9a5a11d337b7afcc8590870bc18cd84 (patch)
tree: bcd0e0733775b430716ab06b6444aa8ccd6f3b00
parent: type/default: resolve division by zero warning (diff)
download: apt-panopticon_cgp-ea946240c9a5a11d337b7afcc8590870bc18cd84.zip
apt-panopticon_cgp-ea946240c9a5a11d337b7afcc8590870bc18cd84.tar.gz
apt-panopticon_cgp-ea946240c9a5a11d337b7afcc8590870bc18cd84.tar.bz2
apt-panopticon_cgp-ea946240c9a5a11d337b7afcc8590870bc18cd84.tar.xz
4 files changed, 125 insertions, 52 deletions
diff --git a/detail.php b/detail.php
index 503a411..20f250a 100644
--- a/detail.php
+++ b/detail.php
@@ -21,11 +21,29 @@ $width = GET('x');
 $heigth = GET('y');
 $seconds = GET('s');
+if (!$plugin) {
+        $selected_plugins = $CONFIG['overview'];
+}
+else {
+        $selected_plugins = array($plugin);
+}
 html_start();
-printf('<h2><a href="%s">%s</a></h2>'."\n",
+printf('<h2>%s</h2>'."\n", $host);
-        $CONFIG['weburl'].'host.php?h='.htmlentities($host), $host
-);
+$plugins = collectd_plugins($host);
+if(!$plugins) {
+        echo "Unknown host\n";
+        return false;
+}
+plugins_list($host, $CONFIG['overview'], $plugins, $selected_plugins);
+echo '<div class="graphs">';
+plugin_header($host, $plugin);
 $term = array(
        '2hour' => 3600*2,
@@ -38,23 +56,17 @@ $term = array(
 );
 $args = $_GET;
-print "<ul>\n";
+print '<ul class="time-range">' . "\n";
 foreach($term as $key => $s) {
        $args['s'] = $s;
-        printf('<li><a href="%s%s">%s</a></li>'."\n",
+        $selected = selected_timerange($seconds, $s);
-                $CONFIG['weburl'], build_url('detail.php', $args), $key);
+        printf('<li><a %s href="%s%s">%s</a></li>'."\n",
+                $selected, $CONFIG['weburl'], build_url('detail.php', $args), $key);
 }
 print "</ul>\n";
-$plugins = collectd_plugins($host);
-if(!$plugins) {
-        echo "Unknown host\n";
-        return false;
-}
-# show graph
 printf('<img src="%s%s">'."\n", $CONFIG['weburl'], build_url('graph.php', $_GET));
+echo '</div><! .graphs -->';
 html_end();
diff --git a/host.php b/host.php
index 8e3b695..6799123 100644
--- a/host.php
+++ b/host.php
@@ -5,7 +5,14 @@ require_once 'inc/html.inc.php';
 require_once 'inc/collectd.inc.php';
 $host = validate_get(GET('h'), 'host');
-$splugin = validate_get(GET('p'), 'plugin');
+$plugin = validate_get(GET('p'), 'plugin');
+if (!$plugin) {
+        $selected_plugins = $CONFIG['overview'];
+}
+else {
+        $selected_plugins = array($plugin);
+}
 html_start();
@@ -18,29 +25,14 @@ if(!$plugins) {
        return false;
 }
-# first the ones defined in overview
+plugins_list($host, $CONFIG['overview'], $plugins, $selected_plugins);
-foreach($CONFIG['overview'] as $plugin) {
-        if (in_array($plugin, $plugins)) {
-                printf('<div id="%s">'."\n", $plugin);
-                plugin_header($host, $plugin, 0);
-                graphs_from_plugin($host, $plugin);
-                print "</div>\n";
-        }
-}
-# other plugins
+echo '<div class="graphs">';
-foreach($plugins as $plugin) {
+foreach ($selected_plugins as $selected_plugin) {
-        if (!in_array($plugin, $CONFIG['overview'])) {
+        plugin_header($host, $selected_plugin);
-                printf('<div id="%s">'."\n", $plugin);
+        graphs_from_plugin($host, $selected_plugin);
-                if ($splugin == $plugin) {
-                        plugin_header($host, $plugin, 0);
-                        graphs_from_plugin($host, $plugin);
-                } else {
-                        plugin_header($host, $plugin, 1);
-                }
-                print "</div>\n";
-        }
 }
+echo '</div><! .graphs -->';
 html_end();
diff --git a/inc/html.inc.php b/inc/html.inc.php
index 2e71488..f0390ce 100644
--- a/inc/html.inc.php
+++ b/inc/html.inc.php
@@ -13,7 +13,7 @@ function html_start() {
        $path = htmlentities(breadcrumbs());
        echo <<<EOT
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@@ -58,20 +58,55 @@ function html_end() {
 EOT;
 }
-function plugin_header($host, $plugin, $status) {
+function plugin_header($host, $plugin) {
-        global $CONFIG;
+        return printf("<h3><a href='%shost.php?h=%s&p=%s'>%s</a></h3>\n", $CONFIG['weburl'], $host, $plugin, $plugin);
+}
+function plugins_list($host, $overview_plugins, $other_plugins, $selected_plugins = array()) {
+        echo '<div class="plugins">';
+        echo '<h3>Plugins</h3>';
+        echo '<ul>';
+        $selected = selected_overview($selected_plugins);
+        printf("<li><a %s href='%shost.php?h=%s'>%s</a></li>\n", $selected, $CONFIG['weburl'], $host, 'overview');
+        # first the ones defined as ordered
+        foreach($overview_plugins as $plugin) {
+                $selected = selected_plugin($plugin, $selected_plugins);
+                printf("<li><a %s href='%shost.php?h=%s&p=%s'>%s</a></li>\n", $selected, $CONFIG['weburl'], $host, $plugin, $plugin);
+        }
+        # other plugins
+        foreach($other_plugins as $plugin) {
+                if (!in_array($plugin, $overview_plugins)) {
+                        $selected = selected_plugin($plugin, $selected_plugins);
+                        printf("<li><a %s href='%shost.php?h=%s&p=%s'>%s</a></li>\n", $selected, $CONFIG['weburl'], $host, $plugin, $plugin);
+                }
+        }
+        echo '</ul>';
+        echo '</div><! .plugins -->';
+}
+function selected_overview($selected_plugins) {
+        if (count($selected_plugins) > 1) {
+                return 'class="selected"';
+        }
+        return '';
+}
-        if ($status == 1) {
+function selected_plugin($plugin, $selected_plugins) {
-                $f = 'get';
+        if (in_array($plugin, $selected_plugins)) {
-                $i = 'plus';
+                return 'class="selected"';
-                $a = '+';
-        } else {
-                $f = 'rm';
-                $i = 'minus';
-                $a = '-';
        }
+        return '';
+}
-        return printf("<h3><span class=\"point\" onclick=\"javascript:%sP('%s','%s')\"><img src=\"%slayout/%s.gif\" alt=\"[%s]\"> %s</span></h3>\n", $f, $host, $plugin, $CONFIG['weburl'], $i, $a, $plugin);
+function selected_timerange($value1, $value2) {
+        if ($value1 == $value2) {
+                return 'class="selected"';
+        }
+        return '';
 }
 function host_summary($hosts) {
diff --git a/layout/style.css b/layout/style.css
index e478203..f61b0ad 100644
--- a/layout/style.css
+++ b/layout/style.css
@@ -25,8 +25,8 @@ h1 {
 }
 h2 {
-        font-size: 1.5em;
+        font-size: 1.3em;
-        margin: 0.5em 0;
+        margin: 1em 0 0 0;
 }
 h3 {
@@ -43,7 +43,7 @@ a:hover {
 }
 table.summary th {
-        width: 150px;
+        width: 300px;
        font-weight: normal;
        text-align: left;
 }
@@ -68,10 +68,10 @@ img {
 ul {
        margin: 0;
        padding: 0;
+        list-style-type: none;
 }
 li {
-        display: inline;
        margin-left: 10px;
 }
@@ -94,3 +94,37 @@ hr {
        font-weight: bold;
        color: #D50100;
 }
+.graphs {
+        display: inline-block;
+        margin: 0 0 0 20px;
+        width: 83%;
+        vertical-align: top;
+}
+.graphs img {
+        margin: 0 5px 12px 0;
+        vertical-align: top;
+}
+.plugins {
+        display: inline-block;
+        width: 12%;
+}
+.plugins ul > li:first-of-type {
+        display: block;
+        margin-bottom: 0.5em;
+        padding-bottom: 0.5em;
+        border-bottom: 1px dotted #ddd;
+}
+.selected:link, .selected:visited, .selected:active {
+        font-style: italic;
+        color: #4D79B5;
+}
+.time-range li {
+        display: inline-block;
+        margin-bottom: 0.3em;
+}
author	xian310	2012-12-21 19:59:39 +0100
committer	Pim van den Berg	2012-12-21 19:59:39 +0100
commit	ea946240c9a5a11d337b7afcc8590870bc18cd84 (patch)
tree	bcd0e0733775b430716ab06b6444aa8ccd6f3b00
parent	type/default: resolve division by zero warning (diff)
download	apt-panopticon_cgp-ea946240c9a5a11d337b7afcc8590870bc18cd84.zip apt-panopticon_cgp-ea946240c9a5a11d337b7afcc8590870bc18cd84.tar.gz apt-panopticon_cgp-ea946240c9a5a11d337b7afcc8590870bc18cd84.tar.bz2 apt-panopticon_cgp-ea946240c9a5a11d337b7afcc8590870bc18cd84.tar.xz

diff --git a/detail.php b/detail.php index 503a411..20f250a 100644 --- a/detail.php +++ b/detail.php
@@ -21,11 +21,29 @@ $width = GET('x');
21	$heigth = GET('y');	21	$heigth = GET('y');
22	$seconds = GET('s');	22	$seconds = GET('s');
23		23
		24	if (!$plugin) {
		25	$selected_plugins = $CONFIG['overview'];
		26	}
		27	else {
		28	$selected_plugins = array($plugin);
		29	}
		30
24	html_start();	31	html_start();
25		32
26	printf('<h2><a href="%s">%s</a></h2>'."\n",	33	printf('<h2>%s</h2>'."\n", $host);
27	$CONFIG['weburl'].'host.php?h='.htmlentities($host), $host	34
28	);	35	$plugins = collectd_plugins($host);
		36
		37	if(!$plugins) {
		38	echo "Unknown host\n";
		39	return false;
		40	}
		41
		42	plugins_list($host, $CONFIG['overview'], $plugins, $selected_plugins);
		43
		44
		45	echo '<div class="graphs">';
		46	plugin_header($host, $plugin);
29		47
30	$term = array(	48	$term = array(
31	'2hour' => 3600*2,	49	'2hour' => 3600*2,
@@ -38,23 +56,17 @@ $term = array(
38	);	56	);
39		57
40	$args = $_GET;	58	$args = $_GET;
41	print "<ul>\n";	59	print '<ul class="time-range">' . "\n";
42	foreach($term as $key => $s) {	60	foreach($term as $key => $s) {
43	$args['s'] = $s;	61	$args['s'] = $s;
44	printf('<li><a href="%s%s">%s</a></li>'."\n",	62	$selected = selected_timerange($seconds, $s);
45	$CONFIG['weburl'], build_url('detail.php', $args), $key);	63	printf('<li><a %s href="%s%s">%s</a></li>'."\n",
		64	$selected, $CONFIG['weburl'], build_url('detail.php', $args), $key);
46	}	65	}
47	print "</ul>\n";	66	print "</ul>\n";
48		67
49	$plugins = collectd_plugins($host);
50
51	if(!$plugins) {
52	echo "Unknown host\n";
53	return false;
54	}
55
56	# show graph
57	printf('<img src="%s%s">'."\n", $CONFIG['weburl'], build_url('graph.php', $_GET));	68	printf('<img src="%s%s">'."\n", $CONFIG['weburl'], build_url('graph.php', $_GET));
		69	echo '</div><! .graphs -->';
58		70
59	html_end();	71	html_end();
60		72


diff --git a/host.php b/host.php index 8e3b695..6799123 100644 --- a/host.php +++ b/host.php
@@ -5,7 +5,14 @@ require_once 'inc/html.inc.php';
5	require_once 'inc/collectd.inc.php';	5	require_once 'inc/collectd.inc.php';
6		6
7	$host = validate_get(GET('h'), 'host');	7	$host = validate_get(GET('h'), 'host');
8	$splugin = validate_get(GET('p'), 'plugin');	8	$plugin = validate_get(GET('p'), 'plugin');
		9
		10	if (!$plugin) {
		11	$selected_plugins = $CONFIG['overview'];
		12	}
		13	else {
		14	$selected_plugins = array($plugin);
		15	}
9		16
10	html_start();	17	html_start();
11		18
@@ -18,29 +25,14 @@ if(!$plugins) {
18	return false;	25	return false;
19	}	26	}
20		27
21	# first the ones defined in overview	28	plugins_list($host, $CONFIG['overview'], $plugins, $selected_plugins);
22	foreach($CONFIG['overview'] as $plugin) {
23	if (in_array($plugin, $plugins)) {
24	printf('<div id="%s">'."\n", $plugin);
25	plugin_header($host, $plugin, 0);
26	graphs_from_plugin($host, $plugin);
27	print "</div>\n";
28	}
29	}
30		29
31	# other plugins	30	echo '<div class="graphs">';
32	foreach($plugins as $plugin) {	31	foreach ($selected_plugins as $selected_plugin) {
33	if (!in_array($plugin, $CONFIG['overview'])) {	32	plugin_header($host, $selected_plugin);
34	printf('<div id="%s">'."\n", $plugin);	33	graphs_from_plugin($host, $selected_plugin);
35	if ($splugin == $plugin) {
36	plugin_header($host, $plugin, 0);
37	graphs_from_plugin($host, $plugin);
38	} else {
39	plugin_header($host, $plugin, 1);
40	}
41	print "</div>\n";
42	}
43	}	34	}
		35	echo '</div><! .graphs -->';
44		36
45	html_end();	37	html_end();
46		38


diff --git a/inc/html.inc.php b/inc/html.inc.php index 2e71488..f0390ce 100644 --- a/inc/html.inc.php +++ b/inc/html.inc.php
@@ -13,7 +13,7 @@ function html_start() {
13	$path = htmlentities(breadcrumbs());	13	$path = htmlentities(breadcrumbs());
14		14
15	echo <<<EOT	15	echo <<<EOT
16	<!DOCTYPE HTML>	16	<!DOCTYPE html>
17	<html>	17	<html>
18	<head>	18	<head>
19	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	19	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@@ -58,20 +58,55 @@ function html_end() {
58	EOT;	58	EOT;
59	}	59	}
60		60
61	function plugin_header($host, $plugin, $status) {	61	function plugin_header($host, $plugin) {
62	global $CONFIG;	62	return printf("<h3><a href='%shost.php?h=%s&p=%s'>%s</a></h3>\n", $CONFIG['weburl'], $host, $plugin, $plugin);
		63	}
		64
		65	function plugins_list($host, $overview_plugins, $other_plugins, $selected_plugins = array()) {
		66	echo '<div class="plugins">';
		67	echo '<h3>Plugins</h3>';
		68	echo '<ul>';
		69
		70	$selected = selected_overview($selected_plugins);
		71	printf("<li><a %s href='%shost.php?h=%s'>%s</a></li>\n", $selected, $CONFIG['weburl'], $host, 'overview');
		72
		73	# first the ones defined as ordered
		74	foreach($overview_plugins as $plugin) {
		75	$selected = selected_plugin($plugin, $selected_plugins);
		76	printf("<li><a %s href='%shost.php?h=%s&p=%s'>%s</a></li>\n", $selected, $CONFIG['weburl'], $host, $plugin, $plugin);
		77	}
		78
		79	# other plugins
		80	foreach($other_plugins as $plugin) {
		81	if (!in_array($plugin, $overview_plugins)) {
		82	$selected = selected_plugin($plugin, $selected_plugins);
		83	printf("<li><a %s href='%shost.php?h=%s&p=%s'>%s</a></li>\n", $selected, $CONFIG['weburl'], $host, $plugin, $plugin);
		84	}
		85	}
		86
		87	echo '</ul>';
		88	echo '</div><! .plugins -->';
		89	}
		90
		91	function selected_overview($selected_plugins) {
		92	if (count($selected_plugins) > 1) {
		93	return 'class="selected"';
		94	}
		95	return '';
		96	}
63		97
64	if ($status == 1) {	98	function selected_plugin($plugin, $selected_plugins) {
65	$f = 'get';	99	if (in_array($plugin, $selected_plugins)) {
66	$i = 'plus';	100	return 'class="selected"';
67	$a = '+';
68	} else {
69	$f = 'rm';
70	$i = 'minus';
71	$a = '-';
72	}	101	}
		102	return '';
		103	}
73		104
74	return printf("<h3><span class=\"point\" onclick=\"javascript:%sP('%s','%s')\"><img src=\"%slayout/%s.gif\" alt=\"[%s]\"> %s</span></h3>\n", $f, $host, $plugin, $CONFIG['weburl'], $i, $a, $plugin);	105	function selected_timerange($value1, $value2) {
		106	if ($value1 == $value2) {
		107	return 'class="selected"';
		108	}
		109	return '';
75	}	110	}
76		111
77	function host_summary($hosts) {	112	function host_summary($hosts) {


diff --git a/layout/style.css b/layout/style.css index e478203..f61b0ad 100644 --- a/layout/style.css +++ b/layout/style.css
@@ -25,8 +25,8 @@ h1 {
25	}	25	}
26		26
27	h2 {	27	h2 {
28	font-size: 1.5em;	28	font-size: 1.3em;
29	margin: 0.5em 0;	29	margin: 1em 0 0 0;
30	}	30	}
31		31
32	h3 {	32	h3 {
@@ -43,7 +43,7 @@ a:hover {
43	}	43	}
44		44
45	table.summary th {	45	table.summary th {
46	width: 150px;	46	width: 300px;
47	font-weight: normal;	47	font-weight: normal;
48	text-align: left;	48	text-align: left;
49	}	49	}
@@ -68,10 +68,10 @@ img {
68	ul {	68	ul {
69	margin: 0;	69	margin: 0;
70	padding: 0;	70	padding: 0;
		71	list-style-type: none;
71	}	72	}
72		73
73	li {	74	li {
74	display: inline;
75	margin-left: 10px;	75	margin-left: 10px;
76	}	76	}
77		77
@@ -94,3 +94,37 @@ hr {
94	font-weight: bold;	94	font-weight: bold;
95	color: #D50100;	95	color: #D50100;
96	}	96	}
		97
		98	.graphs {
		99	display: inline-block;
		100	margin: 0 0 0 20px;
		101	width: 83%;
		102	vertical-align: top;
		103	}
		104
		105	.graphs img {
		106	margin: 0 5px 12px 0;
		107	vertical-align: top;
		108	}
		109
		110	.plugins {
		111	display: inline-block;
		112	width: 12%;
		113	}
		114
		115	.plugins ul > li:first-of-type {
		116	display: block;
		117	margin-bottom: 0.5em;
		118	padding-bottom: 0.5em;
		119	border-bottom: 1px dotted #ddd;
		120	}
		121
		122	.selected:link, .selected:visited, .selected:active {
		123	font-style: italic;
		124	color: #4D79B5;
		125	}
		126
		127	.time-range li {
		128	display: inline-block;
		129	margin-bottom: 0.3em;
		130	}