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"
Jacek Kolasa committed
Aug 28, 2019 at 18:58 UTC
cb888d11a6346778a4a7bfbffcc5ec55478814d6
5 files changed
+121
-3
web/gui/dashboard.css
+18
@@ -737,3 +737,21 @@ body {
737
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
738
background-color: #999; /* scrollbar color on hover */
739
}
740
+
741
+.dygraph__history-tip {
742
+ position: absolute;
743
+ top: 50%;
744
+ transform: translateY(-50%);
745
+ display: none; /* overriden in js */
746
+ margin-right: 25px;
747
+ direction: rtl;
748
+ overflow: hidden;
749
+ pointer-events: none;
750
+}
751
+
752
+.dygraph__history-tip-content {
753
+ display: inline-block;
754
+ white-space: nowrap;
755
+ direction: ltr;
756
+ pointer-events: auto;
757
+}
web/gui/dashboard.js
+36
-1
@@ -2281,8 +2281,28 @@ NETDATA.dygraphChartCreate = function (state, data) {
2281
NETDATA.globalSelectionSync.stop();
2282
},
2283
underlayCallback: function (canvas, area, g) {
2284
-
2284
// the chart is about to be drawn
2285
+
2286
+ // update history_tip_element
2287
+ if (state.tmp.dygraph_history_tip_element) {
2288
+ const xHookRightSide = g.toDomXCoord(state.netdata_first);
2289
+ if (xHookRightSide > area.x) {
2290
+ state.tmp.dygraph_history_tip_element_displayed = true;
2291
+ // group the styles for possible better performance
2292
+ state.tmp.dygraph_history_tip_element.setAttribute(
2293
+ 'style',
2294
+ `display: block; left: ${area.x}px; right: calc(100% - ${xHookRightSide}px);`
2295
+ )
2296
+ } else {
2297
+ if (state.tmp.dygraph_history_tip_element_displayed) {
2298
+ // additional check just for performance
2299
+ // don't update the DOM when it's not needed
2300
+ state.tmp.dygraph_history_tip_element.style.display = 'none';
2301
+ state.tmp.dygraph_history_tip_element_displayed = false;
2302
+ }
2303
+ }
2304
+ }
2305
+
2306
// this function renders global highlighted time-frame
2307
2308
if (NETDATA.globalChartUnderlay.isActive()) {
@@ -2751,6 +2771,21 @@ NETDATA.dygraphChartCreate = function (state, data) {
2771
state.tmp.dygraph_instance = new Dygraph(state.element_chart,
2772
data.result.data, state.tmp.dygraph_options);
2773
2774
+
2775
+ state.tmp.dygraph_history_tip_element = document.createElement('div');
2776
+ state.tmp.dygraph_history_tip_element.innerHTML = `
2777
+ <span class="dygraph__history-tip-content">
2778
+ Want to extend your history of real-time metrics?
2779
+ <br />
2780
+ <a href="https://docs.netdata.cloud/docs/configuration-guide/#increase-the-metrics-retention-period" target=_blank>
2781
+ Configure Netdata's <b>history</b></a>
2782
+ or use the <a href="https://docs.netdata.cloud/database/engine/" target=_blank>DB engine</a>.
2783
+ </span>
2784
+ `;
2785
+ state.tmp.dygraph_history_tip_element.className = 'dygraph__history-tip';
2786
+ state.element_chart.appendChild(state.tmp.dygraph_history_tip_element);
2787
+
2788
+
2789
state.tmp.dygraph_force_zoom = false;
2790
state.tmp.dygraph_user_action = false;
2791
state.tmp.dygraph_last_rendered = Date.now();
web/gui/dashboard.slate.css
+18
@@ -755,3 +755,21 @@ code {
755
.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
756
background-color: #999; /* scrollbar color on hover */
757
}
758
+
759
+.dygraph__history-tip {
760
+ position: absolute;
761
+ top: 50%;
762
+ transform: translateY(-50%);
763
+ display: none; /* overriden in js */
764
+ margin-right: 25px;
765
+ direction: rtl;
766
+ overflow: hidden;
767
+ pointer-events: none;
768
+}
769
+
770
+.dygraph__history-tip-content {
771
+ display: inline-block;
772
+ white-space: nowrap;
773
+ direction: ltr;
774
+ pointer-events: auto;
775
+}
web/gui/main.js
+13
-1
@@ -1788,7 +1788,19 @@ function renderPage(menus, data) {
1788
1789
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>';
1790
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>';
1791
- 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>';
1791
+ sidebar += '<li class="" style="margin:20px;color:#666;"><small>Every ' +
1792
+ ((data.update_every === 1) ? 'second' : data.update_every.toString() + ' seconds') + ', ' +
1793
+ 'Netdata collects <b>' + data.dimensions_count.toLocaleString() + '</b> metrics, presents them in <b>' +
1794
+ data.charts_count.toLocaleString() + '</b> charts and monitors them with <b>' +
1795
+ data.alarms_count.toLocaleString() + '</b> alarms. Netdata is using ' +
1796
+ Math.round(data.rrd_memory_bytes / 1024 / 1024).toLocaleString() + ' MB of memory on <b>' +
1797
+ data.hostname.toString() + '</b> for ' +
1798
+ NETDATA.seconds4human(data.update_every * data.history, {
1799
+ minute: 'minute', minutes: 'minutes', second: 'second', seconds: 'seconds', space: ' ',
1800
+ }) +
1801
+ ' of real-time history.<br /> <br />' + 'Get more history by ' +
1802
+ '<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>' +
1803
+ '<br/> <br/><b>netdata</b><br/>' + data.version.toString() + '</small></li>';
1804
sidebar += '</ul>';
1805
div.innerHTML = html;
1806
document.getElementById('sidebar').innerHTML = sidebar;
web/gui/src/dashboard.js/charting/dygraph.js
+36
-1
@@ -483,8 +483,28 @@ NETDATA.dygraphChartCreate = function (state, data) {
483
NETDATA.globalSelectionSync.stop();
484
},
485
underlayCallback: function (canvas, area, g) {
486
-
486
// the chart is about to be drawn
487
+
488
+ // update history_tip_element
489
+ if (state.tmp.dygraph_history_tip_element) {
490
+ const xHookRightSide = g.toDomXCoord(state.netdata_first);
491
+ if (xHookRightSide > area.x) {
492
+ state.tmp.dygraph_history_tip_element_displayed = true;
493
+ // group the styles for possible better performance
494
+ state.tmp.dygraph_history_tip_element.setAttribute(
495
+ 'style',
496
+ `display: block; left: ${area.x}px; right: calc(100% - ${xHookRightSide}px);`
497
+ )
498
+ } else {
499
+ if (state.tmp.dygraph_history_tip_element_displayed) {
500
+ // additional check just for performance
501
+ // don't update the DOM when it's not needed
502
+ state.tmp.dygraph_history_tip_element.style.display = 'none';
503
+ state.tmp.dygraph_history_tip_element_displayed = false;
504
+ }
505
+ }
506
+ }
507
+
508
// this function renders global highlighted time-frame
509
510
if (NETDATA.globalChartUnderlay.isActive()) {
@@ -953,6 +973,21 @@ NETDATA.dygraphChartCreate = function (state, data) {
973
state.tmp.dygraph_instance = new Dygraph(state.element_chart,
974
data.result.data, state.tmp.dygraph_options);
975
976
+
977
+ state.tmp.dygraph_history_tip_element = document.createElement('div');
978
+ state.tmp.dygraph_history_tip_element.innerHTML = `
979
+ <span class="dygraph__history-tip-content">
980
+ Want to extend your history of real-time metrics?
981
+ <br />
982
+ <a href="https://docs.netdata.cloud/docs/configuration-guide/#increase-the-metrics-retention-period" target=_blank>
983
+ Configure Netdata's <b>history</b></a>
984
+ or use the <a href="https://docs.netdata.cloud/database/engine/" target=_blank>DB engine</a>.
985
+ </span>
986
+ `;
987
+ state.tmp.dygraph_history_tip_element.className = 'dygraph__history-tip';
988
+ state.element_chart.appendChild(state.tmp.dygraph_history_tip_element);
989
+
990
+
991
state.tmp.dygraph_force_zoom = false;
992
state.tmp.dygraph_user_action = false;
993
state.tmp.dygraph_last_rendered = Date.now();