@cryptotaxi247 / netdata-1 / commits / 7a61c5a98

more javascript fixes

Costa Tsaousis (ktsaou) committed Apr 13, 2014 at 23:35 UTC 7a61c5a9884b82902688fe547dfbf987bc188b9b
1 file changed +161 -91
web/index.html
+161 -91
@@ -53,7 +53,10 @@
53
54 function chartIsLoadingHTML(width, height) { return "<table><tr><td align=\"center\" width=\"" + width + "\" height=\"" + height + "\" style=\"vertical-align:middle\"><h4><span class=\"glyphicon glyphicon-refresh\"></span><br/><br/>loading chart<br/><br/><span class=\"label label-default\">Please wait...</span></h4></td></tr></table>"; }
55
56 - function showChartIsLoading(id, width, height) { document.getElementById(id).innerHTML = chartIsLoadingHTML(width, height); }
56 + function showChartIsLoading(id, width, height) {
57 + //mylog('adding loading chart html in div with id ' + id);
58 + document.getElementById(id).innerHTML = chartIsLoadingHTML(width, height);
59 + }
60
61 function thumbChartActions(i, c, nogroup) {
62 var name = c.name;
@@ -93,35 +96,8 @@
96 return html;
97 }
98
96 - function disableChart(i) {
97 - var chart = null;
98 -
99 - var count = 0;
100 - if(group_charts) $.each(group_charts, function(i, c) {
101 - if(c.enabled) count++;
102 - });
103 - if(count <= 1) {
104 - alert('Cannot close the last chart shown.');
105 - return;
106 - }
107 -
108 - if(group_charts)
109 - chart = group_charts[i];
110 - else
111 - chart = mycharts[i];
112 -
113 - if(chart) {
114 - chart.enabled = false;
115 - if(chart.chart) chart.chart.clearChart();
116 - chart.chart = null;
117 - }
118 - var div = document.getElementById(chart.div);
119 - if(div) div.innerHTML = "";
120 -
121 - div = document.getElementById(chart.div + "_parent");
122 - if(div) div.innerHTML = "";
123 -
124 - resizeCharts();
99 + function mylog(txt) {
100 + console.log(txt);
101 }
102
103 function chartssort(a, b) {
@@ -136,10 +112,7 @@
112 // copy the chart c to mainchart
113 // switch to main graphs screen
114 function initMainChart(c) {
139 - if(mainchart && mainchart.chart) {
140 - mainchart.chart.clearChart();
141 - mainchart.chart = null;
142 - }
115 + if(mainchart) cleanThisChart(mainchart);
116
117 mainchart = $.extend(true, {}, c);
118
@@ -177,7 +150,7 @@
150
151 var last_main_chart_max='normal';
152 function setMainChartMax(m) {
180 - if(!mainchart || mode != MODE_MAIN) return;
153 + if(!mainchart) return;
154
155 if(m == 'toggle') {
156 if(last_main_chart_max == 'maximized') m = 'normal';
@@ -203,7 +176,7 @@
176 }
177
178 function setMainChartGroup(g) {
206 - if(!mainchart || mode != MODE_MAIN) return;
179 + if(!mainchart) return;
180
181 mainchart.group = g;
182 mainchart.last_updated = 0;
@@ -212,7 +185,7 @@
185
186 var last_main_chart_avg = null;
187 function setMainChartGroupMethod(g, norefresh) {
215 - if(!mainchart || mode != MODE_MAIN) return;
188 + if(!mainchart) return;
189
190 if(g == 'toggle') {
191 if(last_main_chart_avg == 'max') g = 'average';
@@ -261,7 +234,7 @@
234 // Chart resizing
235
236 function screenWidth() {
264 - return (($(window).width() * 0.95) - 40);
237 + return (($(window).width() * 0.95) - 50);
238 }
239
240 // calculate the proper width for the thumb charts
@@ -277,7 +250,7 @@
250
251 function groupChartSizes() {
252 var s = { width: screenWidth() / 2, height: ($(window).height() - 130) / 3 - 10};
280 - if(s.width < MINIMUM_THUMB_GRAPH_WIDTH) s.width = screenWidth();
253 + if(s.width < MINIMUM_THUMB_GRAPH_WIDTH * 1.5) s.width = screenWidth();
254
255 var count = 0;
256 if(group_charts) $.each(group_charts, function(i, c) {
@@ -316,8 +289,7 @@
289 width = thumbWidth();
290 $.each(mycharts, function(i, c) {
291 if(c.enabled && c.chartOptions.width != width) {
319 - if(c.chart) c.chart.clearChart();
320 - c.chart = null;
292 + cleanThisChart(c);
293 c.chartOptions.width = width;
294 showChartIsLoading(c.div, c.chartOptions.width, c.chartOptions.height);
295 c.last_updated = 0;
@@ -328,20 +300,18 @@
300 var sizes = groupChartSizes();
301
302 if(c.enabled && (c.chartOptions.width != sizes.width || c.chartOptions.height != sizes.height)) {
331 - if(c.chart) c.chart.clearChart();
332 - c.chart = null;
303 + cleanThisChart(c);
304 c.chartOptions.width = sizes.width;
305 c.chartOptions.height = sizes.height;
306 showChartIsLoading(c.div, c.chartOptions.width, c.chartOptions.height);
307 c.last_updated = 0;
308 }
309 });
339 -
340 - playGraphs();
310 }
311
312 + var resize_request = false;
313 window.onresize = function(event) {
344 - resizeCharts();
314 + resize_request = true;
315 };
316
317
@@ -356,7 +326,7 @@
326 var now = new Date().getTime();
327 if((now - last_refresh) > 5000) {
328 // it died!
359 - console.log('It seems the refresh thread died. Restarting it.');
329 + //mylog('It seems the refresh thread died. Restarting it.');
330 chartsRefresh();
331 }
332 return;
@@ -378,8 +348,20 @@
348 // this is an internal function.
349 // never call it directly, or new javascript threads will be spawn
350 var timeout;
351 + var refresh_count = 0;
352 function chartsRefresh() {
382 - if(stop_refreshing) return;
353 + refresh_count++;
354 +
355 + if(resize_request) {
356 + resizeCharts();
357 + resize_request = false;
358 + stop_refreshing = 0;
359 + }
360 +
361 + if(stop_refreshing) {
362 + //mylog("stop refresh");
363 + return;
364 + }
365
366 last_refresh = new Date().getTime();
367
@@ -393,6 +375,8 @@
375 // this is an internal function.
376 // never call it directly, or new javascript threads will be spawn
377 function triggerRefresh() {
378 + //mylog('triggerRefresh(' + refresh_count + ')');
379 +
380 // cleanup has to take place when the charts are not refreshed
381 // since the refreshing thread is in this function, it means
382 // nothing is being refreshed.
@@ -407,6 +391,8 @@
391 // refresh the main chart
392 // make sure we don't loose the refreshing thread
393 function mainChartRefresh() {
394 + //mylog('mainChartRefresh()');
395 +
396 if(mode != MODE_MAIN || !mainchart) {
397 triggerRefresh();
398 return;
@@ -421,80 +407,125 @@
407 triggerRefresh();
408 }
409
410 + function roundRobinRefresh(charts, startat) {
411 + var refreshed = false;
412 +
413 + // find a chart to refresh
414 + var all = charts.length;
415 + var cur = startat;
416 + var count = 0;
417 +
418 + for(count = 0; count < all ; count++, cur++) {
419 + if(cur >= all) cur = 0;
420 +
421 + if(charts[cur].enabled) {
422 + //mylog('going to refresh chart ' + charts[cur].name);
423 + refreshed = refreshChart(charts[cur], chartsRefresh);
424 + if(refreshed) break;
425 + }
426 + }
427 +
428 + if(!refreshed) triggerRefresh();
429 + return cur;
430 + }
431 +
432 // refresh the thumb charts
433 // make sure we don't loose the refreshing thread
434 var last_thumb_updated = 0;
435 function thumbChartsRefresh() {
436 + //mylog('thumbChartsRefresh()');
437 +
438 if(mycharts.length == 0 || mode != MODE_THUMBS) {
439 triggerRefresh();
440 return;
441 }
442
433 - if(last_thumb_updated >= mycharts.length) last_thumb_updated = 0;
434 -
435 - // find a chart to refresh
436 - var orig = last_thumb_updated;
437 - var refreshed = false;
438 -
439 - last_thumb_updated++;
440 - if(last_thumb_updated >= mycharts.length) last_thumb_updated = 0;
441 -
442 - while(1) {
443 - refreshed = refreshChart(mycharts[last_thumb_updated], chartsRefresh);
444 - if(refreshed) break;
445 -
446 - last_thumb_updated++;
447 - if(last_thumb_updated >= mycharts.length) last_thumb_updated = 0;
448 - if(last_thumb_updated == orig) break;
449 - }
450 -
451 - // no chart refreshed
452 - if(!refreshed) triggerRefresh();
443 + last_thumb_updated = roundRobinRefresh(mycharts, last_thumb_updated);
444 }
445
446 // refresh the group charts
447 // make sure we don't loose the refreshing thread
448 var last_group_updated = 0;
449 function groupChartsRefresh() {
450 + //mylog('groupChartsRefresh()');
451 +
452 if(!group_charts || group_charts.length == 0 || mode != MODE_GROUP_THUMBS) {
453 + //mylog('cannot refresh charts');
454 triggerRefresh();
455 return;
456 }
457
464 - if(last_group_updated >= group_charts.length) last_group_updated = 0;
458 + last_group_updated = roundRobinRefresh(group_charts, last_group_updated);
459 + }
460
466 - // find a chart to refresh
467 - var orig = last_group_updated;
468 - var refreshed = false;
461
470 - last_group_updated++;
471 - if(last_group_updated >= group_charts.length) last_group_updated = 0;
462 + // ------------------------------------------------------------------------
463 + // switch the screen between views
464 + // these should be called only from initXXXX()
465 +
466 + function disableChart(i) {
467 + //mylog('disableChart(' + i + ')');
468
473 - while(1) {
474 - refreshed = refreshChart(group_charts[last_group_updated], chartsRefresh);
475 - if(refreshed) break;
469 + var chart = null;
470
477 - last_group_updated++;
478 - if(last_group_updated >= group_charts.length) last_group_updated = 0;
479 - if(last_group_updated == orig) break;
471 + var count = 0;
472 + if(mode == MODE_GROUP_THUMBS && group_charts) {
473 + $.each(group_charts, function(i, c) {
474 + if(c.enabled) count++;
475 + });
476 +
477 + if(i < group_charts.length) chart = group_charts[i];
478 }
479 + else if(mode == MODE_THUMBS) {
480 + $.each(mycharts, function(i, c) {
481 + if(c.enabled) count++;
482 + });
483
482 - // no chart refreshed
483 - if(!refreshed) triggerRefresh();
484 + if(i < mycharts.length) chart = mycharts[i];
485 + }
486 +
487 + if(!chart) return;
488 +
489 + if(count <= 1) {
490 + alert('Cannot close the last chart shown.');
491 + return;
492 + }
493 +
494 + if(chart) {
495 + //mylog("disabling chart " + chart.name);
496 + chart.disablethisplease = true;
497 + }
498 }
499
500 + function cleanThisChart(chart, emptydivs) {
501 + //mylog('cleanThisChart(' + chart.name + ', ' + emptydivs +')');
502
487 - // ------------------------------------------------------------------------
488 - // switch the screen between views
489 - // these should be called only from initXXXX()
503 + if(chart.chart) chart.chart.clearChart();
504 + chart.chart = null;
505 +
506 + if(emptydivs) {
507 + var div = document.getElementById(chart.div);
508 + if(div) {
509 + div.style.display = 'none';
510 + div.innerHTML = "";
511 + }
512 +
513 + div = document.getElementById(chart.div + "_parent");
514 + if(div) {
515 + div.style.display = 'none';
516 + div.innerHTML = "";
517 + }
518 + }
519 +
520 + //mylog("chart " + chart.name + " cleaned with option " + emptydivs);
521 + }
522
523 // cleanup the previously shown charts
524 function cleanupCharts() {
525 + //mylog('cleanupCharts()');
526 +
527 if(mode != MODE_MAIN && mainchart) {
494 - if(mainchart.chart) {
495 - mainchart.chart.clearChart();
496 - mainchart.chart = null;
497 - }
528 + if(mainchart.chart) cleanThisChart(mainchart);
529 mainchart = null;
530 }
531
@@ -502,6 +533,27 @@
533 clearGroupGraphs();
534 }
535
536 + // cleanup the disabled charts
537 + $.each(mycharts, function(i, c) {
538 + if(c.disablethisplease && c.enabled) {
539 + cleanThisChart(c, 'emptydivs');
540 + c.disablethisplease = false;
541 + c.enabled = false;
542 + resize_request = true;
543 + //mylog("disabled chart " + c.name + " removed");
544 + }
545 + });
546 +
547 + if(group_charts) $.each(group_charts, function(i, c) {
548 + if(c.disablethisplease && c.enabled) {
549 + cleanThisChart(c, 'emptydivs');
550 + c.disablethisplease = false;
551 + c.enabled = false;
552 + resize_request = true;
553 + //mylog("disabled chart " + c.name + " removed");
554 + }
555 + });
556 +
557 // we never cleanup the thumb charts
558 }
559
@@ -515,6 +567,8 @@
567
568 var thumbsScrollPosition = null;
569 function switchToMainGraph() {
570 + //mylog('switchToMainGraph()');
571 +
572 if(!mainchart) return;
573
574 if(!group_charts) thumbsScrollPosition = window.pageYOffset;
@@ -525,12 +579,16 @@
579
580 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>";
581
582 + window.scrollTo(0, 0);
583 +
584 mode = MODE_MAIN;
585 playGraphs();
586 updateUI();
587 }
588
589 function switchToThumbGraphs() {
590 + //mylog('switchToThumbGraphs()');
591 +
592 document.getElementById('maingraph_container').style.display = 'none';
593 document.getElementById('thumbgraphs_container').style.display = 'block';
594 document.getElementById('groupgraphs_container').style.display = 'none';
@@ -546,6 +604,8 @@
604 }
605
606 function switchToGroupGraphs() {
607 + //mylog('switchToGroupGraphs()');
608 +
609 if(!group_charts) return;
610
611 if(!mainchart) thumbsScrollPosition = window.pageYOffset;
@@ -606,8 +666,7 @@
666 function clearGroupGraphs() {
667 if(group_charts && group_charts.length) {
668 $.each(group_charts, function(i, c) {
609 - if(c.chart) c.chart.clearChart();
610 - c.chart = null;
669 + cleanThisChart(c, 'emptydivs');
670 });
671
672 group_charts = null;
@@ -847,6 +906,17 @@
906 </div>
907 </div>
908
909 + <div class="container graphs" id="groupgraphs_container">
910 + &nbsp;<p/>
911 + <hr/>
912 + <h4>NetData</h4>
913 + Realtime System Information over the web for all linux systems.
914 + <p/>
915 + Distributed under GPL.
916 + <p/>
917 + (c) 2014 Costa Tsaousis <a href="mailto:costa@tsaousis.gr">costa@tsaousis.gr</a>
918 + </div>
919 +
920 <script type='text/javascript'>
921 $(document).ready(function(){
922 document.getElementById('splash').height = $(window).height();