diff options
-rw-r--r-- | web/gui/dashboard.css | 18 | ||||
-rw-r--r-- | web/gui/dashboard.js | 37 | ||||
-rw-r--r-- | web/gui/dashboard.slate.css | 18 | ||||
-rw-r--r-- | web/gui/main.js | 14 | ||||
-rw-r--r-- | web/gui/src/dashboard.js/charting/dygraph.js | 37 |
5 files changed, 121 insertions, 3 deletions
diff --git a/web/gui/dashboard.css b/web/gui/dashboard.css index 8062497d06..674131a1dc 100644 --- a/web/gui/dashboard.css +++ b/web/gui/dashboard.css @@ -737,3 +737,21 @@ body { .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { background-color: #999; /* scrollbar color on hover */ } + +.dygraph__history-tip { + position: absolute; + top: 50%; + transform: translateY(-50%); + display: none; /* overriden in js */ + margin-right: 25px; + direction: rtl; + overflow: hidden; + pointer-events: none; +} + +.dygraph__history-tip-content { + display: inline-block; + white-space: nowrap; + direction: ltr; + pointer-events: auto; +} diff --git a/web/gui/dashboard.js b/web/gui/dashboard.js index a32a29be73..0c379dc051 100644 --- a/web/gui/dashboard.js +++ b/web/gui/dashboard.js @@ -2281,8 +2281,28 @@ NETDATA.dygraphChartCreate = function (state, data) { NETDATA.globalSelectionSync.stop(); }, underlayCallback: function (canvas, area, g) { - // the chart is about to be drawn + + // update history_tip_element + if (state.tmp.dygraph_history_tip_element) { + const xHookRightSide = g.toDomXCoord(state.netdata_first); + if (xHookRightSide > area.x) { + state.tmp.dygraph_history_tip_element_displayed = true; + // group the styles for possible better performance + state.tmp.dygraph_history_tip_element.setAttribute( + 'style', + `display: block; left: ${area.x}px; right: calc(100% - ${xHookRightSide}px);` + ) + } else { + if (state.tmp.dygraph_history_tip_element_displayed) { + // additional check just for performance + // don't update the DOM when it's not needed + state.tmp.dygraph_history_tip_element.style.display = 'none'; + state.tmp.dygraph_history_tip_element_displayed = false; + } + } + } + // this function renders global highlighted time-frame if (NETDATA.globalChartUnderlay.isActive()) { @@ -2751,6 +2771,21 @@ NETDATA.dygraphChartCreate = function (state, data) { state.tmp.dygraph_instance = new Dygraph(state.element_chart, data.result.data, state.tmp.dygraph_options); + + state.tmp.dygraph_history_tip_element = document.createElement('div'); + state.tmp.dygraph_history_tip_element.innerHTML = ` + <span class="dygraph__history-tip-content"> + Want to extend your history of real-time metrics? + <br /> + <a href="https://docs.netdata.cloud/docs/configuration-guide/#increase-the-metrics-retention-period" target=_blank> + Configure Netdata's <b>history</b></a> + or use the <a href="https://docs.netdata.cloud/database/engine/" target=_blank>DB engine</a>. + </span> + `; + state.tmp.dygraph_history_tip_element.className = 'dygraph__history-tip'; + state.element_chart.appendChild(state.tmp.dygraph_history_tip_element); + + state.tmp.dygraph_force_zoom = false; state.tmp.dygraph_user_action = false; state.tmp.dygraph_last_rendered = Date.now(); diff --git a/web/gui/dashboard.slate.css b/web/gui/dashboard.slate.css index f1c9c4101c..af33825213 100644 --- a/web/gui/dashboard.slate.css +++ b/web/gui/dashboard.slate.css @@ -755,3 +755,21 @@ code { .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { background-color: #999; /* scrollbar color on hover */ } + +.dygraph__history-tip { + position: absolute; + top: 50%; + transform: translateY(-50%); + display: none; /* overriden in js */ + margin-right: 25px; + direction: rtl; + overflow: hidden; + pointer-events: none; +} + +.dygraph__history-tip-content { + display: inline-block; + white-space: nowrap; + direction: ltr; + pointer-events: auto; +} diff --git a/web/gui/main.js b/web/gui/main.js index 1214eba6fc..6aebb8ed36 100644 --- a/web/gui/main.js +++ b/web/gui/main.js @@ -1788,7 +1788,19 @@ function renderPage(menus, data) { sidebar += '<li class="" style="padding-top:15px;"><a href="https://github.com/netdata/netdata/blob/master/docs/Add-more-charts-to-netdata.md#add-more-charts-to-netdata" target="_blank"><i class="fas fa-plus"></i> add more charts</a></li>'; sidebar += '<li class=""><a href="https://github.com/netdata/netdata/tree/master/health#Health-monitoring" target="_blank"><i class="fas fa-plus"></i> add more alarms</a></li>'; - sidebar += '<li class="" style="margin:20px;color:#666;"><small>netdata on <b>' + data.hostname.toString() + '</b>, collects every ' + ((data.update_every === 1) ? 'second' : data.update_every.toString() + ' seconds') + ' <b>' + data.dimensions_count.toLocaleString() + '</b> metrics, presented as <b>' + data.charts_count.toLocaleString() + '</b> charts and monitored by <b>' + data.alarms_count.toLocaleString() + '</b> alarms, using ' + Math.round(data.rrd_memory_bytes / 1024 / 1024).toLocaleString() + ' MB of memory for ' + NETDATA.seconds4human(data.update_every * data.history, { space: ' ' }) + ' of real-time history.<br/> <br/><b>netdata</b><br/>' + data.version.toString() + '</small></li>'; + sidebar += '<li class="" style="margin:20px;color:#666;"><small>Every ' + + ((data.update_every === 1) ? 'second' : data.update_every.toString() + ' seconds') + ', ' + + 'Netdata collects <b>' + data.dimensions_count.toLocaleString() + '</b> metrics, presents them in <b>' + + data.charts_count.toLocaleString() + '</b> charts and monitors them with <b>' + + data.alarms_count.toLocaleString() + '</b> alarms. Netdata is using ' + + Math.round(data.rrd_memory_bytes / 1024 / 1024).toLocaleString() + ' MB of memory on <b>' + + data.hostname.toString() + '</b> for ' + + NETDATA.seconds4human(data.update_every * data.history, { + minute: 'minute', minutes: 'minutes', second: 'second', seconds: 'seconds', space: ' ', + }) + + ' of real-time history.<br /> <br />' + 'Get more history by ' + + '<a href="https://docs.netdata.cloud/docs/configuration-guide/#increase-the-metrics-retention-period" target=_blank>configuring Netdata\'s <b>history</b></a> or using the <a href="https://docs.netdata.cloud/database/engine/" target=_blank>DB engine.</a>' + + '<br/> <br/><b>netdata</b><br/>' + data.version.toString() + '</small></li>'; sidebar += '</ul>'; div.innerHTML = html; document.getElementById('sidebar').innerHTML = sidebar; diff --git a/web/gui/src/dashboard.js/charting/dygraph.js b/web/gui/src/dashboard.js/charting/dygraph.js index a60af18b83..f34d2f4aa1 100644 --- a/web/gui/src/dashboard.js/charting/dygraph.js +++ b/web/gui/src/dashboard.js/charting/dygraph.js @@ -483,8 +483,28 @@ NETDATA.dygraphChartCreate = function (state, data) { NETDATA.globalSelectionSync.stop(); }, underlayCallback: function (canvas, area, g) { - // the chart is about to be drawn + + // update history_tip_element + if (state.tmp.dygraph_history_tip_element) { + const xHookRightSide = g.toDomXCoord(state.netdata_first); + if (xHookRightSide > area.x) { + state.tmp.dygraph_history_tip_element_displayed = true; + // group the styles for possible better performance + state.tmp.dygraph_history_tip_element.setAttribute( + 'style', + `display: block; left: ${area.x}px; right: calc(100% - ${xHookRightSide}px);` + ) + } else { + if (state.tmp.dygraph_history_tip_element_displayed) { + // additional check just for performance + // don't update the DOM when it's not needed + state.tmp.dygraph_history_tip_element.style.display = 'none'; + state.tmp.dygraph_history_tip_element_displayed = false; + } + } + } + // this function renders global highlighted time-frame if (NETDATA.globalChartUnderlay.isActive()) { @@ -953,6 +973,21 @@ NETDATA.dygraphChartCreate = function (state, data) { state.tmp.dygraph_instance = new Dygraph(state.element_chart, data.result.data, state.tmp.dygraph_options); + + state.tmp.dygraph_history_tip_element = document.createElement('div'); + state.tmp.dygraph_history_tip_element.innerHTML = ` + <span class="dygraph__history-tip-content"> + Want to extend your history of real-time metrics? + <br /> + <a href="https://docs.netdata.cloud/docs/configuration-guide/#increase-the-metrics-retention-period" target=_blank> + Configure Netdata's <b>history</b></a> + or use the <a href="https://docs.netdata.cloud/database/engine/" target=_blank>DB engine</a>. + </span> + `; + state.tmp.dygraph_history_tip_element.className = 'dygraph__history-tip'; + state.element_chart.appendChild(state.tmp.dygraph_history_tip_element); + + state.tmp.dygraph_force_zoom = false; state.tmp.dygraph_user_action = false; state.tmp.dygraph_last_rendered = Date.now(); |