web UI fixes

diff --git a/.gitignore b/.gitignore
new file mode 100644 (file)
index 0000000..c4c9fb9
--- /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 088abda28d3f7e4ca4e1740af4fc5da74e0d5014..9c87ba4f90dc856ed646688ae506b75b40c0c56e 100644 (file)
--- 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 e68b9652311ab21df104fcd993c12b90c0380f05..5b656902b36a889ec333e3f9ec039d102e0a141f 100755 (executable)
--- 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>";