]> arthur.barton.de Git - netdata.git/commitdiff
can now show another page: the grouped charts; several data sets have been marked...
authorCosta Tsaousis (ktsaou) <costa@tsaousis.gr>
Sun, 13 Apr 2014 02:41:43 +0000 (05:41 +0300)
committerCosta Tsaousis (ktsaou) <costa@tsaousis.gr>
Sun, 13 Apr 2014 02:41:43 +0000 (05:41 +0300)
netdata.c
web/index.html
web/netdata.js

index b0fefcf94f865e8e7379a960aca782836da98727..28065ab255ba1a0ab286de853d47c07799b2a1ef 100755 (executable)
--- a/netdata.c
+++ b/netdata.c
@@ -2864,7 +2864,7 @@ int do_proc_net_netstat() {
 
                        RRD_STATS *st = rrd_stats_find("system.ipv4");
                        if(!st) {
-                               st = rrd_stats_create("system", "ipv4", NULL, "system", "IPv4 Bandwidth", "kilobits/s", save_history);
+                               st = rrd_stats_create("system", "ipv4", NULL, "ipv4", "IPv4 Bandwidth", "kilobits/s", save_history);
 
                                rrd_stats_dimension_add(st, "received", NULL, sizeof(unsigned long long), 0, 8, 1024, RRD_DIMENSION_INCREMENTAL, NULL);
                                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() {
                        st = rrd_stats_find("ipv4.inerrors");
                        if(!st) {
                                st = rrd_stats_create("ipv4", "inerrors", NULL, "ipv4", "IPv4 Input Errors", "packets/s", save_history);
+                               st->isdetail = 1;
 
                                rrd_stats_dimension_add(st, "noroutes", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
                                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() {
                        st = rrd_stats_find("ipv4.mcast");
                        if(!st) {
                                st = rrd_stats_create("ipv4", "mcast", NULL, "ipv4", "IPv4 Multicast Bandwidth", "kilobits/s", save_history);
+                               st->isdetail = 1;
 
                                rrd_stats_dimension_add(st, "received", NULL, sizeof(unsigned long long), 0, 8, 1024, RRD_DIMENSION_INCREMENTAL, NULL);
                                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() {
                        st = rrd_stats_find("ipv4.bcast");
                        if(!st) {
                                st = rrd_stats_create("ipv4", "bcast", NULL, "ipv4", "IPv4 Broadcast Bandwidth", "kilobits/s", save_history);
+                               st->isdetail = 1;
 
                                rrd_stats_dimension_add(st, "received", NULL, sizeof(unsigned long long), 0, 8, 1024, RRD_DIMENSION_INCREMENTAL, NULL);
                                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() {
                        st = rrd_stats_find("ipv4.mcastpkts");
                        if(!st) {
                                st = rrd_stats_create("ipv4", "mcastpkts", NULL, "ipv4", "IPv4 Multicast Packets", "packets/s", save_history);
+                               st->isdetail = 1;
 
                                rrd_stats_dimension_add(st, "received", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
                                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() {
                        st = rrd_stats_find("ipv4.bcastpkts");
                        if(!st) {
                                st = rrd_stats_create("ipv4", "bcastpkts", NULL, "ipv4", "IPv4 Broadcast Packets", "packets/s", save_history);
+                               st->isdetail = 1;
 
                                rrd_stats_dimension_add(st, "received", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
                                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() {
        }
        fclose(fp);
 
+       // --------------------------------------------------------------------
+       
        RRD_STATS *st = rrd_stats_find(RRD_TYPE_NET_STAT_CONNTRACK ".sockets");
        if(!st) {
                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() {
        rrd_stats_dimension_set(st, "connections", &aentries, NULL);
        rrd_stats_done(st);
 
+       // --------------------------------------------------------------------
+
        st = rrd_stats_find(RRD_TYPE_NET_STAT_CONNTRACK ".new");
        if(!st) {
                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() {
        rrd_stats_dimension_set(st, "dropped", &adrop, NULL);
        rrd_stats_done(st);
 
+       // --------------------------------------------------------------------
+
        st = rrd_stats_find(RRD_TYPE_NET_STAT_CONNTRACK ".changes");
        if(!st) {
                st = rrd_stats_create(RRD_TYPE_NET_STAT_CONNTRACK, "changes", NULL, RRD_TYPE_NET_STAT_CONNTRACK, "Netfilter Connection Changes", "connections/s", save_history);
+               st->isdetail = 1;
 
                rrd_stats_dimension_add(st, "inserted", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
                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() {
 
                        RRD_STATS *st = rrd_stats_find_bytype(type, id);
                        if(!st) {
-                               st = rrd_stats_create(type, id, NULL, type, title, "percentage", save_history);
+                               st = rrd_stats_create(type, id, NULL, "cpu", title, "percentage", save_history);
 
                                long multiplier = 1;
                                long divisor = 1; // sysconf(_SC_CLK_TCK);
@@ -3206,7 +3218,7 @@ int do_proc_stat() {
 
                        RRD_STATS *st = rrd_stats_find_bytype("system", id);
                        if(!st) {
-                               st = rrd_stats_create("system", id, NULL, "system", "CPU Interrupts", "interrupts/s", save_history);
+                               st = rrd_stats_create("system", id, NULL, "cpu", "CPU Interrupts", "interrupts/s", save_history);
 
                                rrd_stats_dimension_add(st, "interrupts", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
                        }
@@ -3226,7 +3238,7 @@ int do_proc_stat() {
 
                        RRD_STATS *st = rrd_stats_find_bytype("system", id);
                        if(!st) {
-                               st = rrd_stats_create("system", id, NULL, "system", "CPU Context Switches", "context switches/s", save_history);
+                               st = rrd_stats_create("system", id, NULL, "cpu", "CPU Context Switches", "context switches/s", save_history);
 
                                rrd_stats_dimension_add(st, "switches", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
                        }
@@ -3246,7 +3258,7 @@ int do_proc_stat() {
 
                        RRD_STATS *st = rrd_stats_find_bytype("system", id);
                        if(!st) {
-                               st = rrd_stats_create("system", id, NULL, "system", "New Processes", "new processes/s", save_history);
+                               st = rrd_stats_create("system", id, NULL, "cpu", "New Processes", "new processes/s", save_history);
 
                                rrd_stats_dimension_add(st, "started", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
                        }
@@ -3266,7 +3278,7 @@ int do_proc_stat() {
 
                        RRD_STATS *st = rrd_stats_find_bytype("system", id);
                        if(!st) {
-                               st = rrd_stats_create("system", id, NULL, "system", "CPU Running Processes", "processes running",  save_history);
+                               st = rrd_stats_create("system", id, NULL, "cpu", "CPU Running Processes", "processes running",  save_history);
 
                                rrd_stats_dimension_add(st, "running", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_ABSOLUTE, NULL);
                        }
@@ -3370,7 +3382,7 @@ int do_proc_meminfo() {
 
        RRD_STATS *st = rrd_stats_find("system.ram");
        if(!st) {
-               st = rrd_stats_create("system", "ram", NULL, "system", "System RAM", "percentage", save_history);
+               st = rrd_stats_create("system", "ram", NULL, "mem", "System RAM", "percentage", save_history);
 
                rrd_stats_dimension_add(st, "buffers", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_PCENT_OVER_ROW_TOTAL, NULL);
                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() {
 
        RRD_STATS *st = rrd_stats_find("system.swapio");
        if(!st) {
-               st = rrd_stats_create("system", "swapio", NULL, "system", "Swap I/O", "kilobytes/s", save_history);
+               st = rrd_stats_create("system", "swapio", NULL, "mem", "Swap I/O", "kilobytes/s", save_history);
 
                rrd_stats_dimension_add(st, "in",  NULL, sizeof(unsigned long long), 0, sysconf(_SC_PAGESIZE), 1024, RRD_DIMENSION_INCREMENTAL, NULL);
                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() {
 
        st = rrd_stats_find("system.io");
        if(!st) {
-               st = rrd_stats_create("system", "io", NULL, "system", "Disk I/O", "kilobytes/s", save_history);
+               st = rrd_stats_create("system", "io", NULL, "disk", "Disk I/O", "kilobytes/s", save_history);
 
                rrd_stats_dimension_add(st, "in",  NULL, sizeof(unsigned long long), 0,  1, 1, RRD_DIMENSION_INCREMENTAL, NULL);
                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)
 
                RRD_STATS *st = rrd_stats_find("system.idlejitter");
                if(!st) {
-                       st = rrd_stats_create("system", "idlejitter", NULL, "system", "CPU Idle Jitter", "microseconds lost/s", save_history);
+                       st = rrd_stats_create("system", "idlejitter", NULL, "cpu", "CPU Idle Jitter", "microseconds lost/s", save_history);
 
                        rrd_stats_dimension_add(st, "jitter", NULL, sizeof(unsigned long long), 0, 1, 1, RRD_DIMENSION_ABSOLUTE, NULL);
                }
index 512fbc0eec23399ff06067fd1286bab5076720dc..11a773fa301b8c051a2d725043c85a36cabbe62d 100644 (file)
@@ -38,6 +38,7 @@
 
        var MODE_THUMBS = 1;
        var MODE_MAIN = 2;
+       var MODE_GROUP_THUMBS = 3;
        var mode; // one of the MODE_* values
 
        var mycharts = new Array();
@@ -56,7 +57,7 @@
 
                mainchart.chart = null;
                mainchart.chartOptions.width = screenWidth();
-               mainchart.chartOptions.height = $(window).height() - 200;
+               mainchart.chartOptions.height = $(window).height() - 150;
                if(mainchart.chartOptions.height < 300) mainchart.chartOptions.height = 300;
                
                mainchart.group = 2;
@@ -70,8 +71,6 @@
                // initialize the div
                showChartIsLoading(mainchart.div, mainchart.chartOptions.width, mainchart.chartOptions.height);
 
-               document.getElementById('maingraph_title').innerHTML = " " + mainchart.title + " ";
-
                // set the radio buttons
                setMainChartGroupMethod(mainchart.group_method, 'no-refresh');
                setMainChartMax('normal');
        }
 
        function setMainChart(i) {
-               mainChart(mycharts[i]);
+               if(group_charts) 
+                       mainChart(group_charts[i]);
+               else
+                       mainChart(mycharts[i]);
        }
 
        var last_main_chart_max='normal';
                        }
                });
 
+               width = groupWidth();
+               if(group_charts) $.each(group_charts, function(i, c) {
+                       if(c.enabled && c.chartOptions.width != width) {
+                               if(c.chart) c.chart.clearChart();
+                               c.chart = null;
+                               c.chartOptions.width = width;
+                               showChartIsLoading(c.div, c.chartOptions.width, c.chartOptions.height);
+                               c.last_updated = 0;
+                       }
+               });
+
                playGraphs();
        }
 
+       function disableChart(i) {
+               var chart = null;
+
+               if(group_charts) 
+                       chart = group_charts[i];
+               else
+                       chart = mycharts[i];
+
+               if(chart) {
+                       chart.enabled = false;
+                       if(chart.chart) chart.chart.clearChart();
+                       chart.chart = null;
+               }
+               var div = document.getElementById(chart.div);
+               if(div) div.innerHTML = "";
+
+               div = document.getElementById(chart.div + "_parent");
+               if(div) div.innerHTML = "";
+       }
+
+       function thumbChartActions(i, c, nogroup) {
+
+               var refinfo = "the chart " + c.name + " is drawing ";
+               if(c.group == 1) refinfo += "every single point collected.";
+               else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
+
+               var html = "<div class=\"btn-group btn-group-xs\">"
+               +               "<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" title=\"" + refinfo + "\" onclick=\"alert('" + refinfo + "');\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>";
+
+               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>";
+
+               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>"
+               +               "<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>"
+               +               "<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>"
+               +       "</div>";
+
+               return html;
+       }
+
        // load the charts from the server
        // generate html for the thumbgraphs to support them
+       var mainmenu = "";
        function initCharts() {
                var width = thumbWidth();
                var height = TARGET_THUMB_GRAPH_HEIGHT;
 
                                if(c.enabled) {
                                        var j;
-                                       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 +");\">&nbsp;&nbsp;select " + c.name + " for zoom&nbsp;&nbsp;</button></div></td></tr></table></div>";
+                                       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\">"
+                                       + thumbChartActions(i, c)
+                                       +       "</td></tr></table></div>";
 
                                        // find the categories object for this type
                                        for(j = 0; j < categories.length ;j++) {
                                        }
 
                                        if(j == categories.length) {
-                                               var t = "(as " + c.group_method + " every " + (c.group * c.update_every) + " seconds)";
-                                               categories.push({name: c.type, title: c.category, description: t, priority: 0, count: 1, glyphicon: c.glyphicon, html: h});
+                                               categories.push({name: c.type, title: c.category, description: '', priority: 0, count: 1, glyphicon: c.glyphicon, html: h});
                                        }
                                }
                        });
                                return 1;
                        }
                        categories.sort(categoriessort);
-
+                       
                        // combine all the htmls into one
                        var allcategories = "<table width=\"100%\">";
+                       mainmenu = "<ul class=\"nav navbar-nav\"><li class=\"active\"><a href=\"#\">Home</a></li>";
                        $.each(categories, function(i, a) {
                                allcategories += a.html;
+                               mainmenu += "<li><a href=\"#" + a.name + "\">" + a.title + "</a></li>";
                        });
                        allcategories += "</table>";
+                       mainmenu += "</ul>";
 
                        thumbsContainer.innerHTML = allcategories;
                        showThumbGraphs();
 
        var last_thumb_updated = 0;
        function thumbChartsRefresh() {
-               if(mycharts.length == 0 || mode != MODE_THUMBS) return;
+               if(mycharts.length == 0 || mode != MODE_THUMBS) triggerRefresh();
 
                // find a chart to refresh
                var orig = last_thumb_updated;
                if(last_thumb_updated == orig) triggerRefresh();
        }
 
+       var last_group_updated = 0;
+       function groupChartsRefresh() {
+               if(!group_charts || group_charts.length == 0 || mode != MODE_GROUP_THUMBS) triggerRefresh();
+
+               // find a chart to refresh
+               var orig = last_group_updated;
+               last_group_updated++;
+               if(last_group_updated >= group_charts.length) last_group_updated = 0;
+
+               while(last_group_updated != orig) {
+                       if(refreshChart(group_charts[last_group_updated], chartsRefresh)) break;
+
+                       last_group_updated++;
+                       if(last_group_updated >= group_charts.length) last_group_updated = 0;
+               }
+
+               // no chart refreshed
+               if(last_group_updated == orig) triggerRefresh();
+       }
+
        // refresh the proper chart
        var timeout;
        function chartsRefresh() {
                        timeout = null;
                }
 
-                    if(mode == MODE_THUMBS) thumbChartsRefresh();
-               else if(mode == MODE_MAIN)   mainChartRefresh();
-               else                         timeout = setTimeout(triggerRefresh, 1000);
+                    if(mode == MODE_THUMBS)            thumbChartsRefresh();
+               else if(mode == MODE_GROUP_THUMBS)  groupChartsRefresh();
+               else if(mode == MODE_MAIN)              mainChartRefresh();
+               else                                    timeout = setTimeout(triggerRefresh, 1000);
        }
 
        // callback for refreshing the charts later
        function triggerRefresh() {
-                    if(mode == MODE_THUMBS) timeout = setTimeout(chartsRefresh, 200);
-               else if(mode == MODE_MAIN)   timeout = setTimeout(chartsRefresh, 500);
-               else                         timeout = setTimeout(triggerRefresh, 1000);
+                    if(mode == MODE_THUMBS)            timeout = setTimeout(chartsRefresh, 200);
+               else if(mode == MODE_GROUP_THUMBS)      timeout = setTimeout(chartsRefresh, 200);
+               else if(mode == MODE_MAIN)              timeout = setTimeout(chartsRefresh, 500);
+               else                                    timeout = setTimeout(triggerRefresh, 1000);
        }
 
        window.onresize = function(event) {
        function showMainGraph() {
                if(!mainchart) return;
 
-               thumbsScrollPosition = window.pageYOffset;
+               if(!group_charts) thumbsScrollPosition = window.pageYOffset;
 
                mode = MODE_MAIN;
 
                document.getElementById('maingraph_container').style.display = 'block';
                document.getElementById('thumbgraphs_container').style.display = 'none';
+               document.getElementById('groupgraphs_container').style.display = 'none';
+
+               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>";
+
+               if(group_charts) clearGroupGraphs();
 
                playGraphs();
        }
 
                document.getElementById('maingraph_container').style.display = 'none';
                document.getElementById('thumbgraphs_container').style.display = 'block';
+               document.getElementById('groupgraphs_container').style.display = 'none';
+
+               document.getElementById("main_menu_div").innerHTML = mainmenu;
 
                if(thumbsScrollPosition) window.scrollTo(0, thumbsScrollPosition);
 
                        if(mainchart.chart) mainchart.chart.clearChart();
                        mainchart = null;
                }
+               if(group_charts) clearGroupGraphs();
+
+               playGraphs();
+       }
+
+       function showGroupGraphs() {
+               if(!group_charts) return;
+
+               if(!mainchart) thumbsScrollPosition = window.pageYOffset;
+
+               mode = MODE_GROUP_THUMBS;
+
+               document.getElementById('maingraph_container').style.display = 'none';
+               document.getElementById('thumbgraphs_container').style.display = 'none';
+               document.getElementById('groupgraphs_container').style.display = 'block';
+
+               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>";
+
+               window.scrollTo(0, 0);
+
+               if(mainchart) {
+                       if(mainchart.chart) mainchart.chart.clearChart();
+                       mainchart = null;
+               }
+
+               playGraphs();
+       }
+
+       function groupWidth() {
+               var width = screenWidth() / 2;
+               if(width < 500) width = screenWidth();
+               return width;
+       }
+
+       var group_charts = null;
+       function initGroupGraphs(group) {
+               var width = groupWidth();
+               var height = (($(window).height() - 130) / 3) - 10;
+               if(height < TARGET_THUMB_GRAPH_HEIGHT) height = TARGET_THUMB_GRAPH_HEIGHT;
+
+               var count = 0;
+               
+               if(group_charts) clearGroupGraphs();
+               group_charts = new Array();
+
+               var groupbody = "";
+               $.each(mycharts, function(i, c) {
+                       if(c.group_tag == group) {
+                               group_charts[count] = [];
+                               group_charts[count] = $.extend(true, {}, c);
+                               group_charts[count].div += "_group";
+                               group_charts[count].enabled = true;
+                               group_charts[count].chart = null;
+                               group_charts[count].last_updated = 0;
+
+                               group_charts[count].chartOptions.width = width;
+                               group_charts[count].chartOptions.height = height;
+                               count++;
+                       }
+               });
+
+               function chartssort(a, b) {
+                       if(a.userpriority < b.userpriority) return -1;
+                       return 1;
+               }
+               group_charts.sort(chartssort);
+
+               var groupbody = "";
+               $.each(group_charts, function(i, c) {
+                       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>";
+               });
+               groupbody += "";
+
+               document.getElementById("groupgraphs").innerHTML = groupbody;
+               showGroupGraphs();
+       }
+
+       function clearGroupGraphs() {
+               if(group_charts && group_charts.length) {
+                       $.each(group_charts, function(i, c) {
+                               if(c.chart) c.chart.clearChart();
+                               c.chart = null;
+                       });
+
+                       group_charts = null;
+               }
 
+               document.getElementById("groupgroups").innerHTML = "";
+               mode = MODE_THUMBS;
                playGraphs();
        }
 
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand" href="#" id="hostname_id">NetData</a>
+          <a class="navbar-brand" href="javascript:showThumbGraphs();" id="hostname_id">NetData</a>
         </div>
-        <div class="collapse navbar-collapse">
+        <div class="collapse navbar-collapse" id="main_menu_div">
           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#system">System</a></li>
 
     <div class="container graphs" id="maingraph_container" style="display: none">
                <table>
-                       <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"> &larr; Back </button></div><a id="maingraph_title" href="#maingraph"><b> Maingraph </b></a></li></ol></td></tr>
                        <tr><td>
                        <div class="maingraph">
                                        <table>
        </div>
        </div>
 
-       <script type='text/javascript'>
-               
+    <div class="container graphs" id="groupgraphs_container">
+       <div class="allgraphs" id="groupgraphs">
+               <table width="100%">
+                       <tr><td id="splash" align="center" style="vertical-align:middle">
+                               <span class="glyphicon glyphicon-off"></span>
+                               <br/><br/>
+                               loading charts
+                               <br/><br/>
+                               <span class="label label-default">Please wait...</span>
+                               </h1>
+                       </td></tr>
+               </table>
+       </div>
+       </div>
 
+       <script type='text/javascript'>
                $(document).ready(function(){
                        document.getElementById('splash').height = $(window).height();
 
index 1096bc2aac97553ea0c8797b1c861c61721ae98b..4adda5e8aaa69217dffab3a9827ae4c35a7e205a 100644 (file)
@@ -217,7 +217,7 @@ function loadCharts(base_url, doNext) {
 
                        // check if the userpriority is IGNORE
                        if(json.charts[i].userpriority == "IGNORE"
-                               // || json.charts[i].isdetail
+                               || json.charts[i].isdetail
                                )
                                json.charts[i].enabled = false;
                        else
@@ -314,13 +314,13 @@ function loadCharts(base_url, doNext) {
                                        break;
 
                                case "tc":
-                                       json.charts[i].category = "Quality of Service";
+                                       json.charts[i].category = "QoS";
                                        json.charts[i].glyphicon = "glyphicon-random";
                                        json.charts[i].group = 15;
                                        break;
 
                                case "net":
-                                       json.charts[i].category = "Network Interfaces";
+                                       json.charts[i].category = "Network";
                                        json.charts[i].glyphicon = "glyphicon-transfer";
                                        json.charts[i].group = 5;
 
@@ -349,7 +349,7 @@ function loadCharts(base_url, doNext) {
                                        break;
 
                                case "disk":
-                                       json.charts[i].category = "Disk I/O";
+                                       json.charts[i].category = "Disks";
                                        json.charts[i].glyphicon = "glyphicon-hdd";
                                        json.charts[i].group = 5;
                                        break;