can now show another page: the grouped charts; several data sets have been marked as detail and are only shown when viewing their group, not the main page
Costa Tsaousis (ktsaou) committed
Apr 13, 2014 at 05:41 UTC
f3e83a631b026adefaff130fc295d5ab897d875d
3 files changed
+234
-35
netdata.c
+22
-10
@@ -2864,7 +2864,7 @@ int do_proc_net_netstat() {
2864
2865
RRD_STATS *st = rrd_stats_find("system.ipv4");
2866
if(!st) {
2867
- st = rrd_stats_create("system", "ipv4", NULL, "system", "IPv4 Bandwidth", "kilobits/s", save_history);
2867
+ st = rrd_stats_create("system", "ipv4", NULL, "ipv4", "IPv4 Bandwidth", "kilobits/s", save_history);
2868
2869
rrd_stats_dimension_add(st, "received", NULL, sizeof(unsigned long long), 0, 8, 1024, RRD_DIMENSION_INCREMENTAL, NULL);
2870
rrd_stats_dimension_add(st, "sent", NULL, sizeof(unsigned long long), 0, -8, 1024, RRD_DIMENSION_INCREMENTAL, NULL);
@@ -2880,6 +2880,7 @@ int do_proc_net_netstat() {
2880
st = rrd_stats_find("ipv4.inerrors");
2881
if(!st) {
2882
st = rrd_stats_create("ipv4", "inerrors", NULL, "ipv4", "IPv4 Input Errors", "packets/s", save_history);
2883
+ st->isdetail = 1;
2884
2885
rrd_stats_dimension_add(st, "noroutes", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
2886
rrd_stats_dimension_add(st, "trunkated", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
@@ -2895,6 +2896,7 @@ int do_proc_net_netstat() {
2896
st = rrd_stats_find("ipv4.mcast");
2897
if(!st) {
2898
st = rrd_stats_create("ipv4", "mcast", NULL, "ipv4", "IPv4 Multicast Bandwidth", "kilobits/s", save_history);
2899
+ st->isdetail = 1;
2900
2901
rrd_stats_dimension_add(st, "received", NULL, sizeof(unsigned long long), 0, 8, 1024, RRD_DIMENSION_INCREMENTAL, NULL);
2902
rrd_stats_dimension_add(st, "sent", NULL, sizeof(unsigned long long), 0, -8, 1024, RRD_DIMENSION_INCREMENTAL, NULL);
@@ -2910,6 +2912,7 @@ int do_proc_net_netstat() {
2912
st = rrd_stats_find("ipv4.bcast");
2913
if(!st) {
2914
st = rrd_stats_create("ipv4", "bcast", NULL, "ipv4", "IPv4 Broadcast Bandwidth", "kilobits/s", save_history);
2915
+ st->isdetail = 1;
2916
2917
rrd_stats_dimension_add(st, "received", NULL, sizeof(unsigned long long), 0, 8, 1024, RRD_DIMENSION_INCREMENTAL, NULL);
2918
rrd_stats_dimension_add(st, "sent", NULL, sizeof(unsigned long long), 0, -8, 1024, RRD_DIMENSION_INCREMENTAL, NULL);
@@ -2925,6 +2928,7 @@ int do_proc_net_netstat() {
2928
st = rrd_stats_find("ipv4.mcastpkts");
2929
if(!st) {
2930
st = rrd_stats_create("ipv4", "mcastpkts", NULL, "ipv4", "IPv4 Multicast Packets", "packets/s", save_history);
2931
+ st->isdetail = 1;
2932
2933
rrd_stats_dimension_add(st, "received", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
2934
rrd_stats_dimension_add(st, "sent", NULL, sizeof(unsigned long long), 0, -1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
@@ -2940,6 +2944,7 @@ int do_proc_net_netstat() {
2944
st = rrd_stats_find("ipv4.bcastpkts");
2945
if(!st) {
2946
st = rrd_stats_create("ipv4", "bcastpkts", NULL, "ipv4", "IPv4 Broadcast Packets", "packets/s", save_history);
2947
+ st->isdetail = 1;
2948
2949
rrd_stats_dimension_add(st, "received", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
2950
rrd_stats_dimension_add(st, "sent", NULL, sizeof(unsigned long long), 0, -1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
@@ -3008,6 +3013,8 @@ int do_proc_net_stat_conntrack() {
3013
}
3014
fclose(fp);
3015
3016
+ // --------------------------------------------------------------------
3017
+
3018
RRD_STATS *st = rrd_stats_find(RRD_TYPE_NET_STAT_CONNTRACK ".sockets");
3019
if(!st) {
3020
st = rrd_stats_create(RRD_TYPE_NET_STAT_CONNTRACK, "sockets", NULL, RRD_TYPE_NET_STAT_CONNTRACK, "Netfilter Connections", "active connections", save_history);
@@ -3019,6 +3026,8 @@ int do_proc_net_stat_conntrack() {
3026
rrd_stats_dimension_set(st, "connections", &aentries, NULL);
3027
rrd_stats_done(st);
3028
3029
+ // --------------------------------------------------------------------
3030
+
3031
st = rrd_stats_find(RRD_TYPE_NET_STAT_CONNTRACK ".new");
3032
if(!st) {
3033
st = rrd_stats_create(RRD_TYPE_NET_STAT_CONNTRACK, "new", NULL, RRD_TYPE_NET_STAT_CONNTRACK, "Netfilter New Connections", "connections/s", save_history);
@@ -3032,9 +3041,12 @@ int do_proc_net_stat_conntrack() {
3041
rrd_stats_dimension_set(st, "dropped", &adrop, NULL);
3042
rrd_stats_done(st);
3043
3044
+ // --------------------------------------------------------------------
3045
+
3046
st = rrd_stats_find(RRD_TYPE_NET_STAT_CONNTRACK ".changes");
3047
if(!st) {
3048
st = rrd_stats_create(RRD_TYPE_NET_STAT_CONNTRACK, "changes", NULL, RRD_TYPE_NET_STAT_CONNTRACK, "Netfilter Connection Changes", "connections/s", save_history);
3049
+ st->isdetail = 1;
3050
3051
rrd_stats_dimension_add(st, "inserted", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
3052
rrd_stats_dimension_add(st, "deleted", NULL, sizeof(unsigned long long), 0, -1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
@@ -3163,7 +3175,7 @@ int do_proc_stat() {
3175
3176
RRD_STATS *st = rrd_stats_find_bytype(type, id);
3177
if(!st) {
3166
- st = rrd_stats_create(type, id, NULL, type, title, "percentage", save_history);
3178
+ st = rrd_stats_create(type, id, NULL, "cpu", title, "percentage", save_history);
3179
3180
long multiplier = 1;
3181
long divisor = 1; // sysconf(_SC_CLK_TCK);
@@ -3206,7 +3218,7 @@ int do_proc_stat() {
3218
3219
RRD_STATS *st = rrd_stats_find_bytype("system", id);
3220
if(!st) {
3209
- st = rrd_stats_create("system", id, NULL, "system", "CPU Interrupts", "interrupts/s", save_history);
3221
+ st = rrd_stats_create("system", id, NULL, "cpu", "CPU Interrupts", "interrupts/s", save_history);
3222
3223
rrd_stats_dimension_add(st, "interrupts", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
3224
}
@@ -3226,7 +3238,7 @@ int do_proc_stat() {
3238
3239
RRD_STATS *st = rrd_stats_find_bytype("system", id);
3240
if(!st) {
3229
- st = rrd_stats_create("system", id, NULL, "system", "CPU Context Switches", "context switches/s", save_history);
3241
+ st = rrd_stats_create("system", id, NULL, "cpu", "CPU Context Switches", "context switches/s", save_history);
3242
3243
rrd_stats_dimension_add(st, "switches", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
3244
}
@@ -3246,7 +3258,7 @@ int do_proc_stat() {
3258
3259
RRD_STATS *st = rrd_stats_find_bytype("system", id);
3260
if(!st) {
3249
- st = rrd_stats_create("system", id, NULL, "system", "New Processes", "new processes/s", save_history);
3261
+ st = rrd_stats_create("system", id, NULL, "cpu", "New Processes", "new processes/s", save_history);
3262
3263
rrd_stats_dimension_add(st, "started", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
3264
}
@@ -3266,7 +3278,7 @@ int do_proc_stat() {
3278
3279
RRD_STATS *st = rrd_stats_find_bytype("system", id);
3280
if(!st) {
3269
- st = rrd_stats_create("system", id, NULL, "system", "CPU Running Processes", "processes running", save_history);
3281
+ st = rrd_stats_create("system", id, NULL, "cpu", "CPU Running Processes", "processes running", save_history);
3282
3283
rrd_stats_dimension_add(st, "running", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_ABSOLUTE, NULL);
3284
}
@@ -3370,7 +3382,7 @@ int do_proc_meminfo() {
3382
3383
RRD_STATS *st = rrd_stats_find("system.ram");
3384
if(!st) {
3373
- st = rrd_stats_create("system", "ram", NULL, "system", "System RAM", "percentage", save_history);
3385
+ st = rrd_stats_create("system", "ram", NULL, "mem", "System RAM", "percentage", save_history);
3386
3387
rrd_stats_dimension_add(st, "buffers", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_PCENT_OVER_ROW_TOTAL, NULL);
3388
rrd_stats_dimension_add(st, "used", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_PCENT_OVER_ROW_TOTAL, NULL);
@@ -3529,7 +3541,7 @@ int do_proc_vmstat() {
3541
3542
RRD_STATS *st = rrd_stats_find("system.swapio");
3543
if(!st) {
3532
- st = rrd_stats_create("system", "swapio", NULL, "system", "Swap I/O", "kilobytes/s", save_history);
3544
+ st = rrd_stats_create("system", "swapio", NULL, "mem", "Swap I/O", "kilobytes/s", save_history);
3545
3546
rrd_stats_dimension_add(st, "in", NULL, sizeof(unsigned long long), 0, sysconf(_SC_PAGESIZE), 1024, RRD_DIMENSION_INCREMENTAL, NULL);
3547
rrd_stats_dimension_add(st, "out", NULL, sizeof(unsigned long long), 0, -sysconf(_SC_PAGESIZE), 1024, RRD_DIMENSION_INCREMENTAL, NULL);
@@ -3542,7 +3554,7 @@ int do_proc_vmstat() {
3554
3555
st = rrd_stats_find("system.io");
3556
if(!st) {
3545
- st = rrd_stats_create("system", "io", NULL, "system", "Disk I/O", "kilobytes/s", save_history);
3557
+ st = rrd_stats_create("system", "io", NULL, "disk", "Disk I/O", "kilobytes/s", save_history);
3558
3559
rrd_stats_dimension_add(st, "in", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
3560
rrd_stats_dimension_add(st, "out", NULL, sizeof(unsigned long long), 0, -1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
@@ -3936,7 +3948,7 @@ void *cpuidlejitter_main(void *ptr)
3948
3949
RRD_STATS *st = rrd_stats_find("system.idlejitter");
3950
if(!st) {
3939
- st = rrd_stats_create("system", "idlejitter", NULL, "system", "CPU Idle Jitter", "microseconds lost/s", save_history);
3951
+ st = rrd_stats_create("system", "idlejitter", NULL, "cpu", "CPU Idle Jitter", "microseconds lost/s", save_history);
3952
3953
rrd_stats_dimension_add(st, "jitter", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_ABSOLUTE, NULL);
3954
}
web/index.html
+208
-21
@@ -38,6 +38,7 @@
38
39
var MODE_THUMBS = 1;
40
var MODE_MAIN = 2;
41
+ var MODE_GROUP_THUMBS = 3;
42
var mode; // one of the MODE_* values
43
44
var mycharts = new Array();
@@ -56,7 +57,7 @@
57
58
mainchart.chart = null;
59
mainchart.chartOptions.width = screenWidth();
59
- mainchart.chartOptions.height = $(window).height() - 200;
60
+ mainchart.chartOptions.height = $(window).height() - 150;
61
if(mainchart.chartOptions.height < 300) mainchart.chartOptions.height = 300;
62
63
mainchart.group = 2;
@@ -70,8 +71,6 @@
71
// initialize the div
72
showChartIsLoading(mainchart.div, mainchart.chartOptions.width, mainchart.chartOptions.height);
73
73
- document.getElementById('maingraph_title').innerHTML = " " + mainchart.title + " ";
74
-
74
// set the radio buttons
75
setMainChartGroupMethod(mainchart.group_method, 'no-refresh');
76
setMainChartMax('normal');
@@ -82,7 +81,10 @@
81
}
82
83
function setMainChart(i) {
85
- mainChart(mycharts[i]);
84
+ if(group_charts)
85
+ mainChart(group_charts[i]);
86
+ else
87
+ mainChart(mycharts[i]);
88
}
89
90
var last_main_chart_max='normal';
@@ -233,11 +235,62 @@
235
}
236
});
237
238
+ width = groupWidth();
239
+ if(group_charts) $.each(group_charts, function(i, c) {
240
+ if(c.enabled && c.chartOptions.width != width) {
241
+ if(c.chart) c.chart.clearChart();
242
+ c.chart = null;
243
+ c.chartOptions.width = width;
244
+ showChartIsLoading(c.div, c.chartOptions.width, c.chartOptions.height);
245
+ c.last_updated = 0;
246
+ }
247
+ });
248
+
249
playGraphs();
250
}
251
252
+ function disableChart(i) {
253
+ var chart = null;
254
+
255
+ if(group_charts)
256
+ chart = group_charts[i];
257
+ else
258
+ chart = mycharts[i];
259
+
260
+ if(chart) {
261
+ chart.enabled = false;
262
+ if(chart.chart) chart.chart.clearChart();
263
+ chart.chart = null;
264
+ }
265
+ var div = document.getElementById(chart.div);
266
+ if(div) div.innerHTML = "";
267
+
268
+ div = document.getElementById(chart.div + "_parent");
269
+ if(div) div.innerHTML = "";
270
+ }
271
+
272
+ function thumbChartActions(i, c, nogroup) {
273
+
274
+ var refinfo = "the chart " + c.name + " is drawing ";
275
+ if(c.group == 1) refinfo += "every single point collected.";
276
+ else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
277
+
278
+ var html = "<div class=\"btn-group btn-group-xs\">"
279
+ + "<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" title=\"" + refinfo + "\" onclick=\"alert('" + refinfo + "');\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>";
280
+
281
+ 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>";
282
+
283
+ 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>"
284
+ + "<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>"
285
+ + "<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>"
286
+ + "</div>";
287
+
288
+ return html;
289
+ }
290
+
291
// load the charts from the server
292
// generate html for the thumbgraphs to support them
293
+ var mainmenu = "";
294
function initCharts() {
295
var width = thumbWidth();
296
var height = TARGET_THUMB_GRAPH_HEIGHT;
@@ -279,7 +332,9 @@
332
333
if(c.enabled) {
334
var j;
282
- var h = "<div class=\"thumbgraph\"><table><tr><td><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.chartOptions.width, c.chartOptions.height) + "</div></td></tr><tr><td align=\"center\"><div class=\"btn-group-xs\"><button type=\"button\" class=\"btn btn-default\" onclick=\"setMainChart(" + i +");\"> select " + c.name + " for zoom </button></div></td></tr></table></div>";
335
+ 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\">"
336
+ + thumbChartActions(i, c)
337
+ + "</td></tr></table></div>";
338
339
// find the categories object for this type
340
for(j = 0; j < categories.length ;j++) {
@@ -291,8 +346,7 @@
346
}
347
348
if(j == categories.length) {
294
- var t = "(as " + c.group_method + " every " + (c.group * c.update_every) + " seconds)";
295
- categories.push({name: c.type, title: c.category, description: t, priority: 0, count: 1, glyphicon: c.glyphicon, html: h});
349
+ categories.push({name: c.type, title: c.category, description: '', priority: 0, count: 1, glyphicon: c.glyphicon, html: h});
350
}
351
}
352
});
@@ -317,13 +371,16 @@
371
return 1;
372
}
373
categories.sort(categoriessort);
320
-
374
+
375
// combine all the htmls into one
376
var allcategories = "<table width=\"100%\">";
377
+ mainmenu = "<ul class=\"nav navbar-nav\"><li class=\"active\"><a href=\"#\">Home</a></li>";
378
$.each(categories, function(i, a) {
379
allcategories += a.html;
380
+ mainmenu += "<li><a href=\"#" + a.name + "\">" + a.title + "</a></li>";
381
});
382
allcategories += "</table>";
383
+ mainmenu += "</ul>";
384
385
thumbsContainer.innerHTML = allcategories;
386
showThumbGraphs();
@@ -332,7 +389,7 @@
389
390
var last_thumb_updated = 0;
391
function thumbChartsRefresh() {
335
- if(mycharts.length == 0 || mode != MODE_THUMBS) return;
392
+ if(mycharts.length == 0 || mode != MODE_THUMBS) triggerRefresh();
393
394
// find a chart to refresh
395
var orig = last_thumb_updated;
@@ -350,6 +407,26 @@
407
if(last_thumb_updated == orig) triggerRefresh();
408
}
409
410
+ var last_group_updated = 0;
411
+ function groupChartsRefresh() {
412
+ if(!group_charts || group_charts.length == 0 || mode != MODE_GROUP_THUMBS) triggerRefresh();
413
+
414
+ // find a chart to refresh
415
+ var orig = last_group_updated;
416
+ last_group_updated++;
417
+ if(last_group_updated >= group_charts.length) last_group_updated = 0;
418
+
419
+ while(last_group_updated != orig) {
420
+ if(refreshChart(group_charts[last_group_updated], chartsRefresh)) break;
421
+
422
+ last_group_updated++;
423
+ if(last_group_updated >= group_charts.length) last_group_updated = 0;
424
+ }
425
+
426
+ // no chart refreshed
427
+ if(last_group_updated == orig) triggerRefresh();
428
+ }
429
+
430
// refresh the proper chart
431
var timeout;
432
function chartsRefresh() {
@@ -360,16 +437,18 @@
437
timeout = null;
438
}
439
363
- if(mode == MODE_THUMBS) thumbChartsRefresh();
364
- else if(mode == MODE_MAIN) mainChartRefresh();
365
- else timeout = setTimeout(triggerRefresh, 1000);
440
+ if(mode == MODE_THUMBS) thumbChartsRefresh();
441
+ else if(mode == MODE_GROUP_THUMBS) groupChartsRefresh();
442
+ else if(mode == MODE_MAIN) mainChartRefresh();
443
+ else timeout = setTimeout(triggerRefresh, 1000);
444
}
445
446
// callback for refreshing the charts later
447
function triggerRefresh() {
370
- if(mode == MODE_THUMBS) timeout = setTimeout(chartsRefresh, 200);
371
- else if(mode == MODE_MAIN) timeout = setTimeout(chartsRefresh, 500);
372
- else timeout = setTimeout(triggerRefresh, 1000);
448
+ if(mode == MODE_THUMBS) timeout = setTimeout(chartsRefresh, 200);
449
+ else if(mode == MODE_GROUP_THUMBS) timeout = setTimeout(chartsRefresh, 200);
450
+ else if(mode == MODE_MAIN) timeout = setTimeout(chartsRefresh, 500);
451
+ else timeout = setTimeout(triggerRefresh, 1000);
452
}
453
454
window.onresize = function(event) {
@@ -380,12 +459,17 @@
459
function showMainGraph() {
460
if(!mainchart) return;
461
383
- thumbsScrollPosition = window.pageYOffset;
462
+ if(!group_charts) thumbsScrollPosition = window.pageYOffset;
463
464
mode = MODE_MAIN;
465
466
document.getElementById('maingraph_container').style.display = 'block';
467
document.getElementById('thumbgraphs_container').style.display = 'none';
468
+ document.getElementById('groupgraphs_container').style.display = 'none';
469
+
470
+ 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>";
471
+
472
+ if(group_charts) clearGroupGraphs();
473
474
playGraphs();
475
}
@@ -395,6 +479,9 @@
479
480
document.getElementById('maingraph_container').style.display = 'none';
481
document.getElementById('thumbgraphs_container').style.display = 'block';
482
+ document.getElementById('groupgraphs_container').style.display = 'none';
483
+
484
+ document.getElementById("main_menu_div").innerHTML = mainmenu;
485
486
if(thumbsScrollPosition) window.scrollTo(0, thumbsScrollPosition);
487
@@ -402,7 +489,95 @@
489
if(mainchart.chart) mainchart.chart.clearChart();
490
mainchart = null;
491
}
492
+ if(group_charts) clearGroupGraphs();
493
+
494
+ playGraphs();
495
+ }
496
+
497
+ function showGroupGraphs() {
498
+ if(!group_charts) return;
499
+
500
+ if(!mainchart) thumbsScrollPosition = window.pageYOffset;
501
+
502
+ mode = MODE_GROUP_THUMBS;
503
+
504
+ document.getElementById('maingraph_container').style.display = 'none';
505
+ document.getElementById('thumbgraphs_container').style.display = 'none';
506
+ document.getElementById('groupgraphs_container').style.display = 'block';
507
+
508
+ 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>";
509
+
510
+ window.scrollTo(0, 0);
511
+
512
+ if(mainchart) {
513
+ if(mainchart.chart) mainchart.chart.clearChart();
514
+ mainchart = null;
515
+ }
516
+
517
+ playGraphs();
518
+ }
519
+
520
+ function groupWidth() {
521
+ var width = screenWidth() / 2;
522
+ if(width < 500) width = screenWidth();
523
+ return width;
524
+ }
525
+
526
+ var group_charts = null;
527
+ function initGroupGraphs(group) {
528
+ var width = groupWidth();
529
+ var height = (($(window).height() - 130) / 3) - 10;
530
+ if(height < TARGET_THUMB_GRAPH_HEIGHT) height = TARGET_THUMB_GRAPH_HEIGHT;
531
+
532
+ var count = 0;
533
+
534
+ if(group_charts) clearGroupGraphs();
535
+ group_charts = new Array();
536
+
537
+ var groupbody = "";
538
+ $.each(mycharts, function(i, c) {
539
+ if(c.group_tag == group) {
540
+ group_charts[count] = [];
541
+ group_charts[count] = $.extend(true, {}, c);
542
+ group_charts[count].div += "_group";
543
+ group_charts[count].enabled = true;
544
+ group_charts[count].chart = null;
545
+ group_charts[count].last_updated = 0;
546
+
547
+ group_charts[count].chartOptions.width = width;
548
+ group_charts[count].chartOptions.height = height;
549
+ count++;
550
+ }
551
+ });
552
+
553
+ function chartssort(a, b) {
554
+ if(a.userpriority < b.userpriority) return -1;
555
+ return 1;
556
+ }
557
+ group_charts.sort(chartssort);
558
+
559
+ var groupbody = "";
560
+ $.each(group_charts, function(i, c) {
561
+ groupbody += "<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\">" + thumbChartActions(i, c, 'nogroup') + "</td></tr></table></div>";
562
+ });
563
+ groupbody += "";
564
+
565
+ document.getElementById("groupgraphs").innerHTML = groupbody;
566
+ showGroupGraphs();
567
+ }
568
+
569
+ function clearGroupGraphs() {
570
+ if(group_charts && group_charts.length) {
571
+ $.each(group_charts, function(i, c) {
572
+ if(c.chart) c.chart.clearChart();
573
+ c.chart = null;
574
+ });
575
+
576
+ group_charts = null;
577
+ }
578
579
+ document.getElementById("groupgroups").innerHTML = "";
580
+ mode = MODE_THUMBS;
581
playGraphs();
582
}
583
@@ -419,9 +594,9 @@
594
<span class="icon-bar"></span>
595
<span class="icon-bar"></span>
596
</button>
422
- <a class="navbar-brand" href="#" id="hostname_id">NetData</a>
597
+ <a class="navbar-brand" href="javascript:showThumbGraphs();" id="hostname_id">NetData</a>
598
</div>
424
- <div class="collapse navbar-collapse">
599
+ <div class="collapse navbar-collapse" id="main_menu_div">
600
<ul class="nav navbar-nav">
601
<li class="active"><a href="#">Home</a></li>
602
<li><a href="#system">System</a></li>
@@ -439,7 +614,6 @@
614
615
<div class="container graphs" id="maingraph_container" style="display: none">
616
<table>
442
- <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"> ← Back </button></div><a id="maingraph_title" href="#maingraph"><b> Maingraph </b></a></li></ol></td></tr>
617
<tr><td>
618
<div class="maingraph">
619
<table>
@@ -542,9 +716,22 @@
716
</div>
717
</div>
718
545
- <script type='text/javascript'>
546
-
719
+ <div class="container graphs" id="groupgraphs_container">
720
+ <div class="allgraphs" id="groupgraphs">
721
+ <table width="100%">
722
+ <tr><td id="splash" align="center" style="vertical-align:middle">
723
+ <span class="glyphicon glyphicon-off"></span>
724
+ <br/><br/>
725
+ loading charts
726
+ <br/><br/>
727
+ <span class="label label-default">Please wait...</span>
728
+ </h1>
729
+ </td></tr>
730
+ </table>
731
+ </div>
732
+ </div>
733
734
+ <script type='text/javascript'>
735
$(document).ready(function(){
736
document.getElementById('splash').height = $(window).height();
737
web/netdata.js
+4
-4
@@ -217,7 +217,7 @@ function loadCharts(base_url, doNext) {
217
218
// check if the userpriority is IGNORE
219
if(json.charts[i].userpriority == "IGNORE"
220
- // || json.charts[i].isdetail
220
+ || json.charts[i].isdetail
221
)
222
json.charts[i].enabled = false;
223
else
@@ -314,13 +314,13 @@ function loadCharts(base_url, doNext) {
314
break;
315
316
case "tc":
317
- json.charts[i].category = "Quality of Service";
317
+ json.charts[i].category = "QoS";
318
json.charts[i].glyphicon = "glyphicon-random";
319
json.charts[i].group = 15;
320
break;
321
322
case "net":
323
- json.charts[i].category = "Network Interfaces";
323
+ json.charts[i].category = "Network";
324
json.charts[i].glyphicon = "glyphicon-transfer";
325
json.charts[i].group = 5;
326
@@ -349,7 +349,7 @@ function loadCharts(base_url, doNext) {
349
break;
350
351
case "disk":
352
- json.charts[i].category = "Disk I/O";
352
+ json.charts[i].category = "Disks";
353
json.charts[i].glyphicon = "glyphicon-hdd";
354
json.charts[i].group = 5;
355
break;