new main menu design to fit more charts

diff --git a/web/index.html b/web/index.html
index 4bcaeb918dc63a32ced8a684dc6ebb2d48206f13..e4184c6e67e092fd9b697fe32638d2af9cea74a4 100644 (file)
--- a/web/index.html
+++ b/web/index.html
@@ -27,7 +27,7 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand" href="javascript:switchToThumbGraphs();" id="hostname_id">NetData</a>
+          <a class="navbar-brand" href="/" id="hostname_id">NetData</a>
         </div>
         <div class="collapse navbar-collapse" id="main_menu_div">
           <ul class="nav navbar-nav">

diff --git a/web/index.js b/web/index.js
index df02e9f0a04555f012f2819d741a458e8660935f..879392cbd748104836bc096d3fa5d81fb25906e0 100644 (file)
--- a/web/index.js
+++ b/web/index.js
@@ -27,6 +27,9 @@ var mainchart;
 \r
 // html for the main menu\r
 var mainmenu = "";\r
+var categoriesmainmenu = "";\r
+var familiesmainmenu = "";\r
+var chartsmainmenu = "";\r
 \r
 \r
 // ------------------------------------------------------------------------\r
@@ -93,6 +96,7 @@ function initMainChart(c) {
        if(mainchart) cleanThisChart(mainchart);\r
 \r
        mainchart = $.extend(true, {}, c);\r
+       mainchart.enabled = true;\r
        mainchart.refreshCount = 0;\r
        mainchart.last_updated = 0;\r
        mainchart.chartOptions.explorer = null;\r
@@ -248,6 +252,13 @@ function initMainChartIndex(i) {
 \r
        else if(mode == MODE_THUMBS)\r
                initMainChart(mycharts[i]);\r
+\r
+       else\r
+               initMainChart(mycharts[i]);\r
+}\r
+\r
+function initMainChartIndexOfMyCharts(i) {\r
+       initMainChart(mycharts[i]);\r
 }\r
 \r
 var last_main_chart_max='normal';\r
@@ -737,7 +748,7 @@ function switchToMainGraph() {
        document.getElementById('thumbgraphs_container').style.display = 'none';\r
        document.getElementById('groupgraphs_container').style.display = 'none';\r
 \r
-       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>";\r
+       document.getElementById("main_menu_div").innerHTML = "<ul class=\"nav navbar-nav\"><li><a href=\"javascript:switchToThumbGraphs();\"><span class=\"glyphicon glyphicon-circle-arrow-left\"></span> Back to Home</a></li><li class=\"active\"><a href=\"#\">" + mainchart.name + "</a></li>" + familiesmainmenu + chartsmainmenu + "</ul>";\r
 \r
        window.scrollTo(0, 0);\r
 \r
@@ -774,7 +785,7 @@ function switchToGroupGraphs() {
        document.getElementById('thumbgraphs_container').style.display = 'none';\r
        document.getElementById('groupgraphs_container').style.display = 'block';\r
 \r
-       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].family + " charts</a></li></ul>";\r
+       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].family + "</a></li>" + familiesmainmenu + chartsmainmenu + "</ul>";\r
 \r
        window.scrollTo(0, 0);\r
 \r
@@ -870,7 +881,13 @@ function initCharts() {
                // create an array for grouping all same-type graphs together\r
                var dimensions = 0;\r
                var categories = new Array();\r
+               var families = new Array();\r
+               var chartslist = new Array();\r
                $.each(mycharts, function(i, c) {\r
+                       var j;\r
+\r
+                       chartslist.push({name: c.name, type: c.type, id: i});\r
+\r
                        dimensions += c.dimensions.length;\r
                        c.chartOptions.width = width;\r
                        c.chartOptions.height = height;\r
@@ -882,7 +899,6 @@ function initCharts() {
                        calculateChartPointsToShow(c, c.chartOptions.isStacked?THUMBS_STACKED_POINTS_DIVISOR:THUMBS_POINTS_DIVISOR, THUMBS_MAX_TIME_TO_SHOW, -1);\r
 \r
                        if(c.enabled) {\r
-                               var j;\r
                                var h = "<div class=\"thumbgraph\" id=\"" + c.div + "_parent\"><table><tr><td><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "</div></td></tr><tr><td align=\"center\">"\r
                                + thumbChartActions(i, c)\r
                                +       "</td></tr><tr><td height='15'></td></tr></table></div>";\r
@@ -896,10 +912,20 @@ function initCharts() {
                                        }\r
                                }\r
 \r
-                               if(j == categories.length) {\r
+                               if(j == categories.length)\r
                                        categories.push({name: c.type, title: c.category, description: '', priority: c.categoryPriority, count: 1, glyphicon: c.glyphicon, html: h});\r
+                       }\r
+\r
+                       // find the families object for this type\r
+                       for(j = 0; j < families.length ;j++) {\r
+                               if(families[j].name == c.family) {\r
+                                       families[j].count++;\r
+                                       break;\r
                                }\r
                        }\r
+\r
+                       if(j == families.length)\r
+                               families.push({name: c.family, count: 1});\r
                });\r
 \r
                document.getElementById('server_summary_id').innerHTML = "<small>NetData server at <b>" + all.hostname + "</b> is maintaining <b>" + mycharts.length + "</b> charts, having <b>" + dimensions + "</b> dimensions (by default with <b>" + all.history + "</b> entries each), which are updated every <b>" + all.update_every + "s</b>, using a total of <b>" + (Math.round(all.memory * 10 / 1024 / 1024) / 10) + " MB</b> for the round robin database.</small>";\r
@@ -914,14 +940,45 @@ function initCharts() {
                }\r
                categories.sort(categoriessort);\r
                \r
+               function familiessort(a, b) {\r
+                       if(a.name < b.name) return -1;\r
+                       return 1;\r
+               }\r
+               families.sort(familiessort);\r
+\r
+               function chartslistsort(a, b) {\r
+                       if(a.name < b.name) return -1;\r
+                       return 1;\r
+               }\r
+               chartslist.sort(chartslistsort);\r
+\r
                // combine all the htmls into one\r
                var allcategories = "<table width=\"100%\">";\r
-               mainmenu = "<ul class=\"nav navbar-nav\"><li><a href=\"#\">Home</a></li>";\r
+               mainmenu = '<ul class="nav navbar-nav">';\r
+\r
+               categoriesmainmenu = '<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class=\"glyphicon glyphicon-fire\"></span> Chart Sections <b class="caret"></b></a><ul class="dropdown-menu">';\r
                $.each(categories, function(i, a) {\r
                        allcategories += a.html;\r
-                       mainmenu += "<li><a href=\"#" + a.name + "\">" + a.title + "</a></li>";\r
+                       categoriesmainmenu += "<li><a href=\"#" + a.name + "\">" + a.title + "</a></li>";\r
                });\r
+               categoriesmainmenu += "</ul></li>";\r
                allcategories += "</table>";\r
+\r
+               familiesmainmenu = '<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class=\"glyphicon glyphicon-th-large\"></span> Chart Families <b class="caret"></b></a><ul class="dropdown-menu">';\r
+               $.each(families, function(i, a) {\r
+                       familiesmainmenu += "<li><a href=\"javascript:initGroupGraphs('" + a.name + "');\">" + a.name + " <span class=\"badge pull-right\">" + a.count + "</span></a></li>";\r
+               });\r
+               familiesmainmenu += "</ul></li>";\r
+\r
+               chartsmainmenu = '<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class=\"glyphicon glyphicon-resize-full\"></span> All Charts <b class="caret"></b></a><ul class="dropdown-menu">';\r
+               $.each(chartslist, function(i, a) {\r
+                       chartsmainmenu += "<li><a href=\"javascript:initMainChartIndexOfMyCharts('" + a.id + "');\">" + a.name + "</a></li>";\r
+               });\r
+               chartsmainmenu += "</ul></li>";\r
+\r
+               mainmenu += categoriesmainmenu;\r
+               mainmenu += familiesmainmenu;\r
+               mainmenu += chartsmainmenu;\r
                mainmenu += "</ul>";\r
 \r
                thumbsContainer.innerHTML = allcategories;\r

diff --git a/web/theme.css b/web/theme.css
index 004f605cfbeb9e24af1f039dc21766c947103b4b..ca5355f5ccce7ce6df2602a4c513a63ea0f8a363 100644 (file)
--- a/web/theme.css
+++ b/web/theme.css
@@ -48,3 +48,10 @@ body {
     margin-top: 10px;\r
     margin-bottom: 10px;\r
 }\r
+\r
+.dropdown-menu {\r
+    max-height: 500px;\r
+    overflow-y: auto;\r
+    overflow-x: hidden;\r
+}\r
+\r