focus: false,
visibility: false,
chart_data_url: false,
- chart_errors: false,
+ chart_errors: true, // FIXME
chart_timing: false,
chart_calls: false,
libraries: false,
state.easyPieChartEvent.timer = setTimeout(function() {
state.easyPieChartEvent.timer = null;
state.easyPieChart_instance.update(state.easyPieChartEvent.pcent);
- }, 50);
+ }, 100);
}
return true;
}
};
+ 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)
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;
};
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;
};
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))],
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);
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);
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;
};
// categories / sections
'system': 'Overview of the key system metrices.',
- 'tc': 'Netdata collects and visualizes tc class utilization using its <a href="https://github.com/firehol/netdata/blob/master/plugins.d/tc-qos-helper.sh" target="_blank">tc-helper plugin</a>. If you also use <a href="http://firehol.org/#fireqos" target="_blank">FireQOS</a> for setting up QoS, netdata automatically collects interface and class names.',
+ 'tc': 'Netdata collects and visualizes tc class utilization using its <a href="https://github.com/firehol/netdata/blob/master/plugins.d/tc-qos-helper.sh" target="_blank">tc-helper plugin</a>. If you also use <a href="http://firehol.org/#fireqos" target="_blank">FireQOS</a> 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 <code>/proc/net/dev</code>.',
'apps': 'Per application statistics are collected using netdata\'s <code>apps.plugin</code>. This plugin walks through the entire <code>/proc</code> filesystem and aggregates statistics for applications of interest, defined in <code>/etc/netdata/apps_groups.conf</code> (the default is <a href="https://github.com/firehol/netdata/blob/master/conf.d/apps_groups.conf" target="_blank">here</a>). The plugin internaly builds a process tree (much like <code>ps fax</code> 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).<br/><b>IMPORTANT</b>: 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 <b>only when the child exits</b>. 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 <b>the currently running processes</b>.',
sidebar += '<li class><a href="#' + name2id(t.name) + '_' + name2id(c.name) + '">' + menuitem + '</a></li>';
html += '<div class="netdata-group-container" id="interface_' + name2id(t.name) + '_' + name2id(c.name) + '" style="display: inline-block; width: ' + pcent_width.toString() + '%"><h2 id="' + name2id(t.name) + '_' + name2id(c.name) + '" class="netdata-chart-alignment" role="heading">' + menuitem + '</h2>';
+
+ var head = '<div style="width: 100%; text-align: center;">';
+ 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 += '<div data-netdata="' + f.id + '"'
+ + ' data-dimensions="received"'
+ + ' data-chart-library="gauge"'
+ + ' data-gauge-adjust="width"'
+ + ' data-title="Receive"'
+ + ' data-width="100px"'
+ + ' data-height="100px"'
+ + ' data-before="0"'
+ + ' data-after="-' + duration.toString() + '"'
+ + ' data-points="' + duration.toString() + '"'
+ + ' data-colors="' + NETDATA.colors[0] + '"'
+ + ' role="application"></div>';
+
+ head += '<div data-netdata="' + f.id + '"'
+ + ' data-dimensions="sent"'
+ + ' data-chart-library="gauge"'
+ + ' data-gauge-adjust="width"'
+ + ' data-title="Sent"'
+ + ' data-width="100px"'
+ + ' data-height="100px"'
+ + ' data-before="0"'
+ + ' data-after="-' + duration.toString() + '"'
+ + ' data-points="' + duration.toString() + '"'
+ + ' data-colors="' + NETDATA.colors[1] + '"'
+ + ' role="application"></div>';
+ break;
+
+ case 'tc':
+ h = options.chartsHeight;
+ if(f.id.match(/.*-ifb$/) !== null)
+ head += '<div data-netdata="' + f.id + '"'
+ + ' data-chart-library="gauge"'
+ + ' data-gauge-adjust="width"'
+ + ' data-title="Receive"'
+ + ' data-width="100px"'
+ + ' data-height="100px"'
+ + ' data-before="0"'
+ + ' data-after="-' + duration.toString() + '"'
+ + ' data-points="' + duration.toString() + '"'
+ + ' data-colors="' + NETDATA.colors[2] + '"'
+ + ' role="application"></div>';
+
+ else
+ head += '<div data-netdata="' + f.id + '"'
+ + ' data-chart-library="gauge"'
+ + ' data-gauge-adjust="width"'
+ + ' data-title="Sent"'
+ + ' data-width="100px"'
+ + ' data-height="100px"'
+ + ' data-before="0"'
+ + ' data-after="-' + duration.toString() + '"'
+ + ' data-points="' + duration.toString() + '"'
+ + ' data-colors="' + NETDATA.colors[3] + '"'
+ + ' role="application"></div>';
+ break;
case 'ap_bandwidth': h = options.chartsHeight; break;
case 'ap_bitrate' : h = options.chartsHeight; break;
}
-
html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
+
all += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
+ ' data-width="100%"'
+ ' data-height="' + h.toString() + 'px"'
+ ' data-before="0"'
+ ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
+ ' role="application"></div>';
});
- html += '</div>'; // netdata-group-container
+
+ head += '</div>';
+ html += head + all + '</div>'; // netdata-group-container
});
sidebar += '</ul>';
}
head += '<div data-netdata="' + f.id + '"'
+ ' data-dimensions="in"'
+ ' data-chart-library="gauge"'
- + ' data-title="Bytes In"'
+ + ' data-title="Received"'
+ ' data-gauge-adjust="width"'
+ ' data-width="100px"'
+ ' data-height="100px"'
head += '<div data-netdata="' + f.id + '"'
+ ' data-dimensions="out"'
+ ' data-chart-library="gauge"'
- + ' data-title="Bytes Out"'
+ + ' data-title="Sent"'
+ ' data-gauge-adjust="width"'
+ ' data-width="100px"'
+ ' data-height="100px"'
projects / netdata.git / commitdiff