From a81a85a1dffd0e1a39759b5954153f1fa1472dcc Mon Sep 17 00:00:00 2001 From: "Costa Tsaousis (ktsaou)" Date: Sat, 9 Jan 2016 17:40:13 +0200 Subject: [PATCH] gauge fixes --- web/dashboard.js | 130 +++++++++++++++++++++++++++++++++-------------- web/index.html | 76 ++++++++++++++++++++++++--- 2 files changed, 161 insertions(+), 45 deletions(-) diff --git a/web/dashboard.js b/web/dashboard.js index c61e570e..5c049b36 100755 --- a/web/dashboard.js +++ b/web/dashboard.js @@ -227,7 +227,7 @@ focus: false, visibility: false, chart_data_url: false, - chart_errors: false, + chart_errors: true, // FIXME chart_timing: false, chart_calls: false, libraries: false, @@ -4240,7 +4240,7 @@ state.easyPieChartEvent.timer = setTimeout(function() { state.easyPieChartEvent.timer = null; state.easyPieChart_instance.update(state.easyPieChartEvent.pcent); - }, 50); + }, 100); } return true; @@ -4381,6 +4381,62 @@ } }; + NETDATA.gaugeAnimation = function(state, status) { + var speed = 32; + + if(typeof status === 'boolean' && status === false) + speed = 1000000000; + else if(typeof status === 'number') + speed = status; + + state.gauge_instance.animationSpeed = speed; + state.___gaugeOld__.speed = speed; + } + + NETDATA.gaugeSet = function(state, value, min, max) { + if(typeof value !== 'number') value = 0; + if(typeof min !== 'number') min = 0; + if(typeof max !== 'number') max = 0; + if(value > max) max = value; + if(value < min) min = value; + + if(max >= state.___gaugeOld__.max && min <= state.___gaugeOld__.min) { + state.gauge_instance.minValue = min; + state.gauge_instance.maxValue = max; + state.gauge_instance.set(value); + } + else { + // we can lower the maxValue or increase the minValue + // of gauge.js, only if we disable animation + // otherwise, the gauge will go crazy + var old_speed = state.___gaugeOld__.speed; + NETDATA.gaugeAnimation(state, false); + state.gauge_instance.minValue = min; + state.gauge_instance.maxValue = max; + state.gauge_instance.set(value); + NETDATA.gaugeAnimation(state, old_speed); + } + + state.___gaugeOld__.value = value; + state.___gaugeOld__.min = min; + state.___gaugeOld__.max = max; + }; + + NETDATA.gaugeSetLabels = function(state, value, min, max) { + if(state.___gaugeOld__.valueLabel !== value) { + state.___gaugeOld__.valueLabel = value; + state.gaugeChartLabel.innerHTML = state.legendFormatValue(value); + } + if(state.___gaugeOld__.minLabel !== min) { + state.___gaugeOld__.minLabel = min; + state.gaugeChartMin.innerHTML = state.legendFormatValue(min); + } + if(state.___gaugeOld__.maxLabel !== max) { + state.___gaugeOld__.maxLabel = max; + state.gaugeChartMax.innerHTML = state.legendFormatValue(max); + } + }; + NETDATA.gaugeClearSelection = function(state) { if(typeof state.gaugeEvent !== 'undefined') { if(state.gaugeEvent.timer !== null) @@ -4393,13 +4449,12 @@ NETDATA.gaugeChartUpdate(state, state.data); } else { - state.gaugeChartLabel.innerHTML = state.legendFormatValue(null); - state.gaugeChartMax.innerHTML = state.legendFormatValue(null); - state.gauge_instance.animationSpeed = 1; - state.gauge_instance.set(0); + NETDATA.gaugeAnimation(state, false); + NETDATA.gaugeSet(state, null, null, null); + NETDATA.gaugeSetLabels(state, null, null, null); } - state.gauge_instance.animationSpeed = 32; + NETDATA.gaugeAnimation(state, true); return true; }; @@ -4415,51 +4470,50 @@ state.gaugeEvent = { timer: null, value: 0, - max: 0, + min: 0, + max: 0 }; } var value = state.data.result[slot]; var max = (state.gaugeMax === null)?state.data.max:state.gaugeMax; - if(value > max) max = value; + var min = 0; state.gaugeEvent.value = value; state.gaugeEvent.max = max; - state.gaugeChartLabel.innerHTML = state.legendFormatValue(value); - state.gaugeChartMax.innerHTML = state.legendFormatValue(max); + state.gaugeEvent.min = min; + NETDATA.gaugeSetLabels(state, value, min, max); if(state.gaugeEvent.timer === null) { - state.gauge_instance.animationSpeed = 1; + NETDATA.gaugeAnimation(state, false); state.gaugeEvent.timer = setTimeout(function() { state.gaugeEvent.timer = null; - state.gauge_instance.maxValue = state.gaugeEvent.max; - state.gauge_instance.set(state.gaugeEvent.value); - }, 50); + NETDATA.gaugeSet(state, state.gaugeEvent.value, state.gaugeEvent.min, state.gaugeEvent.max); + }, 100); } return true; }; NETDATA.gaugeChartUpdate = function(state, data) { - var value, max; + var value, min, max; if(NETDATA.globalPanAndZoom.isActive() === true || state.isAutoRefreshed() === false) { value = 0; - state.gaugeChartLabel.innerHTML = state.legendFormatValue(null); - state.gaugeChartMax.innerHTML = state.legendFormatValue(null); - state.gauge_instance.set(value); + min = 0; + max = 1; + NETDATA.gaugeSetLabels(state, null, null, null); } else { value = data.result[0]; + min = 0; max = (state.gaugeMax === null)?data.max:state.gaugeMax; if(value > max) max = value; - state.gaugeChartLabel.innerHTML = state.legendFormatValue(value); - state.gaugeChartMax.innerHTML = state.legendFormatValue(max); - state.gauge_instance.maxValue = max; - state.gauge_instance.set(value); + NETDATA.gaugeSetLabels(state, value, min, max); } + NETDATA.gaugeSet(state, value, min, max); return true; }; @@ -4499,9 +4553,11 @@ color: '#C0C0C0' // Fill color }, colorStart: state.chartColors()[0], // Colors - colorStop: state.chartColors()[0], // just experiment with them + colorStop: void 0, // just experiment with them strokeColor: '#F0F0F0', // to see which ones work best for you + limitMax: true, generateGradient: false, + gradientType: 0, percentColors: [ [0.0, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 0))], [0.1, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 1))], @@ -4527,7 +4583,6 @@ var valuetop = Math.round((height - valuefontsize - (height / 6)) / 2); state.gaugeChartLabel = document.createElement('span'); state.gaugeChartLabel.className = 'gaugeChartLabel'; - state.gaugeChartLabel.innerHTML = state.legendFormatValue(value); state.gaugeChartLabel.style.fontSize = valuefontsize + 'px'; state.gaugeChartLabel.style.top = valuetop.toString() + 'px'; state.element_chart.appendChild(state.gaugeChartLabel); @@ -4551,13 +4606,11 @@ state.gaugeChartMin = document.createElement('span'); state.gaugeChartMin.className = 'gaugeChartMin'; - state.gaugeChartMin.innerHTML = 0; state.gaugeChartMin.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px'; state.element_chart.appendChild(state.gaugeChartMin); state.gaugeChartMax = document.createElement('span'); state.gaugeChartMax.className = 'gaugeChartMax'; - state.gaugeChartMax.innerHTML = state.legendFormatValue(max); state.gaugeChartMax.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px'; state.element_chart.appendChild(state.gaugeChartMax); @@ -4568,19 +4621,20 @@ animate = false; state.gauge_instance = new Gauge(state.gauge_canvas).setOptions(options); // create sexy gauge! - - // set max gauge value - state.gauge_instance.maxValue = max; - // set animation speed (32 is default value) - if(animate === false) state.gauge_instance.animationSpeed = 32; - else state.gauge_instance.animationSpeed = 1; - - // set actual value - state.gauge_instance.set(value); + state.___gaugeOld__ = { + value: value, + min: 0, + max: max, + valueLabel: null, + minLabel: null, + maxLabel: null + }; - // restore animation - state.gauge_instance.animationSpeed = 32; + NETDATA.gaugeAnimation(state, animate); + NETDATA.gaugeSet(state, value, 0, max); + NETDATA.gaugeSetLabels(state, value, 0, max); + NETDATA.gaugeAnimation(state, true); return true; }; diff --git a/web/index.html b/web/index.html index 11b71868..99c72e0d 100755 --- a/web/index.html +++ b/web/index.html @@ -558,7 +558,7 @@ var messages = { // categories / sections 'system': 'Overview of the key system metrices.', - 'tc': 'Netdata collects and visualizes tc class utilization using its tc-helper plugin. If you also use FireQOS for setting up QoS, netdata automatically collects interface and class names.', + 'tc': 'Netdata collects and visualizes tc class utilization using its tc-helper plugin. If you also use FireQOS for setting up QoS, netdata automatically collects interface and class names. If your QoS configuration includes overheads calculation, the values shown here will include these overheads (the total bandwidth for the same interface as reported in the Network Interfaces section, will be lower than the total bandwidth reported here). Also, data collection may have a slight time difference compared to the interface (QoS data collection is implemented with a BASH script, so a shift in data collection of a few milliseconds should be justified).', 'net': 'Per network interface statistics collected from /proc/net/dev.', 'apps': 'Per application statistics are collected using netdata\'s apps.plugin. This plugin walks through the entire /proc filesystem and aggregates statistics for applications of interest, defined in /etc/netdata/apps_groups.conf (the default is here). The plugin internaly builds a process tree (much like ps fax does), and groups processes together (evaluating both child and parent processes) so that the result is always a chart with a predefined set of dimensions (of course, only application groups found running are reported).
IMPORTANT: The values shown here are not 100% accurate. They only include values for the processes running. If an application is spawning childs continiously, which are terminated in just a few milliseconds (like shell scripts do), the values reported will be inaccurate. Linux does report the values for the exited childs of a process. However, these values are reported to the parent process only when the child exits. If these values, of the exited child processes, were also aggregated in the charts below, the charts would have been full of spikes, presenting unrealisting utilization for each process group. So, we decided to ignore these values and present only the utilization of the currently running processes.', @@ -896,17 +896,77 @@ function prepareScreen(data) { sidebar += '
  • ' + menuitem + '
    • '; html += '

    ' + menuitem + '

    '; + + var head = '
    '; + var all = ''; + $.each(c.values, function(x, f) { var c = null; var h = options.chartsHeight / 2; switch(f.type) { - case 'net' : h = options.chartsHeight; break; - case 'tc' : h = options.chartsHeight; break; + case 'net': + h = options.chartsHeight; + + head += '
    '; + + head += '
    '; + break; + + case 'tc': + h = options.chartsHeight; + if(f.id.match(/.*-ifb$/) !== null) + head += '
    '; + + else + head += '
    '; + break; case 'ap_bandwidth': h = options.chartsHeight; break; case 'ap_bitrate' : h = options.chartsHeight; break; } - html += getMessage(f.id) + '
    '; }); - html += '
    '; // netdata-group-container + + head += '
    '; + html += head + all + ''; // netdata-group-container }); sidebar += ''; } @@ -1194,7 +1256,7 @@ function prepareScreen(data) { head += '