@cryptotaxi247 / netdata-1 / commits / 3503751f1

web UI fixes

Costa Tsaousis (ktsaou) committed Sep 13, 2015 at 13:56 UTC 3503751f1f53e44cb7aa3aeabebf6706928fa60b
3 files changed +50 -35
.gitignore new
+7
@@ -0,0 +1,7 @@
1 +conf.d/*
2 +log/*
3 +cache/*
4 +*.o
5 +*.old
6 +netdata
7 +apps.plugin
web/index.html
+31 -28
@@ -37,7 +37,7 @@
37 </div>
38 </nav>
39
40 - <div class="container graphs" id="maingraph_container" style="display: none">
40 + <div class="container graphs" id="maingraph_container" style="display: none;">
41 <table>
42 <tr><td>
43 <div class="maingraph">
@@ -107,40 +107,43 @@
107 </table>
108 </div>
109
110 - <div class="container graphs" id="thumbgraphs_container">
111 - <div class="allgraphs" id="thumbgraphs">
112 - <table width="100%">
113 - <tr><td id="splash" align="center" style="vertical-align:middle">
114 - <h1>
115 - Welcome to <b>NetData</b>!
116 - <br/><br/>
117 - <span class="glyphicon glyphicon-off"></span>
118 - <br/><br/>
119 - loading cosmos
120 - <br/><br/>
121 - <span class="label label-default">Please wait...</span>
122 - </h1>
123 - </td></tr>
124 - </table>
110 + <div class="container graphs" id="thumbgraphs_container" style="display: none;">
111 + <div id="thumbgraphs">
112 </div>
113 </div>
114
128 - <div class="container graphs" id="groupgraphs_container">
115 + <div class="container graphs" id="groupgraphs_container" style="display: none;">
116 <div class="allgraphs" id="groupgraphs">
117 </div>
118 </div>
119
133 - <div class="container graphs" id="groupgraphs_container">
134 - &nbsp;<p/>
135 - <hr/>
136 - <h4>NetData</h4>
137 - Realtime System Information over the web for all linux systems.
138 - <p/>
139 - Distributed under GPL.
140 - <p/>
141 - (c) 2015 Costa Tsaousis <a href="mailto:costa@tsaousis.gr">costa@tsaousis.gr</a>
142 - <p/>
143 - <div id="server_summary_id"></div>
120 + <div class="container" id="splash_container">
121 + <table width="100%">
122 + <tr><td id="splash" align="center" style="vertical-align: middle; height: calc(100% / 2); overflow: auto;">
123 + <h2>
124 + Welcome to <b>NetData</b>!
125 + <br/><br/>
126 + <span class="glyphicon glyphicon-off"></span>
127 + <br/><br/>
128 + loading cosmos
129 + <br/><br/>
130 + <span class="label label-default">Please wait...</span>
131 + </h2>
132 + </td></tr>
133 + </table>
134 + </div>
135 +
136 + <div class="container graphs" id="footer_container">
137 + &nbsp;<p/>
138 + <hr/>
139 + <h4>NetData</h4>
140 + Realtime System Information over the web for all linux systems.
141 + <p/>
142 + Distributed under GPL v2.
143 + <p/>
144 + (c) 2015 Costa Tsaousis <a href="mailto:costa@tsaousis.gr">costa@tsaousis.gr</a>
145 + <p/>
146 + <div id="server_summary_id"></div>
147 </div>
148
149 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
web/index.js
+12 -7
@@ -8,7 +8,7 @@ var THUMBS_MAX_TIME_TO_SHOW = 240; // how much time the thumb charts will prese
8 var THUMBS_POINTS_DIVISOR = 3;
9 var THUMBS_STACKED_POINTS_DIVISOR = 3;
10
11 -var GROUPS_MAX_TIME_TO_SHOW = 120; // how much time the thumb charts will present?
11 +var GROUPS_MAX_TIME_TO_SHOW = 120; // how much time the group charts will present?
12 var GROUPS_POINTS_DIVISOR = 2;
13 var GROUPS_STACKED_POINTS_DIVISOR = 2;
14
@@ -20,10 +20,10 @@ var MAINCHART_CONTROL_HEIGHT = 75; // how tall the control chart will be
20 var MAINCHART_CONTROL_DIVISOR = 2; // how much detailed will the control chart be? 1 = finest, higher is faster
21 var MAINCHART_INITIAL_SELECTOR= 20; // 1/20th of the width, this overrides MAINCHART_MAX_TIME_TO_SHOW
22
23 -var CHARTS_REFRESH_LOOP = 100;
24 -var CHARTS_REFRESH_IDLE = 500;
25 -var CHARTS_CHECK_NO_FOCUS = 500;
26 -var CHARTS_SCROLL_IDLE = 300;
23 +var CHARTS_REFRESH_LOOP = 100; // delay between chart refreshes
24 +var CHARTS_REFRESH_IDLE = 500; // delay between chart refreshes when no chart was ready for refresh the last time
25 +var CHARTS_CHECK_NO_FOCUS = 500; // delay to check for visibility when the page has no focus
26 +var CHARTS_SCROLL_IDLE = 300; // delay to wait after a page scroll
27
28 var MODE_THUMBS = 1;
29 var MODE_MAIN = 2;
@@ -603,9 +603,11 @@ function roundRobinRefresh(charts, startat) {
603 if(cur >= all) cur = 0;
604
605 if(charts[cur].enabled) {
606 - mylog('Rendering: ' + charts[cur].name);
606 refreshed = renderChart(charts[cur], chartsRefresh);
608 - if(refreshed) break;
607 + if(refreshed) {
608 + mylog('Refreshed: ' + charts[cur].name);
609 + break;
610 + }
611 }
612 }
613
@@ -777,6 +779,7 @@ function switchToMainGraph() {
779 document.getElementById('maingraph_container').style.display = 'block';
780 document.getElementById('thumbgraphs_container').style.display = 'none';
781 document.getElementById('groupgraphs_container').style.display = 'none';
782 + document.getElementById('splash_container').style.display = 'none';
783
784 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 Dashboard</a></li><li class=\"active\"><a href=\"#\">" + mainchart.name + "</a></li>" + familiesmainmenu + chartsmainmenu + "</ul>";
785
@@ -793,6 +796,7 @@ function switchToThumbGraphs() {
796 document.getElementById('maingraph_container').style.display = 'none';
797 document.getElementById('thumbgraphs_container').style.display = 'block';
798 document.getElementById('groupgraphs_container').style.display = 'none';
799 + document.getElementById('splash_container').style.display = 'none';
800
801 document.getElementById("main_menu_div").innerHTML = mainmenu;
802
@@ -814,6 +818,7 @@ function switchToGroupGraphs() {
818 document.getElementById('maingraph_container').style.display = 'none';
819 document.getElementById('thumbgraphs_container').style.display = 'none';
820 document.getElementById('groupgraphs_container').style.display = 'block';
821 + document.getElementById('splash_container').style.display = 'none';
822
823 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 Dashboard</a></li><li class=\"active\"><a href=\"#\">" + group_charts[0].family + "</a></li>" + familiesmainmenu + chartsmainmenu + "</ul>";
824