mainchart options added
Costa Tsaousis (ktsaou) committed
Apr 4, 2014 at 01:40 UTC
23fc76da3dfd0f0a5456ad780c712362a73d0b77
1 file changed
+96
-23
web/index.html
+96
-23
@@ -18,7 +18,7 @@
18
19
<!-- Bootstrap -->
20
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
21
- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
21
+ <!-- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> -->
22
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
23
<link href="/file/theme.css" rel="stylesheet">
24
@@ -33,6 +33,8 @@
33
var TARGET_THUMB_GRAPH_WIDTH = 500; // chart width will range from 0.5 to 1.5 of that
34
var MINIMUM_THUMB_GRAPH_WIDTH = 400; // chart will generally try to be wider than that
35
var TARGET_THUMB_GRAPH_HEIGHT = 220;
36
+ var MAINCHART_MAX_TIME_TO_SHOW = 1200;
37
+ var THUMBS_MAX_TIME_TO_SHOW = 600;
38
39
var MODE_THUMBS = 1;
40
var MODE_MAIN = 2;
@@ -60,27 +62,21 @@
62
mainchart.group = 5;
63
mainchart.div = 'maingraph';
64
mainchart.last_updated = 0;
63
- //mainchart.chartOptions.theme = 'maximized';
64
- //mainchart.chartOptions.titlePosition = 'none';
65
- //mainchart.chartOptions.axisTitlesPosition = 'in';
66
- //mainchart.chartOptions.legend = {position: 'none'};
67
- //mainchart.chartOptions.hAxis.title = null;
68
- //mainchart.chartOptions.hAxis.viewWindowMode = 'maximized';
69
- //mainchart.chartOptions.vAxis.viewWindowMode = 'maximized';
70
-
65
66
if(mainchart.chartOptions.isStacked) mainchart.group = 15;
67
74
- // calculate how many point to show for each chart
75
- mainchart.points_to_show = Math.round(mainchart.entries / mainchart.group) - 1;
76
-
77
- // show max 10 mins of data
78
- if(mainchart.points_to_show * mainchart.group > 600) mainchart.points_to_show = 600 / mainchart.group;
79
-
68
// initialize the div
69
showChartIsLoading(mainchart.div, mainchart.chartOptions.width, mainchart.chartOptions.height);
70
83
- document.getElementById('maingraph_title').innerHTML = " <b> " + mainchart.title + " </b> (as " + mainchart.group_method + " of every " + (mainchart.group * mainchart.update_every) + " seconds)";
71
+ document.getElementById('maingraph_title').innerHTML = " " + mainchart.title + " ";
72
+
73
+ // set the radio buttons
74
+ if(mainchart.group_method == 'average') $('#groupaverage').trigger('click');
75
+ else $('#groupmax').trigger('click');
76
+
77
+ $('#group' + mainchart.group).trigger('click');
78
+
79
+ $('#chartnormal').trigger('click');
80
81
showMainGraph();
82
}
@@ -89,6 +85,42 @@
85
mainChart(mycharts[i]);
86
}
87
88
+ function setMainChartMax(m) {
89
+ if(!mainchart) return;
90
+
91
+ if(m == "maximized") {
92
+ mainchart.chartOptions.theme = 'maximized';
93
+ //mainchart.chartOptions.titlePosition = 'none';
94
+ //mainchart.chartOptions.axisTitlesPosition = 'in';
95
+ //mainchart.chartOptions.legend = {position: 'none'};
96
+ //mainchart.chartOptions.hAxis.title = null;
97
+ //mainchart.chartOptions.hAxis.viewWindowMode = 'maximized';
98
+ //mainchart.chartOptions.vAxis.viewWindowMode = 'maximized';
99
+ }
100
+ else {
101
+ mainchart.chartOptions.theme = null;
102
+ }
103
+ mainchart.last_updated = 0;
104
+ }
105
+
106
+ function setMainChartGroup(g) {
107
+ if(!mainchart) return;
108
+
109
+ mainchart.group = g;
110
+ mainchart.last_updated = 0;
111
+
112
+ chartsRefresh();
113
+ }
114
+
115
+ function setMainChartGroupMethod(g) {
116
+ if(!mainchart) return;
117
+
118
+ mainchart.group_method = g;
119
+ mainchart.last_updated = 0;
120
+
121
+ chartsRefresh();
122
+ }
123
+
124
// refresh the main chart
125
// make sure it gets updated frequently
126
function mainChartRefresh() {
@@ -98,6 +130,11 @@
130
return;
131
}
132
133
+ mainchart.points_to_show = Math.round(mainchart.entries / mainchart.group) - 1;
134
+
135
+ if(mainchart.points_to_show * mainchart.group > MAINCHART_MAX_TIME_TO_SHOW)
136
+ mainchart.points_to_show = MAINCHART_MAX_TIME_TO_SHOW / mainchart.group;
137
+
138
if(!refreshChart(mainchart, triggerRefresh)) triggerRefresh();
139
}
140
@@ -178,7 +215,7 @@
215
c.points_to_show = Math.round(c.entries / c.group) - 1;
216
217
// show max 10 mins of data
181
- if(c.points_to_show * c.group > 600) c.points_to_show = 600 / c.group;
218
+ if(c.points_to_show * c.group > THUMBS_MAX_TIME_TO_SHOW) c.points_to_show = THUMBS_MAX_TIME_TO_SHOW / c.group;
219
220
if(c.enabled) {
221
var j;
@@ -210,7 +247,7 @@
247
else if(a.name == "disk") a.priority = 7;
248
else a.priority = 99;
249
213
- a.html = "<tr><td><ol class=\"breadcrumb graphs\"><li class=\"active\"><span class=\"glyphicon " + a.glyphicon + "\"></span> <a id=\"" + a.name + "\" href=\"#" + a.name + "\"><b>" + a.title + "</b> " + a.description + " </a></li></ol></td></tr><tr><td><div class=\"thumbgraphs\">" + a.html + "</td></tr>";
250
+ a.html = "<tr><td id=\"" + a.name + "\"><ol class=\"breadcrumb graphs\"><li class=\"active\"><span class=\"glyphicon " + a.glyphicon + "\"></span> <a id=\"" + a.name + "\" href=\"#" + a.name + "\"><b>" + a.title + "</b> " + a.description + " </a></li></ol></td></tr><tr><td><div class=\"thumbgraphs\">" + a.html + "</td></tr>";
251
});
252
253
function categoriessort(a, b) {
@@ -309,7 +346,7 @@
346
</head>
347
348
<body role="document">
312
- <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
349
+ <nav id="mynav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
350
<div class="container">
351
<div class="navbar-header">
352
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
@@ -328,20 +365,47 @@
365
<li><a href="#conntrack">Netfilter</a></li>
366
<li><a href="#ipv4">IPv4</a></li>
367
<li><a href="#ipvs">IPVS</a></li>
368
+ <li><a href="#cpu">CPU</a></li>
369
<li><a href="#disk">Disk</a></li>
370
</ul>
371
</div><!--/.nav-collapse -->
372
</div>
335
- </div>
373
+ </nav>
374
375
<div class="container graphs" id="maingraph_container" style="display: none">
376
<table>
339
- <tr><td><ol class="breadcrumb graphs"><li class="active"><a id="maingraph_title" href="#maingraph"><b> Maingraph </b></a></li></ol></td></tr>
377
+ <tr><td><ol class="breadcrumb graphs"><li class="active"><div class="btn-group btn-group-sm"><button type="button" onclick="showThumbGraphs();" class="btn btn-default" data-toggle="tooltip" title="Close this chart and return to the index page."> ← Back </button></div><a id="maingraph_title" href="#maingraph"><b> Maingraph </b></a></li></ol></td></tr>
378
<tr><td>
379
<div class="maingraph">
380
<table>
381
<tr><td><div class="maingraph" id="maingraph"></div></td></tr>
344
- <tr><td align="center"><div class="btn-group"><button type="button" onclick="showThumbGraphs();" class="btn btn-default"> close main graph </button></div></td></tr>
382
+ <tr><td align="center">
383
+ <div class="btn-group">
384
+ <form id="mainchartform">
385
+ <div class="btn-group" data-toggle="buttons">
386
+ <button type="button" class="btn btn-default disabled"> Group </button>
387
+ <label class="btn btn-primary" data-toggle="tooltip" title="show the MAX point among all points grouped"><input type="radio" name="groupmethod" id="groupmax" onChange="setMainChartGroupMethod('max');"><span class="glyphicon glyphicon-signal"></span></label>
388
+ <label class="btn btn-primary" data-toggle="tooltip" title="show the AVERAGE of all points grouped"><input type="radio" name="groupmethod" id="groupaverage" onChange="setMainChartGroupMethod('average');"><span class="glyphicon glyphicon-align-justify"></span></label>
389
+ </div>
390
+ <div class="btn-group" data-toggle="buttons" >
391
+ <label class="btn btn-primary" data-toggle="tooltip" title="do not group points, show the raw data"><input type="radio" name="group" id="group1" onChange="setMainChartGroup(1);">1</label>
392
+ <label class="btn btn-primary" data-toggle="tooltip" title="group in half, show 1 every 2 points of data"><input type="radio" name="group" id="group2" onChange="setMainChartGroup(2);">2</label>
393
+ <label class="btn btn-primary" data-toggle="tooltip" title="group every 5 points of data"><input type="radio" name="group" id="group5" onChange="setMainChartGroup(5);">5</label>
394
+ <label class="btn btn-primary" data-toggle="tooltip" title="group every 10 points of data"><input type="radio" name="group" id="group10" onChange="setMainChartGroup(10);">10</label>
395
+ <label class="btn btn-primary" data-toggle="tooltip" title="group every 15 points of data"><input type="radio" name="group" id="group15" onChange="setMainChartGroup(15);">15</label>
396
+ <label class="btn btn-primary" data-toggle="tooltip" title="group every 20 points of data"><input type="radio" name="group" id="group20" onChange="setMainChartGroup(20);">20</label>
397
+ <label class="btn btn-primary" data-toggle="tooltip" title="group every 30 points of data"><input type="radio" name="group" id="group30" onChange="setMainChartGroup(30);">30</label>
398
+ <label class="btn btn-primary" data-toggle="tooltip" title="group every 45 points of data"><input type="radio" name="group" id="group45" onChange="setMainChartGroup(45);">45</label>
399
+ <label class="btn btn-primary" data-toggle="tooltip" title="group every 60 points of data"><input type="radio" name="group" id="group60" onChange="setMainChartGroup(60);">60</label>
400
+ </div>
401
+ <div class="btn-group" data-toggle="buttons" >
402
+ <button type="button" class="btn btn-default disabled" > Chart </button>
403
+ <label class="btn btn-primary" data-toggle="tooltip" title="NORMAL chart size"><input type="radio" name="chartmax" id="chartnormal" onChange="setMainChartMax('normal');"><span class="glyphicon glyphicon-resize-small"></span></label>
404
+ <label class="btn btn-primary" data-toggle="tooltip" title="MAXIMIZED chart size"><input type="radio" name="chartmax" id="chartmax" onChange="setMainChartMax('maximized');"><span class="glyphicon glyphicon-fullscreen"></span></label>
405
+ </div>
406
+ </form>
407
+ </div>
408
+ </td></tr>
409
</table>
410
</div><!-- /.maingraph -->
411
</td></tr>
@@ -366,5 +430,14 @@
430
</div>
431
</div>
432
369
- <script type="text/javascript">document.getElementById('splash').height = $(window).height();</script>
433
+ <script type='text/javascript'>
434
+
435
+
436
+ $(document).ready(function(){
437
+ document.getElementById('splash').height = $(window).height();
438
+
439
+ $('[data-toggle="tooltip"]').tooltip({'placement': 'top', 'container': 'body'});
440
+ });
441
+
442
+ </script>
443
</html>