Improvements to dash-example.html (#10870)

2 files changed, 87 insertions, 59 deletions

diff --git a/web/gui/custom/README.md b/web/gui/custom/README.md
index 733ef5211d..e6f531bd77 100644
--- a/web/gui/custom/README.md
+++ b/web/gui/custom/README.md
@@ -73,31 +73,32 @@ header:
 
 `dash-example.html` is an all-in-one page that automatically fetches graphs from all your hosts. Just add your graphs and charts (or use the defaults) one time using the `dash-*` syntax, and your selections will be automatically replicated for all of your hosts; showing alarms and graphs for all your hosts on **one page!**
 
-__**Dash will only work if you have implemented netdata streaming using `stream.conf`**__
+__**Dash will only work if you have implemented netdata streaming using `stream.conf`. It is not part of Netdata Cloud.**__
 
 `dash-example.html` was created as an experiment to demonstrate the capabilities of netdata in a multi-host environment. If you desire more features, submit a pull request or check out Netdata Cloud!
 
 ### Configure Dash
 
 First, rename the file so it doesn't get overwritten. For instance, with a webroot at `/usr/share/netdata/web`:
-```
+```bash
 cp /usr/share/netdata/web/dash-example.html /usr/share/netdata/web/dash.html
 ```
 
-Find and change the following line in `dash.html` to reflect your Netdata URLs. The second URL is only used if you access your Netdata dashboard through a reverse proxy. The reverse proxy URL is optional; if it is not set then both will use the Netdata host URL.
+> NOTE: Ensure the owner/permissions match those in the rest of the files in the directory. Usually `netdata:netdata` and `0644`.
+
+Find and change the following lines in `dash.html` to reflect your Netdata URLs. The `REVERSE_PROXY_URL` is optional and only used if you access your Netdata dashboard through a reverse proxy. If it is not set, it defaults to the `NETDATA_HOST` URL.
 
 ```js
-/*
-* TUTORIAL: Change this to the URL of your netdata host
-* If you use netdata behind a reverse proxy, add a second parameter for the reverse proxy url like so:
-*         new Dash('http://localhost:19999', 'https://my-domain.com/stats');
-*/
-var dash = new Dash('http://localhost:19999');
+/**
+ * Netdata URLS. If you use a reverse proxy, add it and uncomment the line below
+ */
+NETDATA_HOST = 'https://localhost:19999';
+// REVERSE_PROXY_URL = 'https://my-domain.com/stats'
 ```
 
 ### The `dash-*` Syntax
 
-If you want to change the graphs or styling to fit your needs, just add an element to the page as shown. Child divs will be generated to create your graph/chart:
+If you want to change the graphs or styling to fit your needs, just add an element to the page as shown. Child divs will be generated to create your graph/chart, and charts are replicated for each streamed host.
 ```
 <div class="dash-graph"                     <----     Use class dash-graph for line graphs, etc
     data-dash-netdata="system.cpu"          <----     REQUIRED: Use data-dash-netdata to set the data source
@@ -112,17 +113,17 @@ If you want to change the graphs or styling to fit your needs, just add an eleme
 </div>
 ```
 
-To change the sizes of graphs and charts, find the `Dash.options` object in `dash.html` and set your preferences:
+To change the sizes of graphs and charts, find the `DASH_OPTIONS` object in `dash.html` and set your preferences:
 ```js
 /*
-* TUTORIAL: Change your graph/chart dimensions here. Host columns will automatically adjust.
-*           Charts are square! Their width is the same as their height.
-*/
-this.options = {
+ * Change your graph/chart dimensions here. Host columns will automatically adjust.  
+ * Charts are square! Their width is the same as their height.
+ */
+DASH_OPTIONS = {
     graph_width: '40em',
     graph_height: '20em',
     chart_width: '10em' // Charts are square
-};
+}
 ```
 
 To change the display order of your hosts, which is saved in localStorage, click the settings gear in the lower right corner
diff --git a/web/gui/dash-example.html b/web/gui/dash-example.html
index b1ff1af82f..a47b6e52fd 100644
--- a/web/gui/dash-example.html
+++ b/web/gui/dash-example.html
@@ -9,6 +9,43 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 </head>
 <body>
+    <script type="application/javascript">
+        /*****************
+         * CONFIGURATION *
+         *****************/
+
+        /**
+         * Netdata URLS. If you use a reverse proxy, add it and uncomment the line below
+         */
+        NETDATA_HOST = 'https://localhost:19999';
+        // REVERSE_PROXY_URL = 'https://my-domain.com/stats'
+
+        /**
+         * Whether to use dark theme in PickNSort. Default is true
+         */
+        DARK_THEME = true;
+
+        /**
+         * How often alarms are refreshed in seconds
+         */
+        ALARM_REFRESH_INTERVAL = 6;
+
+        /*
+         * Change your graph/chart dimensions here. Host columns will automatically adjust.  
+         * Charts are square! Their width is the same as their height.
+         */
+        DASH_OPTIONS = {
+            graph_width: '40em',
+            graph_height: '20em',
+            chart_width: '10em' // Charts are square
+        }
+
+        /*****************
+         *  END CONFIG   *
+         *****************/
+    </script>
+
+
     <div id="alarms" class="collapsed">
         <div class="alarm-collapse-button" onclick="dash.toggle_alarm_collapse()">&rsaquo;</div>
         <span class="alarm-count"></span>
@@ -93,12 +130,11 @@
         </div>
     </div>
 </body>
-<script
-    src="https://code.jquery.com/jquery-3.4.1.min.js"
-    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
-    crossorigin="anonymous">
+<script src="https://code.jquery.com/jquery-3.6.0.min.js" 
+        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
+        crossorigin="anonymous">
 </script>
-<script type="text/javascript">
+<script type="application/javascript">
 class PickNSort {
     // PickNSort.js
 
@@ -297,7 +333,7 @@ class PickNSort {
 
     add_css_to_page (dark) {
         /*
-        * TUTORIAL: Change your theme colors here. Not sure how well it will work...
+        * You can change your PickNSort theme colors here. Not sure how well it will work...
         */
         var light_theme = {
             windowbg: "#FFF",
@@ -404,7 +440,7 @@ class PickNSort {
     }
 }
 </script>
-<script type="text/javascript">
+<script type="application/javascript">
     // Dash JS
 
     function picknsort_setup () {
@@ -418,6 +454,21 @@ class PickNSort {
         }
     }
 
+    function load_dashboard_js () {
+        // Import dashboard.js
+        $.ajax({
+            url: dash.base_url + '/dashboard.js',
+            cache: true,
+            dataType: "script",
+            success: function () {
+                console.log("Loaded dashboard.js");
+                setTimeout(function () {
+                    $('#alarms').css("visibility", "visible");
+                }, 400);
+            }
+        });
+    }
+
     class Dash {
         constructor (base_url, link_base_url) {
             this.base_url = base_url; // URL of netdata host, with port
@@ -425,17 +476,7 @@ class PickNSort {
             this.current_alarms = {};
             this.new_alarms = {};
             this.first_build = true;
-            /*
-            * TUTORIAL: Change your graph/chart dimensions here. Host columns will automatically adjust.
-            *             Charts are square! Their width is the same as their height.
-            */
-            this.options = {
-                graph_width: '40em',
-                graph_height: '20em',
-                chart_width: '10em' // Charts are square
-            };
-
-            this.init();
+            this.options = DASH_OPTIONS;
         }
 
         reorder_hosts () {
@@ -514,12 +555,13 @@ class PickNSort {
         }
 
 
-        init () {
+        init (callback) {
             var that = this;
             $.get(this.get_api_url() + '/info', function (data) {
                 that.netdata_info = data;
                 picknsort_setup()
                 that.build();
+                callback();
             });
         }
 
@@ -651,7 +693,6 @@ class PickNSort {
         }
 
         update_alarm_count () {
-            console.log(this.all_alarms_are_warnings());
             var count = $('img.alarm-badge').length;
             $('.alarm-count').text($('img.alarm-badge').length);
             $('.alarm-count').removeClass('no-alarms warnings-only');
@@ -768,26 +809,19 @@ class PickNSort {
         }
     }
 
-    /*
-    * TUTORIAL: Change this to the URL of your netdata host
-    * If you use netdata behind a reverse proxy, add a second parameter for the reverse proxy url like so:
-    *         new Dash('http://localhost:19999', 'https://my-domain.com/stats');
-    */
-    var dash = new Dash('http://localhost:19999');
-
-    var picknsort = new PickNSort(true);
-
-    // Import dashboard.js
-    $.getScript(dash.base_url + '/dashboard.js', function() {
-        console.log("Loaded dashboard.js");
-        setTimeout(function () {
-            $('#alarms').css("visibility", "visible");
-        }, 400);
+    if (typeof REVERSE_PROXY_URL === 'undefined') REVERSE_PROXY_URL = null;
+
+    var dash = new Dash(NETDATA_HOST, REVERSE_PROXY_URL);
+
+    var picknsort = new PickNSort(DARK_THEME);
+
+    dash.init(function () {
+        load_dashboard_js();
     });
 
     setInterval(function () {
         dash.digest();
-    }, 6 * 1000);
+    }, ALARM_REFRESH_INTERVAL * 1000);
 
 </script>
 <style type="text/css">
@@ -987,13 +1021,6 @@ class PickNSort {
         margin-right: 27em;
     }
 
-    .netdata-host-stats {
-
-    }
-
-    .netdata-message {
-    }
-
     .dash-graph {
         margin-bottom: 1em;
     }