gauge fixes
Costa Tsaousis (ktsaou) committed
Jan 9, 2016 at 17:40 UTC
a81a85a1dffd0e1a39759b5954153f1fa1472dcc
2 files changed
+161
-45
web/dashboard.js
+92
-38
@@ -227,7 +227,7 @@
227
focus: false,
228
visibility: false,
229
chart_data_url: false,
230
- chart_errors: false,
230
+ chart_errors: true, // FIXME
231
chart_timing: false,
232
chart_calls: false,
233
libraries: false,
@@ -4240,7 +4240,7 @@
4240
state.easyPieChartEvent.timer = setTimeout(function() {
4241
state.easyPieChartEvent.timer = null;
4242
state.easyPieChart_instance.update(state.easyPieChartEvent.pcent);
4243
- }, 50);
4243
+ }, 100);
4244
}
4245
4246
return true;
@@ -4381,6 +4381,62 @@
4381
}
4382
};
4383
4384
+ NETDATA.gaugeAnimation = function(state, status) {
4385
+ var speed = 32;
4386
+
4387
+ if(typeof status === 'boolean' && status === false)
4388
+ speed = 1000000000;
4389
+ else if(typeof status === 'number')
4390
+ speed = status;
4391
+
4392
+ state.gauge_instance.animationSpeed = speed;
4393
+ state.___gaugeOld__.speed = speed;
4394
+ }
4395
+
4396
+ NETDATA.gaugeSet = function(state, value, min, max) {
4397
+ if(typeof value !== 'number') value = 0;
4398
+ if(typeof min !== 'number') min = 0;
4399
+ if(typeof max !== 'number') max = 0;
4400
+ if(value > max) max = value;
4401
+ if(value < min) min = value;
4402
+
4403
+ if(max >= state.___gaugeOld__.max && min <= state.___gaugeOld__.min) {
4404
+ state.gauge_instance.minValue = min;
4405
+ state.gauge_instance.maxValue = max;
4406
+ state.gauge_instance.set(value);
4407
+ }
4408
+ else {
4409
+ // we can lower the maxValue or increase the minValue
4410
+ // of gauge.js, only if we disable animation
4411
+ // otherwise, the gauge will go crazy
4412
+ var old_speed = state.___gaugeOld__.speed;
4413
+ NETDATA.gaugeAnimation(state, false);
4414
+ state.gauge_instance.minValue = min;
4415
+ state.gauge_instance.maxValue = max;
4416
+ state.gauge_instance.set(value);
4417
+ NETDATA.gaugeAnimation(state, old_speed);
4418
+ }
4419
+
4420
+ state.___gaugeOld__.value = value;
4421
+ state.___gaugeOld__.min = min;
4422
+ state.___gaugeOld__.max = max;
4423
+ };
4424
+
4425
+ NETDATA.gaugeSetLabels = function(state, value, min, max) {
4426
+ if(state.___gaugeOld__.valueLabel !== value) {
4427
+ state.___gaugeOld__.valueLabel = value;
4428
+ state.gaugeChartLabel.innerHTML = state.legendFormatValue(value);
4429
+ }
4430
+ if(state.___gaugeOld__.minLabel !== min) {
4431
+ state.___gaugeOld__.minLabel = min;
4432
+ state.gaugeChartMin.innerHTML = state.legendFormatValue(min);
4433
+ }
4434
+ if(state.___gaugeOld__.maxLabel !== max) {
4435
+ state.___gaugeOld__.maxLabel = max;
4436
+ state.gaugeChartMax.innerHTML = state.legendFormatValue(max);
4437
+ }
4438
+ };
4439
+
4440
NETDATA.gaugeClearSelection = function(state) {
4441
if(typeof state.gaugeEvent !== 'undefined') {
4442
if(state.gaugeEvent.timer !== null)
@@ -4393,13 +4449,12 @@
4449
NETDATA.gaugeChartUpdate(state, state.data);
4450
}
4451
else {
4396
- state.gaugeChartLabel.innerHTML = state.legendFormatValue(null);
4397
- state.gaugeChartMax.innerHTML = state.legendFormatValue(null);
4398
- state.gauge_instance.animationSpeed = 1;
4399
- state.gauge_instance.set(0);
4452
+ NETDATA.gaugeAnimation(state, false);
4453
+ NETDATA.gaugeSet(state, null, null, null);
4454
+ NETDATA.gaugeSetLabels(state, null, null, null);
4455
}
4401
- state.gauge_instance.animationSpeed = 32;
4456
4457
+ NETDATA.gaugeAnimation(state, true);
4458
return true;
4459
};
4460
@@ -4415,51 +4470,50 @@
4470
state.gaugeEvent = {
4471
timer: null,
4472
value: 0,
4418
- max: 0,
4473
+ min: 0,
4474
+ max: 0
4475
};
4476
}
4477
4478
var value = state.data.result[slot];
4479
var max = (state.gaugeMax === null)?state.data.max:state.gaugeMax;
4424
- if(value > max) max = value;
4480
+ var min = 0;
4481
4482
state.gaugeEvent.value = value;
4483
state.gaugeEvent.max = max;
4428
- state.gaugeChartLabel.innerHTML = state.legendFormatValue(value);
4429
- state.gaugeChartMax.innerHTML = state.legendFormatValue(max);
4484
+ state.gaugeEvent.min = min;
4485
+ NETDATA.gaugeSetLabels(state, value, min, max);
4486
4487
if(state.gaugeEvent.timer === null) {
4432
- state.gauge_instance.animationSpeed = 1;
4488
+ NETDATA.gaugeAnimation(state, false);
4489
4490
state.gaugeEvent.timer = setTimeout(function() {
4491
state.gaugeEvent.timer = null;
4436
- state.gauge_instance.maxValue = state.gaugeEvent.max;
4437
- state.gauge_instance.set(state.gaugeEvent.value);
4438
- }, 50);
4492
+ NETDATA.gaugeSet(state, state.gaugeEvent.value, state.gaugeEvent.min, state.gaugeEvent.max);
4493
+ }, 100);
4494
}
4495
4496
return true;
4497
};
4498
4499
NETDATA.gaugeChartUpdate = function(state, data) {
4445
- var value, max;
4500
+ var value, min, max;
4501
4502
if(NETDATA.globalPanAndZoom.isActive() === true || state.isAutoRefreshed() === false) {
4503
value = 0;
4449
- state.gaugeChartLabel.innerHTML = state.legendFormatValue(null);
4450
- state.gaugeChartMax.innerHTML = state.legendFormatValue(null);
4451
- state.gauge_instance.set(value);
4504
+ min = 0;
4505
+ max = 1;
4506
+ NETDATA.gaugeSetLabels(state, null, null, null);
4507
}
4508
else {
4509
value = data.result[0];
4510
+ min = 0;
4511
max = (state.gaugeMax === null)?data.max:state.gaugeMax;
4512
if(value > max) max = value;
4457
- state.gaugeChartLabel.innerHTML = state.legendFormatValue(value);
4458
- state.gaugeChartMax.innerHTML = state.legendFormatValue(max);
4459
- state.gauge_instance.maxValue = max;
4460
- state.gauge_instance.set(value);
4513
+ NETDATA.gaugeSetLabels(state, value, min, max);
4514
}
4515
4516
+ NETDATA.gaugeSet(state, value, min, max);
4517
return true;
4518
};
4519
@@ -4499,9 +4553,11 @@
4553
color: '#C0C0C0' // Fill color
4554
},
4555
colorStart: state.chartColors()[0], // Colors
4502
- colorStop: state.chartColors()[0], // just experiment with them
4556
+ colorStop: void 0, // just experiment with them
4557
strokeColor: '#F0F0F0', // to see which ones work best for you
4558
+ limitMax: true,
4559
generateGradient: false,
4560
+ gradientType: 0,
4561
percentColors: [
4562
[0.0, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 0))],
4563
[0.1, NETDATA.colorLuminance(state.chartColors()[0], (lum_d * 10) - (lum_d * 1))],
@@ -4527,7 +4583,6 @@
4583
var valuetop = Math.round((height - valuefontsize - (height / 6)) / 2);
4584
state.gaugeChartLabel = document.createElement('span');
4585
state.gaugeChartLabel.className = 'gaugeChartLabel';
4530
- state.gaugeChartLabel.innerHTML = state.legendFormatValue(value);
4586
state.gaugeChartLabel.style.fontSize = valuefontsize + 'px';
4587
state.gaugeChartLabel.style.top = valuetop.toString() + 'px';
4588
state.element_chart.appendChild(state.gaugeChartLabel);
@@ -4551,13 +4606,11 @@
4606
4607
state.gaugeChartMin = document.createElement('span');
4608
state.gaugeChartMin.className = 'gaugeChartMin';
4554
- state.gaugeChartMin.innerHTML = 0;
4609
state.gaugeChartMin.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px';
4610
state.element_chart.appendChild(state.gaugeChartMin);
4611
4612
state.gaugeChartMax = document.createElement('span');
4613
state.gaugeChartMax.className = 'gaugeChartMax';
4560
- state.gaugeChartMax.innerHTML = state.legendFormatValue(max);
4614
state.gaugeChartMax.style.fontSize = Math.round(valuefontsize * 0.75).toString() + 'px';
4615
state.element_chart.appendChild(state.gaugeChartMax);
4616
@@ -4568,19 +4621,20 @@
4621
animate = false;
4622
4623
state.gauge_instance = new Gauge(state.gauge_canvas).setOptions(options); // create sexy gauge!
4571
-
4572
- // set max gauge value
4573
- state.gauge_instance.maxValue = max;
4624
4575
- // set animation speed (32 is default value)
4576
- if(animate === false) state.gauge_instance.animationSpeed = 32;
4577
- else state.gauge_instance.animationSpeed = 1;
4578
-
4579
- // set actual value
4580
- state.gauge_instance.set(value);
4625
+ state.___gaugeOld__ = {
4626
+ value: value,
4627
+ min: 0,
4628
+ max: max,
4629
+ valueLabel: null,
4630
+ minLabel: null,
4631
+ maxLabel: null
4632
+ };
4633
4582
- // restore animation
4583
- state.gauge_instance.animationSpeed = 32;
4634
+ NETDATA.gaugeAnimation(state, animate);
4635
+ NETDATA.gaugeSet(state, value, 0, max);
4636
+ NETDATA.gaugeSetLabels(state, value, 0, max);
4637
+ NETDATA.gaugeAnimation(state, true);
4638
return true;
4639
};
4640
web/index.html
+69
-7
@@ -558,7 +558,7 @@ var messages = {
558
559
// categories / sections
560
'system': 'Overview of the key system metrices.',
561
- '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.',
561
+ '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).',
562
'net': 'Per network interface statistics collected from <code>/proc/net/dev</code>.',
563
'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>.',
564
@@ -896,17 +896,77 @@ function prepareScreen(data) {
896
897
sidebar += '<li class><a href="#' + name2id(t.name) + '_' + name2id(c.name) + '">' + menuitem + '</a></li>';
898
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>';
899
+
900
+ var head = '<div style="width: 100%; text-align: center;">';
901
+ var all = '';
902
+
903
$.each(c.values, function(x, f) {
904
var c = null;
905
var h = options.chartsHeight / 2;
906
switch(f.type) {
903
- case 'net' : h = options.chartsHeight; break;
904
- case 'tc' : h = options.chartsHeight; break;
907
+ case 'net':
908
+ h = options.chartsHeight;
909
+
910
+ head += '<div data-netdata="' + f.id + '"'
911
+ + ' data-dimensions="received"'
912
+ + ' data-chart-library="gauge"'
913
+ + ' data-gauge-adjust="width"'
914
+ + ' data-title="Receive"'
915
+ + ' data-width="100px"'
916
+ + ' data-height="100px"'
917
+ + ' data-before="0"'
918
+ + ' data-after="-' + duration.toString() + '"'
919
+ + ' data-points="' + duration.toString() + '"'
920
+ + ' data-colors="' + NETDATA.colors[0] + '"'
921
+ + ' role="application"></div>';
922
+
923
+ head += '<div data-netdata="' + f.id + '"'
924
+ + ' data-dimensions="sent"'
925
+ + ' data-chart-library="gauge"'
926
+ + ' data-gauge-adjust="width"'
927
+ + ' data-title="Sent"'
928
+ + ' data-width="100px"'
929
+ + ' data-height="100px"'
930
+ + ' data-before="0"'
931
+ + ' data-after="-' + duration.toString() + '"'
932
+ + ' data-points="' + duration.toString() + '"'
933
+ + ' data-colors="' + NETDATA.colors[1] + '"'
934
+ + ' role="application"></div>';
935
+ break;
936
+
937
+ case 'tc':
938
+ h = options.chartsHeight;
939
+ if(f.id.match(/.*-ifb$/) !== null)
940
+ head += '<div data-netdata="' + f.id + '"'
941
+ + ' data-chart-library="gauge"'
942
+ + ' data-gauge-adjust="width"'
943
+ + ' data-title="Receive"'
944
+ + ' data-width="100px"'
945
+ + ' data-height="100px"'
946
+ + ' data-before="0"'
947
+ + ' data-after="-' + duration.toString() + '"'
948
+ + ' data-points="' + duration.toString() + '"'
949
+ + ' data-colors="' + NETDATA.colors[2] + '"'
950
+ + ' role="application"></div>';
951
+
952
+ else
953
+ head += '<div data-netdata="' + f.id + '"'
954
+ + ' data-chart-library="gauge"'
955
+ + ' data-gauge-adjust="width"'
956
+ + ' data-title="Sent"'
957
+ + ' data-width="100px"'
958
+ + ' data-height="100px"'
959
+ + ' data-before="0"'
960
+ + ' data-after="-' + duration.toString() + '"'
961
+ + ' data-points="' + duration.toString() + '"'
962
+ + ' data-colors="' + NETDATA.colors[3] + '"'
963
+ + ' role="application"></div>';
964
+ break;
965
case 'ap_bandwidth': h = options.chartsHeight; break;
966
case 'ap_bitrate' : h = options.chartsHeight; break;
967
}
968
909
- html += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
969
+ all += getMessage(f.id) + '<div data-netdata="' + f.id + '"'
970
+ ' data-width="100%"'
971
+ ' data-height="' + h.toString() + 'px"'
972
+ ' data-before="0"'
@@ -915,7 +975,9 @@ function prepareScreen(data) {
975
+ ' data-id="' + name2id(options.hostname + '/' + f.id) + '"'
976
+ ' role="application"></div>';
977
});
918
- html += '</div>'; // netdata-group-container
978
+
979
+ head += '</div>';
980
+ html += head + all + '</div>'; // netdata-group-container
981
});
982
sidebar += '</ul>';
983
}
@@ -1194,7 +1256,7 @@ function prepareScreen(data) {
1256
head += '<div data-netdata="' + f.id + '"'
1257
+ ' data-dimensions="in"'
1258
+ ' data-chart-library="gauge"'
1197
- + ' data-title="Bytes In"'
1259
+ + ' data-title="Received"'
1260
+ ' data-gauge-adjust="width"'
1261
+ ' data-width="100px"'
1262
+ ' data-height="100px"'
@@ -1206,7 +1268,7 @@ function prepareScreen(data) {
1268
head += '<div data-netdata="' + f.id + '"'
1269
+ ' data-dimensions="out"'
1270
+ ' data-chart-library="gauge"'
1209
- + ' data-title="Bytes Out"'
1271
+ + ' data-title="Sent"'
1272
+ ' data-gauge-adjust="width"'
1273
+ ' data-width="100px"'
1274
+ ' data-height="100px"'