From 995d1418d1ab75d7e26fb23a0d660154ba20cadf Mon Sep 17 00:00:00 2001 From: "Costa Tsaousis (ktsaou)" Date: Sun, 10 Apr 2016 17:39:22 +0300 Subject: [PATCH] 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 --- web/dashboard.css | 45 +++++++++ web/dashboard.js | 202 ++++++++++++++++++++++++++++++++++++++++ web/dashboard.slate.css | 45 +++++++++ web/index.html | 29 +++++- 4 files changed, 317 insertions(+), 4 deletions(-) diff --git a/web/dashboard.css b/web/dashboard.css index 1135b39a..a7b090d6 100644 --- a/web/dashboard.css +++ b/web/dashboard.css @@ -66,6 +66,43 @@ body { margin: 0px; } +.netdata-legend-toolbox { + display: block; + position: absolute; + bottom: 0px; + right: 30px; + height: 15px; + width: 110px; + background-color: White; + font-size: 12px; + vertical-align: middle; + line-height: 15px; + color: #DDDDDD; + text-align: center; + overflow: hidden; + z-index: 20; + padding: 0px; + margin: 0px; +} + +.netdata-legend-toolbox-button { + display: inline-block; + position: relative; + height: 15px; + width: 18px; + background-color: White; + font-size: 12px; + vertical-align: middle; + line-height: 15px; + color: #CDCDCD; + text-align: center; + overflow: hidden; + z-index: 21; + padding: 0px; + margin: 0px; + cursor: pointer; +} + .netdata-message { display: inline-block; text-align: left; @@ -453,3 +490,11 @@ body { color: #999999; font-weight: normal; } + +.popover-title { + font-weight: bold; + font-size: 12px; +} +.popover-content { + font-size: 11px; +} diff --git a/web/dashboard.js b/web/dashboard.js index c9725d87..e90ffc15 100644 --- a/web/dashboard.js +++ b/web/dashboard.js @@ -242,6 +242,8 @@ destroy_on_hide: false, // destroy charts when they are not visible + show_help: true, // when enabled the charts will show some help + eliminate_zero_dimensions: true, // do not show dimensions with just zeros stop_updates_when_focus_is_lost: true, // boolean - shall we stop auto-refreshes when document does not have user focus @@ -257,6 +259,8 @@ color_fill_opacity_area: 0.2, color_fill_opacity_stacked: 0.8, + pan_and_zoom_step: 0.1, // the increment when panning and zooming with the toolbox + setOptionCallback: function() { ; } }, @@ -2117,6 +2121,13 @@ this.element_legend_childs = { content: content, resize_handler: document.createElement('div'), + toolbox: document.createElement('div'), + toolbox_left: document.createElement('div'), + toolbox_right: document.createElement('div'), + toolbox_reset: document.createElement('div'), + toolbox_zoomin: document.createElement('div'), + toolbox_zoomout: document.createElement('div'), + toolbox_volume: document.createElement('div'), title_date: document.createElement('span'), title_time: document.createElement('span'), title_units: document.createElement('span'), @@ -2137,9 +2148,155 @@ this.element_legend.innerHTML = ''; + if(this.library.toolboxPanAndZoom !== null) { + this.element_legend_childs.toolbox.className += ' netdata-legend-toolbox'; + this.element.appendChild(this.element_legend_childs.toolbox); + + this.element_legend_childs.toolbox_left.className += ' netdata-legend-toolbox-button'; + this.element_legend_childs.toolbox_left.innerHTML = ''; + this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_left); + this.element_legend_childs.toolbox_left.onclick = function(e) { + e.preventDefault(); + var dt = (that.view_before - that.view_after) * NETDATA.options.current.pan_and_zoom_step; + var before = that.view_before - dt; + var after = that.view_after - dt; + if(after >= that.netdata_first) + that.library.toolboxPanAndZoom(that, after, before); + } + if(NETDATA.options.current.show_help === true) + $(this.element_legend_childs.toolbox_left).popover({ + container: "body", + animation: false, + html: true, + trigger: 'hover', + placement: 'bottom', + delay: 100, + title: 'Pan Left', + content: 'Pan the chart to the left. You can also drag it with your mouse or your finger (on touch devices).
Help, can be disabled from the settings.' + }); + + + this.element_legend_childs.toolbox_reset.className += ' netdata-legend-toolbox-button'; + this.element_legend_childs.toolbox_reset.innerHTML = ''; + this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_reset); + this.element_legend_childs.toolbox_reset.onclick = function(e) { + e.preventDefault(); + NETDATA.resetAllCharts(that); + } + if(NETDATA.options.current.show_help === true) + $(this.element_legend_childs.toolbox_reset).popover({ + container: "body", + animation: false, + html: true, + trigger: 'hover', + placement: 'bottom', + delay: 100, + title: 'Chart Reset', + content: 'Reset all the charts to their default auto-refreshing state. You can also double click the chart contents with your mouse or your finger (on touch devices).
Help, can be disabled from the settings.' + }); + + this.element_legend_childs.toolbox_right.className += ' netdata-legend-toolbox-button'; + this.element_legend_childs.toolbox_right.innerHTML = ''; + this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_right); + this.element_legend_childs.toolbox_right.onclick = function(e) { + e.preventDefault(); + var dt = (that.view_before - that.view_after) * NETDATA.options.current.pan_and_zoom_step; + var before = that.view_before + dt; + var after = that.view_after + dt; + if(before <= that.netdata_last) + that.library.toolboxPanAndZoom(that, after, before); + } + if(NETDATA.options.current.show_help === true) + $(this.element_legend_childs.toolbox_right).popover({ + container: "body", + animation: false, + html: true, + trigger: 'hover', + placement: 'bottom', + delay: 100, + title: 'Pan Right', + content: 'Pan the chart to the right. You can also drag it with your mouse or your finger (on touch devices).
Help, can be disabled from the settings.' + }); + + + this.element_legend_childs.toolbox_zoomin.className += ' netdata-legend-toolbox-button'; + this.element_legend_childs.toolbox_zoomin.innerHTML = ''; + this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomin); + this.element_legend_childs.toolbox_zoomin.onclick = function(e) { + e.preventDefault(); + var dt = (that.view_before - that.view_after) * NETDATA.options.current.pan_and_zoom_step; + var before = that.view_before - dt; + var after = that.view_after + dt; + that.library.toolboxPanAndZoom(that, after, before); + } + if(NETDATA.options.current.show_help === true) + $(this.element_legend_childs.toolbox_zoomin).popover({ + container: "body", + animation: false, + html: true, + trigger: 'hover', + placement: 'bottom', + delay: 100, + title: 'Chart Zoom In', + 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.
Help, can be disabled from the settings.' + }); + + this.element_legend_childs.toolbox_zoomout.className += ' netdata-legend-toolbox-button'; + this.element_legend_childs.toolbox_zoomout.innerHTML = ''; + this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomout); + this.element_legend_childs.toolbox_zoomout.onclick = function(e) { + e.preventDefault(); + var dt = (that.view_before - that.view_after) * NETDATA.options.current.pan_and_zoom_step; + var before = that.view_before + dt; + var after = that.view_after - dt; + + that.library.toolboxPanAndZoom(that, after, before); + } + if(NETDATA.options.current.show_help === true) + $(this.element_legend_childs.toolbox_zoomout).popover({ + container: "body", + animation: false, + html: true, + trigger: 'hover', + placement: 'bottom', + delay: 100, + title: 'Chart Zoom Out', + 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.
Help, can be disabled from the settings.' + }); + + //this.element_legend_childs.toolbox_volume.className += ' netdata-legend-toolbox-button'; + //this.element_legend_childs.toolbox_volume.innerHTML = ''; + //this.element_legend_childs.toolbox_volume.title = 'Visible Volume'; + //this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_volume); + //this.element_legend_childs.toolbox_volume.onclick = function(e) { + //e.preventDefault(); + //alert('clicked toolbox_volume on ' + that.id); + //} + } + else { + this.element_legend_childs.toolbox = null; + this.element_legend_childs.toolbox_left = null; + this.element_legend_childs.toolbox_reset = null; + this.element_legend_childs.toolbox_right = null; + this.element_legend_childs.toolbox_zoomin = null; + this.element_legend_childs.toolbox_zoomout = null; + this.element_legend_childs.toolbox_volume = null; + } + this.element_legend_childs.resize_handler.className += " netdata-legend-resize-handler"; this.element_legend_childs.resize_handler.innerHTML = ''; this.element.appendChild(this.element_legend_childs.resize_handler); + if(NETDATA.options.current.show_help === true) + $(this.element_legend_childs.resize_handler).popover({ + container: "body", + animation: false, + html: true, + trigger: 'hover', + placement: 'bottom', + delay: 100, + title: 'Chart Resize', + content: 'Drag this point with your mouse or your finger (on touch devices), to resize the chart vertically. You can also double click it or double tap it to reset between 2 states: the default and the one that fits all the values.
Help, can be disabled from the settings.' + }); // mousedown event this.element_legend_childs.resize_handler.onmousedown = @@ -2172,11 +2329,30 @@ content.className = 'netdata-legend-series-content'; this.element_legend_childs.nano.appendChild(content); + + if(NETDATA.options.current.show_help === true) + $(content).popover({ + container: "body", + animation: false, + html: true, + trigger: 'hover', + placement: 'bottom', + title: 'Chart Legend', + delay: 100, + 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.
Help, can be disabled from the settings.' + }); } else { this.element_legend_childs = { content: content, resize_handler: null, + toolbox: null, + toolbox_left: null, + toolbox_right: null, + toolbox_reset: null, + toolbox_zoomin: null, + toolbox_zoomout: null, + toolbox_volume: null, title_date: null, title_time: null, title_units: null, @@ -3321,6 +3497,22 @@ smooth: false }; + NETDATA.dygraphToolboxPanAndZoom = function(state, after, before) { + if(after < state.netdata_first) + after = state.netdata_first; + + if(before > state.netdata_last) + before = state.netdata_last; + + state.setMode('zoom'); + state.globalSelectionSyncStop(); + state.globalSelectionSyncDelay(); + state.dygraph_user_action = true; + state.dygraph_force_zoom = true; + state.updateChartPanOrZoom(after, before); + NETDATA.globalPanAndZoom.setMaster(state, after, before); + }; + NETDATA.dygraphSetSelection = function(state, t) { if(typeof state.dygraph_instance !== 'undefined') { var r = state.calculateRowForTime(t); @@ -4860,6 +5052,7 @@ }, setSelection: NETDATA.dygraphSetSelection, clearSelection: NETDATA.dygraphClearSelection, + toolboxPanAndZoom: NETDATA.dygraphToolboxPanAndZoom, initialized: false, enabled: true, format: function(state) { return 'json'; }, @@ -4898,6 +5091,7 @@ resize: null, setSelection: undefined, // function(state, t) { return true; }, clearSelection: undefined, // function(state) { return true; }, + toolboxPanAndZoom: null, initialized: false, enabled: true, format: function(state) { return 'array'; }, @@ -4915,6 +5109,7 @@ resize: null, setSelection: undefined, // function(state, t) { return true; }, clearSelection: undefined, // function(state) { return true; }, + toolboxPanAndZoom: null, initialized: false, enabled: true, format: function(state) { return 'ssvcomma'; }, @@ -4932,6 +5127,7 @@ resize: null, setSelection: undefined, // function(state, t) { return true; }, clearSelection: undefined, // function(state) { return true; }, + toolboxPanAndZoom: null, initialized: false, enabled: true, format: function(state) { return 'json'; }, @@ -4949,6 +5145,7 @@ resize: null, setSelection: undefined, //function(state, t) { return true; }, clearSelection: undefined, //function(state) { return true; }, + toolboxPanAndZoom: null, initialized: false, enabled: true, format: function(state) { return 'datatable'; }, @@ -4966,6 +5163,7 @@ resize: null, setSelection: undefined, // function(state, t) { return true; }, clearSelection: undefined, // function(state) { return true; }, + toolboxPanAndZoom: null, initialized: false, enabled: true, format: function(state) { return 'json'; }, @@ -4983,6 +5181,7 @@ resize: null, setSelection: undefined, // function(state, t) { return true; }, clearSelection: undefined, // function(state) { return true; }, + toolboxPanAndZoom: null, initialized: false, enabled: true, format: function(state) { return 'csvjsonarray'; }, @@ -5000,6 +5199,7 @@ resize: null, setSelection: undefined, // function(state, t) { return true; }, clearSelection: undefined, // function(state) { return true; }, + toolboxPanAndZoom: null, initialized: false, enabled: true, format: function(state) { return 'json'; }, @@ -5017,6 +5217,7 @@ resize: null, setSelection: NETDATA.easypiechartSetSelection, clearSelection: NETDATA.easypiechartClearSelection, + toolboxPanAndZoom: null, initialized: false, enabled: true, format: function(state) { return 'array'; }, @@ -5035,6 +5236,7 @@ resize: null, setSelection: NETDATA.gaugeSetSelection, clearSelection: NETDATA.gaugeClearSelection, + toolboxPanAndZoom: null, initialized: false, enabled: true, format: function(state) { return 'array'; }, diff --git a/web/dashboard.slate.css b/web/dashboard.slate.css index 8a3adf32..66273106 100644 --- a/web/dashboard.slate.css +++ b/web/dashboard.slate.css @@ -74,6 +74,43 @@ body { margin: 0px; } +.netdata-legend-toolbox { + display: block; + position: absolute; + bottom: 0px; + right: 30px; + height: 15px; + width: 110px; + background-color: #272b30; + font-size: 12px; + vertical-align: middle; + line-height: 15px; + color: #373b40; + text-align: center; + overflow: hidden; + z-index: 20; + padding: 0px; + margin: 0px; +} + +.netdata-legend-toolbox-button { + display: inline-block; + position: relative; + height: 15px; + width: 18px; + background-color: #272b30; + font-size: 12px; + vertical-align: middle; + line-height: 15px; + color: #474b50; + text-align: center; + overflow: hidden; + z-index: 21; + padding: 0px; + margin: 0px; + cursor: pointer; +} + .netdata-message { display: inline-block; text-align: left; @@ -465,3 +502,11 @@ body { color: #676b70; font-weight: normal; } + +.popover-title { + font-weight: bold; + font-size: 12px; +} +.popover-content { + font-size: 11px; +} diff --git a/web/index.html b/web/index.html index 3e82b4ff..a7c254cc 100644 --- a/web/index.html +++ b/web/index.html @@ -711,7 +711,19 @@ Which theme to use?
- Netdata comes with two themes: Dark (the default) and White. + Netdata comes with two themes: Dark (the default) and White. +
+ Switching this will reload the dashboard. + + + + + + Do you need help?
+ 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. +
+ Switching this will reload the dashboard. + @@ -723,7 +735,9 @@ Enable Bézier lines on charts?
- When set to Smooth the charts libraries that support it, will plot smooth curves instead of simple straight lines to connect the points. + When set to Smooth the charts libraries that support it, will plot smooth curves instead of simple straight lines to connect the points. +
+ Keep in mind dygraphs, the main charting library in netdata dashboards, can only smooth line charts. It cannot smooth area or stacked charts. When set to Rough, this setting can lower the CPU resources consumed by your browser. @@ -1854,7 +1868,7 @@ function finalizePage() { var self = $('#' + option); if(self.prop('checked') !== NETDATA.getOption(option)) { - // console.log('switching ' + option.toString()); + console.log('switching ' + option.toString()); self.bootstrapToggle(NETDATA.getOption(option)?'on':'off'); } } @@ -1874,6 +1888,7 @@ function finalizePage() { sync_option('stop_updates_when_focus_is_lost'); sync_option('smooth_plot'); sync_option('pan_and_zoom_data_padding'); + sync_option('show_help'); theme_sync_option('netdata_theme_control'); if(NETDATA.getOption('parallel_refresher') === false) { @@ -1895,6 +1910,7 @@ function finalizePage() { $('#stop_updates_when_focus_is_lost').change(function() { NETDATA.setOption('stop_updates_when_focus_is_lost', $(this).prop('checked')); }); $('#smooth_plot').change(function() { NETDATA.setOption('smooth_plot', $(this).prop('checked')); }); $('#pan_and_zoom_data_padding').change(function() { NETDATA.setOption('pan_and_zoom_data_padding', $(this).prop('checked')); }); + $('#show_help').change(function() { NETDATA.setOption('show_help', $(this).prop('checked')); location.reload(); }); // this has to be the last // it reloads the page @@ -1913,13 +1929,18 @@ function finalizePage() { $('#updateModal').on('shown.bs.modal', function() { notifyForUpdate(true); - }) + }); } function resetDashboardOptions() { + var help = NETDATA.options.current.show_help; + NETDATA.resetOptions(); if(setTheme('slate')) location.reload(); + + if(help !== NETDATA.options.current.show_help) + location.reload(); } downloadAllCharts(); -- 2.39.2