History tips (#6711)

* split sidebar note into multilines (just in code)

* note in sidebar - grammatical fixes, added history tip

* add history tip in dygraph chart, on the left side, when panned beyond its available past

* bundled/compiled dashboard.js

* invisible left side of history-tip was preventing further panning to the past, fix that

* change history link from "https://docs.netdata.cloud/daemon/config/#global-section-options" to
"https://docs.netdata.cloud/docs/configuration-guide/#increase-the-metrics-retention-period"

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: '&nbsp;' }) + ' of real-time history.<br/>&nbsp;<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: '&nbsp;',
+      }) +
+      ' of real-time history.<br />&nbsp;<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/>&nbsp;<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();