cleanup and rewrote the refreshing mechanism to always use one javascript thread
Costa Tsaousis (ktsaou) committed
Apr 13, 2014 at 16:37 UTC
2ec983f32beea7b9680eb4a0571658ee05507287
1 file changed
+312
-244
web/index.html
+312
-244
@@ -44,13 +44,82 @@
44
var mycharts = new Array();
45
var mainchart;
46
47
+ // html for the main menu
48
+ var mainmenu = "";
49
+
50
+
51
+ // ------------------------------------------------------------------------
52
+ // common HTML generation
53
+
54
function chartIsLoadingHTML(width, height) { return "<table><tr><td align=\"center\" width=\"" + width + "\" height=\"" + height + "\" style=\"vertical-align:middle\"><h4><span class=\"glyphicon glyphicon-refresh\"></span><br/><br/>loading chart<br/><br/><span class=\"label label-default\">Please wait...</span></h4></td></tr></table>"; }
55
56
function showChartIsLoading(id, width, height) { document.getElementById(id).innerHTML = chartIsLoadingHTML(width, height); }
57
58
+ function thumbChartActions(i, c, nogroup) {
59
+ var refinfo = "the chart " + c.name + " is drawing ";
60
+ if(c.group == 1) refinfo += "every single point collected.";
61
+ else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
62
+
63
+ var html = "<div class=\"btn-group btn-group\">"
64
+ + "<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" title=\"" + refinfo + "\" onclick=\"alert('" + refinfo + "');\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>";
65
+
66
+ if(!nogroup) {
67
+ var ingroup = 0;
68
+ var ingroup_detail = 0;
69
+
70
+ $.each(mycharts, function(i, d) {
71
+ if(d.group_tag == c.group_tag) {
72
+ ingroup++;
73
+ if(d.isdetail) ingroup_detail++;
74
+ }
75
+ });
76
+
77
+ var hidden = "";
78
+ if(ingroup_detail) hidden = ", including " + ingroup_detail + " charts not shown now";
79
+
80
+ html += "<button type=\"button\" data-toggle=\"tooltip\" title=\"Show all " + ingroup + " charts in group '" + c.group_tag + "'" + hidden + "\" class=\"btn btn-default\" onclick=\"initGroupGraphs('" + c.group_tag +"');\"><span class=\"glyphicon glyphicon-th-large\"></span></button>";
81
+ }
82
+
83
+ html += "<button type=\"button\" data-toggle=\"tooltip\" title=\"show chart '" + c.name + "' in fullscreen\" class=\"btn btn-default\" onclick=\"initMainChartIndex(" + i +");\"><span class=\"glyphicon glyphicon-resize-full\"></span></button>"
84
+ + "<button type=\"button\" data-toggle=\"tooltip\" title=\"set options for chart '" + c.name + "'\" class=\"btn btn-default disabled\" onclick=\"alert('Not implemented yet!');\"><span class=\"glyphicon glyphicon-cog\"></span></button>"
85
+ + "<button type=\"button\" data-toggle=\"tooltip\" title=\"ignore chart '" + c.name + "'\" class=\"btn btn-default\" onclick=\"disableChart(" + i + ");\"><span class=\"glyphicon glyphicon-trash\"></span></button>"
86
+ + "</div>";
87
+
88
+ return html;
89
+ }
90
+
91
+ function disableChart(i) {
92
+ var chart = null;
93
+
94
+ if(group_charts)
95
+ chart = group_charts[i];
96
+ else
97
+ chart = mycharts[i];
98
+
99
+ if(chart) {
100
+ chart.enabled = false;
101
+ if(chart.chart) chart.chart.clearChart();
102
+ chart.chart = null;
103
+ }
104
+ var div = document.getElementById(chart.div);
105
+ if(div) div.innerHTML = "";
106
+
107
+ div = document.getElementById(chart.div + "_parent");
108
+ if(div) div.innerHTML = "";
109
+ }
110
+
111
+ function chartssort(a, b) {
112
+ if(a.userpriority < b.userpriority) return -1;
113
+ return 1;
114
+ }
115
+
116
+
117
+ // ------------------------------------------------------------------------
118
+ // MAINGRAPH = fullscreen view of 1 graph
119
+
120
// copy the chart c to mainchart
121
// switch to main graphs screen
53
- function mainChart(c) {
122
+ function initMainChart(c) {
123
if(mainchart && mainchart.chart) {
124
mainchart.chart.clearChart();
125
mainchart.chart = null;
@@ -80,19 +149,19 @@
149
150
$('#group' + mainchart.group).trigger('click');
151
83
- showMainGraph();
152
+ switchToMainGraph();
153
}
154
86
- function setMainChart(i) {
87
- if(group_charts)
88
- mainChart(group_charts[i]);
89
- else
90
- mainChart(mycharts[i]);
155
+ function initMainChartIndex(i) {
156
+ if(mode == MODE_GROUP_THUMBS)
157
+ initMainChart(group_charts[i]);
158
+ else if(mode == MODE_THUMBS)
159
+ initMainChart(mycharts[i]);
160
}
161
162
var last_main_chart_max='normal';
163
function setMainChartMax(m) {
95
- if(!mainchart) return;
164
+ if(!mainchart || mode != MODE_MAIN) return;
165
166
if(m == 'toggle') {
167
if(last_main_chart_max == 'maximized') m = 'normal';
@@ -118,17 +187,16 @@
187
}
188
189
function setMainChartGroup(g) {
121
- if(!mainchart) return;
190
+ if(!mainchart || mode != MODE_MAIN) return;
191
192
mainchart.group = g;
193
mainchart.last_updated = 0;
125
-
126
- chartsRefresh();
194
+ playGraphs();
195
}
196
197
var last_main_chart_avg = null;
198
function setMainChartGroupMethod(g, norefresh) {
131
- if(!mainchart) return;
199
+ if(!mainchart || mode != MODE_MAIN) return;
200
201
if(g == 'toggle') {
202
if(last_main_chart_avg == 'max') g = 'average';
@@ -141,23 +209,12 @@
209
210
if(!norefresh) {
211
mainchart.last_updated = 0;
144
- chartsRefresh();
212
+ playGraphs();
213
}
214
215
last_main_chart_avg = g;
216
}
217
150
- var stop_refreshing = 1;
151
- function playGraphs() {
152
- stop_refreshing = 0;
153
- $('.mainchart_play_button').button('play');
154
- chartsRefresh();
155
- }
156
- function pauseGraphs() {
157
- stop_refreshing = 1;
158
- $('.mainchart_play_button').button('pause');
159
- }
160
-
218
function setMainChartPlay(p) {
219
if(!mainchart) return;
220
@@ -176,36 +233,16 @@
233
'maxZoomOut': 1,
234
};
235
mainchart.last_updated = 0;
179
- refreshChart(mainchart, pauseGraphs);
236
+
237
+ if(!refreshChart(mainchart, pauseGraphs))
238
+ pauseGraphs();
239
}
240
last_main_chart_play = p;
241
}
242
184
- // refresh the main chart
185
- // make sure it gets updated frequently
186
- function mainChartRefresh() {
187
- if(!mainchart || mode != MODE_MAIN) {
188
- if(mainchart) {
189
- if(mainchart.chart) {
190
- mainchart.chart.clearChart();
191
- mainchart.chart = null;
192
- }
193
- mainchart = null;
194
- }
195
- showThumbGraphs();
196
- return;
197
- }
198
-
199
- mainchart.points_to_show = Math.round(mainchart.entries / mainchart.group) - 1;
200
-
201
- if(mainchart.points_to_show * mainchart.group > MAINCHART_MAX_TIME_TO_SHOW)
202
- mainchart.points_to_show = MAINCHART_MAX_TIME_TO_SHOW / mainchart.group;
243
204
- if(!refreshChart(mainchart, triggerRefresh)) triggerRefresh();
205
-
206
- // FIXME for controlled charts
207
- // showChartWithRange(mainchart);
208
- }
244
+ // ------------------------------------------------------------------------
245
+ // Chart resizing
246
247
function screenWidth() {
248
return (($(window).width() * 0.95) - 40);
@@ -222,6 +259,12 @@
259
return Math.round(cwidth / items) - 1;
260
}
261
262
+ function groupWidth() {
263
+ var width = screenWidth() / 2;
264
+ if(width < 500) width = screenWidth();
265
+ return width;
266
+ }
267
+
268
// resize all charts
269
// if the thumb charts need resize in their width, reset them
270
function resizeCharts() {
@@ -258,222 +301,173 @@
301
playGraphs();
302
}
303
261
- function disableChart(i) {
262
- var chart = null;
304
+ window.onresize = function(event) {
305
+ resizeCharts();
306
+ };
307
264
- if(group_charts)
265
- chart = group_charts[i];
266
- else
267
- chart = mycharts[i];
308
269
- if(chart) {
270
- chart.enabled = false;
271
- if(chart.chart) chart.chart.clearChart();
272
- chart.chart = null;
309
+ // ------------------------------------------------------------------------
310
+ // Core of the thread refreshing the charts
311
+
312
+ var stop_refreshing = 1;
313
+ var last_refresh = 0;
314
+ function playGraphs() {
315
+ if(!stop_refreshing) {
316
+ // check if the thread died due to a javascript error
317
+ var now = new Date().getTime();
318
+ if((now - last_refresh) > 5000) {
319
+ // it died!
320
+ console.log('It seems the refresh thread died. Restarting it.');
321
+ chartsRefresh();
322
+ }
323
+ return;
324
}
274
- var div = document.getElementById(chart.div);
275
- if(div) div.innerHTML = "";
325
277
- div = document.getElementById(chart.div + "_parent");
278
- if(div) div.innerHTML = "";
326
+ stop_refreshing = 0;
327
+ $('.mainchart_play_button').button('play');
328
+ chartsRefresh();
329
}
330
281
- function thumbChartActions(i, c, nogroup) {
282
-
283
- var refinfo = "the chart " + c.name + " is drawing ";
284
- if(c.group == 1) refinfo += "every single point collected.";
285
- else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
286
-
287
- var html = "<div class=\"btn-group btn-group-xs\">"
288
- + "<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" title=\"" + refinfo + "\" onclick=\"alert('" + refinfo + "');\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>";
289
-
290
- if(!nogroup) html += "<button type=\"button\" data-toggle=\"tooltip\" title=\"Show all charts in group '" + c.group_tag + "'\" class=\"btn btn-default\" onclick=\"initGroupGraphs('" + c.group_tag +"');\"><span class=\"glyphicon glyphicon-th\"></span></button>";
291
-
292
- html += "<button type=\"button\" data-toggle=\"tooltip\" title=\"show chart '" + c.name + "' in fullscreen\" class=\"btn btn-default\" onclick=\"setMainChart(" + i +");\"><span class=\"glyphicon glyphicon-resize-full\"></span></button>"
293
- + "<button type=\"button\" data-toggle=\"tooltip\" title=\"set options for chart '" + c.name + "'\" class=\"btn btn-default disabled\" onclick=\"alert('Not implemented yet!');\"><span class=\"glyphicon glyphicon-cog\"></span></button>"
294
- + "<button type=\"button\" data-toggle=\"tooltip\" title=\"ignore chart '" + c.name + "'\" class=\"btn btn-default\" onclick=\"disableChart(" + i + ");\"><span class=\"glyphicon glyphicon-trash\"></span></button>"
295
- + "</div>";
331
+ function pauseGraphs() {
332
+ if(stop_refreshing) return;
333
297
- return html;
334
+ stop_refreshing = 1;
335
+ $('.mainchart_play_button').button('pause');
336
}
337
300
- // load the charts from the server
301
- // generate html for the thumbgraphs to support them
302
- var mainmenu = "";
303
- function initCharts() {
304
- var width = thumbWidth();
305
- var height = TARGET_THUMB_GRAPH_HEIGHT;
306
-
307
- loadCharts(null, function(c) {
308
- mycharts = c;
309
-
310
- if(mycharts == null || mycharts.length == 0) {
311
- alert("Cannot load data from server.");
312
- return;
313
- }
314
-
315
- var thumbsContainer = document.getElementById("thumbgraphs");
316
- if(!thumbsContainer) {
317
- alert("Cannot find the thumbsContainer");
318
- return;
319
- }
320
-
321
- function chartssort(a, b) {
322
- if(a.userpriority < b.userpriority) return -1;
323
- return 1;
324
- }
325
- mycharts.sort(chartssort);
326
-
327
- document.getElementById('hostname_id').innerHTML = mycharts[0].hostname;
328
- document.title = mycharts[0].hostname;
329
-
330
- // create an array for grouping all same-type graphs together
331
- var categories = new Array();
332
- $.each(mycharts, function(i, c) {
333
- c.chartOptions.width = width;
334
- c.chartOptions.height = height;
335
-
336
- // calculate how many point to show for each chart
337
- c.points_to_show = Math.round(c.entries / c.group) - 1;
338
+ // refresh the proper chart
339
+ // this is an internal function.
340
+ // never call it directly, or new javascript threads will be spawn
341
+ var timeout;
342
+ function chartsRefresh() {
343
+ if(stop_refreshing) return;
344
339
- // show max 10 mins of data
340
- if(c.points_to_show * c.group > THUMBS_MAX_TIME_TO_SHOW) c.points_to_show = THUMBS_MAX_TIME_TO_SHOW / c.group;
345
+ last_refresh = new Date().getTime();
346
342
- if(c.enabled) {
343
- var j;
344
- var h = "<div class=\"thumbgraph\" id=\"" + c.div + "_parent\"><table><tr><td><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.chartOptions.width, c.chartOptions.height) + "</div></td></tr><tr><td align=\"center\">"
345
- + thumbChartActions(i, c)
346
- + "</td></tr></table></div>";
347
+ if(mode == MODE_THUMBS) thumbChartsRefresh();
348
+ else if(mode == MODE_GROUP_THUMBS) groupChartsRefresh();
349
+ else if(mode == MODE_MAIN) mainChartRefresh();
350
+ else timeout = setTimeout(triggerRefresh, 500);
351
+ }
352
348
- // find the categories object for this type
349
- for(j = 0; j < categories.length ;j++) {
350
- if(categories[j].name == c.type) {
351
- categories[j].html += h;
352
- categories[j].count++;
353
- break;
354
- }
355
- }
353
+ // callback for refreshing the charts later
354
+ // this is an internal function.
355
+ // never call it directly, or new javascript threads will be spawn
356
+ function triggerRefresh() {
357
+ // cleanup has to take place when the charts are not refreshed
358
+ // since the refreshing thread is in this function, it means
359
+ // nothing is being refreshed.
360
+ cleanupCharts();
361
357
- if(j == categories.length) {
358
- categories.push({name: c.type, title: c.category, description: '', priority: 0, count: 1, glyphicon: c.glyphicon, html: h});
359
- }
360
- }
361
- });
362
+ if(mode == MODE_THUMBS) timeout = setTimeout(chartsRefresh, 200);
363
+ else if(mode == MODE_GROUP_THUMBS) timeout = setTimeout(chartsRefresh, 200);
364
+ else if(mode == MODE_MAIN) timeout = setTimeout(chartsRefresh, 200);
365
+ else timeout = setTimeout(triggerRefresh, 500);
366
+ }
367
363
- $.each(categories, function(i, a) {
364
- if(a.name == "system") a.priority = 1;
365
- else if(a.name == "net") a.priority = 2;
366
- else if(a.name == "tc") a.priority = 3;
367
- else if(a.name == "conntrack") a.priority = 4;
368
- else if(a.name == "ipvs") a.priority = 5;
369
- else if(a.name == "ipv4") a.priority = 6;
370
- else if(a.name == "cpu") a.priority = 7;
371
- else if(a.name == "mem") a.priority = 8;
372
- else if(a.name == "disk") a.priority = 9;
373
- else a.priority = 99;
368
+ // refresh the main chart
369
+ // make sure we don't loose the refreshing thread
370
+ function mainChartRefresh() {
371
+ if(mode != MODE_MAIN || !mainchart) {
372
+ triggerRefresh();
373
+ return;
374
+ }
375
375
- 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>";
376
- });
376
+ mainchart.points_to_show = Math.round(mainchart.entries / mainchart.group) - 1;
377
378
- function categoriessort(a, b) {
379
- if(a.priority < b.priority) return -1;
380
- return 1;
381
- }
382
- categories.sort(categoriessort);
383
-
384
- // combine all the htmls into one
385
- var allcategories = "<table width=\"100%\">";
386
- mainmenu = "<ul class=\"nav navbar-nav\"><li class=\"active\"><a href=\"#\">Home</a></li>";
387
- $.each(categories, function(i, a) {
388
- allcategories += a.html;
389
- mainmenu += "<li><a href=\"#" + a.name + "\">" + a.title + "</a></li>";
390
- });
391
- allcategories += "</table>";
392
- mainmenu += "</ul>";
378
+ if(mainchart.points_to_show * mainchart.group > MAINCHART_MAX_TIME_TO_SHOW)
379
+ mainchart.points_to_show = MAINCHART_MAX_TIME_TO_SHOW / mainchart.group;
380
394
- thumbsContainer.innerHTML = allcategories;
395
- showThumbGraphs();
396
- });
381
+ if(!refreshChart(mainchart, triggerRefresh))
382
+ triggerRefresh();
383
}
384
385
+ // refresh the thumb charts
386
+ // make sure we don't loose the refreshing thread
387
var last_thumb_updated = 0;
388
function thumbChartsRefresh() {
401
- if(mycharts.length == 0 || mode != MODE_THUMBS) triggerRefresh();
389
+ if(mycharts.length == 0 || mode != MODE_THUMBS) {
390
+ triggerRefresh();
391
+ return;
392
+ }
393
394
if(last_thumb_updated >= mycharts.length) last_thumb_updated = 0;
395
396
// find a chart to refresh
397
var orig = last_thumb_updated;
398
+ var refreshed = false;
399
+
400
last_thumb_updated++;
401
if(last_thumb_updated >= mycharts.length) last_thumb_updated = 0;
402
403
while(1) {
411
- if(refreshChart(mycharts[last_thumb_updated], chartsRefresh)) break;
404
+ refreshed = refreshChart(mycharts[last_thumb_updated], chartsRefresh);
405
+ if(refreshed) break;
406
407
last_thumb_updated++;
408
if(last_thumb_updated >= mycharts.length) last_thumb_updated = 0;
415
-
409
if(last_thumb_updated == orig) break;
410
}
411
412
// no chart refreshed
420
- if(last_thumb_updated == orig) triggerRefresh();
413
+ if(!refreshed) triggerRefresh();
414
}
415
416
+ // refresh the group charts
417
+ // make sure we don't loose the refreshing thread
418
var last_group_updated = 0;
419
function groupChartsRefresh() {
425
- if(!group_charts || group_charts.length == 0 || mode != MODE_GROUP_THUMBS) triggerRefresh();
420
+ if(!group_charts || group_charts.length == 0 || mode != MODE_GROUP_THUMBS) {
421
+ triggerRefresh();
422
+ return;
423
+ }
424
425
if(last_group_updated >= group_charts.length) last_group_updated = 0;
426
427
// find a chart to refresh
428
var orig = last_group_updated;
429
+ var refreshed = false;
430
+
431
last_group_updated++;
432
if(last_group_updated >= group_charts.length) last_group_updated = 0;
433
434
while(1) {
435
- if(refreshChart(group_charts[last_group_updated], chartsRefresh)) break;
435
+ refreshed = refreshChart(group_charts[last_group_updated], chartsRefresh);
436
+ if(refreshed) break;
437
438
last_group_updated++;
439
if(last_group_updated >= group_charts.length) last_group_updated = 0;
439
-
440
if(last_group_updated == orig) break;
441
}
442
443
// no chart refreshed
444
- if(last_group_updated == orig) triggerRefresh();
444
+ if(!refreshed) triggerRefresh();
445
}
446
447
- // refresh the proper chart
448
- var timeout;
449
- function chartsRefresh() {
450
- if(timeout) {
451
- clearTimeout(timeout);
452
- timeout = null;
453
- }
447
455
- if(stop_refreshing) return;
448
+ // ------------------------------------------------------------------------
449
+ // switch the screen between views
450
+ // these should be called only from initXXXX()
451
457
- if(mode == MODE_THUMBS) thumbChartsRefresh();
458
- else if(mode == MODE_GROUP_THUMBS) groupChartsRefresh();
459
- else if(mode == MODE_MAIN) mainChartRefresh();
460
- else timeout = setTimeout(triggerRefresh, 1000);
461
- }
452
+ // cleanup the previously shown charts
453
+ function cleanupCharts() {
454
+ if(mode != MODE_MAIN && mainchart) {
455
+ if(mainchart.chart) {
456
+ mainchart.chart.clearChart();
457
+ mainchart.chart = null;
458
+ }
459
+ mainchart = null;
460
+ }
461
463
- // callback for refreshing the charts later
464
- function triggerRefresh() {
465
- if(mode == MODE_THUMBS) timeout = setTimeout(chartsRefresh, 200);
466
- else if(mode == MODE_GROUP_THUMBS) timeout = setTimeout(chartsRefresh, 200);
467
- else if(mode == MODE_MAIN) timeout = setTimeout(chartsRefresh, 500);
468
- else timeout = setTimeout(triggerRefresh, 1000);
469
- }
462
+ if(mode != MODE_GROUP_THUMBS && group_charts) {
463
+ clearGroupGraphs();
464
+ }
465
471
- window.onresize = function(event) {
472
- resizeCharts();
473
- };
466
+ // we never cleanup the thumb charts
467
+ }
468
469
var thumbsScrollPosition = null;
476
- function showMainGraph() {
470
+ function switchToMainGraph() {
471
if(!mainchart) return;
472
473
if(!group_charts) thumbsScrollPosition = window.pageYOffset;
@@ -482,15 +476,13 @@
476
document.getElementById('thumbgraphs_container').style.display = 'none';
477
document.getElementById('groupgraphs_container').style.display = 'none';
478
485
- document.getElementById("main_menu_div").innerHTML = "<ul class=\"nav navbar-nav\"><li><a href=\"javascript:showThumbGraphs();\">Back to Home</a></li><li class=\"active\"><a href=\"#\">" + mainchart.title + "</a></li></ul>";
486
-
487
- if(group_charts) clearGroupGraphs();
479
+ document.getElementById("main_menu_div").innerHTML = "<ul class=\"nav navbar-nav\"><li><a href=\"javascript:switchToThumbGraphs();\">Back to Home</a></li><li class=\"active\"><a href=\"#\">" + mainchart.title + "</a></li></ul>";
480
481
mode = MODE_MAIN;
490
- if(stop_refreshing) playGraphs();
482
+ playGraphs();
483
}
484
493
- function showThumbGraphs() {
485
+ function switchToThumbGraphs() {
486
document.getElementById('maingraph_container').style.display = 'none';
487
document.getElementById('thumbgraphs_container').style.display = 'block';
488
document.getElementById('groupgraphs_container').style.display = 'none';
@@ -499,20 +491,12 @@
491
492
if(thumbsScrollPosition) window.scrollTo(0, thumbsScrollPosition);
493
502
- if(mainchart) {
503
- if(mainchart.chart) {
504
- mainchart.chart.clearChart();
505
- mainchart.chart = null;
506
- }
507
- mainchart = null;
508
- }
509
- if(group_charts) clearGroupGraphs();
510
-
494
+ // switch mode
495
mode = MODE_THUMBS;
512
- if(stop_refreshing) playGraphs();
496
+ playGraphs();
497
}
498
515
- function showGroupGraphs() {
499
+ function switchToGroupGraphs() {
500
if(!group_charts) return;
501
502
if(!mainchart) thumbsScrollPosition = window.pageYOffset;
@@ -521,27 +505,17 @@
505
document.getElementById('thumbgraphs_container').style.display = 'none';
506
document.getElementById('groupgraphs_container').style.display = 'block';
507
524
- document.getElementById("main_menu_div").innerHTML = "<ul class=\"nav navbar-nav\"><li><a href=\"javascript:showThumbGraphs();\">Back to Home</a></li><li class=\"active\"><a href=\"#\">" + group_charts[0].group_tag + " charts</a></li></ul>";
508
+ document.getElementById("main_menu_div").innerHTML = "<ul class=\"nav navbar-nav\"><li><a href=\"javascript:switchToThumbGraphs();\">Back to Home</a></li><li class=\"active\"><a href=\"#\">" + group_charts[0].group_tag + " charts</a></li></ul>";
509
510
window.scrollTo(0, 0);
511
528
- if(mainchart) {
529
- if(mainchart.chart) {
530
- mainchart.chart.clearChart();
531
- mainchart.chart = null;
532
- }
533
- mainchart = null;
534
- }
535
-
512
mode = MODE_GROUP_THUMBS;
537
- if(stop_refreshing) playGraphs();
513
+ playGraphs();
514
}
515
540
- function groupWidth() {
541
- var width = screenWidth() / 2;
542
- if(width < 500) width = screenWidth();
543
- return width;
544
- }
516
+
517
+ // ------------------------------------------------------------------------
518
+ // Group Charts
519
520
var group_charts = null;
521
function initGroupGraphs(group) {
@@ -569,11 +543,6 @@
543
count++;
544
}
545
});
572
-
573
- function chartssort(a, b) {
574
- if(a.userpriority < b.userpriority) return -1;
575
- return 1;
576
- }
546
group_charts.sort(chartssort);
547
548
var groupbody = "";
@@ -583,7 +552,7 @@
552
groupbody += "";
553
554
document.getElementById("groupgraphs").innerHTML = groupbody;
586
- showGroupGraphs();
555
+ switchToGroupGraphs();
556
}
557
558
function clearGroupGraphs() {
@@ -599,6 +568,105 @@
568
document.getElementById("groupgraphs").innerHTML = "";
569
}
570
571
+
572
+ // ------------------------------------------------------------------------
573
+ // Global entry point
574
+ // initialize the thumb charts
575
+
576
+ // load the charts from the server
577
+ // generate html for the thumbgraphs to support them
578
+ function initCharts() {
579
+ var width = thumbWidth();
580
+ var height = TARGET_THUMB_GRAPH_HEIGHT;
581
+
582
+ loadCharts(null, function(c) {
583
+ mycharts = c;
584
+
585
+ if(mycharts == null || mycharts.length == 0) {
586
+ alert("Cannot load data from server.");
587
+ return;
588
+ }
589
+
590
+ var thumbsContainer = document.getElementById("thumbgraphs");
591
+ if(!thumbsContainer) {
592
+ alert("Cannot find the thumbsContainer");
593
+ return;
594
+ }
595
+
596
+ mycharts.sort(chartssort);
597
+
598
+ document.getElementById('hostname_id').innerHTML = mycharts[0].hostname;
599
+ document.title = mycharts[0].hostname;
600
+
601
+ // create an array for grouping all same-type graphs together
602
+ var categories = new Array();
603
+ $.each(mycharts, function(i, c) {
604
+ c.chartOptions.width = width;
605
+ c.chartOptions.height = height;
606
+
607
+ // calculate how many point to show for each chart
608
+ c.points_to_show = Math.round(c.entries / c.group) - 1;
609
+
610
+ // show max 10 mins of data
611
+ if(c.points_to_show * c.group > THUMBS_MAX_TIME_TO_SHOW) c.points_to_show = THUMBS_MAX_TIME_TO_SHOW / c.group;
612
+
613
+ if(c.enabled) {
614
+ var j;
615
+ var h = "<div class=\"thumbgraph\" id=\"" + c.div + "_parent\"><table><tr><td><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.chartOptions.width, c.chartOptions.height) + "</div></td></tr><tr><td align=\"center\">"
616
+ + thumbChartActions(i, c)
617
+ + "</td></tr></table></div>";
618
+
619
+ // find the categories object for this type
620
+ for(j = 0; j < categories.length ;j++) {
621
+ if(categories[j].name == c.type) {
622
+ categories[j].html += h;
623
+ categories[j].count++;
624
+ break;
625
+ }
626
+ }
627
+
628
+ if(j == categories.length) {
629
+ categories.push({name: c.type, title: c.category, description: '', priority: 0, count: 1, glyphicon: c.glyphicon, html: h});
630
+ }
631
+ }
632
+ });
633
+
634
+ $.each(categories, function(i, a) {
635
+ if(a.name == "system") a.priority = 1;
636
+ else if(a.name == "net") a.priority = 2;
637
+ else if(a.name == "tc") a.priority = 3;
638
+ else if(a.name == "conntrack") a.priority = 4;
639
+ else if(a.name == "ipvs") a.priority = 5;
640
+ else if(a.name == "ipv4") a.priority = 6;
641
+ else if(a.name == "cpu") a.priority = 7;
642
+ else if(a.name == "mem") a.priority = 8;
643
+ else if(a.name == "disk") a.priority = 9;
644
+ else a.priority = 99;
645
+
646
+ 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>";
647
+ });
648
+
649
+ function categoriessort(a, b) {
650
+ if(a.priority < b.priority) return -1;
651
+ return 1;
652
+ }
653
+ categories.sort(categoriessort);
654
+
655
+ // combine all the htmls into one
656
+ var allcategories = "<table width=\"100%\">";
657
+ mainmenu = "<ul class=\"nav navbar-nav\"><li class=\"active\"><a href=\"#\">Home</a></li>";
658
+ $.each(categories, function(i, a) {
659
+ allcategories += a.html;
660
+ mainmenu += "<li><a href=\"#" + a.name + "\">" + a.title + "</a></li>";
661
+ });
662
+ allcategories += "</table>";
663
+ mainmenu += "</ul>";
664
+
665
+ thumbsContainer.innerHTML = allcategories;
666
+ switchToThumbGraphs();
667
+ });
668
+ }
669
+
670
</script>
671
</head>
672
@@ -612,7 +680,7 @@
680
<span class="icon-bar"></span>
681
<span class="icon-bar"></span>
682
</button>
615
- <a class="navbar-brand" href="javascript:showThumbGraphs();" id="hostname_id">NetData</a>
683
+ <a class="navbar-brand" href="javascript:switchToThumbGraphs();" id="hostname_id">NetData</a>
684
</div>
685
<div class="collapse navbar-collapse" id="main_menu_div">
686
<ul class="nav navbar-nav">
@@ -641,17 +709,17 @@
709
<tr><td align="center">
710
<div class="btn-group">
711
<form id="mainchartform">
644
- <div class="btn-group btn-group-xs" data-toggle="tooltip" title=" click <span class='glyphicon glyphicon-play'></span> to have the graph auto-refresh, or click <span class='glyphicon glyphicon-pause'></span> to pause the graph. When paused the graph can be zoomed and panned horizontally." >
712
+ <div class="btn-group btn-group" data-toggle="tooltip" title=" click <span class='glyphicon glyphicon-play'></span> to have the graph auto-refresh, or click <span class='glyphicon glyphicon-pause'></span> to pause the graph. When paused the graph can be zoomed and panned horizontally." >
713
<button type="button" class="btn btn-primary mainchart_play_button" data-play-text="<span class='glyphicon glyphicon-pause'></span>" data-pause-text="<span class='glyphicon glyphicon-play'></span>" onClick="setMainChartPlay('toggle');">
714
<span class="glyphicon glyphicon-pause"></span>
715
</button>
716
</div>
649
- <div class="btn-group btn-group-xs" data-toggle="tooltip" title="use the maximum ( <span class='glyphicon glyphicon-signal'></span> ) or the average ( <span class='glyphicon glyphicon-align-justify'></span> ) value of grouped points" >
717
+ <div class="btn-group btn-group" data-toggle="tooltip" title="use the maximum ( <span class='glyphicon glyphicon-signal'></span> ) or the average ( <span class='glyphicon glyphicon-align-justify'></span> ) value of grouped points" >
718
<button type="button" class="btn btn-primary mainchart_avg_button" data-max-text="<span class='glyphicon glyphicon-signal'></span>" data-average-text="<span class='glyphicon glyphicon-align-justify'></span>" onClick="setMainChartGroupMethod('toggle');">
719
<span class="glyphicon glyphicon-signal"></span>
720
</button>
721
</div>
654
-<!-- <div class="btn-group btn-group-xs" data-toggle="buttons">
722
+<!-- <div class="btn-group btn-group" data-toggle="buttons">
723
<label class="btn btn-primary" data-toggle="tooltip" title="show the MAX point among all points grouped">
724
<input type="radio" name="groupmethod" id="groupmax" onChange="setMainChartGroupMethod('max');">
725
<span class="glyphicon glyphicon-signal"></span>
@@ -661,7 +729,7 @@
729
<span class="glyphicon glyphicon-align-justify"></span>
730
</label>
731
</div>
664
---> <div class="btn-group btn-group-xs" data-toggle="buttons" >
732
+--> <div class="btn-group btn-group" data-toggle="buttons" >
733
<label class="btn btn-primary" data-toggle="tooltip" title="do not group points, show the raw data">
734
<input type="radio" name="group" id="group1" onChange="setMainChartGroup(1);">1
735
</label>
@@ -692,12 +760,12 @@
760
<input type="radio" name="group" id="group60" onChange="setMainChartGroup(60);">60
761
</label>
762
</div>
695
- <div class="btn-group btn-group-xs" data-toggle="tooltip" title="maximized ( <span class='glyphicon glyphicon-fullscreen'></span> ) or normal ( <span class='glyphicon glyphicon-resize-small'></span> ) view of the graph" >
763
+ <div class="btn-group btn-group" data-toggle="tooltip" title="maximized ( <span class='glyphicon glyphicon-fullscreen'></span> ) or normal ( <span class='glyphicon glyphicon-resize-small'></span> ) view of the graph" >
764
<button type="button" class="btn btn-primary mainchart_max_button" data-maximized-text="<span class='glyphicon glyphicon-resize-small'></span>" data-normal-text="<span class='glyphicon glyphicon-fullscreen'></span>" onClick="setMainChartMax('toggle');">
765
<span class="glyphicon glyphicon-fullscreen"></span>
766
</button>
767
</div>
700
-<!-- <div class="btn-group btn-group-xs" data-toggle="buttons" >
768
+<!-- <div class="btn-group btn-group" data-toggle="buttons" >
769
<label class="btn btn-primary" data-toggle="tooltip" title="NORMAL chart size">
770
<input type="radio" name="chartmax" id="chartnormal" onChange="setMainChartMax('normal');">
771
<span class="glyphicon glyphicon-resize-small"></span>