Use a prefix for the old dashboard. (#8752)

* Use a prefix for the old dashboard.

This switches the code for handling of the new React dashboard to use a
prefix for accessing the old dashboard instead of relying on a switching
script to handle selecting the desired dashboard implementation.

It also adds proper support to the packaging code to bundle the React
dashboard.

* Fixed typos in web/gui/Makefile.am.

* Tidy up prefixed dashboard.

This is based on discussion with cakrit about how to handle this more
sanely.

* use /old suffix for streamed nodes links in dropdown menu

* fix fetching dynamic vendor files with /old suffix

Co-authored-by: Jacek Kolasa <jacek.kolasa@gmail.com>

5 files changed, 1334 insertions, 78 deletions

diff --git a/web/Makefile.am b/web/Makefile.am
index 0c8b0332c3..ccaccd764c 100644
--- a/web/Makefile.am
+++ b/web/Makefile.am
@@ -9,20 +9,8 @@ SUBDIRS = \
     server \
     $(NULL)
 
-CLEANFILES = \
-    netdata-switch-dashboard.sh \
-    $(NULL)
-
 usersslconfigdir=$(configdir)/ssl
 
-include $(top_srcdir)/build/subst.inc
-SUFFIXES = .in
-
-scriptsdir=${prefix}/libexec/netdata
-scripts_SCRIPTS = \
-    netdata-switch-dashboard.sh \
-    $(NULL)
-
 # Explicitly install directories to avoid permission issues due to umask
 install-exec-local:
 	$(INSTALL) -d $(DESTDIR)$(usersslconfigdir)
@@ -31,5 +19,4 @@ dist_noinst_DATA = \
     README.md \
     gui/confluence/README.md \
     gui/custom/README.md \
-    netdata-switch-dashboard.sh.in \
     $(NULL)
diff --git a/web/gui/Makefile.am b/web/gui/Makefile.am
index 117dc5d569..c69380f934 100644
--- a/web/gui/Makefile.am
+++ b/web/gui/Makefile.am
@@ -71,6 +71,11 @@ dist_web_DATA = \
     version.txt \
     $(NULL)
 
+webolddir=$(webdir)/old
+dist_webold_DATA = \
+    old/index.html \
+    $(NULL)
+
 webstaticdir=$(webdir)/static/img
 dist_webstatic_DATA = \
     static/img/netdata-logomark.svg \
diff --git a/web/gui/main.js b/web/gui/main.js
index 3907a8a3ea..f64b7fcc4f 100644
--- a/web/gui/main.js
+++ b/web/gui/main.js
@@ -499,10 +499,12 @@ function toggleAgentItem(e, guid) {
 // When you stream metrics from netdata to netdata, the recieving netdata now
 // has multiple host databases. It's own, and multiple mirrored. Mirrored databases
 // can be accessed with <http://localhost:19999/host/NAME/>
+const OLD_DASHBOARD_SUFFIX = "old"
 function renderStreamedHosts(options) {
     let html = `<div class="info-item">Databases streamed to this agent</div>`;
 
-    var base = document.location.origin.toString() + document.location.pathname.toString();
+    var base = document.location.origin.toString() +
+      document.location.pathname.toString().replace(`/${OLD_DASHBOARD_SUFFIX}`, "");
     if (base.endsWith("/host/" + options.hostname + "/")) {
         base = base.substring(0, base.length - ("/host/" + options.hostname + "/").toString().length);
     }
@@ -536,10 +538,10 @@ function renderStreamedHosts(options) {
         displayedDatabases = true;
 
         if (hostname === master) {
-            url = `${base}/`;
+            url = `${base}/${OLD_DASHBOARD_SUFFIX}/`;
             icon = 'home';
         } else {
-            url = `${base}/host/${hostname}/`;
+            url = `${base}/host/${hostname}/${OLD_DASHBOARD_SUFFIX}/`;
             icon = 'window-restore';
         }
 
@@ -1932,7 +1934,7 @@ function renderChartsAndMenu(data) {
 
 function loadJs(url, callback) {
     $.ajax({
-        url: url,
+        url: `../${url}`,
         cache: true,
         dataType: "script",
         xhrFields: { withCredentials: true } // required for the cookie
@@ -1979,7 +1981,7 @@ function loadBootstrapSlider(callback) {
     if (bootstrapSliderLoaded === false) {
         bootstrapSliderLoaded = true;
         loadJs('lib/bootstrap-slider-10.0.0.min.js', function () {
-            NETDATA._loadCSS('css/bootstrap-slider-10.0.0.min.css');
+            NETDATA._loadCSS('../css/bootstrap-slider-10.0.0.min.css');
             callback();
         });
     } else {
diff --git a/web/gui/old/index.html b/web/gui/old/index.html
new file mode 100644
index 0000000000..b004b29380
--- /dev/null
+++ b/web/gui/old/index.html
@@ -0,0 +1,1322 @@
+<!DOCTYPE html>
+<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
+<html lang="en">
+<head>
+    <title>netdata dashboard</title>
+    <meta name="application-name" content="netdata">
+
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="author" content="costa@tsaousis.gr">
+
+    <link rel="stylesheet" type="text/css" href="../main.css?v=5">
+
+    <link rel="icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP9JREFUeNpiYBgFo+A/w34gpiZ8DzWzAYgNiHGAA5UdgA73g+2gcyhgg/0DGQoweB6IBQYyFCCOGOBQwBMd/xnW09ERDtgcoEBHB+zHFQrz6egIBUasocDAcJ9OxWAhE4YQI8MDILmATg7wZ8QRDfQKhQf4Cie6pAVGPA4AhQKo0BCgZRAw4ZSBpIWJNI6CD4wEKikBaFqgVSgcYMIrzcjwgcahcIGRiPYCLUPBkNhWUwP9akVcoQBpatG4MsLviAIqWj6f3Absfdq2igg7IIEKDVQKEzN5ofAenJCp1I8gJRTug5tfkGIdR1FDniMI+QZUjF8Amn5htOdHCAAEGACE6B0cS6mrEwAAAABJRU5ErkJggg==" />
+
+    <meta property="og:locale"             content="en_US" />
+    <meta property="og:url"                content="https://my-netdata.io" />
+    <meta property="og:type"               content="website" />
+    <meta property="og:site_name"          content="netdata"/>
+    <meta property="og:title"              content="Get control of your Linux Servers. Simple. Effective. Awesome." />
+    <meta property="og:description"        content="Unparalleled insights, in real-time, of everything happening on your Linux systems and applications, with stunning, interactive web dashboards and powerful performance and health alarms." />
+    <meta property="og:image"              content="https://cloud.githubusercontent.com/assets/2662304/22945737/e98cd0c6-f2fd-11e6-96f1-5501934b0955.png" />
+    <meta property="og:image:type"         content="image/png" />
+    <meta property="fb:app_id"             content="1200089276712916" />
+
+    <meta name="twitter:card"              content="summary" />
+    <meta name="twitter:site"              content="@linuxnetdata" />
+    <meta name="twitter:title"             content="Get control of your Linux Servers. Simple. Effective. Awesome." />
+    <meta name="twitter:description"       content="Unparalleled insights, in real-time, of everything happening on your Linux systems and applications, with stunning, interactive web dashboards and powerful performance and health alarms." />
+    <meta name="twitter:image"             content="https://cloud.githubusercontent.com/assets/2662304/14092712/93b039ea-f551-11e5-822c-beadbf2b2a2e.gif" />
+
+    <script src="../main.js?v20190905-0"></script>
+</head>
+
+<body data-spy="scroll" data-target="#sidebar" data-offset="100">
+    <div id="loadOverlay" class="loadOverlay" style="background-color: #fff; color: #888;">
+        <div style="font-size: 3vh;">
+            You must enable JavaScript in order to use Netdata!<br />
+            You can do this in <a href="https://enable-javascript.com/" target="_blank">your browser settings</a>.
+        </div>
+    </div>
+    <script type="text/javascript">
+        // Cleanup JS warning.
+        document.documentElement.style.overflowY = "scroll";
+
+        // Change the loadOverlay colors ASAP to match the theme.
+        let theme;
+        const hash = document.location.hash;
+        if (hash.includes('theme=slate')) {
+            theme = 'slate';
+        } else if (hash.includes('theme=white')) {
+            theme = 'white';
+        } else {
+            theme = localStorage.getItem('netdataTheme') || 'slate';
+        }
+        const overlayEl = document.getElementById('loadOverlay');
+        overlayEl.innerHTML = 'netdata<br/><div style="font-size: 3vh;">Real-time performance monitoring, done right!</div>';
+        overlayEl.style = theme == 'slate' ? "background-color: #272b30; color: #373b40;" : "background-color: #fff; color: #ddd;";
+    </script>
+    <nav class="navbar navbar-default navbar-fixed-top" role="banner">
+        <div class="container">
+            <div class="navbar-header">
+                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <ul class="nav navbar-nav" style="display: inline-block">
+                    <li data-placement="right" class="hidden-xs hidden-sm" style="line-height: 50px; margin-right: 15px" title="Netdata Agent">
+                       <img src="../images/netdata-logomark.svg" height="32"/>
+                    </li>
+                    <li class="dropdown" id="myNetdataDropdownParent" title="your other netdata servers" data-toggle="tooltip" data-placement="right">
+                        <a href="#" id="hostname" class="dropdown-toggle" data-toggle="dropdown">
+                        my-netdata
+                        <strong class="caret"></strong></a>
+                        <div id="my-netdata-dropdown-content" class="dropdown-menu scrollable-menu inpagemenu">
+                            <div class="agent-item" style="white-space: nowrap">
+                                <i class="fas fa-hourglass-half"></i>
+                                Loading, please wait...
+                                <div></div>
+                            </div>                            
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <nav class="collapse navbar-collapse navbar-right" role="navigation">
+                <ul class="nav navbar-nav">
+                    <li title="Nodes view" data-toggle="tooltip" data-placement="bottom"><a onclick="openAuthenticatedUrl('console.html');" class="btn" target="_blank"><i class="fas fa-tv"></i>&nbsp;<span class="hidden-sm hidden-md">Nodes<sup class="beta"> beta</sup></span></a></li>
+                    <li id="alarmsButton"  title="check the health monitoring alarms and their log" data-toggle="tooltip" data-placement="bottom"><a href="#" class="btn" data-toggle="modal" data-target="#alarmsModal"><i class="fas fa-bell"></i>&nbsp;<span class="hidden-sm hidden-md">Alarms&nbsp;</span><span id="alarms_count_badge" class="badge"></span></a></li>
+                    <li title="change dashboard settings" data-toggle="tooltip" data-placement="bottom"><a href="#" class="btn" data-toggle="modal" data-target="#optionsModal"><i class="fas fa-cog"></i>&nbsp;<span class="hidden-sm hidden-md">Settings</span></a></li>
+                    <li title="check for netdata updates<br/>you should keep your netdata updated" data-toggle="tooltip" data-placement="bottom" class="hidden-sm" id="updateButton"><a href="#" class="btn" data-toggle="modal" data-target="#updateModal"><i class="fas fa-cloud-download-alt"></i> <span class="hidden-sm hidden-md">Update </span><span id="update_badge" class="badge"></span></a></li>
+                    <li title="the netdata wiki home at github<br/>remember to <b>give netdata a <i class=&quot;fas fa-star&quot;></i></b> !" data-toggle="tooltip" data-placement="bottom" class="hidden-xs hidden-sm hidden-md"><a href="https://github.com/netdata/netdata" class="btn" target="_blank"><i class="fab fa-github"></i></a></li>
+                    <li title="follow netdata on twitter" data-toggle="tooltip" data-placement="bottom" class="hidden-xs hidden-sm hidden-md"><a href="https://twitter.com/linuxnetdata" class="btn" target="_blank"><i class="fab fa-twitter"></i></a></li>
+                    <li title="like netdata on facebook" data-toggle="tooltip" data-placement="bottom" class="hidden-xs hidden-sm hidden-md"><a href="https://www.facebook.com/linuxnetdata/" class="btn" target="_blank"><i class="fab fa-facebook"></i></a></li>
+                    <li title="import / load a netdata snapshot" data-toggle="tooltip" data-placement="bottom" id="loadButton"><a href="#" class="btn" data-toggle="modal" data-target="#loadSnapshotModal"><i class="fas fa-download"></i>&nbsp;<span class="hidden-sm hidden-md hidden-lg">Import</span></a></li>
+                    <li title="export / save a netdata snapshot" data-toggle="tooltip" data-placement="bottom" id="saveButton"><a href="#" class="btn" data-toggle="modal" data-target="#saveSnapshotModal"><i class="fas fa-upload"></i>&nbsp;<span class="hidden-sm hidden-md hidden-lg">Export</span></a></li>
+                    <li title="print this dashboard to PDF" data-toggle="tooltip" data-placement="bottom" id="printButton"><a href="#" class="btn" data-toggle="modal" data-target="#printPreflightModal"><i class="fas fa-print"></i>&nbsp;<span class="hidden-sm hidden-md hidden-lg">Print</span></a></li>
+                    <li title="get help on using the charts" data-toggle="tooltip" data-placement="bottom" class="hidden-sm"><a href="#" class="btn" data-toggle="modal" data-target="#helpModal"><i class="fas fa-question-circle"></i>&nbsp;<span class="hidden-sm hidden-md">Help</span></a></li>
+                    <li id="account-menu-container" class="dropdown" data-toggle="tooltip"></li>
+                </ul>
+            </nav>
+        </div>
+    </nav>
+    <div class="navbar-highlight">
+        <div id="navbar-highlight-content" class="navbar-highlight-content"></div>
+    </div>
+
+    <div id="sign-in-banner" style="display: none">
+        <div class="container">
+            Like what you see? 
+            <strong><a href="#" class="__link" onclick="signInDidClick(event); return false">Sign in</a> 
+            to experience the full-range of netdata capabilities!</strong>
+            <div class="__close" onclick="closeSignInBannerDidClick(event)">
+                Close <i class="fas fa-times"></i>
+            </div>
+        </div>
+    </div>
+    
+    <div id="masthead" style="display: none;">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-7">
+                    <h1>Netdata
+                        <p class="lead">Real-time performance monitoring, in the greatest possible detail</p>
+                    </h1>
+                </div>
+                <div class="col-md-5">
+                    <div class="well well-lg">
+                        <div class="row">
+                        <div class="col-md-6">
+                            <b>Drag</b> charts to pan.
+                            <b>Shift + wheel</b> on them, to zoom in and out.
+                            <b>Double-click</b> on them, to reset.
+                            <b>Hover</b> on them too!
+                            </div>
+                        <div class="col-md-6">
+                            <div class="netdata-container" data-netdata="system.intr" data-chart-library="dygraph" data-dygraph-theme="sparkline" data-dygraph-type="line" data-dygraph-strokewidth="3" data-dygraph-smooth="true" data-dygraph-highlightcirclesize="6" data-after="-90" data-height="60px" data-colors="#C66"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="row">
+            <div class="charts-body" role="main">
+                <div id="charts_div"></div>
+            </div>
+            <div class="sidebar-body hidden-xs hidden-sm hidden-print" id="sidebar-body" role="complementary">
+                <nav class="dashboard-sidebar hidden-print hidden-xs hidden-sm" id="sidebar" role="menu"></nav>
+            </div>
+        </div>
+    </div>
+
+    <div id="footer" class="container" style="display: none;">
+        <div class="row">
+            <div class="col-md-10" role="main">
+                <div class="p">
+                    <big><a href="https://github.com/netdata/netdata/wiki" target="_blank">Netdata</a></big>
+                    <br /><br />
+                    <i class="fas fa-copyright"></i> Copyright 2018, <a href="mailto:info@netdata.cloud">Netdata, Inc</a>.<br/>
+                    <i class="fas fa-copyright"></i> Copyright 2016-2018, <a href="mailto:costa@tsaousis.gr">Costa Tsaousis</a>.<br/>
+                </div>
+                <div class="p">
+                    Released under <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GPL v3 or later</a>.
+                    Netdata uses <a href="https://github.com/netdata/netdata/blob/master/REDISTRIBUTED.md" target="_blank">third party tools</a>.
+                    <br /><br />
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="xssModal" tabindex="-1" role="dialog" aria-labelledby="xssModalLabel" data-keyboard="false" data-backdrop="static" style="z-index: 3000">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title" id="xssModalLabel">XSS Protection</h4>
+                </div>
+                <div class="modal-body">
+                    <p>
+                        This dashboard is about to render data from server:
+                    </p>
+                    <p style="font-size: 1.25em;">
+                        <code id="netdataXssModalServer"></code>
+                    </p>
+                    <p>
+                        To protect your privacy, the dashboard will <b>check all data transferred</b> for cross site scripting (XSS).
+                        <br/>This is CPU intensive, so your browser might be a bit slower.
+                    </p>
+                    <p>
+                        If you <b>trust</b> the remote server, you can disable XSS protection.<br/>
+                        In this case, any remote dashboard decoration code (javascript) will also run.
+                    </p>
+                    <p>
+                        If you <b>don't trust</b> the remote server, you should keep the protection on.<br/>
+                        The dashboard will run slower and remote dashboard decoration code will not run, but better be safe than sorry...
+                    </p>
+                </div>
+                <div class="modal-footer">
+                    <a href="#" onclick="return xssModalKeepXss();" type="button" class="btn btn-success" data-dismiss="modal">Keep protecting me</a>
+                    <a href="#" onclick="return xssModalDisableXss();" type="button" class="btn btn-danger" data-dismiss="modal">I don't need this, the server is mine</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="printPreflightModal" tabindex="-1" role="dialog" aria-labelledby="printPreflightModalLabel">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="printPreflightModalLabel">Print this netdata dashboard</h4>
+                </div>
+                <div class="modal-body">
+                    <p>
+                        netdata dashboards cannot be captured, since we are lazy loading and hiding all but the visible charts.
+                        <br/>
+                        To capture the whole page with all the charts rendered, a new browser window will pop-up that will render all the charts at once.
+                        The new browser window will maintain the current pan and zoom settings of the charts. So, align the charts before proceeding.
+                    </p>
+                    <p>
+                        <small>
+                            This process will put some CPU and memory pressure on your browser.<br/>
+                            For the netdata server, we will sequencially download all the charts, to avoid congesting network and server resources.<br/>
+                            <b>Please, do not print netdata dashboards on paper!</b>
+                        </small>
+                    </p>
+                </div>
+                <div class="modal-footer">
+                    <a href="#" onclick="printPreflight(); return false;" type="button" class="btn btn-default">Print</a>
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="printModal" tabindex="-1" role="dialog" aria-labelledby="printModalLabel" data-keyboard="false" data-backdrop="static">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="printModalLabel">Preparing dashboard for printing...</h4>
+                </div>
+                <div class="modal-body">
+                    Please wait while we initialize and render all the charts on the dashboard.
+                    <div class="progress progress-striped active" style="height: 2em !important;">
+                        <div id="printModalProgressBar" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
+                            <span id="printModalProgressBarText" style="padding-left: 10px; padding-top: 4px; font-size: 1.2em; text-align: left; width: 100%; position: absolute; display: block; color: black;"></span>
+                        </div>
+                    </div>
+                    The print dialog will appear as soon as we finish rendering the page.
+                </div>
+                <div class="modal-footer">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="loadSnapshotModal" tabindex="-1" role="dialog" aria-labelledby="loadSnapshotModalLabel">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="loadSnapshotModalLabel">Import a netdata snapshot</h4>
+                </div>
+                <div id="loadSnapshotDragAndDrop" class="modal-body">
+                    <p>
+                        netdata can export and import dashboard snapshots.
+                        Any netdata can import the snapshot of any other netdata.
+                        The snapshots are not uploaded to a server. They are handled entirely by your web browser, on your computer.
+                    </p>
+                    <p style="text-align: center;">
+                        <label class="btn btn-default">
+                            Click here to select the netdata snapshot file to import
+                            <input type="file" id="loadSnapshotSelectFiles" value="Import" style="display: none;"
+                                   onchange="loadSnapshotPreflight();">
+                        </label>
+                    </p>
+                    <div id="loadSnapshotStatus" class="alert alert-info" role="alert">
+                        Browse for a snapshot file (or drag it and drop it here), then click <b>Import</b> to render it.
+                    </div>
+                    <p>
+                        <table class="table">
+                        <tbody>
+                            <tr><th>Filename</th><td id="loadSnapshotFilename"></td></tr>
+                            <tr><th>Hostname</th><td id="loadSnapshotHostname"></td></tr>
+                            <tr><th>Origin URL</th><td id="loadSnapshotURL"></td></tr>
+                            <tr><th>Charts Info</th><td id="loadSnapshotCharts"></td></tr>
+                            <tr><th>Snapshot Info</th><td id="loadSnapshotInfo"></td></tr>
+                            <tr><th>Time Range</th><td id="loadSnapshotTimeRange"></td></tr>
+                            <tr><th>Comments</th><td id="loadSnapshotComments"></td></tr>
+                        </tbody>
+                        </table>
+                    </p>
+                </div>
+                <div class="modal-footer">
+                    <span style="display: inline-block; padding-right: 20px;">Snapshot files contain both data and javascript code. Make sure <b>you trust the files</b> you import!</span>
+                    <a id="loadSnapshotImport" href="#" onclick="loadSnapshot(); return false;" type="button" class="btn btn-success disabled">Import</a>
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="saveSnapshotModal" tabindex="-1" role="dialog" aria-labelledby="saveSnapshotModalLabel" data-keyboard="false" data-backdrop="static">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="saveSnapshotModalLabel">Export a snapshot</h4>
+                </div>
+                <div class="modal-body">
+                    <div id="saveSnapshotModalProgressSection" hidden>
+                        Please wait while we collect all the dashboard data...
+                        <div class="progress progress-striped active" style="height: 2em !important;">
+                            <div id="saveSnapshotModalProgressBar" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
+                                <span id="saveSnapshotModalProgressBarText" style="padding-left: 10px; padding-top: 4px; font-size: 1.2em; text-align: left; width: 100%; position: absolute; display: block;"></span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="saveSnapshotResolutionRadio" style="text-align: center;">
+                        Select the desired resolution of the snapshot. This is the <b>seconds of data per point</b>.
+                        <br/>
+                        &nbsp;
+                        <br/>
+                        &nbsp;
+                        <br/>
+                        <input id="saveSnapshotResolutionSlider" data-slider-id='saveSnapshotResolutionSlider' type="text" style="width: 80%;"  tabindex="0"/>
+                        <br/>&nbsp;<br/>
+                        <div class="input-group">
+                            <span class="input-group-addon" id="sizing-saveSnapshotFilename" style="width: 100px;">Filename</span>
+                            <input id="saveSnapshotFilename" class="form-control" placeholder="Filename of the generated snapshot" aria-describedby="sizing-saveSnapshotFilename"  tabindex="2"/>
+                            <div class="input-group-btn">
+                                <div class="input-group-btn">
+                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="saveSnapshotCompressionName">Compression</span> <span class="caret"></span></button>
+                                    <ul class="dropdown-menu dropdown-menu-right">
+                                        <li class="disabled"><a href="#" class="disabled">Select Compression</a></li>
+                                        <li role="separator" class="divider"></li>
+                                        <li><a href="#" onclick="saveSnapshotSetCompression('none'); return false;">uncompressed</a></li>
+                                        <li role="separator" class="divider"></li>
+                                        <li><a href="#" onclick="saveSnapshotSetCompression('pako.deflate'); return false;">pako.deflate (gzip, binary)</a></li>
+                                        <li><a href="#" onclick="saveSnapshotSetCompression('pako.deflate.base64'); return false;">pako.deflate.base64 (gzip, ascii)</a></li>
+                                        <li role="separator" class="divider"></li>
+                                        <li><a href="#" onclick="saveSnapshotSetCompression('lzstring.uri'); return false;">lzstring.uri (LZ, ascii)</a></li>
+                                        <li><a href="#" onclick="saveSnapshotSetCompression('lzstring.utf16'); return false;">lzstring.utf16 (LZ, utf16)</a></li>
+                                        <li><a href="#" onclick="saveSnapshotSetCompression('lzstring.base64'); return false;">lzstring.base64 (LZ, ascii)</a></li>
+                                    </ul>
+                                </div><!-- /btn-group -->
+                            </div>
+                        </div>
+                        <div class="input-group" style="padding-top: 10px; width: 100%">
+                            <span class="input-group-addon" id="sizing-saveSnapshotComments" style="width: 100px;">Comments</span>
+                            <input id="saveSnapshotComments" class="form-control" placeholder="Any comments about this snapshot?" aria-describedby="sizing-saveSnapshotComments" tabindex="3"/>
+                        </div>
+                    </div>
+
+                    &nbsp;
+                    <div id="saveSnapshotStatus" class="alert alert-info" role="alert">
+                        Select snaphost resolution. This controls the size the snapshot file.
+                    </div>
+                    <p>
+                        The generated snapshot will include all charts of this dashboard, <b>for the visible timeframe</b>, so align, pan and zoom the charts as needed.
+                        The scroll position of the dashboard will also be saved.
+                        The snapshot will be downloaded as a file, to your computer, that can be imported back into any netdata dashboard (no need to import it back on this server).
+                    </p>
+                    <p>
+                        <small>
+                            Snapshot files include all the information of the dashboard, including the URL of the origin server, its netdata unique ID, etc.
+                            So, if you share the snapshot file with third parties, they will be able to access the origin server, if this server is exposed on the internet.
+                            <br/>
+                            Snapshots are handled entirely by the web browser. The netdata servers are not aware of them.
+                        </small>
+                    </p>
+                </div>
+                <div class="modal-footer">
+                    <a id="saveSnapshotExport" href="#" onclick="saveSnapshot(); return false;" type="button" class="btn btn-success"  tabindex="4">Export</a>
+                    <button type="button" class="btn btn-default" data-dismiss="modal" tabindex="5">Cancel</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="welcomeModalLabel">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="welcomeModalLabel">Welcome to the world of netdata</h4>
+                </div>
+                <div class="modal-body">
+                    <div class="p">
+                        <div style="width: 100%; text-align: center; padding-top: 10px; padding-bottom: 10px; font-size: 18px;">
+                            if there is a metric for something, we want it visualised<br/>
+                            and we want this visualisation to be <strong>real-time</strong>, <strong>efficient</strong> and <strong>awesome</strong>
+                        </div>
+                    </div>
+                    <div class="p">
+                        <b><a href="https://github.com/netdata/netdata/wiki" target="_blank">netdata</a></b>
+                        is a new way to monitor your systems and applications, to get <strong>real-time insights</strong>
+                        of what is really happening and what affects performance.
+                        It is carefully optimised to be a real-time system, without interfering in any way,
+                        to the core function of your systems.
+                    </div>
+                    <div class="p">
+                        <b><a href="https://github.com/netdata/netdata/wiki" target="_blank">netdata</a></b>
+                        has been designed to monitor <strong>massive amounts of metrics, per server, per second</strong>.
+                        When installed, it might come up with 1k to 3k metrics, but we have been testing it with 100k
+                        metrics, all collected per second, and still the cpu utilisation remained negligible.
+                        <br/>
+                        We have also tried to give each metric, a meaning, a context.
+                        We have grouped and categorized all metrics into meaningful charts, providing a
+                        better understanding of the underlying technologies and mechanisms.
+                    </div>
+                    <div class="p">
+                        <b><a href="https://github.com/netdata/netdata/wiki" target="_blank">netdata</a></b> is free,
+                        open-source software. If you decide to use it,
+                        <strong><a href="https://github.com/netdata/netdata/tree/master/docs/a-github-star-is-important.md" target="_blank">it is important to give netdata a star at GitHub</a></strong>.
+                    </div>
+                    <div class="p">
+                        Enjoy real-time performance monitoring!
+                    </div>
+                    <div class="p">
+                        Costa Tsaousis
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="helpModalLabel">Dashboard Help</h4>
+                </div>
+                <div class="modal-body">
+
+                    <h4>Dygraphs (line, area and stacked area charts)</h4>
+
+                    <!-- Nav tabs -->
+                    <ul class="nav nav-tabs" role="tablist">
+                        <li role="presentation" class="active"><a href="#help_mouse" aria-controls="help_mouse" role="tab" data-toggle="tab">Mouse Interface</a></li>
+                        <li role="presentation"><a href="#help_touch" aria-controls="help_touch" role="tab" data-toggle="tab">Touch Interface</a></li>
+                    </ul>
+
+                    <!-- Tab panes -->
+                    <div class="tab-content">
+                        <div role="tabpanel" class="tab-pane active" id="help_mouse">
+                            <div class="p">
+                                <h4>Mouse Over / Hover</h4>
+                                Mouse over on a chart to show, at its legend, the values for the timestamp under the mouse (the chart will also highlight the point at the chart).
+                                <br/>
+                                All the other visible charts will also show and highlight their values for the same timestamp.
+                            </div>
+                            <hr/>
+                            <div class="p">
+                                <h4>Drag Chart Contents</h4>
+                                Drag the contents of a chart, by pressing the left mouse button and moving the mouse, to pan it horizontally.
+                                <br/>