new main menu design to fit more charts
Costa Tsaousis (ktsaou) committed
Jun 3, 2014 at 02:04 UTC
7be9fd7b3d41d5b69d9b91e850879ba326f08fe6
3 files changed
+71
-7
web/index.html
+1
-1
@@ -27,7 +27,7 @@
27
<span class="icon-bar"></span>
28
<span class="icon-bar"></span>
29
</button>
30
- <a class="navbar-brand" href="javascript:switchToThumbGraphs();" id="hostname_id">NetData</a>
30
+ <a class="navbar-brand" href="/" id="hostname_id">NetData</a>
31
</div>
32
<div class="collapse navbar-collapse" id="main_menu_div">
33
<ul class="nav navbar-nav">
web/index.js
+63
-6
@@ -27,6 +27,9 @@ var mainchart;
27
28
// html for the main menu
29
var mainmenu = "";
30
+var categoriesmainmenu = "";
31
+var familiesmainmenu = "";
32
+var chartsmainmenu = "";
33
34
35
// ------------------------------------------------------------------------
@@ -93,6 +96,7 @@ function initMainChart(c) {
96
if(mainchart) cleanThisChart(mainchart);
97
98
mainchart = $.extend(true, {}, c);
99
+ mainchart.enabled = true;
100
mainchart.refreshCount = 0;
101
mainchart.last_updated = 0;
102
mainchart.chartOptions.explorer = null;
@@ -248,6 +252,13 @@ function initMainChartIndex(i) {
252
253
else if(mode == MODE_THUMBS)
254
initMainChart(mycharts[i]);
255
+
256
+ else
257
+ initMainChart(mycharts[i]);
258
+}
259
+
260
+function initMainChartIndexOfMyCharts(i) {
261
+ initMainChart(mycharts[i]);
262
}
263
264
var last_main_chart_max='normal';
@@ -737,7 +748,7 @@ function switchToMainGraph() {
748
document.getElementById('thumbgraphs_container').style.display = 'none';
749
document.getElementById('groupgraphs_container').style.display = 'none';
750
740
- 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>";
751
+ 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>";
752
753
window.scrollTo(0, 0);
754
@@ -774,7 +785,7 @@ function switchToGroupGraphs() {
785
document.getElementById('thumbgraphs_container').style.display = 'none';
786
document.getElementById('groupgraphs_container').style.display = 'block';
787
777
- 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>";
788
+ 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>";
789
790
window.scrollTo(0, 0);
791
@@ -870,7 +881,13 @@ function initCharts() {
881
// create an array for grouping all same-type graphs together
882
var dimensions = 0;
883
var categories = new Array();
884
+ var families = new Array();
885
+ var chartslist = new Array();
886
$.each(mycharts, function(i, c) {
887
+ var j;
888
+
889
+ chartslist.push({name: c.name, type: c.type, id: i});
890
+
891
dimensions += c.dimensions.length;
892
c.chartOptions.width = width;
893
c.chartOptions.height = height;
@@ -882,7 +899,6 @@ function initCharts() {
899
calculateChartPointsToShow(c, c.chartOptions.isStacked?THUMBS_STACKED_POINTS_DIVISOR:THUMBS_POINTS_DIVISOR, THUMBS_MAX_TIME_TO_SHOW, -1);
900
901
if(c.enabled) {
885
- var j;
902
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\">"
903
+ thumbChartActions(i, c)
904
+ "</td></tr><tr><td height='15'></td></tr></table></div>";
@@ -896,10 +912,20 @@ function initCharts() {
912
}
913
}
914
899
- if(j == categories.length) {
915
+ if(j == categories.length)
916
categories.push({name: c.type, title: c.category, description: '', priority: c.categoryPriority, count: 1, glyphicon: c.glyphicon, html: h});
917
+ }
918
+
919
+ // find the families object for this type
920
+ for(j = 0; j < families.length ;j++) {
921
+ if(families[j].name == c.family) {
922
+ families[j].count++;
923
+ break;
924
}
925
}
926
+
927
+ if(j == families.length)
928
+ families.push({name: c.family, count: 1});
929
});
930
931
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>";
@@ -914,14 +940,45 @@ function initCharts() {
940
}
941
categories.sort(categoriessort);
942
943
+ function familiessort(a, b) {
944
+ if(a.name < b.name) return -1;
945
+ return 1;
946
+ }
947
+ families.sort(familiessort);
948
+
949
+ function chartslistsort(a, b) {
950
+ if(a.name < b.name) return -1;
951
+ return 1;
952
+ }
953
+ chartslist.sort(chartslistsort);
954
+
955
// combine all the htmls into one
956
var allcategories = "<table width=\"100%\">";
919
- mainmenu = "<ul class=\"nav navbar-nav\"><li><a href=\"#\">Home</a></li>";
957
+ mainmenu = '<ul class="nav navbar-nav">';
958
+
959
+ 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">';
960
$.each(categories, function(i, a) {
961
allcategories += a.html;
922
- mainmenu += "<li><a href=\"#" + a.name + "\">" + a.title + "</a></li>";
962
+ categoriesmainmenu += "<li><a href=\"#" + a.name + "\">" + a.title + "</a></li>";
963
});
964
+ categoriesmainmenu += "</ul></li>";
965
allcategories += "</table>";
966
+
967
+ 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">';
968
+ $.each(families, function(i, a) {
969
+ familiesmainmenu += "<li><a href=\"javascript:initGroupGraphs('" + a.name + "');\">" + a.name + " <span class=\"badge pull-right\">" + a.count + "</span></a></li>";
970
+ });
971
+ familiesmainmenu += "</ul></li>";
972
+
973
+ 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">';
974
+ $.each(chartslist, function(i, a) {
975
+ chartsmainmenu += "<li><a href=\"javascript:initMainChartIndexOfMyCharts('" + a.id + "');\">" + a.name + "</a></li>";
976
+ });
977
+ chartsmainmenu += "</ul></li>";
978
+
979
+ mainmenu += categoriesmainmenu;
980
+ mainmenu += familiesmainmenu;
981
+ mainmenu += chartsmainmenu;
982
mainmenu += "</ul>";
983
984
thumbsContainer.innerHTML = allcategories;
web/theme.css
+7
@@ -48,3 +48,10 @@ body {
48
margin-top: 10px;
49
margin-bottom: 10px;
50
}
51
+
52
+.dropdown-menu {
53
+ max-height: 500px;
54
+ overflow-y: auto;
55
+ overflow-x: hidden;
56
+}
57
+