dashboard online help and button next to each chart to zoom in/out, pan left/right and reset all charts to their auto-refreshing state
Costa Tsaousis (ktsaou) committed
Apr 10, 2016 at 17:39 UTC
995d1418d1ab75d7e26fb23a0d660154ba20cadf
4 files changed
+317
-4
web/dashboard.css
+45
@@ -66,6 +66,43 @@ body {
66
margin: 0px;
67
}
68
69
+.netdata-legend-toolbox {
70
+ display: block;
71
+ position: absolute;
72
+ bottom: 0px;
73
+ right: 30px;
74
+ height: 15px;
75
+ width: 110px;
76
+ background-color: White;
77
+ font-size: 12px;
78
+ vertical-align: middle;
79
+ line-height: 15px;
80
+ color: #DDDDDD;
81
+ text-align: center;
82
+ overflow: hidden;
83
+ z-index: 20;
84
+ padding: 0px;
85
+ margin: 0px;
86
+}
87
+
88
+.netdata-legend-toolbox-button {
89
+ display: inline-block;
90
+ position: relative;
91
+ height: 15px;
92
+ width: 18px;
93
+ background-color: White;
94
+ font-size: 12px;
95
+ vertical-align: middle;
96
+ line-height: 15px;
97
+ color: #CDCDCD;
98
+ text-align: center;
99
+ overflow: hidden;
100
+ z-index: 21;
101
+ padding: 0px;
102
+ margin: 0px;
103
+ cursor: pointer;
104
+}
105
+
106
.netdata-message {
107
display: inline-block;
108
text-align: left;
@@ -453,3 +490,11 @@ body {
490
color: #999999;
491
font-weight: normal;
492
}
493
+
494
+.popover-title {
495
+ font-weight: bold;
496
+ font-size: 12px;
497
+}
498
+.popover-content {
499
+ font-size: 11px;
500
+}
web/dashboard.js
+202
@@ -242,6 +242,8 @@
242
243
destroy_on_hide: false, // destroy charts when they are not visible
244
245
+ show_help: true, // when enabled the charts will show some help
246
+
247
eliminate_zero_dimensions: true, // do not show dimensions with just zeros
248
249
stop_updates_when_focus_is_lost: true, // boolean - shall we stop auto-refreshes when document does not have user focus
@@ -257,6 +259,8 @@
259
color_fill_opacity_area: 0.2,
260
color_fill_opacity_stacked: 0.8,
261
262
+ pan_and_zoom_step: 0.1, // the increment when panning and zooming with the toolbox
263
+
264
setOptionCallback: function() { ; }
265
},
266
@@ -2117,6 +2121,13 @@
2121
this.element_legend_childs = {
2122
content: content,
2123
resize_handler: document.createElement('div'),
2124
+ toolbox: document.createElement('div'),
2125
+ toolbox_left: document.createElement('div'),
2126
+ toolbox_right: document.createElement('div'),
2127
+ toolbox_reset: document.createElement('div'),
2128
+ toolbox_zoomin: document.createElement('div'),
2129
+ toolbox_zoomout: document.createElement('div'),
2130
+ toolbox_volume: document.createElement('div'),
2131
title_date: document.createElement('span'),
2132
title_time: document.createElement('span'),
2133
title_units: document.createElement('span'),
@@ -2137,9 +2148,155 @@
2148
2149
this.element_legend.innerHTML = '';
2150
2151
+ if(this.library.toolboxPanAndZoom !== null) {
2152
+ this.element_legend_childs.toolbox.className += ' netdata-legend-toolbox';
2153
+ this.element.appendChild(this.element_legend_childs.toolbox);
2154
+
2155
+ this.element_legend_childs.toolbox_left.className += ' netdata-legend-toolbox-button';
2156
+ this.element_legend_childs.toolbox_left.innerHTML = '<i class="fa fa-backward"></i>';
2157
+ this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_left);
2158
+ this.element_legend_childs.toolbox_left.onclick = function(e) {
2159
+ e.preventDefault();
2160
+ var dt = (that.view_before - that.view_after) * NETDATA.options.current.pan_and_zoom_step;
2161
+ var before = that.view_before - dt;
2162
+ var after = that.view_after - dt;
2163
+ if(after >= that.netdata_first)
2164
+ that.library.toolboxPanAndZoom(that, after, before);
2165
+ }
2166
+ if(NETDATA.options.current.show_help === true)
2167
+ $(this.element_legend_childs.toolbox_left).popover({
2168
+ container: "body",
2169
+ animation: false,
2170
+ html: true,
2171
+ trigger: 'hover',
2172
+ placement: 'bottom',
2173
+ delay: 100,
2174
+ title: 'Pan Left',
2175
+ content: 'Pan the chart to the left. You can also <b>drag it</b> with your mouse or your finger (on touch devices).<br/><small>Help, can be disabled from the settings.</small>'
2176
+ });
2177
+
2178
+
2179
+ this.element_legend_childs.toolbox_reset.className += ' netdata-legend-toolbox-button';
2180
+ this.element_legend_childs.toolbox_reset.innerHTML = '<i class="fa fa-play"></i>';
2181
+ this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_reset);
2182
+ this.element_legend_childs.toolbox_reset.onclick = function(e) {
2183
+ e.preventDefault();
2184
+ NETDATA.resetAllCharts(that);
2185
+ }
2186
+ if(NETDATA.options.current.show_help === true)
2187
+ $(this.element_legend_childs.toolbox_reset).popover({
2188
+ container: "body",
2189
+ animation: false,
2190
+ html: true,
2191
+ trigger: 'hover',
2192
+ placement: 'bottom',
2193
+ delay: 100,
2194
+ title: 'Chart Reset',
2195
+ content: 'Reset all the charts to their default auto-refreshing state. You can also <b>double click</b> the chart contents with your mouse or your finger (on touch devices).<br/><small>Help, can be disabled from the settings.</small>'
2196
+ });
2197
+
2198
+ this.element_legend_childs.toolbox_right.className += ' netdata-legend-toolbox-button';
2199
+ this.element_legend_childs.toolbox_right.innerHTML = '<i class="fa fa-forward"></i>';
2200
+ this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_right);
2201
+ this.element_legend_childs.toolbox_right.onclick = function(e) {
2202
+ e.preventDefault();
2203
+ var dt = (that.view_before - that.view_after) * NETDATA.options.current.pan_and_zoom_step;
2204
+ var before = that.view_before + dt;
2205
+ var after = that.view_after + dt;
2206
+ if(before <= that.netdata_last)
2207
+ that.library.toolboxPanAndZoom(that, after, before);
2208
+ }
2209
+ if(NETDATA.options.current.show_help === true)
2210
+ $(this.element_legend_childs.toolbox_right).popover({
2211
+ container: "body",
2212
+ animation: false,
2213
+ html: true,
2214
+ trigger: 'hover',
2215
+ placement: 'bottom',
2216
+ delay: 100,
2217
+ title: 'Pan Right',
2218
+ content: 'Pan the chart to the right. You can also <b>drag it</b> with your mouse or your finger (on touch devices).<br/><small>Help, can be disabled from the settings.</small>'
2219
+ });
2220
+
2221
+
2222
+ this.element_legend_childs.toolbox_zoomin.className += ' netdata-legend-toolbox-button';
2223
+ this.element_legend_childs.toolbox_zoomin.innerHTML = '<i class="fa fa-plus"></i>';
2224
+ this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomin);
2225
+ this.element_legend_childs.toolbox_zoomin.onclick = function(e) {
2226
+ e.preventDefault();
2227
+ var dt = (that.view_before - that.view_after) * NETDATA.options.current.pan_and_zoom_step;
2228
+ var before = that.view_before - dt;
2229
+ var after = that.view_after + dt;
2230
+ that.library.toolboxPanAndZoom(that, after, before);
2231
+ }
2232
+ if(NETDATA.options.current.show_help === true)
2233
+ $(this.element_legend_childs.toolbox_zoomin).popover({
2234
+ container: "body",
2235
+ animation: false,
2236
+ html: true,
2237
+ trigger: 'hover',
2238
+ placement: 'bottom',
2239
+ delay: 100,
2240
+ title: 'Chart Zoom In',
2241
+ content: 'Zoom in the chart. On Chrome and Opera, you can also press the SHIFT or the ALT keys and then use the mouse wheel to zoom in or out.<br/><small>Help, can be disabled from the settings.</small>'
2242
+ });
2243
+
2244
+ this.element_legend_childs.toolbox_zoomout.className += ' netdata-legend-toolbox-button';
2245
+ this.element_legend_childs.toolbox_zoomout.innerHTML = '<i class="fa fa-minus"></i>';
2246
+ this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomout);
2247
+ this.element_legend_childs.toolbox_zoomout.onclick = function(e) {
2248
+ e.preventDefault();
2249
+ var dt = (that.view_before - that.view_after) * NETDATA.options.current.pan_and_zoom_step;
2250
+ var before = that.view_before + dt;
2251
+ var after = that.view_after - dt;
2252
+
2253
+ that.library.toolboxPanAndZoom(that, after, before);
2254
+ }
2255
+ if(NETDATA.options.current.show_help === true)
2256
+ $(this.element_legend_childs.toolbox_zoomout).popover({
2257
+ container: "body",
2258
+ animation: false,
2259
+ html: true,
2260
+ trigger: 'hover',
2261
+ placement: 'bottom',
2262
+ delay: 100,
2263
+ title: 'Chart Zoom Out',
2264
+ content: 'Zoom out the chart. On Chrome and Opera, you can also press the SHIFT or the ALT keys and then use the mouse wheel to zoom in or out.<br/><small>Help, can be disabled from the settings.</small>'
2265
+ });
2266
+
2267
+ //this.element_legend_childs.toolbox_volume.className += ' netdata-legend-toolbox-button';
2268
+ //this.element_legend_childs.toolbox_volume.innerHTML = '<i class="fa fa-sort-amount-desc"></i>';
2269
+ //this.element_legend_childs.toolbox_volume.title = 'Visible Volume';
2270
+ //this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_volume);
2271
+ //this.element_legend_childs.toolbox_volume.onclick = function(e) {
2272
+ //e.preventDefault();
2273
+ //alert('clicked toolbox_volume on ' + that.id);
2274
+ //}
2275
+ }
2276
+ else {
2277
+ this.element_legend_childs.toolbox = null;
2278
+ this.element_legend_childs.toolbox_left = null;
2279
+ this.element_legend_childs.toolbox_reset = null;
2280
+ this.element_legend_childs.toolbox_right = null;
2281
+ this.element_legend_childs.toolbox_zoomin = null;
2282
+ this.element_legend_childs.toolbox_zoomout = null;
2283
+ this.element_legend_childs.toolbox_volume = null;
2284
+ }
2285
+
2286
this.element_legend_childs.resize_handler.className += " netdata-legend-resize-handler";
2287
this.element_legend_childs.resize_handler.innerHTML = '<i class="fa fa-chevron-up"></i><i class="fa fa-chevron-down"></i>';
2288
this.element.appendChild(this.element_legend_childs.resize_handler);
2289
+ if(NETDATA.options.current.show_help === true)
2290
+ $(this.element_legend_childs.resize_handler).popover({
2291
+ container: "body",
2292
+ animation: false,
2293
+ html: true,
2294
+ trigger: 'hover',
2295
+ placement: 'bottom',
2296
+ delay: 100,
2297
+ title: 'Chart Resize',
2298
+ content: 'Drag this point with your mouse or your finger (on touch devices), to resize the chart vertically. You can also <b>double click it</b> or <b>double tap it</b> to reset between 2 states: the default and the one that fits all the values.<br/><small>Help, can be disabled from the settings.</small>'
2299
+ });
2300
2301
// mousedown event
2302
this.element_legend_childs.resize_handler.onmousedown =
@@ -2172,11 +2329,30 @@
2329
2330
content.className = 'netdata-legend-series-content';
2331
this.element_legend_childs.nano.appendChild(content);
2332
+
2333
+ if(NETDATA.options.current.show_help === true)
2334
+ $(content).popover({
2335
+ container: "body",
2336
+ animation: false,
2337
+ html: true,
2338
+ trigger: 'hover',
2339
+ placement: 'bottom',
2340
+ title: 'Chart Legend',
2341
+ delay: 100,
2342
+ content: 'You can click or tap on the values or the labels to select dimentions. By pressing SHIFT or ALT, you can enable or disable multiple dimensions.<br/><small>Help, can be disabled from the settings.</small>'
2343
+ });
2344
}
2345
else {
2346
this.element_legend_childs = {
2347
content: content,
2348
resize_handler: null,
2349
+ toolbox: null,
2350
+ toolbox_left: null,
2351
+ toolbox_right: null,
2352
+ toolbox_reset: null,
2353
+ toolbox_zoomin: null,
2354
+ toolbox_zoomout: null,
2355
+ toolbox_volume: null,
2356
title_date: null,
2357
title_time: null,
2358
title_units: null,
@@ -3321,6 +3497,22 @@
3497
smooth: false
3498
};
3499
3500
+ NETDATA.dygraphToolboxPanAndZoom = function(state, after, before) {
3501
+ if(after < state.netdata_first)
3502
+ after = state.netdata_first;
3503
+
3504
+ if(before > state.netdata_last)
3505
+ before = state.netdata_last;
3506
+
3507
+ state.setMode('zoom');
3508
+ state.globalSelectionSyncStop();
3509
+ state.globalSelectionSyncDelay();
3510
+ state.dygraph_user_action = true;
3511
+ state.dygraph_force_zoom = true;
3512
+ state.updateChartPanOrZoom(after, before);
3513
+ NETDATA.globalPanAndZoom.setMaster(state, after, before);
3514
+ };
3515
+
3516
NETDATA.dygraphSetSelection = function(state, t) {
3517
if(typeof state.dygraph_instance !== 'undefined') {
3518
var r = state.calculateRowForTime(t);
@@ -4860,6 +5052,7 @@
5052
},
5053
setSelection: NETDATA.dygraphSetSelection,
5054
clearSelection: NETDATA.dygraphClearSelection,
5055
+ toolboxPanAndZoom: NETDATA.dygraphToolboxPanAndZoom,
5056
initialized: false,
5057
enabled: true,
5058
format: function(state) { return 'json'; },
@@ -4898,6 +5091,7 @@
5091
resize: null,
5092
setSelection: undefined, // function(state, t) { return true; },
5093
clearSelection: undefined, // function(state) { return true; },
5094
+ toolboxPanAndZoom: null,
5095
initialized: false,
5096
enabled: true,
5097
format: function(state) { return 'array'; },
@@ -4915,6 +5109,7 @@
5109
resize: null,
5110
setSelection: undefined, // function(state, t) { return true; },
5111
clearSelection: undefined, // function(state) { return true; },
5112
+ toolboxPanAndZoom: null,
5113
initialized: false,
5114
enabled: true,
5115
format: function(state) { return 'ssvcomma'; },
@@ -4932,6 +5127,7 @@
5127
resize: null,
5128
setSelection: undefined, // function(state, t) { return true; },
5129
clearSelection: undefined, // function(state) { return true; },
5130
+ toolboxPanAndZoom: null,
5131
initialized: false,
5132
enabled: true,
5133
format: function(state) { return 'json'; },
@@ -4949,6 +5145,7 @@
5145
resize: null,
5146
setSelection: undefined, //function(state, t) { return true; },
5147
clearSelection: undefined, //function(state) { return true; },
5148
+ toolboxPanAndZoom: null,
5149
initialized: false,
5150
enabled: true,
5151
format: function(state) { return 'datatable'; },
@@ -4966,6 +5163,7 @@
5163
resize: null,
5164
setSelection: undefined, // function(state, t) { return true; },
5165
clearSelection: undefined, // function(state) { return true; },
5166
+ toolboxPanAndZoom: null,
5167
initialized: false,
5168
enabled: true,
5169
format: function(state) { return 'json'; },
@@ -4983,6 +5181,7 @@
5181
resize: null,
5182
setSelection: undefined, // function(state, t) { return true; },
5183
clearSelection: undefined, // function(state) { return true; },
5184
+ toolboxPanAndZoom: null,
5185
initialized: false,
5186
enabled: true,
5187
format: function(state) { return 'csvjsonarray'; },
@@ -5000,6 +5199,7 @@
5199
resize: null,
5200
setSelection: undefined, // function(state, t) { return true; },
5201
clearSelection: undefined, // function(state) { return true; },
5202
+ toolboxPanAndZoom: null,
5203
initialized: false,
5204
enabled: true,
5205
format: function(state) { return 'json'; },
@@ -5017,6 +5217,7 @@
5217
resize: null,
5218
setSelection: NETDATA.easypiechartSetSelection,
5219
clearSelection: NETDATA.easypiechartClearSelection,
5220
+ toolboxPanAndZoom: null,
5221
initialized: false,
5222
enabled: true,
5223
format: function(state) { return 'array'; },
@@ -5035,6 +5236,7 @@
5236
resize: null,
5237
setSelection: NETDATA.gaugeSetSelection,
5238
clearSelection: NETDATA.gaugeClearSelection,
5239
+ toolboxPanAndZoom: null,
5240
initialized: false,
5241
enabled: true,
5242
format: function(state) { return 'array'; },
web/dashboard.slate.css
+45
@@ -74,6 +74,43 @@ body {
74
margin: 0px;
75
}
76
77
+.netdata-legend-toolbox {
78
+ display: block;
79
+ position: absolute;
80
+ bottom: 0px;
81
+ right: 30px;
82
+ height: 15px;
83
+ width: 110px;
84
+ background-color: #272b30;
85
+ font-size: 12px;
86
+ vertical-align: middle;
87
+ line-height: 15px;
88
+ color: #373b40;
89
+ text-align: center;
90
+ overflow: hidden;
91
+ z-index: 20;
92
+ padding: 0px;
93
+ margin: 0px;
94
+}
95
+
96
+.netdata-legend-toolbox-button {
97
+ display: inline-block;
98
+ position: relative;
99
+ height: 15px;
100
+ width: 18px;
101
+ background-color: #272b30;
102
+ font-size: 12px;
103
+ vertical-align: middle;
104
+ line-height: 15px;
105
+ color: #474b50;
106
+ text-align: center;
107
+ overflow: hidden;
108
+ z-index: 21;
109
+ padding: 0px;
110
+ margin: 0px;
111
+ cursor: pointer;
112
+}
113
+
114
.netdata-message {
115
display: inline-block;
116
text-align: left;
@@ -465,3 +502,11 @@ body {
502
color: #676b70;
503
font-weight: normal;
504
}
505
+
506
+.popover-title {
507
+ font-weight: bold;
508
+ font-size: 12px;
509
+}
510
+.popover-content {
511
+ font-size: 11px;
512
+}
web/index.html
+25
-4
@@ -711,7 +711,19 @@
711
<tr class="option-row">
712
<td class="option-control"><input id="netdata_theme_control" type="checkbox" checked data-toggle="toggle" data-offstyle="danger" data-onstyle="success" data-on="Dark" data-off="White" data-width="110px"></td>
713
<td class="option-info"><strong>Which theme to use?</strong><br/>
714
- <small>Netdata comes with two themes: <b>Dark</b> (the default) and <b>White</b>.</small>
714
+ <small>Netdata comes with two themes: <b>Dark</b> (the default) and <b>White</b>.
715
+ <br/>
716
+ <b>Switching this will reload the dashboard</b>.
717
+ </small>
718
+ </td>
719
+ </tr>
720
+ <tr class="option-row">
721
+ <td class="option-control"><input id="show_help" type="checkbox" checked data-toggle="toggle" data-on="Help Me" data-off="No Help" data-width="110px"></td>
722
+ <td class="option-info"><strong>Do you need help?</strong><br/>
723
+ <small>Netdata can show some help in some areas to help you use the dashboard. If all these balloons bother you, disable them using this switch.
724
+ <br/>
725
+ <b>Switching this will reload the dashboard</b>.
726
+ </small>
727
</td>
728
</tr>
729
<tr class="option-row">
@@ -723,7 +735,9 @@
735
<tr class="option-row">
736
<td class="option-control"><input id="smooth_plot" type="checkbox" checked data-toggle="toggle" data-on="Smooth" data-off="Rough" data-width="110px"></td>
737
<td class="option-info"><strong>Enable Bézier lines on charts?</strong><br/>
726
- <small>When set to <b>Smooth</b> the charts libraries that support it, will plot smooth curves instead of simple straight lines to connect the points.</small>
738
+ <small>When set to <b>Smooth</b> the charts libraries that support it, will plot smooth curves instead of simple straight lines to connect the points.
739
+ <br/>
740
+ Keep in mind <a href="http://dygraphs.com" target="_blank">dygraphs</a>, the main charting library in netdata dashboards, can only smooth line charts. It cannot smooth area or stacked charts. When set to <b>Rough</b>, this setting can lower the CPU resources consumed by your browser.</small>
741
</td>
742
</tr>
743
</table>
@@ -1854,7 +1868,7 @@ function finalizePage() {
1868
var self = $('#' + option);
1869
1870
if(self.prop('checked') !== NETDATA.getOption(option)) {
1857
- // console.log('switching ' + option.toString());
1871
+ console.log('switching ' + option.toString());
1872
self.bootstrapToggle(NETDATA.getOption(option)?'on':'off');
1873
}
1874
}
@@ -1874,6 +1888,7 @@ function finalizePage() {
1888
sync_option('stop_updates_when_focus_is_lost');
1889
sync_option('smooth_plot');
1890
sync_option('pan_and_zoom_data_padding');
1891
+ sync_option('show_help');
1892
theme_sync_option('netdata_theme_control');
1893
1894
if(NETDATA.getOption('parallel_refresher') === false) {
@@ -1895,6 +1910,7 @@ function finalizePage() {
1910
$('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); });
1911
$('#smooth_plot').change(function() { NETDATA.setOption('smooth_plot', $(this).prop('checked')); });
1912
$('#pan_and_zoom_data_padding').change(function() { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); });
1913
+ $('#show_help').change(function() { NETDATA.setOption('show_help', $(this).prop('checked')); location.reload(); });
1914
1915
// this has to be the last
1916
// it reloads the page
@@ -1913,13 +1929,18 @@ function finalizePage() {
1929
1930
$('#updateModal').on('shown.bs.modal', function() {
1931
notifyForUpdate(true);
1916
- })
1932
+ });
1933
}
1934
1935
function resetDashboardOptions() {
1936
+ var help = NETDATA.options.current.show_help;
1937
+
1938
NETDATA.resetOptions();
1939
if(setTheme('slate'))
1940
location.reload();
1941
+
1942
+ if(help !== NETDATA.options.current.show_help)
1943
+ location.reload();
1944
}
1945
1946
downloadAllCharts();