Adding upstream version 1.17.0.upstream/1.17.0

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

4 files changed, 36 insertions, 244 deletions

diff --git a/web/gui/src/dashboard.js/charting/_c3.js b/web/gui/src/dashboard.js/charting/_c3.js
deleted file mode 100644
index 6688bbcce..000000000
--- a/web/gui/src/dashboard.js/charting/_c3.js
+++ /dev/null
@@ -1,114 +0,0 @@
-
-// DEPRECATED: will be removed!
-
-// c3
-
-NETDATA.c3Initialize = function(callback) {
-    if (typeof netdataNoC3 === 'undefined' || !netdataNoC3) {
-
-        // C3 requires D3
-        if (!NETDATA.chartLibraries.d3.initialized) {
-            if (NETDATA.chartLibraries.d3.enabled) {
-                NETDATA.d3Initialize(function() {
-                    NETDATA.c3Initialize(callback);
-                });
-            } else {
-                NETDATA.chartLibraries.c3.enabled = false;
-                if (typeof callback === "function")
-                    return callback();
-            }
-        } else {
-            NETDATA._loadCSS(NETDATA.c3_css);
-
-            $.ajax({
-                url: NETDATA.c3_js,
-                cache: true,
-                dataType: "script",
-                xhrFields: { withCredentials: true } // required for the cookie
-            })
-            .done(function() {
-                NETDATA.registerChartLibrary('c3', NETDATA.c3_js);
-            })
-            .fail(function() {
-                NETDATA.chartLibraries.c3.enabled = false;
-                NETDATA.error(100, NETDATA.c3_js);
-            })
-            .always(function() {
-                if (typeof callback === "function")
-                    return callback();
-            });
-        }
-    } else {
-        NETDATA.chartLibraries.c3.enabled = false;
-        if (typeof callback === "function")
-            return callback();
-    }
-};
-
-NETDATA.c3ChartUpdate = function(state, data) {
-    state.c3_instance.destroy();
-    return NETDATA.c3ChartCreate(state, data);
-
-    //state.c3_instance.load({
-    //  rows: data.result,
-    //  unload: true
-    //});
-
-    //return true;
-};
-
-NETDATA.c3ChartCreate = function(state, data) {
-
-    state.element_chart.id = 'c3-' + state.uuid;
-    // console.log('id = ' + state.element_chart.id);
-
-    state.c3_instance = c3.generate({
-        bindto: '#' + state.element_chart.id,
-        size: {
-            width: state.chartWidth(),
-            height: state.chartHeight()
-        },
-        color: {
-            pattern: state.chartColors()
-        },
-        data: {
-            x: 'time',
-            rows: data.result,
-            type: (state.chart.chart_type === 'line')?'spline':'area-spline'
-        },
-        axis: {
-            x: {
-                type: 'timeseries',
-                tick: {
-                    format: function(x) {
-                        return NETDATA.dateTime.xAxisTimeString(x);
-                    }
-                }
-            }
-        },
-        grid: {
-            x: {
-                show: true
-            },
-            y: {
-                show: true
-            }
-        },
-        point: {
-            show: false
-        },
-        line: {
-            connectNull: false
-        },
-        transition: {
-            duration: 0
-        },
-        interaction: {
-            enabled: true
-        }
-    });
-
-    // console.log(state.c3_instance);
-
-    return true;
-};
diff --git a/web/gui/src/dashboard.js/charting/_morris.js b/web/gui/src/dashboard.js/charting/_morris.js
deleted file mode 100644
index 30789e4e2..000000000
--- a/web/gui/src/dashboard.js/charting/_morris.js
+++ /dev/null
@@ -1,81 +0,0 @@
-
-// DEPRECATED: will be removed!
-
-// morris
-
-NETDATA.morrisInitialize = function(callback) {
-    if (typeof netdataNoMorris === 'undefined' || !netdataNoMorris) {
-
-        // morris requires raphael
-        if (!NETDATA.chartLibraries.raphael.initialized) {
-            if (NETDATA.chartLibraries.raphael.enabled) {
-                NETDATA.raphaelInitialize(function() {
-                    NETDATA.morrisInitialize(callback);
-                });
-            } else {
-                NETDATA.chartLibraries.morris.enabled = false;
-                if (typeof callback === "function")
-                    return callback();
-            }
-        } else {
-            NETDATA._loadCSS(NETDATA.morris_css);
-
-            $.ajax({
-                url: NETDATA.morris_js,
-                cache: true,
-                dataType: "script",
-                xhrFields: { withCredentials: true } // required for the cookie
-            })
-            .done(function() {
-                NETDATA.registerChartLibrary('morris', NETDATA.morris_js);
-            })
-            .fail(function() {
-                NETDATA.chartLibraries.morris.enabled = false;
-                NETDATA.error(100, NETDATA.morris_js);
-            })
-            .always(function() {
-                if (typeof callback === "function")
-                    return callback();
-            });
-        }
-    } else {
-        NETDATA.chartLibraries.morris.enabled = false;
-        if (typeof callback === "function")
-            return callback();
-    }
-};
-
-NETDATA.morrisChartUpdate = function(state, data) {
-    state.morris_instance.setData(data.result.data);
-    return true;
-};
-
-NETDATA.morrisChartCreate = function(state, data) {
-
-    state.morris_options = {
-            element: state.element_chart.id,
-            data: data.result.data,
-            xkey: 'time',
-            ykeys: data.dimension_names,
-            labels: data.dimension_names,
-            lineWidth: 2,
-            pointSize: 3,
-            smooth: true,
-            hideHover: 'auto',
-            parseTime: true,
-            continuousLine: false,
-            behaveLikeLine: false
-    };
-
-    if (state.chart.chart_type === 'line')
-        state.morris_instance = new Morris.Line(state.morris_options);
-
-    else if (state.chart.chart_type === 'area') {
-        state.morris_options.behaveLikeLine = true;
-        state.morris_instance = new Morris.Area(state.morris_options);
-    }
-    else // stacked
-        state.morris_instance = new Morris.Area(state.morris_options);
-
-    return true;
-};
diff --git a/web/gui/src/dashboard.js/charting/_raphael.js b/web/gui/src/dashboard.js/charting/_raphael.js
deleted file mode 100644
index 2d89a22a8..000000000
--- a/web/gui/src/dashboard.js/charting/_raphael.js
+++ /dev/null
@@ -1,48 +0,0 @@
-
-// DEPRECATED: will be removed!
-
-// raphael
-
-NETDATA.raphaelInitialize = function(callback) {
-    if (typeof netdataStopRaphael === 'undefined' || !netdataStopRaphael) {
-        $.ajax({
-            url: NETDATA.raphael_js,
-            cache: true,
-            dataType: "script",
-            xhrFields: { withCredentials: true } // required for the cookie
-        })
-        .done(function() {
-            NETDATA.registerChartLibrary('raphael', NETDATA.raphael_js);
-        })
-        .fail(function() {
-            NETDATA.chartLibraries.raphael.enabled = false;
-            NETDATA.error(100, NETDATA.raphael_js);
-        })
-        .always(function() {
-            if (typeof callback === "function")
-                return callback();
-        });
-    } else {
-        NETDATA.chartLibraries.raphael.enabled = false;
-        if (typeof callback === "function")
-            return callback();
-    }
-};
-
-NETDATA.raphaelChartUpdate = function(state, data) {
-    $(state.element_chart).raphael(data.result, {
-        width: state.chartWidth(),
-        height: state.chartHeight()
-    });
-
-    return false;
-};
-
-NETDATA.raphaelChartCreate = function(state, data) {
-    $(state.element_chart).raphael(data.result, {
-        width: state.chartWidth(),
-        height: state.chartHeight()
-    });
-
-    return false;
-};
diff --git a/web/gui/src/dashboard.js/charting/dygraph.js b/web/gui/src/dashboard.js/charting/dygraph.js
index a60af18b8..f34d2f4aa 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();