web UI fixes

3 files changed, 50 insertions, 35 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000..c4c9fb9dc2
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+conf.d/*
+log/*
+cache/*
+*.o
+*.old
+netdata
+apps.plugin
diff --git a/web/index.html b/web/index.html
index 088abda28d..9c87ba4f90 100644
--- a/web/index.html
+++ b/web/index.html
@@ -37,7 +37,7 @@
       </div>
     </nav>
 
-    <div class="container graphs" id="maingraph_container" style="display: none">
+    <div class="container graphs" id="maingraph_container" style="display: none;">
 		<table>
 			<tr><td>
 		    	<div class="maingraph">
@@ -107,40 +107,43 @@
 		</table>
 	</div>
 
-    <div class="container graphs" id="thumbgraphs_container">
-    	<div class="allgraphs" id="thumbgraphs">
-    		<table width="100%">
-    			<tr><td id="splash" align="center" style="vertical-align:middle">
-    				<h1>
-    				Welcome to <b>NetData</b>!
-    				<br/><br/>
-    				<span class="glyphicon glyphicon-off"></span>
-    				<br/><br/>
-    				loading cosmos
-    				<br/><br/>
-    				<span class="label label-default">Please wait...</span>
-    				</h1>
-    			</td></tr>
-    		</table>
+    <div class="container graphs" id="thumbgraphs_container" style="display: none;">
+    	<div id="thumbgraphs">
     	</div>
 	</div>
 
-    <div class="container graphs" id="groupgraphs_container">
+    <div class="container graphs" id="groupgraphs_container" style="display: none;">
     	<div class="allgraphs" id="groupgraphs">
     	</div>
 	</div>
 
-    <div class="container graphs" id="groupgraphs_container">
-   	&nbsp;<p/>
-   	<hr/>
-    <h4>NetData</h4>
-    Realtime System Information over the web for all linux systems.
-    <p/>
-    Distributed under GPL.
-    <p/>
-    (c) 2015 Costa Tsaousis <a href="mailto:costa@tsaousis.gr">costa@tsaousis.gr</a>
-    <p/>
-    <div id="server_summary_id"></div>
+    <div class="container" id="splash_container">
+		<table width="100%">
+			<tr><td id="splash" align="center" style="vertical-align: middle; height: calc(100% / 2); overflow: auto;">
+				<h2>
+				Welcome to <b>NetData</b>!
+				<br/><br/>
+				<span class="glyphicon glyphicon-off"></span>
+				<br/><br/>
+				loading cosmos
+				<br/><br/>
+				<span class="label label-default">Please wait...</span>
+				</h2>
+			</td></tr>
+		</table>
+	</div>
+
+    <div class="container graphs" id="footer_container">
+   		&nbsp;<p/>
+   		<hr/>
+    	<h4>NetData</h4>
+    	Realtime System Information over the web for all linux systems.
+    	<p/>
+    	Distributed under GPL v2.
+    	<p/>
+    	(c) 2015 Costa Tsaousis <a href="mailto:costa@tsaousis.gr">costa@tsaousis.gr</a>
+    	<p/>
+    	<div id="server_summary_id"></div>
     </div>
 
 	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
diff --git a/web/index.js b/web/index.js
index e68b965231..5b656902b3 100755
--- a/web/index.js
+++ b/web/index.js
@@ -8,7 +8,7 @@ var THUMBS_MAX_TIME_TO_SHOW = 240;		// how much time the thumb charts will prese
 var THUMBS_POINTS_DIVISOR = 3;
 var THUMBS_STACKED_POINTS_DIVISOR = 3;
 
-var GROUPS_MAX_TIME_TO_SHOW = 120;		// how much time the thumb charts will present?
+var GROUPS_MAX_TIME_TO_SHOW = 120;		// how much time the group charts will present?
 var GROUPS_POINTS_DIVISOR = 2;
 var GROUPS_STACKED_POINTS_DIVISOR = 2;
 
@@ -20,10 +20,10 @@ var MAINCHART_CONTROL_HEIGHT = 75;		// how tall the control chart will be
 var MAINCHART_CONTROL_DIVISOR = 2;		// how much detailed will the control chart be? 1 = finest, higher is faster
 var MAINCHART_INITIAL_SELECTOR= 20;		// 1/20th of the width, this overrides MAINCHART_MAX_TIME_TO_SHOW
 
-var CHARTS_REFRESH_LOOP = 100;
-var CHARTS_REFRESH_IDLE = 500;
-var CHARTS_CHECK_NO_FOCUS = 500;
-var CHARTS_SCROLL_IDLE = 300;
+var CHARTS_REFRESH_LOOP = 100;			// delay between chart refreshes
+var CHARTS_REFRESH_IDLE = 500;			// delay between chart refreshes when no chart was ready for refresh the last time
+var CHARTS_CHECK_NO_FOCUS = 500;		// delay to check for visibility when the page has no focus
+var CHARTS_SCROLL_IDLE = 300;			// delay to wait after a page scroll
 
 var MODE_THUMBS = 1;
 var MODE_MAIN = 2;
@@ -603,9 +603,11 @@ function roundRobinRefresh(charts, startat) {
 		if(cur >= all) cur = 0;
 
 		if(charts[cur].enabled) {
-			mylog('Rendering: ' + charts[cur].name);
 			refreshed = renderChart(charts[cur], chartsRefresh);
-			if(refreshed) break;
+			if(refreshed) {
+				mylog('Refreshed: ' + charts[cur].name);
+				break;
+			}
 		}
 	}
 
@@ -777,6 +779,7 @@ function switchToMainGraph() {
 	document.getElementById('maingraph_container').style.display = 'block';
 	document.getElementById('thumbgraphs_container').style.display = 'none';
 	document.getElementById('groupgraphs_container').style.display = 'none';
+	document.getElementById('splash_container').style.display = 'none';
 
 	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>";
 
@@ -793,6 +796,7 @@ function switchToThumbGraphs() {
 	document.getElementById('maingraph_container').style.display = 'none';
 	document.getElementById('thumbgraphs_container').style.display = 'block';
 	document.getElementById('groupgraphs_container').style.display = 'none';
+	document.getElementById('splash_container').style.display = 'none';
 
 	document.getElementById("main_menu_div").innerHTML = mainmenu;
 
@@ -814,6 +818,7 @@ function switchToGroupGraphs() {
 	document.getElementById('maingraph_container').style.display = 'none';
 	document.getElementById('thumbgraphs_container').style.display = 'none';
 	document.getElementById('groupgraphs_container').style.display = 'block';
+	document.getElementById('splash_container').style.display = 'none';
 
 	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>";