Skip to content

Commit 7498bbf

Browse files
author
Jeffrey Lensen
committed
Some tweaking and cleaning. Did a big UI overhaul.
(Bored some inspiration from the Android design guidelines..)
1 parent 96a332f commit 7498bbf

12 files changed

+478
-288
lines changed

‎cluster_view.php

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,54 @@
11
<a name="overview"></a>
22
<a href="#overview">
3-
<h2>Overview</h2>
3+
<div class="block_title">Overview</div>
44
</a>
5-
5+
<div class="graph_block">
66
<?php
7-
$graph_args = "env=$env&z=$z&c=$c&l=$l";
7+
$graph_args = "env=$env&c=$c&l=$l";
88

99
if (isset($g)) { $graph_reports = array($g); }
1010
elseif (isset($m)) { $metric_graph = $m; }
1111
else { $graph_reports = find_dashboards($env, $c); }
1212

13-
$height = $conf['graph_sizes'][$z]['height'];
14-
$width = $conf['graph_sizes'][$z]['width'];
15-
1613
if (isset($m)) {
17-
print print_zoom_graph($graph_args, "m=$metric_graph", $width, $height, $from, $until);
14+
print print_zoom_graph($graph_args, "m=$metric_graph", $z, $from, $until);
1815
}
1916
elseif (isset($graph_reports)) {
2017
foreach ($graph_reports as $graph_report) {
21-
print print_zoom_graph($graph_args, "g=$graph_report", $width, $height, $from, $until);
18+
print print_zoom_graph($graph_args, "g=$graph_report", $z, $from, $until);
2219
}
2320
}
2421
?>
25-
22+
</div>
2623
<a name="hosts"></a>
2724
<a href="#hosts">
28-
<h2>Hosts</h2>
25+
<div class="block_title">Hosts</div>
2926
</a>
3027

3128
<?php
3229
$host_search = json_decode(file_get_contents($conf['graphite_search_url'] . $conf['graphite_prefix'] . "$env.$c.*"), TRUE);
3330
$hosts = $host_search['results'];
3431
natsort($hosts);
32+
if (isset($g)) { print "<div class=\"graph_block\">"; }
3533
foreach ($hosts as $host) {
3634
$host_name = str_replace($conf['graphite_prefix'] . "$env.$c.", "", $host);
3735
if ($host_name == $conf['cluster_hostname']) { continue; }
3836
if (isset($graph_reports)) {
39-
if (!isset($g)) { print "<a href=\"/?$graph_args&h=$host_name&from=$gs&until=$ge\"><h3>$host_name</h3></a>"; }
37+
if (!isset($g)) { print "<a href=\"?$graph_args&h=$host_name&from=$gs&until=$ge\"><div class=\"banner_text\">$host_name</div></a><div class=\"graph_block\">"; }
4038
foreach ($graph_reports as $graph_report) {
4139
$current_graph_args = $graph_args . "&h=$host_name";
42-
print print_graph($current_graph_args, "g=$graph_report", $width, $height, $from, $until);
40+
print print_graph($current_graph_args, "g=$graph_report", $z, $from, $until);
4341
}
44-
if (!isset($g)) { print "<br /><br />"; }
42+
if (!isset($g)) { print "<br /><br /></div>"; }
4543
}
4644
elseif (isset($m)) {
4745
$depth = $conf['host_metric_group_depth'] + 1;
4846
$metric_group_elements = explode(".", $metric_graph, $depth);
4947
array_pop($metric_group_elements);
5048
$metric_group_name = implode(".", $metric_group_elements);
5149
$current_graph_args = $graph_args . "&h=$host_name&dn=$host_name";
52-
print print_graph($current_graph_args, "m=$metric_graph", $width, $height, $from, $until);
50+
print print_graph($current_graph_args, "m=$metric_graph", $z, $from, $until);
5351
}
5452
}
55-
53+
if (isset($g)) { print "</div>"; }
5654
?>

‎env_view.php

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,27 @@
11
<a name="clusters"></a>
22
<a href="#clusters">
3-
<h2>Clusters</h2>
3+
<div class="block_title">Clusters</div>
44
</a>
5-
65
<?php
7-
$graph_args = "env=$env&z=$z";
8-
9-
$height = $conf['graph_sizes'][$z]['height'];
10-
$width = $conf['graph_sizes'][$z]['width'];
6+
$graph_args = "env=$env";
117

128
$cluster_search = json_decode(file_get_contents($conf['graphite_search_url'] . $conf['graphite_prefix'] . "$env.*"), TRUE);
139
$clusters = $cluster_search['results'];
1410
natsort($clusters);
1511
foreach ($clusters as $cluster) {
1612
$cluster_name = str_replace($conf['graphite_prefix'] . "$env.", "", $cluster);
17-
1813
$graph_reports = array();
1914
if (isset($g)) { $graph_reports = array($g); }
2015
else { $graph_reports = find_dashboards($env, $cluster_name); }
2116

22-
if (!isset($g)) { print "<a href=\"/?$graph_args&c=$cluster_name&from=$gs&until=$ge\"><h3>$cluster_name</h3></a>"; }
17+
if (!isset($g)) { print "<a href=\"?$graph_args&c=$cluster_name&from=$gs&until=$ge\"><div class=\"banner_text\">$cluster_name</div></a><div class=\"graph_block\">"; }
2318
foreach ($graph_reports as $graph_report) {
2419
if ( show_on_dashboard($graph_report, $env, $cluster_name) ) {
2520
$current_graph_args = "$graph_args&c=$cluster_name";
26-
print print_graph($current_graph_args, "g=$graph_report", $width, $height, $from, $until);
21+
print print_graph($current_graph_args, "g=$graph_report", $z, $from, $until);
2722
}
2823
}
29-
if (!isset($g)){ print "<br /><br />"; }
24+
if (!isset($g)){ print "<br /><br /></div>"; }
3025
}
3126

3227
?>

‎footer.php

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
2-
<script type="text/javascript" charset="utf-8">
3-
$(function() {
4-
$("img.lazy").lazyload({ threshold : 200, effect: "fadeIn" });
5-
});
6-
</script>
7-
<div id="footer">
8-
Powered by <a href="https://launchpad.net/graphite/" target="_blank">Graphite</a> and <a href="http://collectd.org" target="_blank">Collectd</a> | Created by <a href="https://github.com/lensen" target="_blank">skyler</a>
9-
</div>
10-
</body>
1+
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
2+
<script type="text/javascript" charset="utf-8">
3+
$(function() {
4+
$("img.lazy").lazyload({ threshold : 200, effect: "fadeIn" });
5+
});
6+
</script>
7+
<div id="footer">
8+
Powered by <a href="https://launchpad.net/graphite/" target="_blank">Graphite</a> | Created by <a href="https://github.com/lensen" target="_blank">skyler</a>
9+
</div>
10+
</div>
11+
</body>
1112
</html>

‎functions.php

Lines changed: 72 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
<?php
22

33
#------------------------------------------------------------------------------
4-
# Return a version of the string which is safe for display on a web page.
5-
# Potentially dangerous characters are converted to HTML entities.
6-
# Resulting string is not URL-encoded.
4+
# Functions to make strings compatible
75
function clean_string( $string ) {
86
return htmlentities( $string );
97
}
10-
#------------------------------------------------------------------------------
118
function sanitize ( $string ) {
129
return escapeshellcmd( clean_string( rawurldecode( $string ) ) ) ;
1310
}
14-
1511
function sanitize_datetime ( $dt ) {
1612
if (preg_match("/^(\d{4}[-\/]\d{2}[-\/]\d{2}|\d{2}[-\/]\d{2}[-\/]\d{4}) \d{1,2}:\d{2}/", $dt)) {
1713
return date('H:i_Ymd', strtotime($dt));
@@ -20,12 +16,26 @@ function sanitize_datetime ( $dt ) {
2016
return $dt;
2117
}
2218
}
19+
2320
#------------------------------------------------------------------------------
24-
# If arg is a valid number, return it. Otherwise, return null.
25-
function clean_number( $value ) {
26-
return is_numeric( $value ) ? $value : null;
21+
# Function to print options for dropdown menus
22+
function print_dropdown_menus($options, $choice, $default) {
23+
if ( $default != "" ) {
24+
$option_values = " <option value=\"\">$default</option>\n";
25+
}
26+
foreach ($options as $option) {
27+
if ($option == $choice) {
28+
$selected = "selected=\"selected\"";
29+
}
30+
else {
31+
$selected = "";
32+
}
33+
$option_values .= " <option value=\"$option\" $selected>$option</option>\n";
34+
}
35+
return $option_values;
2736
}
2837

38+
2939
#------------------------------------------------------------------------------
3040
# Function to return graph domainname.
3141
function get_graph_domainname() {
@@ -46,7 +56,7 @@ function build_graphite_series( $config, $host_cluster = "" ) {
4656
// Keep track of stacked items
4757
$stacked = 0;
4858
$pie = 0;
49-
59+
5060
foreach( $config[ 'series' ] as $item ) {
5161
if ( $item['type'] == "stack" )
5262
$stacked++;
@@ -89,44 +99,68 @@ function build_graphite_series( $config, $host_cluster = "" ) {
8999
return $output;
90100
}
91101

92-
function print_graph($args, $metric_report, $width, $height, $from, $until) {
102+
#------------------------------------------------------------------------------
103+
# Functions for printing graph (cards)
104+
function print_graph($args, $metric_report, $graph_size, $from, $until) {
105+
global $conf;
106+
$width = $conf['graph_sizes'][$graph_size]['width'];
107+
$height = $conf['graph_sizes'][$graph_size]['height'];
108+
93109
$graph_html = "
94-
<div style=\"display:inline-block\">
95-
<div style=\"display:inline-block; width:$width;\">
96-
<a href=\"?$args&from=$from&until=$until\">
97-
<img width=\"$width\" height=\"$height\" class=\"lazy\" src=\"img/blank.gif\" data-original=\"". get_graph_domainname() . "/graph.php?$args&$metric_report&from=$from&until=$until\" />
98-
</a>
110+
<div class=\"graph_card\">
111+
<div class=\"graph_img\">
112+
<a href=\"?$args&from=$from&until=$until\">
113+
<img width=\"$width\" height=\"$height\" class=\"lazy\" src=\"img/blank.gif\" data-original=\"". get_graph_domainname() . "/graph.php?$args&$metric_report&z=$graph_size&from=$from&until=$until\" />
114+
</a>
99115
</div>
100-
" . show_graph_buttons("$args&$metric_report", $from, $until) . "</div>";
116+
" . show_graph_buttons("$args&$metric_report", $from, $until) . "</div>";
101117
return $graph_html;
102118
}
103119

104-
function print_zoom_graph($args, $metric_report, $width, $height, $from, $until) {
120+
function print_zoom_graph($args, $metric_report, $graph_size, $from, $until) {
121+
global $conf;
122+
$width = $conf['graph_sizes'][$graph_size]['width'];
123+
$height = $conf['graph_sizes'][$graph_size]['height'];
124+
105125
$graph_html = "
106-
<div style=\"display:inline-block\">
107-
<div style=\"display:inline-block; width:$width;\">
108-
<a href=\"/graph.php?$args&$metric_report&from=$from&until=$until&z=xlarge\">
109-
<img width=\"$width\" height=\"$height\" class=\"lazy\" src=\"img/blank.gif\" data-original=\"". get_graph_domainname() . "/graph.php?$args&$metric_report&from=$from&until=$until\" />
110-
</a>
126+
<div class=\"graph_card\">
127+
<div class=\"graph_img\">
128+
<a href=\"graph.php?$args&$metric_report&from=$from&until=$until&z=xlarge\">
129+
<img width=\"$width\" height=\"$height\" class=\"lazy\" src=\"img/blank.gif\" data-original=\"". get_graph_domainname() . "/graph.php?$args&$metric_report&z=$graph_size&from=$from&until=$until\" />
130+
</a>
111131
</div>
112-
" . show_graph_buttons("$args&$metric_report", $from, $until) . "</div>";
132+
" . show_graph_buttons("$args&$metric_report", $from, $until) . "</div>";
113133
return $graph_html;
114134
}
115135

116136
function show_graph_buttons($args, $from, $until) {
117-
$button_html = "
118-
<div style=\"display:inline-block; width:16px;\">
119-
<a href=\"/graph_all_periods.php?$args\">
120-
<img src=\"img/periods_holo_16.png\" width=\"16\" height=\"16\" title=\"Show periodic graphs\">
121-
</a>
122-
<a href=\"/graph.php?$args&from=$from&until=$until&z=xlarge\">
123-
<img src=\"img/zoom_holo_16.png\" width=\"16\" height=\"16\" title=\"Show XL graph\">
124-
</a>
137+
$button_html = "<div class=\"graph_buttons\">
138+
<a href=\"graph_all_periods.php?$args\">
139+
<img src=\"img/periods_holo_16.png\" width=\"16\" height=\"16\" title=\"Show periodic graphs\">
140+
</a>
141+
<a href=\"graph.php?$args&from=$from&until=$until&z=xlarge\">
142+
<img src=\"img/zoom_holo_16.png\" width=\"16\" height=\"16\" title=\"Show XL graph\">
143+
</a>
125144
</div>
126-
";
145+
";
127146
return $button_html;
128147
}
129148

149+
function print_period_graph($args, $metric_report, $timeframe) {
150+
global $conf;
151+
$width = $conf['graph_sizes']["large"]['width'];
152+
$height = $conf['graph_sizes']["large"]['height'];
153+
154+
$graph_html = "
155+
<div class=\"graph_card\">
156+
<div class=\"graph_img\">
157+
<img width=\"$width\" height=\"$height\" class=\"lazy\" src=\"img/blank.gif\" data-original=\"". get_graph_domainname() . "/graph.php?$args&$metric_report&z=large&st=$timeframe+ago\" />
158+
</div>
159+
</div>
160+
";
161+
return $graph_html;
162+
}
163+
130164

131165
#------------------------------------------------------------------------------
132166
# Finds the max over a set of metric graphs.
@@ -149,6 +183,8 @@ function find_limits($environment, $cluster, $metricname, $start, $end) {
149183
return $max;
150184
}
151185

186+
#------------------------------------------------------------------------------
187+
# Finds dashboards to specific environment/cluster
152188
function find_dashboards($environment, $cluster="") {
153189
global $conf;
154190

@@ -170,6 +206,8 @@ function find_dashboards($environment, $cluster="") {
170206
return $graph_reports;
171207
}
172208

209+
#------------------------------------------------------------------------------
210+
# Determines of report graphs should be shows in this dashboard
173211
function show_on_dashboard($report_name, $environment, $cluster) {
174212
global $conf;
175213

@@ -184,6 +222,8 @@ function show_on_dashboard($report_name, $environment, $cluster) {
184222
return False;
185223
}
186224

225+
#------------------------------------------------------------------------------
226+
# Find graphite metrics matching regex
187227
function find_metrics($search_string, $group_depth=0) {
188228
global $conf;
189229

‎graph_all_periods.php

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,21 @@
1717
if ( $c == "\*" )
1818
$c = "*";
1919

20+
$graph_args = "env=$env&c=$realcluster&h=$realhost";
21+
2022
include_once "./header.php";
2123

2224
print "
2325
<div id=\"container\"><div id=\"menu\"><div id=\"menu_row\">
2426
<div id=\"menu_cell\">
25-
<a href=\"/?env=$env&c=$realcluster&h=$realhost\">Go to $realcluster $realhost overview</a>
27+
<a href=\"?$graph_args\">Go to $realcluster $realhost overview</a>
2628
</div>
2729
</div></div></div>
2830
";
2931

3032
foreach ($conf["graph_all_periods_timeframes"] as $tf) {
3133
$graph_args = get_graph_domainname() . "/graph.php?$graph$metric&env=$env&h=$h&c=$c&st=$tf+ago";
32-
print "<a href=\"$graph_args&z=xlarge\"><img src=\"$graph_args&z=large\" /></a>";
34+
print print_period_graph($graph_args, "$graph$metric", $tf);
3335
}
3436

3537
include_once "./footer.php";

‎header.php

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
<?php
22
$name = "Graphsky";
3-
if (isset($env)) { $title = "| $env"; }
4-
if (isset($c)) { $title = "$title - $c"; }
5-
if (isset($c) && isset($h)) {
6-
if (isset($dn)) { $title = "$title - $dn"; }
7-
else { $title = "$title - $h"; }
8-
}
9-
if (isset($g)) { $title = "$title ($g)"; }
3+
$title_array = array($env,$c,$h,$g);
4+
$title = implode(" > ", array_filter($title_array));
105
?>
116

127
<html>
@@ -19,7 +14,7 @@
1914
<link href="img/favicon.ico" rel="shortcut icon" type="text/x-icon">
2015
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
2116
<script type="text/javascript" src="js/jquery-ui-1.10.2.custom.min.js"></script>
22-
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
17+
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.min.js"></script>
2318
<script type="text/javascript" charset="utf-8">
2419
Image1= new Image(24,24)
2520
Image1.src = "img/calendar_holo_24.png"
@@ -40,16 +35,19 @@
4035
buttonImage: "img/calendar_holo_24.png",
4136
buttonImageOnly: true
4237
});
43-
38+
$(document).ready(function(){
39+
$('a.small_menu_button').click(function() {
40+
$("#small_menu").toggleClass("show");
41+
});
42+
});
4443
});
45-
</script>
46-
47-
<title><?php print "$name $title" ?></title>
44+
</script>
45+
<title><?php print "$name | $title" ?></title>
4846
</head>
49-
<body>
50-
<div id="header">
51-
<div id="header_title">
52-
<?php print "<a href=\"/\">$name</a> $title" ?>
53-
</div>
54-
</div>
55-
47+
<body>
48+
<div id="container">
49+
<div id="header">
50+
<div class="header_text left">
51+
<?php print "<a href=\"/\">$name</a>" ?>
52+
</div>
53+
</div>

0 commit comments

Comments
 (0)