diff options
Diffstat (limited to 'web/old/index.js')
| -rw-r--r-- | web/old/index.js | 1174 |
1 files changed, 0 insertions, 1174 deletions
diff --git a/web/old/index.js b/web/old/index.js deleted file mode 100644 index 3a28daf73..000000000 --- a/web/old/index.js +++ /dev/null @@ -1,1174 +0,0 @@ -var page_is_visible = 1; - -var TARGET_THUMB_GRAPH_WIDTH = 500; // thumb charts width will range from 0.5 to 1.5 of that -var MINIMUM_THUMB_GRAPH_WIDTH = 400; // thumb chart will generally try to be wider than that -var TARGET_THUMB_GRAPH_HEIGHT = 160; // the height of the thumb charts -var TARGET_GROUP_GRAPH_HEIGHT = 160; - -var THUMBS_MAX_TIME_TO_SHOW = 240; // how much time the thumb charts will present? -var THUMBS_POINTS_DIVISOR = 3; -var THUMBS_STACKED_POINTS_DIVISOR = 4; - -var GROUPS_MAX_TIME_TO_SHOW = 600; // how much time the group charts will present? -var GROUPS_POINTS_DIVISOR = 2; -var GROUPS_STACKED_POINTS_DIVISOR = 3; - -var MAINCHART_MIN_TIME_TO_SHOW = 1200; // how much time the main chart will present by default? -var MAINCHART_POINTS_DIVISOR = 2; // how much detailed will the main chart be by default? 1 = finest, higher is faster -var MAINCHART_STACKED_POINTS_DIVISOR = 3; // how much detailed will the main chart be by default? 1 = finest, higher is faster - -var MAINCHART_CONTROL_HEIGHT = 75; // how tall the control chart will be -var MAINCHART_CONTROL_DIVISOR = 5; // 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_MIN_TIME_TO_SHOW - -var CHARTS_REFRESH_LOOP = 50; // 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 = 100; // delay to wait after a page scroll - -var ENABLE_CURVE = 1; - -var resize_request = false; - -function setPresentationNormal(ui) { - THUMBS_POINTS_DIVISOR = 3; - THUMBS_STACKED_POINTS_DIVISOR = Math.round(THUMBS_POINTS_DIVISOR * 1.5); - GROUPS_POINTS_DIVISOR = 2; - GROUPS_STACKED_POINTS_DIVISOR = Math.round(GROUPS_POINTS_DIVISOR * 1.5); - MAINCHART_POINTS_DIVISOR = 2; - MAINCHART_STACKED_POINTS_DIVISOR = Math.round(MAINCHART_POINTS_DIVISOR * 1.5); - ENABLE_CURVE = 1; - CHARTS_REFRESH_LOOP = 50; - CHARTS_SCROLL_IDLE = 50; - resize_request = true; - if(ui) $('#presentation_normal').trigger('click'); - playGraphs(); -} -function setPresentationSpeedy(ui) { - THUMBS_POINTS_DIVISOR = 10; - THUMBS_STACKED_POINTS_DIVISOR = Math.round(THUMBS_POINTS_DIVISOR * 1.5); - GROUPS_POINTS_DIVISOR = 8; - GROUPS_STACKED_POINTS_DIVISOR = Math.round(GROUPS_POINTS_DIVISOR * 1.5); - MAINCHART_POINTS_DIVISOR = 5; - MAINCHART_STACKED_POINTS_DIVISOR = Math.round(MAINCHART_POINTS_DIVISOR * 1.5); - ENABLE_CURVE = 0; - CHARTS_REFRESH_LOOP = 50; - CHARTS_SCROLL_IDLE = 100; - resize_request = true; - if(ui) $('#presentation_speedy').trigger('click'); - playGraphs(); -} -function setPresentationDetailed(ui) { - THUMBS_POINTS_DIVISOR = 1; - THUMBS_STACKED_POINTS_DIVISOR = 1; - GROUPS_POINTS_DIVISOR = 1; - GROUPS_STACKED_POINTS_DIVISOR = 1; - MAINCHART_POINTS_DIVISOR = 1; - MAINCHART_STACKED_POINTS_DIVISOR = 1; - ENABLE_CURVE = 1; - CHARTS_REFRESH_LOOP = 50; - CHARTS_SCROLL_IDLE = 50; - resize_request = true; - if(ui) $('#presentation_detailed').trigger('click'); - playGraphs(); -} - -function isIE() { - userAgent = navigator.userAgent; - return userAgent.indexOf("MSIE ") > -1 || userAgent.indexOf("Trident/") > -1; -} - -if(isIE()){ - // do stuff with ie-users - CHARTS_REFRESH_LOOP=250; - CHARTS_SCROLL_IDLE=500; -} - -var MODE_THUMBS = 1; -var MODE_MAIN = 2; -var MODE_GROUP_THUMBS = 3; -var mode; // one of the MODE_* values - -var allCharts = new Array(); -var mainchart; - -// html for the main menu -var mainmenu = ""; -var categoriesmainmenu = ""; -var familiesmainmenu = ""; -var chartsmainmenu = ""; - - -// ------------------------------------------------------------------------ -// common HTML generation - -function thumbChartActions(i, c, nogroup) { - var name = c.name; - if(!nogroup) name = c.family; - - var refinfo = "the chart is drawing "; - if(c.group == 1) refinfo += "every single point collected (" + c.update_every + "s each)."; - else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data"; - - var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"" + refinfo + "\">" - + "<button type=\"button\" class=\"btn btn-default\" onclick=\"javascript: return;\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>" - + "</div>" - + "<div class=\"btn-group btn-group\"><button type=\"button\" class=\"btn btn-default disabled\"><small> " + name + "</small></button>"; - - if(!nogroup) { - var ingroup = 0; - var ingroup_detail = 0; - - $.each(allCharts, function(i, d) { - if(d.family == c.family) { - ingroup++; - if(d.isdetail) ingroup_detail++; - } - }); - - var hidden = ""; - if(ingroup_detail) hidden = ", including " + ingroup_detail + " charts not shown now"; - - html += "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Show all " + ingroup + " charts in group '" + c.family + "'" + hidden + "\" class=\"btn btn-default\" onclick=\"initGroupGraphs('" + c.family +"');\"><span class=\"glyphicon glyphicon-th-large\"></span></button>"; - } - - html += "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"show chart '" + c.name + "' in fullscreen\" class=\"btn btn-default\" onclick=\"initMainChartIndex(" + i +");\"><span class=\"glyphicon glyphicon-resize-full\"></span></button>" - + "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"set options for chart '" + c.name + "'\" class=\"btn btn-default disabled\" onclick=\"alert('Not implemented yet!');\"><span class=\"glyphicon glyphicon-cog\"></span></button>" - + "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"ignore chart '" + c.name + "'\" class=\"btn btn-default\" onclick=\"disableChart(" + i + ");\"><span class=\"glyphicon glyphicon-trash\"></span></button>" - + "</div>"; - - return html; -} - -function groupChartActions(i, c) { - var name = c.name; - - var refinfo = "the chart is drawing "; - if(c.group == 1) refinfo += "every single point collected (" + c.update_every + "s each)."; - else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data"; - - var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"" + refinfo + "\">" - + "<button type=\"button\" class=\"btn btn-default\" onclick=\"javascript: return;\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>" - + "</div>"; - - html += "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"show chart '" + c.name + "' in fullscreen\" class=\"btn btn-default\" onclick=\"initMainChartIndex(" + i +");\"><span class=\"glyphicon glyphicon-resize-full\"></span></button>" - + "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"ignore chart '" + c.name + "'\" class=\"btn btn-default\" onclick=\"disableChart(" + i + ");\"><span class=\"glyphicon glyphicon-trash\"></span></button>" - + "</div>"; - - return html; -} - -function mylog(txt) { - console.log(txt); - $('#logline').html(txt); -} - -function chartssort(a, b) { - if(a.priority == b.priority) { - if(a.name < b.name) return -1; - } - else if(a.priority < b.priority) return -1; - - return 1; -} - - -// ------------------------------------------------------------------------ -// MAINGRAPH = fullscreen view of 1 graph - -// copy the chart c to mainchart -// switch to main graphs screen -function initMainChart(c) { - if(mainchart) cleanThisChart(mainchart); - - mainchart = $.extend(true, {}, c); - mainchart.enabled = true; - mainchart.refreshCount = 0; - mainchart.last_updated = 0; - mainchart.chartOptions.explorer = null; - mainchart.chart = null; - - mainchart.before = 0; - mainchart.after = 0; - - mainchart.chartOptions.width = screenWidth(); - mainchart.chartOptions.height = $(window).height() - 150 - MAINCHART_CONTROL_HEIGHT; - if(mainchart.chartOptions.height < 300) mainchart.chartOptions.height = 300; - - mainchart.div = 'maingraph'; - mainchart.max_time_to_show = (mainchart.last_entry_t - mainchart.first_entry_t) / ( MAINCHART_INITIAL_SELECTOR * mainchart.update_every ); - if(mainchart.max_time_to_show < MAINCHART_MIN_TIME_TO_SHOW) mainchart.max_time_to_show = MAINCHART_MIN_TIME_TO_SHOW; - calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, 0, ENABLE_CURVE); - - // copy it to the hidden chart - mainchart.hiddenchart = $.extend(true, {}, mainchart); - mainchart.hiddenchart.chartOptions.height = MAINCHART_CONTROL_HEIGHT; - mainchart.hiddenchart.div = 'maingraph_control'; - mainchart.hiddenchart.non_zero = 0; - - // initialize the div - showChartIsLoading(mainchart.div, mainchart.name, mainchart.chartOptions.width, mainchart.chartOptions.height); - document.getElementById(mainchart.hiddenchart.div).innerHTML = "<table><tr><td align=\"center\" width=\"" + mainchart.hiddenchart.chartOptions.width + "\" height=\"" + mainchart.hiddenchart.chartOptions.height + "\" style=\"vertical-align:middle\"><h4><span class=\"label label-default\">Please wait...</span></h4></td></tr></table>"; - //showChartIsLoading(mainchart.hiddenchart.div, mainchart.hiddenchart.name, mainchart.hiddenchart.chartOptions.width, mainchart.hiddenchart.chartOptions.height); - - // set the radio buttons - setMainChartGroupMethod(mainchart.group_method, 'no-refresh'); - setMainChartMax('normal'); - - $('#group' + mainchart.group).trigger('click'); - setMainChartGroup(mainchart.group, 'no-refresh'); - - switchToMainGraph(); -} - -function refreshHiddenChart(doNext) { - if(refresh_mode == REFRESH_PAUSED && mainchart.hiddenchart.last_updated != 0) { - if(typeof doNext == "function") doNext(); - return; - } - - // is it too soon for a refresh? - var now = new Date().getTime(); - if((now - mainchart.hiddenchart.last_updated) < (mainchart.update_every * 10 * 1000) || (now - mainchart.hiddenchart.last_updated) < (mainchart.hiddenchart.group * mainchart.hiddenchart.update_every * 1000)) { - if(typeof doNext == "function") doNext(); - return; - } - - if(mainchart.dashboard && mainchart.hiddenchart.refreshCount > 50) { - mainchart.dashboard.clear(); - mainchart.control_wrapper.clear(); - mainchart.hidden_wrapper.clear(); - - mainchart.dashboard = null; - mainchart.control_wrapper = null; - mainchart.hidden_wrapper = null; - mainchart.hiddenchart.last_updated = 0; - } - - if(!mainchart.dashboard) { - var controlopts = $.extend(true, {}, mainchart.chartOptions, { - lineWidth: 1, - height: mainchart.hiddenchart.chartOptions.height, - chartArea: {'width': '98%'}, - hAxis: {'baselineColor': 'none', viewWindowMode: 'maximized', gridlines: { count: 0 } }, - vAxis: {'title': null, gridlines: { count: 0 } }, - }); - - mainchart.dashboard = new google.visualization.Dashboard(document.getElementById('maingraph_dashboard')); - mainchart.control_wrapper = new google.visualization.ControlWrapper({ - controlType: 'ChartRangeFilter', - containerId: 'maingraph_control', - options: { - filterColumnIndex: 0, - ui: { - chartType: mainchart.chartType, - chartOptions: controlopts, - minRangeSize: (mainchart.max_time_to_show * 1000) / MAINCHART_POINTS_DIVISOR, - } - }, - }); - mainchart.hidden_wrapper = new google.visualization.ChartWrapper({ - chartType: mainchart.chartType, - containerId: 'maingraph_hidden', - options: { - isStacked: mainchart.chartOptions.isStacked, - width: mainchart.hiddenchart.chartOptions.width, - height: mainchart.hiddenchart.chartOptions.height, - //chartArea: {'height': '80%', 'width': '100%'}, - //hAxis: {'slantedText': false}, - //legend: {'position': 'none'} - }, - }); - - mainchart.hiddenchart.refreshCount = 0; - } - - // load the data for the control and the hidden wrappers - // calculate the group and points to show for the control chart - calculateChartPointsToShow(mainchart.hiddenchart, MAINCHART_CONTROL_DIVISOR, 0, -1, ENABLE_CURVE); - - $.ajax({ - url: generateChartURL(mainchart.hiddenchart), - dataType:"json", - cache: false - }) - .done(function(jsondata) { - if(!jsondata || jsondata.length == 0) return; - - mainchart.control_data = new google.visualization.DataTable(jsondata); - - if(mainchart.hiddenchart.last_updated == 0) { - google.visualization.events.addListener(mainchart.control_wrapper, 'ready', mainchartControlReadyEvent); - mainchart.dashboard.bind(mainchart.control_wrapper, mainchart.hidden_wrapper); - } - if(refresh_mode != REFRESH_PAUSED) { - // console.log('mainchart.points_to_show: ' + mainchart.points_to_show + ', mainchart.group: ' + mainchart.group + ', mainchart.update_every: ' + mainchart.update_every); - - var start = now - (mainchart.points_to_show * mainchart.group * mainchart.update_every * 1000); - var end = now; - var min = MAINCHART_MIN_TIME_TO_SHOW * 1000; - if(end - start < min) start = end - min; - - mainchart.control_wrapper.setState({range: { - start: new Date(start), - end: new Date(end) - }, - ui: { - minRangeSize: min - }}); - } - - mainchart.dashboard.draw(mainchart.control_data); - mainchart.hiddenchart.last_updated = new Date().getTime(); - mainchart.hiddenchart.refreshCount++; - }) - .always(function() { - if(typeof doNext == "function") doNext(); - }); -} - -function mainchartControlReadyEvent() { - google.visualization.events.addListener(mainchart.control_wrapper, 'statechange', mainchartControlStateHandler); - //mylog(mainchart); -} - -function mainchartControlStateHandler() { - // setMainChartPlay('pause'); - - var state = mainchart.control_wrapper.getState(); - mainchart.after = Math.round(state.range.start.getTime() / 1000); - mainchart.before = Math.round(state.range.end.getTime() / 1000); - - calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.before - mainchart.after, 0, ENABLE_CURVE); - //mylog('group = ' + mainchart.group + ', points_to_show = ' + mainchart.points_to_show + ', dt = ' + (mainchart.before - mainchart.after)); - - $('#group' + mainchart.group).trigger('click'); - mainchart.last_updated = 0; - - if(refresh_mode != REFRESH_PAUSED) pauseGraphs(); -} - -function initMainChartIndex(i) { - if(mode == MODE_GROUP_THUMBS) - initMainChart(groupCharts[i]); - - else if(mode == MODE_THUMBS) - initMainChart(allCharts[i]); - - else - initMainChart(allCharts[i]); -} - -function initMainChartIndexOfMyCharts(i) { - initMainChart(allCharts[i]); -} - -var last_main_chart_max='normal'; -function setMainChartMax(m) { - if(!mainchart) return; - - if(m == 'toggle') { - if(last_main_chart_max == 'maximized') m = 'normal'; - else m = 'maximized'; - } - - if(m == "maximized") { - mainchart.chartOptions.theme = 'maximized'; - //mainchart.chartOptions.axisTitlesPosition = 'in'; - //mainchart.chartOptions.legend = {position: 'none'}; - mainchart.chartOptions.hAxis.title = null; - mainchart.chartOptions.hAxis.viewWindowMode = 'maximized'; - mainchart.chartOptions.vAxis.viewWindowMode = 'maximized'; - mainchart.chartOptions.chartArea = {'width': '98%', 'height': '100%'}; - } - else { - mainchart.chartOptions.hAxis.title = null; - mainchart.chartOptions.theme = null; - mainchart.chartOptions.hAxis.viewWindowMode = null; - mainchart.chartOptions.vAxis.viewWindowMode = null; - mainchart.chartOptions.chartArea = {'width': '80%', 'height': '90%'}; - } - $('.mainchart_max_button').button(m); - last_main_chart_max = m; - mainchart.last_updated = 0; -} - -function setMainChartGroup(g, norefresh) { - if(!mainchart) return; - - mainchart.group = g; - - if(!mainchart.before && !mainchart.after) - calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, mainchart.group, ENABLE_CURVE); - else - calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, 0, mainchart.group, ENABLE_CURVE); - - if(!norefresh) { - mainchart.last_updated = 0; - } -} - -var last_main_chart_avg = null; -function setMainChartGroupMethod(g, norefresh) { - if(!mainchart) return; - - if(g == 'toggle') { - if(last_main_chart_avg == 'max') g = 'average'; - else g = 'max'; - } - - mainchart.group_method = g; - - $('.mainchart_avg_button').button(g); - - if(!norefresh) { - mainchart.last_updated = 0; - } - - last_main_chart_avg = g; -} - -function setMainChartPlay(p) { - if(!mainchart) return; - - if(p == 'toggle') { - if(refresh_mode != REFRESH_ALWAYS) p = 'play'; - else p = 'pause'; - } - - if(p == 'play') { - //mainchart.chartOptions.explorer = null; - mainchart.after = 0; - mainchart.before = 0; - calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, 0, ENABLE_CURVE); - $('#group' + mainchart.group).trigger('click'); - mainchart.last_updated = 0; - mainchart.hiddenchart.last_updated = 0; - playGraphs(); - } - else { - //mainchart.chartOptions.explorer = { - // 'axis': 'horizontal', - // 'maxZoomOut': 1, - //}; - //mainchart.last_updated = 0; - - //if(!renderChart(mainchart, pauseGraphs)) - pauseGraphs(); - } -} - -function buttonGlobalPlayPause(p) { - if(mode == MODE_MAIN) { - setMainChartPlay(p); - return; - } - - if(p == 'toggle') { - if(refresh_mode != REFRESH_ALWAYS) p = 'play'; - else p = 'pause'; - } - - if(p == 'play') playGraphs(); - else pauseGraphs(); -} - - -// ------------------------------------------------------------------------ -// Chart resizing - -function screenWidth() { - return (($(window).width() * 0.95) - 50); -} - -// calculate the proper width for the thumb charts -function thumbWidth() { - var cwidth = screenWidth(); - var items = Math.round(cwidth / TARGET_THUMB_GRAPH_WIDTH); - if(items < 1) items = 1; - - if(items > 1 && (cwidth / items) < MINIMUM_THUMB_GRAPH_WIDTH) items--; - - return Math.round(cwidth / items) - 1; -} - -function groupChartSizes() { - var s = { width: screenWidth(), height: TARGET_GROUP_GRAPH_HEIGHT }; - - var count = 0; - if(groupCharts) $.each(groupCharts, function(i, c) { - if(c.enabled) count++; - }); - - if(count == 0) { - s.width = TARGET_GROUP_GRAPH_HEIGHT; - s.height = TARGET_GROUP_GRAPH_HEIGHT; - } - else { - if(s.width < MINIMUM_THUMB_GRAPH_WIDTH) s.width = screenWidth(); - s.height = ($(window).height() - 130) / count - 10; - } - - if(s.height < TARGET_GROUP_GRAPH_HEIGHT) - s.height = TARGET_GROUP_GRAPH_HEIGHT; - - return s; -} - -// resize all charts -// if the thumb charts need resize in their width, reset them -function resizeCharts() { - var width = screenWidth(); - - if(mainchart) { - mainchart.chartOptions.width = width; - mainchart.chartOptions.height = $(window).height() - 150 - MAINCHART_CONTROL_HEIGHT; - mainchart.last_updated = 0; - - mainchart.hidden_wrapper.setOption('width', width); - mainchart.control_wrapper.setOption('ui.chartOptions.width', width); - mainchart.hiddenchart.chartOptions.width = width; - mainchart.hiddenchart.last_updated = 0; - } - - width = thumbWidth(); - $.each(allCharts, function(i, c) { - if(c.enabled) { - cleanThisChart(c); - c.chartOptions.width = width; - calculateChartPointsToShow(c, c.chartOptions.isStacked?THUMBS_STACKED_POINTS_DIVISOR:THUMBS_POINTS_DIVISOR, THUMBS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE); - showChartIsLoading(c.div, c.name, c.chartOptions.width, c.chartOptions.height); - document.getElementById(c.id + '_thumb_actions_div').innerHTML = thumbChartActions(i, c); - c.last_updated = 0; - } - }); - - if(groupCharts) $.each(groupCharts, function(i, c) { - var sizes = groupChartSizes(); - - if(c.enabled) { - cleanThisChart(c); - c.chartOptions.width = sizes.width; - c.chartOptions.height = sizes.height; - calculateChartPointsToShow(c, c.chartOptions.isStacked?GROUPS_STACKED_POINTS_DIVISOR:GROUPS_POINTS_DIVISOR, GROUPS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE); - showChartIsLoading(c.div, c.name, c.chartOptions.width, c.chartOptions.height); - document.getElementById(c.id + '_group_actions_div').innerHTML = groupChartActions(i, c); - c.last_updated = 0; - } - }); - - updateUI(); -} - -window.onresize = function(event) { - resize_request = true; -}; - - -// ------------------------------------------------------------------------ -// Core of the thread refreshing the charts - -var REFRESH_PAUSED = 0; -var REFRESH_ALWAYS = 1; - -var refresh_mode = REFRESH_PAUSED; -var last_refresh = 0; -function playGraphs() { - mylog('playGraphs()'); - if(refresh_mode == REFRESH_ALWAYS) return; - - //mylog('PlayGraphs()'); - refresh_mode = REFRESH_ALWAYS; - $('.mainchart_play_button').button('play'); - $('.global_play_button').button('play'); - - // check if the thread died due to a javascript error - var now = new Date().getTime(); - if((now - last_refresh) > 60000) { - // it died or never started - //mylog('It seems the refresh thread died. Restarting it.'); - renderChartCallback(); - } -} - -function pauseGraphs() { - mylog('pauseGraphs()'); - if(refresh_mode == REFRESH_PAUSED) return; - - refresh_mode = REFRESH_PAUSED; - $('.mainchart_play_button').button('pause'); - $('.global_play_button').button('pause'); -} - -var interval = null; -function checkRefreshThread() { - if(interval == null) { - interval = setInterval(checkRefreshThread, 2000); - return; - } - - var now = new Date().getTime(); - if(now - last_refresh > 60000) { - mylog('Refresh thread died. Restarting it.'); - renderChartCallback(); - } -} - -// refresh the proper chart -// this is an internal function. -// never call it directly, or new javascript threads will be spawn -var timeout = null; -function renderChartCallback() { - last_refresh = new Date().getTime(); - - if(!page_is_visible) { - timeout = setTimeout(triggerRefresh, CHARTS_CHECK_NO_FOCUS); - return; - } - - if(resize_request) { - mylog('renderChartCallback() resize_request is set'); - cleanupCharts(); - resizeCharts(); - resize_request = false; - // refresh_mode = REFRESH_ALWAYS; - } - - if(last_user_scroll) { - var now = new Date().getTime(); - if((now - last_user_scroll) >= CHARTS_SCROLL_IDLE) { - last_user_scroll = 0; - mylog('Scrolling: resuming refresh...'); - } - else { - mylog('Scrolling: pausing refresh for ' + (CHARTS_SCROLL_IDLE - (now - last_user_scroll)) + ' ms...'); - timeout = setTimeout(triggerRefresh, CHARTS_SCROLL_IDLE - (now - last_user_scroll)); - return; - } - } - - if(refresh_mode == REFRESH_PAUSED) { - if(mode == MODE_MAIN && mainchart.last_updated == 0) { - mainChartRefresh(); - return; - } - - if(mode != MODE_MAIN) { - timeout = setTimeout(triggerRefresh, CHARTS_REFRESH_IDLE); - return; - } - } - - if(mode == MODE_THUMBS) timeout = setTimeout(thumbChartsRefreshNext, CHARTS_REFRESH_LOOP); - else if(mode == MODE_GROUP_THUMBS) timeout = setTimeout(groupChartsRefreshNext, CHARTS_REFRESH_LOOP); - else if(mode == MODE_MAIN) timeout = setTimeout(mainChartRefresh, CHARTS_REFRESH_LOOP); - else timeout = setTimeout(triggerRefresh, CHARTS_REFRESH_IDLE); -} - -// callback for refreshing the charts later -// this is an internal function. -// never call it directly, or new javascript threads will be spawn -function triggerRefresh() { - //mylog('triggerRefresh()'); - - if(!page_is_visible || (refresh_mode == REFRESH_PAUSED && mode != MODE_MAIN)) { - last_refresh = new Date().getTime(); - timeout = setTimeout(triggerRefresh, CHARTS_REFRESH_IDLE); - return; - } - - if(mode == MODE_THUMBS) timeout = setTimeout(renderChartCallback, CHARTS_REFRESH_IDLE); - else if(mode == MODE_GROUP_THUMBS) timeout = setTimeout(renderChartCallback, CHARTS_REFRESH_IDLE); - else if(mode == MODE_MAIN) timeout = setTimeout(renderChartCallback, CHARTS_REFRESH_IDLE); - else timeout = setTimeout(triggerRefresh, CHARTS_REFRESH_IDLE); -} - -// refresh the main chart -// make sure we don't loose the refreshing thread -function mainChartRefresh() { - //mylog('mainChartRefresh()'); - - if(mode != MODE_MAIN || !mainchart) { - triggerRefresh(); - return; - } - - if(refresh_mode == REFRESH_PAUSED && mainchart.last_updated != 0) { - hiddenChartRefresh(); - return; - } - - if(!renderChart(mainchart, hiddenChartRefresh)) - hiddenChartRefresh(); -} - -function hiddenChartRefresh() { - refreshHiddenChart(triggerRefresh); -} - -function roundRobinRenderChart(charts, startat) { - var refreshed = false; - - // find a chart to refresh - var all = charts.length; - var cur = startat + 1; - var count = 0; - - for(count = 0; count < all ; count++, cur++) { - if(cur >= all) cur = 0; - - if(charts[cur].enabled) { - refreshed = renderChart(charts[cur], renderChartCallback); - if(refreshed) { - mylog('Refreshed: ' + charts[cur].name); - break; - } - } - } - - if(!refreshed) triggerRefresh(); - return cur; -} - -// refresh the thumb charts -// make sure we don't loose the refreshing thread -var last_thumb_updated = 0; -function thumbChartsRefreshNext() { - //mylog('thumbChartsRefreshNext()'); - - if(allCharts.length == 0 || mode != MODE_THUMBS) { - triggerRefresh(); - return; - } - - last_thumb_updated = roundRobinRenderChart(allCharts, last_thumb_updated); -} - -// refresh the group charts -// make sure we don't loose the refreshing thread -var last_group_updated = 0; -function groupChartsRefreshNext() { - //mylog('groupChartsRefreshNext()'); - - if(!groupCharts || groupCharts.length == 0 || mode != MODE_GROUP_THUMBS) { - //mylog('cannot refresh charts'); - triggerRefresh(); - return; - } - - last_group_updated = roundRobinRenderChart(groupCharts, last_group_updated); -} - - -// ------------------------------------------------------------------------ -// switch the screen between views -// these should be called only from initXXXX() - -function disableChart(i) { - mylog('disableChart(' + i + ')'); - - var chart = null; - - var count = 0; - if(mode == MODE_GROUP_THUMBS && groupCharts) { - $.each(groupCharts, function(i, c) { - if(c.enabled) count++; - }); - - if(i < groupCharts.length) chart = groupCharts[i]; - } - else if(mode == MODE_THUMBS) { - $.each(allCharts, function(i, c) { - if(c.enabled) count++; - }); - - if(i < allCharts.length) chart = allCharts[i]; - } - - if(!chart) return; - - if(count <= 1) { - alert('Cannot close the last chart shown.'); - return; - } - - if(chart) { - mylog("request to disable chart " + chart.name); - chart.disablethisplease = true; - resize_request = true; - } - else - mylog("no chart to disable"); -} - -function cleanThisChart(chart, emptydivs) { - //mylog('cleanThisChart(' + chart.name + ', ' + emptydivs +')'); - - if(chart.dashboard) { - chart.dashboard.clear(); - chart.dashboard = null; - - if(chart.control_wrapper) { - chart.control_wrapper.clear(); - chart.control_wrapper = null; - } - - if(chart.hidden_wrapper) { - chart.hidden_wrapper.clear(); - chart.hidden_wrapper = null; - } - - chart.control_data = null; - } - - if(chart.chart) chart.chart.clearChart(); - chart.chart = null; - - if(emptydivs) { - var div = document.getElementById(chart.div); - if(div) { - div.style.display = 'none'; - div.innerHTML = ""; - } - - div = document.getElementById(chart.div + "_parent"); - if(div) { - div.style.display = 'none'; - div.innerHTML = ""; - } - } - - //mylog("chart " + chart.name + " cleaned with option " + emptydivs); -} - -// cleanup the previously shown charts -function cleanupCharts() { - // mylog('cleanupCharts()'); - - if(mode != MODE_MAIN && mainchart) { - if(mainchart.chart) cleanThisChart(mainchart); - mainchart = null; - } - - if(mode != MODE_GROUP_THUMBS && groupCharts) { - clearGroupGraphs(); - } - - // cleanup the disabled charts - $.each(allCharts, function(i, c) { - if(c.disablethisplease && c.enabled) { - cleanThisChart(c, 'emptydivs'); - c.disablethisplease = false; - c.enabled = false; - resize_request = true; - mylog("removed thumb chart " + c.name + " removed"); - } - }); - - if(groupCharts) $.each(groupCharts, function(i, c) { - if(c.disablethisplease && c.enabled) { - cleanThisChart(c, 'emptydivs'); - c.disablethisplease = false; - c.enabled = false; - resize_request = true; - mylog("removed group chart " + c.name + " removed"); - } - }); - - // we never cleanup the main chart -} - -function updateUI() { - $('[data-toggle="tooltip"]').tooltip({'container': 'body', 'html': true}); - - $('[data-spy="scroll"]').each(function () { - var $spy = $(this).scrollspy('refresh') - }) -} - -var thumbsScrollPosition = null; -function switchToMainGraph() { - //mylog('switchToMainGraph()'); - - if(!mainchart) return; - - if(!groupCharts) thumbsScrollPosition = window.pageYOffset; - - 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>" ; - - window.scrollTo(0, 0); - - mode = MODE_MAIN; - playGraphs(); - updateUI(); -} - -function switchToThumbGraphs() { - //mylog('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; - - if(thumbsScrollPosition) window.scrollTo(0, thumbsScrollPosition); - - // switch mode - mode = MODE_THUMBS; - playGraphs(); - updateUI(); -} - -function switchToGroupGraphs() { - //mylog('switchToGroupGraphs()'); - - if(!groupCharts) return; - - if(!mainchart) thumbsScrollPosition = window.pageYOffset; - - 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=\"#\">" + groupCharts[0].family + "</a></li>" + familiesmainmenu + chartsmainmenu + "</ul>"; - - window.scrollTo(0, 0); - - mode = MODE_GROUP_THUMBS; - playGraphs(); - updateUI(); -} - - -// ------------------------------------------------------------------------ -// Group Charts - -var groupCharts = null; -function initGroupGraphs(group) { - var count = 0; - - if(groupCharts) clearGroupGraphs(); - groupCharts = new Array(); - - var groupbody = ""; - $.each(allCharts, function(i, c) { - if(c.family == group) { - groupCharts[count] = []; - groupCharts[count] = $.extend(true, {}, c); - groupCharts[count].div += "_group"; - groupCharts[count].enabled = true; - groupCharts[count].chart = null; - groupCharts[count].last_updated = 0; - count++; - } - }); - groupCharts.sort(chartssort); - - var sizes = groupChartSizes(); - - var groupbody = ""; - $.each(groupCharts, function(i, c) { - c.chartOptions.width = sizes.width; - c.chartOptions.height = sizes.height; - c.chartOptions.chartArea.width = '85%'; - c.chartOptions.chartArea.height = '90%'; - c.chartOptions.hAxis.textPosition = 'in'; - c.chartOptions.hAxis.viewWindowMode = 'maximized'; - c.chartOptions.hAxis.textStyle = { "fontSize": 9 }; - c.chartOptions.vAxis.textStyle = { "fontSize": 9 }; - c.chartOptions.fontSize = 11; - c.chartOptions.titlePosition = 'in'; - c.chartOptions.tooltip = { "textStyle": { "fontSize": 9 } }; - c.chartOptions.legend = { "textStyle": { "fontSize": 9 } }; - - calculateChartPointsToShow(c, c.chartOptions.isStacked?GROUPS_STACKED_POINTS_DIVISOR:GROUPS_POINTS_DIVISOR, GROUPS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE); - - groupbody += "<div class=\"thumbgraph\" id=\"" + c.div + "_parent\"><table><tr><td width='" + sizes.width + "'><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "</div></td><td id=\"" + c.id + "_group_actions_div\" align=\"center\">" + groupChartActions(i, c) + "</td></tr><tr><td width='15'></td></tr></table></div>"; - //groupbody += "<div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "</div>"; - }); - groupbody += ""; - - document.getElementById("groupgraphs").innerHTML = groupbody; - switchToGroupGraphs(); -} - -function clearGroupGraphs() { - if(groupCharts && groupCharts.length) { - $.each(groupCharts, function(i, c) { - cleanThisChart(c, 'emptydivs'); - }); - - groupCharts = null; - } - - document.getElementById("groupgraphs").innerHTML = ""; -} - - -// ------------------------------------------------------------------------ -// Global entry point -// initialize the thumb charts - -var last_user_scroll = 0; - -// load the charts from the server -// generate html for the thumbgraphs to support them -function initCharts() { - setPresentationNormal(1); - - var width = thumbWidth(); - var height = TARGET_THUMB_GRAPH_HEIGHT; - - window.onscroll = function (e) { - last_user_scroll = new Date().getTime(); - mylog('Scrolling: detected'); - } - - loadCharts(null, function(all) { - allCharts = all.charts; - - if(allCharts == null || allCharts.length == 0) { - alert("Cannot load data from server."); - return; - } - - var thumbsContainer = document.getElementById("thumbgraphs"); - if(!thumbsContainer) { - alert("Cannot find the thumbsContainer"); - return; - } - - allCharts.sort(chartssort); - - document.getElementById('hostname_id').innerHTML = all.hostname; - document.title = all.hostname; - - // create an array for grouping all same-type graphs together - var dimensions = 0; - var categories = new Array(); - var families = new Array(); - var chartslist = new Array(); - $.each(allCharts, function(i, c) { - var j; - - chartslist.push({name: c.name, type: c.type, id: i}); - - dimensions += c.dimensions.length; - c.chartOptions.width = width; - c.chartOptions.height = height; - - // calculate how many point to show for each chart - //c.points_to_show = Math.round(c.entries / c.group) - 1; - // show max 10 mins of data - //if(c.points_to_show * c.group > THUMBS_MAX_TIME_TO_SHOW) c.points_to_show = THUMBS_MAX_TIME_TO_SHOW / c.group; - calculateChartPointsToShow(c, c.chartOptions.isStacked?THUMBS_STACKED_POINTS_DIVISOR:THUMBS_POINTS_DIVISOR, THUMBS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE); - - if(c.enabled) { - 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 id=\"" + c.id + "_thumb_actions_div\" align=\"center\">" - + thumbChartActions(i, c) - + "</td></tr><tr><td height='15'></td></tr></table></div>"; - - // find the categories object for this type - for(j = 0; j < categories.length ;j++) { - if(categories[j].name == c.type) { - categories[j].html += h; - categories[j].count++; - break; - } - } - - if(j == categories.length) - categories.push({name: c.type, title: c.category, description: '', priority: c.categoryPriority, count: 1, glyphicon: c.glyphicon, html: h}); - } - - // find the families object for this type - for(j = 0; j < families.length ;j++) { - if(families[j].name == c.family) { - families[j].count++; - break; - } - } - - if(j == families.length) - families.push({name: c.family, count: 1}); - }); - - document.getElementById('server_summary_id').innerHTML = "<small>NetData server at <b>" + all.hostname + "</b> is maintaining <b>" + allCharts.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>"; - - $.each(categories, function(i, a) { - a.html = "<tr><td id=\"" + a.name + "\"><ol class=\"breadcrumb graphs\"><li class=\"active\"><span class=\"glyphicon " + a.glyphicon + "\"></span> <a id=\"" + a.name + "\" href=\"#" + a.name + "\"><b>" + a.title + "</b> " + a.description + " </a></li></ol></td></tr><tr><td><div class=\"thumbgraphs\">" + a.html + "</td></tr>"; - }); - - function categoriessort(a, b) { - if(a.priority < b.priority) return -1; - return 1; - } - categories.sort(categoriessort); - - function familiessort(a, b) { - if(a.name < b.name) return -1; - return 1; - } - families.sort(familiessort); - - function chartslistsort(a, b) { - if(a.name < b.name) return -1; - return 1; - } - chartslist.sort(chartslistsort); - - // combine all the htmls into one - var allcategories = "<table width=\"100%\">"; - mainmenu = '<ul class="nav navbar-nav">'; - - categoriesmainmenu = '<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class=\"glyphicon glyphicon-fire\"></span> Dashboard Sections <b class="caret"></b></a><ul class="dropdown-menu">'; - $.each(categories, function(i, a) { - allcategories += a.html; - categoriesmainmenu += "<li><a href=\"#" + a.name + "\">" + a.title + "</a></li>"; - }); - categoriesmainmenu += "</ul></li>"; - allcategories += "</table>"; - - 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">'; - $.each(families, function(i, a) { - familiesmainmenu += "<li><a href=\"javascript:initGroupGraphs('" + a.name + "');\">" + a.name + " <span class=\"badge pull-right\">" + a.count + "</span></a></li>"; - }); - familiesmainmenu += "</ul></li>"; - - 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">'; - $.each(chartslist, function(i, a) { - chartsmainmenu += "<li><a href=\"javascript:initMainChartIndexOfMyCharts('" + a.id + "');\">" + a.name + "</a></li>"; - }); - chartsmainmenu += "</ul></li>"; - - mainmenu += categoriesmainmenu; - mainmenu += familiesmainmenu; - mainmenu += chartsmainmenu; - mainmenu += '<li role="presentation" class="disabled" style="display: none;"><a href="#" id="logline"></a></li></ul>'; - - thumbsContainer.innerHTML = allcategories; - switchToThumbGraphs(); - checkRefreshThread(); - }); -} - -$(window).blur(function() { - page_is_visible = 0; - mylog('Lost Focus!'); -}); - -$(window).focus(function() { - page_is_visible = 1; - mylog('Focus restored!'); -}); - -// Set a callback to run when the Google Visualization API is loaded. -google.setOnLoadCallback(initCharts); |