Bundle the react dashboard code into the agent repo directly. (#11139)

* Remove code for bundling the dashoard on install. * Bundle the dashboard code directly into the agent repo. This diffstat looks huge, but it’s actually relatively simple. The only _actual_ changes are in the Makefiles, `configure.ac`, and the addition of `generate_dashboard_makefile.py`. Everything else consists of removing files that are included in the dashboard tarball, and extracting the contents of the tarball into `web/gui/dashboard`. * CI cleanup. * Automate bundling of the dashboard code. This replaces the makefile generator script with one that handles bundling of the dashboard code in it’s entirety, and updates the GHA workflow used for generating dashboard PRs to use that instead of the existing shell commands. It also removes the packaging/dashboard.* files, as they are no longer needed.
2025-04-25 05:31:37 +00:00 · 2021-05-14 11:41:16 -04:00 · 2021-05-14 11:41:16 -04:00 · 9574cb4c95
commit 9574cb4c95
parent 48dd96c532
177 changed files with 4787 additions and 1707 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1 +1,2 @@
 **/*{.,-}min.js
+web/gui/dashboard/*
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@ -19,28 +19,6 @@ jobs:
          LOCAL_ONLY: "true"
        run: |
          ./tests/installer/checksums.sh
-  dashboard-checks:
-    name: Dashboard
-    runs-on: ubuntu-latest
-    steps:
-      - name: Git clone repository
-        uses: actions/checkout@v2
-        with:
-          submodules: recursive
-      - name: Install required packages
-        run: |
-          ./packaging/installer/install-required-packages.sh --dont-wait --non-interactive netdata
-      - name: Backup dashboard.js
-        run: |
-          cp web/gui/dashboard.js /tmp/dashboard.js
-      - name: Regenerate dashboard.js
-        run: |
-          autoreconf -ivf
-          ./configure --enable-maintainer-mode
-          make dist
-      - name: Compare generated Dashboard vs. Backed up Dashboard
-        run: |
-          diff -sNrdu /tmp/dashboard.js web/gui/dashboard.js
  libressl-checks:
    name: LibreSSL
    runs-on: ubuntu-latest
--- a/.github/workflows/dashboard-pr.yml
+++ b/.github/workflows/dashboard-pr.yml
@ -27,14 +27,11 @@ jobs:
          git push -u origin dashboard-${{ github.event.inputs.dashboard_version }}
      - name: Update Files
        run: |
-          curl -o dashboard.tar.gz https://github.com/netdata/dashboard/releases/download/${{ github.event.inputs.dashboard_version }}/dashboard.tar.gz
-          echo ${{ github.event.inputs.dashboard_version }} > packaging/dashboard.version
-          sha256sum dashboard.tar.gz > packaging/dashboard.checksums
-          rm dashboard.tar.gz
+          web/gui/bundle_dashboard.py ${{ github.event.inputs.dashboard_version }}
      - name: Commit Changes
        uses: swinton/commit@v2.x
        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_TOKEN: ${{ secrets.NETDATABOT_GITHUB_TOKEN }}
        with:
          files: |
            packaging/dashboard.version
@ -47,4 +44,4 @@ jobs:
          source_branch: dashboard-${{ github.event.inputs.dashboard_version }}
          pr_title: 'Update dashboard to version ${{ github.event.inputs.dashboard_version }}.'
          pr_body: 'See https://github.com/netdata/dashboard/releases/tag/${{ github.event.inputs.dashboard_version }} for changes.'
-          github_token: ${{ secrets.GITHUB_TOKEN }}
+          github_token: ${{ secrets.NETDATABOT_GITHUB_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@ -98,6 +98,7 @@ TODO.txt

 web/gui/chart-info/
 web/gui/control.html
+web/gui/dashboard.js
 web/gui/datasource.css
 web/gui/gadget.xml
 web/gui/index_new.html
--- a/Makefile.am
+++ b/Makefile.am
@ -57,15 +57,12 @@ dist_noinst_DATA = \
    netdata.cppcheck \
    netdata.spec \
    package.json \
-    packaging/bundle-dashboard.sh \
    packaging/bundle-ebpf.sh \
    packaging/bundle-judy.sh \
    packaging/bundle-libbpf.sh \
    packaging/bundle-lws.sh \
    packaging/bundle-mosquitto.sh \
    packaging/check-kernel-config.sh \
-    packaging/dashboard.checksums \
-    packaging/dashboard.version \
    packaging/ebpf.checksums \
    packaging/ebpf.version \
    packaging/go.d.checksums \
--- a/configure.ac
+++ b/configure.ac
@ -1667,6 +1667,7 @@ AC_CONFIG_FILES([
    web/api/queries/sum/Makefile
    web/api/health/Makefile
    web/gui/Makefile
+    web/gui/dashboard/Makefile
    web/server/Makefile
    web/server/static/Makefile
    claim/Makefile
--- a/contrib/debian/rules
+++ b/contrib/debian/rules
@ -70,7 +70,6 @@ override_dh_install:

 	# Move files that local user shouldn't be editing to /usr/share/netdata
 	#
-	packaging/bundle-dashboard.sh . ${TOP}/var/lib/netdata/www
 	mkdir -p "$(TOP)/usr/share/netdata/www"
 	for D in $$(find "$(TOP)/var/lib/netdata/www/" -maxdepth 1 -type d -printf '%f '); do \
 		echo Relocating $$D; \
--- a/netdata-installer.sh
+++ b/netdata-installer.sh
@ -1362,40 +1362,6 @@ fi

 # -----------------------------------------------------------------------------

-copy_react_dashboard() {
-  run cp -a $(find ${1} -mindepth 1 -maxdepth 1) "${NETDATA_WEB_DIR}"
-  run chown -R "${NETDATA_WEB_USER}:${NETDATA_WEB_GROUP}" "${NETDATA_WEB_DIR}"
-}
-
-install_react_dashboard() {
-  progress "Fetching and installing dashboard"
-
-  DASHBOARD_PACKAGE_VERSION="$(cat packaging/dashboard.version)"
-
-  tmp="$(mktemp -d -t netdata-dashboard-XXXXXX)"
-  DASHBOARD_PACKAGE_BASENAME="dashboard.tar.gz"
-
-  if fetch_and_verify "dashboard" \
-    "https://github.com/netdata/dashboard/releases/download/${DASHBOARD_PACKAGE_VERSION}/${DASHBOARD_PACKAGE_BASENAME}" \
-    "${DASHBOARD_PACKAGE_BASENAME}" \
-    "${tmp}" \
-    "${NETDATA_LOCAL_TARBALL_OVERRIDE_DASHBOARD}"; then
-    if run tar -xf "${tmp}/${DASHBOARD_PACKAGE_BASENAME}" -C "${tmp}" &&
-      copy_react_dashboard "${tmp}/build" &&
-      rm -rf "${tmp}"; then
-      run_ok "React dashboard installed."
-    else
-      run_failed "Failed to install React dashboard. The install process will continue, but you will not be able to use the new dashboard."
-    fi
-  else
-    run_failed "Unable to fetch React dashboard. The install process will continue, but you will not be able to use the new dashboard."
-  fi
-}
-
-install_react_dashboard
-
-# -----------------------------------------------------------------------------
-
 # govercomp compares go.d.plugin versions. Exit codes:
 # 0 - version1 == version2
 # 1 - version1 > version2
--- a/netdata.spec.in
+++ b/netdata.spec.in
@ -411,7 +411,6 @@ install_go() {
 install_go
 install -m 0640 -p go.d.plugin "${RPM_BUILD_ROOT}%{_libexecdir}/%{name}/plugins.d/go.d.plugin"

-${RPM_BUILD_DIR}/%{name}-%{version}/packaging/bundle-dashboard.sh ${RPM_BUILD_DIR}/%{name}-%{version} ${RPM_BUILD_ROOT}%{_datadir}/%{name}/web
 %if 0%{?have_bpf}
 ${RPM_BUILD_DIR}/%{name}-%{version}/packaging/bundle-ebpf.sh ${RPM_BUILD_DIR}/%{name}-%{version} ${RPM_BUILD_ROOT}%{_libexecdir}/%{name}/plugins.d
 %endif
--- a/packaging/bundle-dashboard.sh
+++ b/packaging/bundle-dashboard.sh
@ -1,14 +0,0 @@
-#!/bin/sh
-
-SRCDIR="${1}"
-WEBDIR="${2}"
-
-DASHBOARD_TARBALL="dashboard.tar.gz"
-DASHBOARD_VERSION="$(cat "${SRCDIR}/packaging/dashboard.version")"
-
-mkdir -p "${SRCDIR}/tmp/dashboard"
-curl -sSL --connect-timeout 10 --retry 3 "https://github.com/netdata/dashboard/releases/download/${DASHBOARD_VERSION}/${DASHBOARD_TARBALL}" > "${DASHBOARD_TARBALL}" || exit 1
-sha256sum -c "${SRCDIR}/packaging/dashboard.checksums" || exit 1
-tar -xzf "${DASHBOARD_TARBALL}" -C "${SRCDIR}/tmp/dashboard" || exit 1
-# shellcheck disable=SC2046
-cp -a $(find "${SRCDIR}/tmp/dashboard/build" -mindepth 1 -maxdepth 1) "${WEBDIR}"
--- a/packaging/dashboard.checksums
+++ b/packaging/dashboard.checksums
@ -1 +0,0 @@
-34155f1eb3c8bb84b9ad0d8603a835f3865c3c477b2202b18eba59db73a5fbdd  dashboard.tar.gz
--- a/packaging/dashboard.version
+++ b/packaging/dashboard.version
@ -1 +0,0 @@
-v2.17.0
--- a/web/gui/.dashboard-notice.md
+++ b/web/gui/.dashboard-notice.md
@ -0,0 +1,7 @@
+# Do not edit any files in this directory!
+
+If you spot any errors or bugs in these files and wish to fix them, please submit your changes at
+https://github.com/netdata/dashboard instead.
+
+These files are copied from the most recent release of that repository, and any changes you make here will be
+overwritten the next time there’s a new release there.
--- a/web/gui/Makefile.am
+++ b/web/gui/Makefile.am
@ -2,11 +2,16 @@
 # Copyright (C) 2015 Alon Bar-Lev <alon.barlev@gmail.com>
 # SPDX-License-Identifier: GPL-3.0-or-later
 #
+AUTOMAKE_OPTIONS = subdir-objects
 MAINTAINERCLEANFILES = $(srcdir)/Makefile.in
 CLEANFILES = \
    version.txt \
    $(NULL)

+SUBDIRS = \
+    dashboard \
+    $(NULL)
+
 DASHBOARD_JS_FILES = \
    src/dashboard.js/prologue.js.inc \
    src/dashboard.js/utils.js \
@ -46,27 +51,11 @@ dist_noinst_DATA = \
    $(NULL)

 dist_web_DATA = \
-    demo.html \
-    demo2.html \
-    demosites.html \
-    demosites2.html \
-    dashboard.html \
    dashboard.js \
    dashboard_info.js \
    dashboard_info_custom_example.js \
-    dashboard.css \
-    dashboard.slate.css \
-    favicon.ico \
-    goto-host-from-alarm.html \
-    index.html \
    main.css \
    main.js \
-    console.html \
-    infographic.html \
-    robots.txt \
-    refresh-badges.js \
-    sitemap.xml \
-    tv.html \
    version.txt \
    $(NULL)

@ -80,90 +69,12 @@ dist_webstatic_DATA = \
    static/img/netdata-logomark.svg \
    $(NULL)

-weblibdir=$(webdir)/lib
-dist_weblib_DATA = \
-    lib/bootstrap-3.3.7.min.js \
-    lib/bootstrap-slider-10.0.0.min.js \
-    lib/bootstrap-table-1.11.0.min.js \
-    lib/bootstrap-table-export-1.11.0.min.js \
-    lib/bootstrap-toggle-2.2.2.min.js \
-    lib/clipboard-polyfill-be05dad.js \
-    lib/d3-4.12.2.min.js \
-    lib/d3pie-0.2.1-netdata-3.js \
-    lib/dygraph-c91c859.min.js \
-    lib/dygraph-smooth-plotter-c91c859.js \
-    lib/fontawesome-all-5.0.1.min.js \
-    lib/gauge-1.3.2.min.js \
-    lib/jquery-2.2.4.min.js \
-    lib/jquery.easypiechart-97b5824.min.js \
-    lib/jquery.peity-3.2.0.min.js \
-    lib/jquery.sparkline-2.1.2.min.js \
-    lib/lz-string-1.4.4.min.js \
-    lib/pako-1.0.6.min.js \
-    lib/perfect-scrollbar-0.6.15.min.js \
-    lib/tableExport-1.6.0.min.js \
-    $(NULL)
-
 webcssdir=$(webdir)/css
 dist_webcss_DATA = \
    css/morris-0.5.1.css \
-    css/bootstrap-3.3.7.css \
-    css/bootstrap-theme-3.3.7.min.css \
-    css/bootstrap-slate-flat-3.3.7.css \
-    css/bootstrap-slider-10.0.0.min.css \
-    css/bootstrap-toggle-2.2.2.min.css \
    css/c3-0.4.18.min.css \
    $(NULL)

-webfontsdir=$(webdir)/fonts
-dist_webfonts_DATA = \
-    fonts/glyphicons-halflings-regular.eot \
-    fonts/glyphicons-halflings-regular.svg \
-    fonts/glyphicons-halflings-regular.ttf \
-    fonts/glyphicons-halflings-regular.woff \
-    fonts/glyphicons-halflings-regular.woff2 \
-    $(NULL)
-
-webimagesdir=$(webdir)/images
-dist_webimages_DATA = \
-    images/netdata-logomark.svg \
-    images/alert-128-orange.png \
-    images/alert-128-red.png \
-    images/alert-multi-size-orange.ico \
-    images/alert-multi-size-red.ico \
-    images/animated.gif \
-    images/check-mark-2-128-green.png \
-    images/check-mark-2-multi-size-green.ico \
-    images/netdata.svg \
-    images/post.png \
-    images/android-icon-36x36.png \
-    images/android-icon-48x48.png \
-    images/android-icon-72x72.png \
-    images/android-icon-96x96.png \
-    images/android-icon-144x144.png \
-    images/android-icon-192x192.png \
-    images/apple-icon-57x57.png \
-    images/apple-icon-60x60.png \
-    images/apple-icon-72x72.png \
-    images/apple-icon-76x76.png \
-    images/apple-icon-114x114.png \
-    images/apple-icon-120x120.png \
-    images/apple-icon-144x144.png \
-    images/apple-icon-152x152.png \
-    images/apple-icon-180x180.png \
-    images/apple-icon-precomposed.png \
-    images/apple-icon.png \
-    images/favicon-16x16.png \
-    images/favicon-32x32.png \
-    images/favicon-96x96.png \
-    images/favicon.ico \
-    images/ms-icon-70x70.png \
-    images/ms-icon-144x144.png \
-    images/ms-icon-150x150.png \
-    images/ms-icon-310x310.png \
-    images/banner-icon-144x144.png \
-    $(NULL)
-
 dashboard.js: $(DASHBOARD_JS_FILES)
 	if test -f $@; then rm -f $@; fi
 	cat $(DASHBOARD_JS_FILES) > $@.tmp && mv $@.tmp $@
--- a/web/gui/bundle_dashboard.py
+++ b/web/gui/bundle_dashboard.py
@ -0,0 +1,105 @@
+#!/usr/bin/env python3
+#
+# Copyright: © 2021 Netdata Inc.
+# SPDX-License-Identifier: GPL-3.0-or-later
+'''Bundle the dashboard code into the agent repo.'''
+
+import os
+import shutil
+import subprocess
+import sys
+
+from pathlib import Path
+
+os.chdir(Path(__file__).parent.absolute())
+
+BASEPATH = Path('dashboard')
+
+URLTEMPLATE = 'https://github.com/netdata/dashboard/releases/download/{0}/dashboard.tar.gz'
+
+MAKEFILETEMPLATE = '''
+# Auto-generated by generate-dashboard-makefile.py
+# Copyright: © 2021 Netdata Inc.
+# SPDX-License-Identifier: GPL-3.0-or-later
+MAINTAINERCLEANFILES = $(srcdir)/Makefile.in
+
+dist_noinst_DATA = \\
+    README.md
+
+dist_web_DATA = \\
+    {0} \\
+    $(NULL)
+
+webcssdir=$(webdir)/css
+dist_webcss_DATA = \\
+    {1} \\
+    $(NULL)
+
+webfontsdir=$(webdir)/fonts
+dist_webfonts_DATA = \\
+    {2} \\
+    $(NULL)
+
+webimagesdir=$(webdir)/images
+dist_webimages_DATA = \\
+    {3} \\
+    $(NULL)
+
+weblibdir=$(webdir)/lib
+dist_weblib_DATA = \\
+    {4} \\
+    $(NULL)
+
+webstaticcssdir=$(webdir)/static/css
+dist_webstaticcss_DATA = \\
+    {5} \\
+    $(NULL)
+
+webstaticjsdir=$(webdir)/static/js
+dist_webstaticjs_DATA = \\
+    {6} \\
+    $(NULL)
+
+webstaticmediadir=$(webdir)/static/media
+dist_webstaticmedia_DATA = \\
+    {7} \\
+    $(NULL)
+'''
+
+
+def copy_dashboard(tag):
+    '''Fetch and bundle the dashboard code.'''
+    shutil.rmtree(BASEPATH)
+    BASEPATH.mkdir()
+    subprocess.check_call('curl -L -o dashboard.tar.gz ' + URLTEMPLATE.format(tag), shell=True)
+    subprocess.check_call('tar -xvzf dashboard.tar.gz -C ' + str(BASEPATH) + ' --strip-components=1', shell=True)
+    BASEPATH.joinpath('README.md').symlink_to('../.dashboard-notice.md')
+#    BASEPATH.joinpath('..', 'dashboard.tar.gz').unlink()
+
+
+def genfilelist(path):
+    '''Generate a list of files for the Makefile.'''
+    files = [f for f in path.iterdir() if f.is_file() and f.name != 'README.md']
+    files = [Path(*f.parts[1:]) for f in files]
+    files.sort()
+    return ' \\\n    '.join([str(f) for f in files])
+
+
+def write_makefile():
+    '''Write out the makefile for the dashboard code.'''
+    MAKEFILEDATA = MAKEFILETEMPLATE.format(
+        genfilelist(BASEPATH),
+        genfilelist(BASEPATH.joinpath('css')),
+        genfilelist(BASEPATH.joinpath('fonts')),
+        genfilelist(BASEPATH.joinpath('images')),
+        genfilelist(BASEPATH.joinpath('lib')),
+        genfilelist(BASEPATH.joinpath('static', 'css')),
+        genfilelist(BASEPATH.joinpath('static', 'js')),
+        genfilelist(BASEPATH.joinpath('static', 'media')),
+    )
+
+    BASEPATH.joinpath('Makefile.am').write_text(MAKEFILEDATA)
+
+
+copy_dashboard(sys.argv[1])
+write_makefile()
--- a/web/gui/dashboard/Makefile.am
+++ b/web/gui/dashboard/Makefile.am
@ -0,0 +1,198 @@
+
+# Auto-generated by generate-dashboard-makefile.py
+# Copyright: © 2021 Netdata Inc.
+# SPDX-License-Identifier: GPL-3.0-or-later
+MAINTAINERCLEANFILES = $(srcdir)/Makefile.in
+
+dist_noinst_DATA = \
+    README.md
+
+dist_web_DATA = \
+    asset-manifest.json \
+    console.html \
+    dash-example.html \
+    dashboard-react.js \
+    dashboard.css \
+    dashboard.html \
+    dashboard.js \
+    dashboard.slate.css \
+    demo.html \
+    demo2.html \
+    demosites.html \
+    demosites2.html \
+    favicon.ico \
+    goto-host-from-alarm.html \
+    index-node-view.html \
+    index.html \
+    infographic.html \
+    manifest.json \
+    precache-manifest.1a96c027aec7f2d07341fa69aa6b82fa.js \
+    refresh-badges.js \
+    robots.txt \
+    service-worker.js \
+    sitemap.xml \
+    tv-react.html \
+    tv.html \
+    $(NULL)
+
+webcssdir=$(webdir)/css
+dist_webcss_DATA = \
+    css/bootstrap-3.3.7.css \
+    css/bootstrap-slate-flat-3.3.7.css \
+    css/bootstrap-slider-10.0.0.min.css \
+    css/bootstrap-theme-3.3.7.min.css \
+    css/bootstrap-toggle-2.2.2.min.css \
+    css/dashboard.css \
+    css/dashboard.slate.css \
+    $(NULL)
+
+webfontsdir=$(webdir)/fonts
+dist_webfonts_DATA = \
+    fonts/glyphicons-halflings-regular.eot \
+    fonts/glyphicons-halflings-regular.svg \
+    fonts/glyphicons-halflings-regular.ttf \
+    fonts/glyphicons-halflings-regular.woff \
+    fonts/glyphicons-halflings-regular.woff2 \
+    $(NULL)
+
+webimagesdir=$(webdir)/images
+dist_webimages_DATA = \
+    images/alert-128-orange.png \
+    images/alert-128-red.png \
+    images/alert-multi-size-orange.ico \
+    images/alert-multi-size-red.ico \
+    images/android-icon-144x144.png \
+    images/android-icon-192x192.png \
+    images/android-icon-36x36.png \
+    images/android-icon-48x48.png \
+    images/android-icon-72x72.png \
+    images/android-icon-96x96.png \
+    images/animated.gif \
+    images/apple-icon-114x114.png \
+    images/apple-icon-120x120.png \
+    images/apple-icon-144x144.png \
+    images/apple-icon-152x152.png \
+    images/apple-icon-180x180.png \
+    images/apple-icon-57x57.png \
+    images/apple-icon-60x60.png \
+    images/apple-icon-72x72.png \
+    images/apple-icon-76x76.png \
+    images/apple-icon-precomposed.png \
+    images/apple-icon.png \
+    images/banner-icon-144x144.png \
+    images/check-mark-2-128-green.png \
+    images/check-mark-2-multi-size-green.ico \
+    images/favicon-128.png \
+    images/favicon-16x16.png \
+    images/favicon-196x196.png \
+    images/favicon-32x32.png \
+    images/favicon-96x96.png \
+    images/favicon.ico \
+    images/ms-icon-144x144.png \
+    images/ms-icon-150x150.png \
+    images/ms-icon-310x150.png \
+    images/ms-icon-310x310.png \
+    images/ms-icon-36x36.png \
+    images/ms-icon-70x70.png \
+    images/netdata-logomark.svg \
+    images/netdata.svg \
+    images/packaging-beta-tag.svg \
+    images/post.png \
+    images/seo-performance-128.png \
+    $(NULL)
+
+weblibdir=$(webdir)/lib
+dist_weblib_DATA = \
+    lib/bootstrap-3.3.7.min.js \
+    lib/bootstrap-slider-10.0.0.min.js \
+    lib/bootstrap-table-1.11.0.min.js \
+    lib/bootstrap-table-export-1.11.0.min.js \
+    lib/bootstrap-toggle-2.2.2.min.js \
+    lib/clipboard-polyfill-be05dad.js \
+    lib/d3-4.12.2.min.js \
+    lib/d3pie-0.2.1-netdata-3.js \
+    lib/dygraph-c91c859.min.js \
+    lib/dygraph-smooth-plotter-c91c859.js \
+    lib/fontawesome-all-5.0.1.min.js \
+    lib/gauge-1.3.2.min.js \
+    lib/jquery-2.2.4.min.js \
+    lib/jquery.easypiechart-97b5824.min.js \
+    lib/jquery.peity-3.2.0.min.js \
+    lib/jquery.sparkline-2.1.2.min.js \
+    lib/lz-string-1.4.4.min.js \
+    lib/pako-1.0.6.min.js \
+    lib/perfect-scrollbar-0.6.15.min.js \
+    lib/tableExport-1.6.0.min.js \
+    $(NULL)
+
+webstaticcssdir=$(webdir)/static/css
+dist_webstaticcss_DATA = \
+    static/css/2.6b842ba1.chunk.css \
+    static/css/2.6b842ba1.chunk.css.map \
+    static/css/4.a36e3b73.chunk.css \
+    static/css/4.a36e3b73.chunk.css.map \
+    static/css/main.d931154a.chunk.css \
+    static/css/main.d931154a.chunk.css.map \
+    $(NULL)
+
+webstaticjsdir=$(webdir)/static/js
+dist_webstaticjs_DATA = \
+    static/js/10.db7e8e19.chunk.js \
+    static/js/10.db7e8e19.chunk.js.map \
+    static/js/2.252b3a57.chunk.js \
+    static/js/2.252b3a57.chunk.js.LICENSE \
+    static/js/2.252b3a57.chunk.js.map \
+    static/js/3.99238dcb.chunk.js \
+    static/js/3.99238dcb.chunk.js.map \
+    static/js/4.6ef9bdcb.chunk.js \
+    static/js/4.6ef9bdcb.chunk.js.map \
+    static/js/5.96a698ab.chunk.js \
+    static/js/5.96a698ab.chunk.js.LICENSE \
+    static/js/5.96a698ab.chunk.js.map \
+    static/js/6.d9713eb9.chunk.js \
+    static/js/6.d9713eb9.chunk.js.map \
+    static/js/7.12e939e5.chunk.js \
+    static/js/7.12e939e5.chunk.js.map \
+    static/js/8.91852cf4.chunk.js \
+    static/js/8.91852cf4.chunk.js.map \
+    static/js/9.e3a9ce26.chunk.js \
+    static/js/9.e3a9ce26.chunk.js.map \
+    static/js/main.8aa70c75.chunk.js \
+    static/js/main.8aa70c75.chunk.js.LICENSE \
+    static/js/main.8aa70c75.chunk.js.map \
+    static/js/runtime-main.6c7b39cd.js \
+    static/js/runtime-main.6c7b39cd.js.map \
+    $(NULL)
+
+webstaticmediadir=$(webdir)/static/media
+dist_webstaticmedia_DATA = \
+    static/media/ibm-plex-sans-latin-100.245539db.woff2 \
+    static/media/ibm-plex-sans-latin-100.9a582f3a.woff \
+    static/media/ibm-plex-sans-latin-100italic.1ea7c5d2.woff \
+    static/media/ibm-plex-sans-latin-100italic.3c34cf08.woff2 \
+    static/media/ibm-plex-sans-latin-200.67524c36.woff \
+    static/media/ibm-plex-sans-latin-200.bf72c841.woff2 \
+    static/media/ibm-plex-sans-latin-200italic.52df2560.woff \
+    static/media/ibm-plex-sans-latin-200italic.bbc2d552.woff2 \
+    static/media/ibm-plex-sans-latin-300.10bb6a0a.woff \
+    static/media/ibm-plex-sans-latin-300.9e1c48af.woff2 \
+    static/media/ibm-plex-sans-latin-300italic.c76f2ab5.woff2 \
+    static/media/ibm-plex-sans-latin-300italic.d3566d5b.woff \
+    static/media/ibm-plex-sans-latin-400.263d6267.woff2 \
+    static/media/ibm-plex-sans-latin-400.a2c56f94.woff \
+    static/media/ibm-plex-sans-latin-400italic.272f8611.woff \
+    static/media/ibm-plex-sans-latin-400italic.89a93a1b.woff2 \
+    static/media/ibm-plex-sans-latin-500.0866c244.woff2 \
+    static/media/ibm-plex-sans-latin-500.f6d5c5d5.woff \
+    static/media/ibm-plex-sans-latin-500italic.ccd41bd1.woff \
+    static/media/ibm-plex-sans-latin-500italic.ffd12d59.woff2 \
+    static/media/ibm-plex-sans-latin-600.337b1651.woff \
+    static/media/ibm-plex-sans-latin-600.7852d4dc.woff2 \
+    static/media/ibm-plex-sans-latin-600italic.17e5379f.woff2 \
+    static/media/ibm-plex-sans-latin-600italic.6f4ba6aa.woff \
+    static/media/ibm-plex-sans-latin-700.b8809d61.woff \
+    static/media/ibm-plex-sans-latin-700.c9983d3d.woff2 \
+    static/media/ibm-plex-sans-latin-700italic.02954bee.woff2 \
+    static/media/ibm-plex-sans-latin-700italic.72e9af40.woff \
+    static/media/material-icons.0509ab09.woff2 \
+    $(NULL)
--- a/web/gui/dashboard/README.md
+++ b/web/gui/dashboard/README.md
@ -0,0 +1 @@
+../.dashboard-notice.md
--- a/web/gui/dashboard/asset-manifest.json
+++ b/web/gui/dashboard/asset-manifest.json
@ -0,0 +1,47 @@
+{
+  "files": {
+    "main.css": "./static/css/main.d931154a.chunk.css",
+    "main.js": "./static/js/main.8aa70c75.chunk.js",
+    "main.js.map": "./static/js/main.8aa70c75.chunk.js.map",
+    "runtime-main.js": "./static/js/runtime-main.6c7b39cd.js",
+    "runtime-main.js.map": "./static/js/runtime-main.6c7b39cd.js.map",
+    "static/css/2.6b842ba1.chunk.css": "./static/css/2.6b842ba1.chunk.css",
+    "static/js/2.252b3a57.chunk.js": "./static/js/2.252b3a57.chunk.js",
+    "static/js/2.252b3a57.chunk.js.map": "./static/js/2.252b3a57.chunk.js.map",
+    "static/js/3.99238dcb.chunk.js": "./static/js/3.99238dcb.chunk.js",
+    "static/js/3.99238dcb.chunk.js.map": "./static/js/3.99238dcb.chunk.js.map",
+    "static/css/4.a36e3b73.chunk.css": "./static/css/4.a36e3b73.chunk.css",
+    "static/js/4.6ef9bdcb.chunk.js": "./static/js/4.6ef9bdcb.chunk.js",
+    "static/js/4.6ef9bdcb.chunk.js.map": "./static/js/4.6ef9bdcb.chunk.js.map",
+    "static/js/5.96a698ab.chunk.js": "./static/js/5.96a698ab.chunk.js",
+    "static/js/5.96a698ab.chunk.js.map": "./static/js/5.96a698ab.chunk.js.map",
+    "static/js/6.d9713eb9.chunk.js": "./static/js/6.d9713eb9.chunk.js",
+    "static/js/6.d9713eb9.chunk.js.map": "./static/js/6.d9713eb9.chunk.js.map",
+    "static/js/7.12e939e5.chunk.js": "./static/js/7.12e939e5.chunk.js",
+    "static/js/7.12e939e5.chunk.js.map": "./static/js/7.12e939e5.chunk.js.map",
+    "static/js/8.91852cf4.chunk.js": "./static/js/8.91852cf4.chunk.js",
+    "static/js/8.91852cf4.chunk.js.map": "./static/js/8.91852cf4.chunk.js.map",
+    "static/js/9.e3a9ce26.chunk.js": "./static/js/9.e3a9ce26.chunk.js",
+    "static/js/9.e3a9ce26.chunk.js.map": "./static/js/9.e3a9ce26.chunk.js.map",
+    "static/js/10.db7e8e19.chunk.js": "./static/js/10.db7e8e19.chunk.js",
+    "static/js/10.db7e8e19.chunk.js.map": "./static/js/10.db7e8e19.chunk.js.map",
+    "index.html": "./index.html",
+    "precache-manifest.1a96c027aec7f2d07341fa69aa6b82fa.js": "./precache-manifest.1a96c027aec7f2d07341fa69aa6b82fa.js",
+    "service-worker.js": "./service-worker.js",
+    "static/css/2.6b842ba1.chunk.css.map": "./static/css/2.6b842ba1.chunk.css.map",
+    "static/css/4.a36e3b73.chunk.css.map": "./static/css/4.a36e3b73.chunk.css.map",
+    "static/css/main.d931154a.chunk.css.map": "./static/css/main.d931154a.chunk.css.map",
+    "static/js/2.252b3a57.chunk.js.LICENSE": "./static/js/2.252b3a57.chunk.js.LICENSE",
+    "static/js/5.96a698ab.chunk.js.LICENSE": "./static/js/5.96a698ab.chunk.js.LICENSE",
+    "static/js/main.8aa70c75.chunk.js.LICENSE": "./static/js/main.8aa70c75.chunk.js.LICENSE",
+    "static/media/index.css": "./static/media/ibm-plex-sans-latin-700italic.72e9af40.woff",
+    "static/media/fonts.css": "./static/media/material-icons.0509ab09.woff2"
+  },
+  "entrypoints": [
+    "static/js/runtime-main.6c7b39cd.js",
+    "static/css/2.6b842ba1.chunk.css",
+    "static/js/2.252b3a57.chunk.js",
+    "static/css/main.d931154a.chunk.css",
+    "static/js/main.8aa70c75.chunk.js"
+  ]
+}
--- a/web/gui/dashboard/console.html
+++ b/web/gui/dashboard/console.html
--- a/web/gui/dashboard/css/bootstrap-3.3.7.css
+++ b/web/gui/dashboard/css/bootstrap-3.3.7.css
@ -265,7 +265,9 @@ th {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
-  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+  /* removed svg font, because 1) it's incompatible with current cloud webpack loaders */
+  /* 2) our supported browsers don't need svg anyway  */
+  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype');
 }
 .glyphicon {
  position: relative;
@ -1086,8 +1088,8 @@ body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
-  color: #333;
-  background-color: #fff;
+  color: var(--color-text, #333);
+  background-color: var(--color-mainBackground, #fff);
 }
 input,
 button,
@ -1134,8 +1136,8 @@ img {
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
-  background-color: #fff;
-  border: 1px solid #ddd;
+  background-color: var(--color-mainBackground, #fff);
+  border: 1px solid var(--color-border, #ddd);
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
--- a/web/gui/dashboard/css/bootstrap-slate-flat-3.3.7.css
+++ b/web/gui/dashboard/css/bootstrap-slate-flat-3.3.7.css
--- a/web/gui/dashboard/css/bootstrap-slider-10.0.0.min.css
+++ b/web/gui/dashboard/css/bootstrap-slider-10.0.0.min.css
--- a/web/gui/dashboard/css/bootstrap-theme-3.3.7.min.css
+++ b/web/gui/dashboard/css/bootstrap-theme-3.3.7.min.css
--- a/web/gui/dashboard/css/bootstrap-toggle-2.2.2.min.css
+++ b/web/gui/dashboard/css/bootstrap-toggle-2.2.2.min.css
--- a/web/gui/dashboard/css/dashboard.css
+++ b/web/gui/dashboard/css/dashboard.css
@ -0,0 +1,785 @@
+/* SPDX-License-Identfier: GPL-3.0-or-later */
+:root {
+    --color-main: #35414A;
+    --color-primary: #00ab44;
+    --color-border: #93a3b0;
+}
+
+html,
+body {
+    /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-style: normal;
+    font-variant: normal;
+}
+
+.morelink {
+    color: var(--color-attention, #765d9c);
+    text-decoration: none;
+}
+
+.morelink:hover {
+    color: var(--color-attentionSecondary, #563d7c);
+    text-decoration: none;
+}
+
+.morelink:focus {
+    color: var(--color-attention, #765d9c);
+    text-decoration: none;
+}
+
+.netdata-chart-alignment {
+    /* 55 for legend-right */
+    margin-left: 35px;
+}
+
+.netdata-chart-row {
+    width: 100%;
+    text-align: center;
+    display: flex;
+    display: -webkit-flex;
+    display: -moz-flex;
+    align-items: baseline;
+    -moz-align-items: baseline;
+    -webkit-align-items: baseline;
+    justify-content: center;
+    -webkit-justify-content: center;
+    -moz-justify-content: center;
+    padding-top: 10px;
+}
+
+.netdata-container {
+    display: inline-block;
+    overflow: hidden;
+
+    transform: translate3d(0,0,0);
+
+    /* required for child elements to have absolute position */
+    position: relative;
+
+    /* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-container-gauge {
+    display: inline-block;
+    overflow: hidden;
+
+    transform: translate3d(0,0,0);
+
+    /* required for child elements to have absolute position */
+    position: relative;
+
+    /* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-container-gauge:after {
+    padding-top: 60%;
+    display: block;
+    content: '';
+}
+
+.netdata-container-easypiechart {
+    display: inline-block;
+    overflow: hidden;
+
+    transform: translate3d(0,0,0);
+
+    /* required for child elements to have absolute position */
+    position: relative;
+
+    /* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-container-easypiechart:after {
+    padding-top: 100%;
+    display: block;
+    content: '';
+}
+
+.netdata-aspect {
+    position: relative;
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
+}
+
+.netdata-container-with-legend {
+    display: inline-block;
+    overflow: hidden;
+
+    transform: translate3d(0,0,0);
+
+    /* fix minimum scrollbar issue in firefox */
+    min-height: 99px;
+
+    /* required for child elements to have absolute position */
+    position: relative;
+
+    /* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-container-with-legend.netdata-container-with-legend--bottom {
+    display: flex;
+    flex-direction: column;
+}
+
+.netdata-legend-resize-handler {
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    height: 15px;
+    width: 20px;
+    background-color: var(--color-mainBackground, #fff);
+    font-size: 15px;
+    vertical-align: middle;
+    line-height: 15px;
+    cursor: ns-resize;
+    color: var(--color-selected, #CDCDCD);
+    text-align: center;
+    overflow: hidden;
+    padding: 0px;
+    margin: 0px;
+}
+
+.netdata-legend-toolbox {
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    right: 30px;
+    height: 15px;
+    width: 110px;
+    font-size: 12px;
+    vertical-align: middle;
+    line-height: 15px;
+    color: var(--color-placeholder, #DDDDDD);
+    text-align: center;
+    overflow: hidden;
+    padding: 0px;
+    margin: 0px;
+
+    /* prevent text selection after double click */
+    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+    -moz-user-select: none; /* mozilla browsers */
+    -khtml-user-select: none; /* webkit (konqueror) browsers */
+    -ms-user-select: none; /* IE10+ */
+}
+
+.netdata-legend-toolbox-button {
+    display: inline-block;
+    position: relative;
+    height: 15px;
+    width: 18px;
+    background-color: var(--color-mainBackground, #fff);
+    font-size: 12px;
+    vertical-align: middle;
+    line-height: 15px;
+    color: var(--color-selected, #CDCDCD);
+    text-align: center;
+    overflow: hidden;
+    padding: 0px;
+    margin: 0px;
+    cursor: pointer;
+
+    /* prevent text selection after double click */
+    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+    -moz-user-select: none; /* mozilla browsers */
+    -khtml-user-select: none; /* webkit (konqueror) browsers */
+    -ms-user-select: none; /* IE10+ */
+}
+
+.netdata-message {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: left;
+    vertical-align: top;
+    font-weight: bold;
+    font-size: x-small;
+    overflow: hidden;
+    background: inherit;
+    z-index: 0;
+}
+
+.netdata-message.hidden {
+    display: none;
+}
+
+.netdata-message.icon {
+    color: var(--color-borderSecondary, #F8F8F8);
+    text-align: center;
+    vertical-align: middle;
+}
+
+.netdata-chart-legend {
+    position: absolute; /* within .netdata-container */
+    top: 26px;
+    bottom: 18px;
+    right: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    text-overflow: ellipsis;
+    line-height: 14px;
+    display: block;
+    width: 140px; /* --legend-width */
+    font-size: 10px;
+    margin-top: 5px;
+    text-align: left;
+    /* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-legend-title-date {
+    font-size: 10px;
+    font-weight: normal;
+    margin-top: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.netdata-legend-title-time {
+    font-size: 11px;
+    font-weight: bold;
+    margin-top: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.netdata-legend-title-units {
+    position: absolute;
+    right: 10px;
+    float: right;
+    font-size: 11px;
+    vertical-align: top;
+    font-weight: normal;
+    margin-top: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.netdata-legend-series {
+    position: absolute;
+    width: 140px; /* legend-width */
+    height: calc(100% - 50px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 14.5px; /* line spacing at the legend */
+    display: block;
+    font-size: 10px;
+    margin-top: 0px;
+}
+
+.netdata-legend-name-table-line {
+    display: inline-block;
+    width: 13px;
+    height: 4px;
+    border-width: 0px;
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
+    border-bottom-color: white;
+}
+
+.netdata-legend-name-table-area {
+    display: inline-block;
+    width: 13px;
+    height: 5px;
+    border-width: 1px;
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: inherit;
+}
+
+.netdata-legend-name-table-stacked {
+    display: inline-block;
+    width: 13px;
+    height: 5px;
+    border-width: 1px;
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: inherit;
+}
+
+.netdata-legend-name-tr {
+}
+
+.netdata-legend-name-td {
+}
+
+.netdata-legend-name {
+    text-align: left;
+    font-size: 11px; /* legend: dimension name size */
+    font-weight: bold;
+    vertical-align: bottom;
+    margin-top: 0px;
+    z-index: 9;
+    padding: 0px;
+    width: 80px !important;
+    max-width: 80px !important;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    cursor: pointer;
+    -webkit-print-color-adjust: exact;
+}
+
+.netdata-legend-value {
+    /*margin-left: 14px;*/
+    position: absolute;
+    right: 10px;
+    float: right;
+    text-align: right;
+    font-size: 11px; /* legend: dimension value size */
+    font-weight: bold;
+    vertical-align: bottom;
+    background-color: var(--color-mainBackground, #fff);
+    margin-top: 0px;
+    z-index: 10;
+    padding: 0px;
+    padding-left: 15px;
+    cursor: pointer;
+    /* -webkit-font-smoothing: none; */
+}
+
+.netdata-legend-value, .netdata-legend-name {
+  /* prevent highlight when shift-clicking */
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+/* eslint recommends adding tabIndex for a11y, but the outline is showing on click */
+.netdata-legend-name:focus, .netdata-legend-value:focus {
+    outline: none;
+}
+
+.netdata-legend-name.not-selected {
+    font-weight: normal;
+    opacity: 0.3;
+}
+
+.netdata-chart {
+    position: absolute; /* within .netdata-container */
+    top: 0; /* within .netdata-container */
+    left: 0; /* within .netdata-container */
+    display: inline-block;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+
+    /* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-chart-with-legend-right {
+    position: absolute; /* within .netdata-container */
+    top: 0; /* within .netdata-container */
+    left: 0; /* within .netdata-container */
+    display: block;
+    overflow: hidden;
+    margin-right: 140px; /* --legend-width */
+    width: calc(100% - 140px); /* --legend-width */
+    height: 100%;
+    z-index: 5;
+    flex-grow: 1;
+
+    /* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-chart-with-legend-bottom {
+    display: block;
+    overflow: hidden;
+    flex-grow: 1;
+}
+
+.netdata-peity-chart {
+
+}
+
+.netdata-sparkline-chart {
+
+}
+
+.netdata-dygraph-chart {
+
+}
+
+.netdata-morris-chart {
+
+}
+
+.netdata-google-chart {
+
+}
+
+.dygraph-ylabel {
+}
+
+.dygraph-axis-label-x {
+    overflow-x: hidden;
+}
+
+.dygraph-label-rotate-left {
+    text-align: center;
+    /* See http://caniuse.com/#feat=transforms2d */
+    transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+}
+
+/* For y2-axis label */
+.dygraph-label-rotate-right {
+    text-align: center;
+    /* See http://caniuse.com/#feat=transforms2d */
+    transform: rotate(-90deg);
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+}
+
+.dygraph-title {
+    /* 56 for legend-right */
+    text-indent: 36px;
+    text-align: left;
+    position: absolute;
+    left: 0px;
+    top: 4px;
+    font-size: 11px;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+/* fix for sparkline tooltip under bootstrap */
+.jqstooltip {
+    width: auto !important;
+    height: auto !important;
+}
+
+.easyPieChart {
+    position: relative;
+    text-align: center;
+}
+
+.easyPieChart canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.easyPieChartLabel {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: var(--color-main);
+    font-weight: normal;
+    text-shadow: var(--color-elementBackground, #BBB) 0px 0px 1px;
+    /* -webkit-font-smoothing: none; */
+}
+
+.easyPieChartTitle {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 64%;
+    margin-left: 18% !important;
+    text-align: center;
+    color: var(--color-border, #999999);
+    font-weight: bold;
+}
+
+.easyPieChartUnits {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 60%;
+    margin-left: 20% !important;
+    text-align: center;
+    color: var(--color-border, #999999);
+    font-weight: normal;
+}
+
+.gaugeChart {
+    position: relative;
+    text-align: center;
+}
+
+.gaugeChart canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+}
+
+.gaugeChartLabel {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: var(--color-main);
+    font-weight: bold;
+    z-index: 1;
+    text-shadow: var(--color-elementBackground, #777) 0px 0px 1px;
+    /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
+    /* -webkit-text-stroke: 1px #777; */
+    /* -webkit-font-smoothing: none; */
+}
+
+.gaugeChartTitle {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: var(--color-border, #999999);
+    font-weight: bold;
+}
+
+.gaugeChartUnits {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    text-align: left;
+    margin-left: 5%;
+    color: var(--color-border, #999999);
+    font-weight: normal;
+}
+
+.gaugeChartMin {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    bottom: 8%;
+    width: 92%;
+    margin-left: 8%;
+    text-align: left;
+    color: var(--color-main);
+    font-weight: normal;
+}
+
+.gaugeChartMax {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    bottom: 8%;
+    width: 95%;
+    margin-right: 5%;
+    text-align: right;
+    color: var(--color-main);
+    font-weight: normal;
+}
+
+.popover-title {
+    font-weight: bold;
+    font-size: 12px;
+}
+
+.popover-content {
+    font-size: 11px;
+}
+
+/* ----------------------------------------------------------------------------
+   perfect-scrollbar settings
+ */
+
+.ps-container {
+    -ms-touch-action: auto;
+    touch-action: auto;
+    overflow: hidden !important;
+    -ms-overflow-style: none;
+}
+
+@supports (-ms-overflow-style: none) {
+    .ps-container {
+        overflow: auto !important;
+    }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .ps-container {
+        overflow: auto !important;
+    }
+}
+
+.ps-container.ps-active-x > .ps-scrollbar-x-rail,
+.ps-container.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+    background-color: transparent;
+}
+
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: transparent; /* background color when dragged away */
+    opacity: 0.9;
+}
+
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    background-color: #aaa; /* scrollbar color when dragged away */
+    height: 5px;
+}
+
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: transparent; /* background color when dragged away */
+    opacity: 0.9;
+}
+
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    background-color: #aaa; /* scrollbar color when dragged away */
+    width: 5px;
+}
+
+.ps-container > .ps-scrollbar-x-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0.2; /* the opacity when not on hover of the content */
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    bottom: 0px;
+    /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 15px;
+}
+
+.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    position: absolute;
+    /* please don't change 'position' */
+    background-color: var(--color-elementBackground, #666); /* #aaa; the color on content hover */
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+    -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+    -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+    bottom: 2px;
+    /* there must be 'bottom' for ps-scrollbar-x */
+    height: 5px; /* the width of the scrollbar */
+}
+
+.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
+    height: 4px;
+}
+
+.ps-container > .ps-scrollbar-y-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0.2; /* the opacity when not on hover of the content */
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    right: 0;
+    /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 15px;
+}
+
+.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    position: absolute;
+    /* please don't change 'position' */
+    background-color: var(--color-elementBackground, #666); /* #aaa; the color on content hover */
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+    -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+    -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+    right: 2px;
+    /* there must be 'right' for ps-scrollbar-y */
+    width: 5px; /* the width of the scrollbar */
+}
+
+.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
+    width: 5px;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: transparent; /* background color when dragged */
+    opacity: 0.9;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    background-color: #bbb; /* scrollbar color when dragged */
+    height: 5px;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: transparent; /* background color when dragged */
+    opacity: 0.9;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    background-color: #bbb; /* scrollbar color when dragged */
+    width: 5px;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail,
+.ps-container:hover > .ps-scrollbar-y-rail {
+    opacity: 0.6;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail:hover {
+    background-color: transparent; /* the background color on hover of the scrollbar */
+    opacity: 0.9;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+    background-color: #999; /* scrollbar color on hover */
+}
+
+.ps-container:hover > .ps-scrollbar-y-rail:hover {
+    background-color: transparent; /* the background color on hover of the scrollbar */
+    opacity: 0.9;
+}
+
+.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+    background-color: #999; /* scrollbar color on hover */
+}
+
+.dygraph__history-tip {
+    position: absolute;
+    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;
+}
--- a/web/gui/dashboard/css/dashboard.slate.css
+++ b/web/gui/dashboard/css/dashboard.slate.css
@ -1,4 +1,10 @@
 /* SPDX-License-Identifier: GPL-3.0-or-later */
+:root {
+    --color-main: #FFFFFF;
+    --color-primary: #00ab44;
+    --color-border: #878b90;
+}
+
 html,
 body {
    /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
@ -37,7 +43,8 @@ code {
 }

 .netdata-chart-alignment {
-    margin-left: 55px;
+    /* 55 for legend-right */
+    margin-left: 35px;
 }

 .netdata-chart-row {
@ -125,6 +132,11 @@ code {
    /* width and height is given per chart with data-width and data-height */
 }

+.netdata-container-with-legend.netdata-container-with-legend--bottom {
+    display: flex;
+    flex-direction: column;
+}
+
 .netdata-legend-resize-handler {
    display: block;
    position: absolute;
@ -137,10 +149,9 @@ code {
    vertical-align: middle;
    line-height: 15px;
    cursor: ns-resize;
-    color: #373b40;
+    color: var(--color-selected, #373b40);
    text-align: center;
    overflow: hidden;
-    z-index: 20;
    padding: 0px;
    margin: 0px;
 }
@ -152,14 +163,12 @@ code {
    right: 30px;
    height: 15px;
    width: 110px;
-    background-color: #272b30;
    font-size: 12px;
    vertical-align: middle;
    line-height: 15px;
    color: #373b40;
    text-align: center;
    overflow: hidden;
-    z-index: 20;
    padding: 0px;
    margin: 0px;

@ -179,10 +188,9 @@ code {
    font-size: 12px;
    vertical-align: middle;
    line-height: 15px;
-    color: #474b50;
+    color: var(--color-selected, #373b40);
    text-align: center;
    overflow: hidden;
-    z-index: 21;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
@ -351,6 +359,19 @@ code {
    /* -webkit-font-smoothing: none; */
 }

+.netdata-legend-value, .netdata-legend-name {
+    /* prevent highlight when shift-clicking */
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+/* eslint recommends adding tabIndex for a11y, but the outline is showing on click */
+.netdata-legend-name:focus, .netdata-legend-value:focus {
+    outline: none;
+}
+
 .netdata-legend-name.not-selected {
    font-weight: normal;
    opacity: 0.3;
@ -384,6 +405,12 @@ code {
    /* width and height is calculated (depends on the appearance of the legend) */
 }

+.netdata-chart-with-legend-bottom {
+    display: block;
+    overflow: hidden;
+    flex-grow: 1;
+}
+
 .netdata-peity-chart {

 }
@ -437,7 +464,8 @@ code {
 }

 .dygraph-title {
-    text-indent: 56px;
+    /* 56 for legend-right */
+    text-indent: 36px;
    text-align: left;
    position: absolute;
    left: 0px;
@ -473,7 +501,7 @@ code {
    left: 0;
    width: 100%;
    text-align: center;
-    color: #BBB;
+    color: var(--color-main);
    font-weight: normal;
    text-shadow: #272b30 0px 0px 1px;
    /* -webkit-font-smoothing: none; */
@ -487,7 +515,7 @@ code {
    width: 64%;
    margin-left: 18% !important;
    text-align: center;
-    color: #676b70;
+    color: var(--color-border,#676b70);
    font-weight: bold;
 }

@ -499,7 +527,7 @@ code {
    width: 60%;
    margin-left: 20% !important;
    text-align: center;
-    color: #676b70;
+    color:var(--color-border,#676b70);
    font-weight: normal;
 }

@ -524,7 +552,7 @@ code {
    left: 0;
    width: 100%;
    text-align: center;
-    color: #BBB;
+    color: var(--color-main);
    font-weight: bold;
    z-index: 1;
    text-shadow: #272b30 0px 0px 1px;
@ -540,7 +568,7 @@ code {
    left: 0;
    width: 100%;
    text-align: center;
-    color: #676b70;
+    color: var(--color-border, #676b70);
    font-weight: bold;
 }

@ -553,7 +581,7 @@ code {
    width: 100%;
    text-align: left;
    margin-left: 5%;
-    color: #676b70;
+    color: var(--color-border,#676b70);
    font-weight: normal;
 }

@ -566,7 +594,7 @@ code {
    width: 92%;
    margin-left: 8%;
    text-align: left;
-    color: #676b70;
+    color: var(--color-main);
    font-weight: normal;
 }

@ -579,7 +607,7 @@ code {
    width: 95%;
    margin-right: 5%;
    text-align: right;
-    color: #676b70;
+    color: var(--color-main);
    font-weight: normal;
 }

@ -760,7 +788,7 @@ code {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
-    display: none; /* overridden in js */
+    display: none; /* overriden in js */
    margin-right: 25px;
    direction: rtl;
    overflow: hidden;
--- a/web/gui/dashboard/dash-example.html
+++ b/web/gui/dashboard/dash-example.html
--- a/web/gui/dashboard/dashboard-react.js
+++ b/web/gui/dashboard/dashboard-react.js
@ -0,0 +1,675 @@
+/* eslint-disable */
+
+/**
+ *  after react-dashboard refractor, this file can be renamed to 'dashboard.js'
+ *  and it will:
+ *  - setup global objects, so any assignements like 'NETDATA.options.current.destroy_on_hide = true'
+ *    will not break. we need to add it in places where 'dashboard.js' is
+ *  - create react root DOM node
+ *  - load react app
+ *
+ *  Later, for performance improvement, the bundle can be added to dashboard-rect.js,
+ *  but we need to run the react-app part after DOM is created and ready
+ */
+
+// ----------------------------------------------------------------------------
+// global namespace
+
+// Should stay var!
+var NETDATA = window.NETDATA || {};
+window.NETDATA = NETDATA // when imported as npm module
+
+/// A heuristic for detecting slow devices.
+let isSlowDeviceResult;
+const isSlowDevice = function () {
+  if (!isSlowDeviceResult) {
+    return isSlowDeviceResult;
+  }
+
+  try {
+    let ua = navigator.userAgent.toLowerCase();
+
+    let iOS = /ipad|iphone|ipod/.test(ua) && !window.MSStream;
+    let android = /android/.test(ua) && !window.MSStream;
+    isSlowDeviceResult = (iOS || android);
+  } catch (e) {
+    isSlowDeviceResult = false;
+  }
+
+  return isSlowDeviceResult;
+};
+
+if (typeof window.netdataSnapshotData === 'undefined') {
+  window.netdataSnapshotData = null;
+}
+
+if (typeof window.netdataShowHelp === 'undefined') {
+  window.netdataShowHelp = true;
+}
+
+if (typeof window.netdataShowAlarms === 'undefined') {
+  window.netdataShowAlarms = false;
+}
+
+if (typeof window.netdataRegistryAfterMs !== 'number' || window.netdataRegistryAfterMs < 0) {
+  window.netdataRegistryAfterMs = 0; // 1500;
+}
+
+if (typeof window.netdataRegistry === 'undefined') {
+  // backward compatibility
+  window.netdataRegistry = (typeof netdataNoRegistry !== 'undefined' && netdataNoRegistry === false);
+}
+
+if (window.netdataRegistry === false && typeof netdataRegistryCallback === 'function') {
+  window.netdataRegistry = true;
+}
+
+// ----------------------------------------------------------------------------------------------------------------
+// the defaults for all charts
+
+// if the user does not specify any of these, the following will be used
+
+NETDATA.chartDefaults = {
+  width: '100%',                  // the chart width - can be null
+  height: '100%',                 // the chart height - can be null
+  min_width: null,                // the chart minimum width - can be null
+  library: 'dygraph',             // the graphing library to use
+  method: 'average',              // the grouping method
+  before: 0,                      // panning
+  after: -600,                    // panning
+  pixels_per_point: 1,            // the detail of the chart
+  fill_luminance: 0.8             // luminance of colors in solid areas
+};
+
+
+
+// ----------------------------------------------------------------------------------------------------------------
+// global options
+
+NETDATA.options = {
+  pauseCallback: null,            // a callback when we are really paused
+
+  pause: false,                   // when enabled we don't auto-refresh the charts
+
+  targets: [],                    // an array of all the state objects that are
+                                  // currently active (independently of their
+                                  // viewport visibility)
+
+  updated_dom: true,              // when true, the DOM has been updated with
+                                  // new elements we have to check.
+
+  auto_refresher_fast_weight: 0,  // this is the current time in ms, spent
+                                  // rendering charts continuously.
+                                  // used with .current.fast_render_timeframe
+
+  page_is_visible: true,          // when true, this page is visible
+
+  auto_refresher_stop_until: 0,   // timestamp in ms - used internally, to stop the
+                                  // auto-refresher for some time (when a chart is
+                                  // performing pan or zoom, we need to stop refreshing
+                                  // all other charts, to have the maximum speed for
+                                  // rendering the chart that is panned or zoomed).
+                                  // Used with .current.global_pan_sync_time
+
+  on_scroll_refresher_stop_until: 0, // timestamp in ms - used to stop evaluating
+  // charts for some time, after a page scroll
+
+  last_page_resize: Date.now(),   // the timestamp of the last resize request
+
+  last_page_scroll: 0,            // the timestamp the last time the page was scrolled
+
+  browser_timezone: (Intl && Intl.DateTimeFormat)
+    ? Intl.DateTimeFormat().resolvedOptions().timeZone // timezone detected by javascript
+    : "cannot-detect-it",
+
+  server_timezone: 'unknown',     // timezone reported by the server
+
+  force_data_points: 0,           // force the number of points to be returned for charts
+  fake_chart_rendering: false,    // when set to true, the dashboard will download data but will not render the charts
+
+  passive_events: null,           // true if the browser supports passive events
+
+  // the current profile
+  // we may have many...
+  current: {
+    units: 'auto',              // can be 'auto' or 'original'
+    temperature: 'celsius',     // can be 'celsius' or 'fahrenheit'
+    seconds_as_time: true,      // show seconds as DDd:HH:MM:SS ?
+    timezone: 'default',        // the timezone to use, or 'default'
+    user_set_server_timezone: 'default', // as set by the user on the dashboard
+
+    legend_toolbox: true,       // show the legend toolbox on charts
+    resize_charts: true,        // show the resize handler on charts
+
+    pixels_per_point: isSlowDevice() ? 5 : 1, // the minimum pixels per point for all charts
+    // increase this to speed javascript up
+    // each chart library has its own limit too
+    // the max of this and the chart library is used
+    // the final is calculated every time, so a change
+    // here will have immediate effect on the next chart
+    // update
+
+    idle_between_charts: 100,   // ms - how much time to wait between chart updates
+
+    fast_render_timeframe: 200, // ms - render continuously until this time of continuous
+                                // rendering has been reached
+                                // this setting is used to make it render e.g. 10
+                                // charts at once, sleep idle_between_charts time
+                                // and continue for another 10 charts.
+
+    idle_between_loops: 500,    // ms - if all charts have been updated, wait this
+                                // time before starting again.
+
+    idle_parallel_loops: 100,   // ms - the time between parallel refresher updates
+
+    idle_lost_focus: 500,       // ms - when the window does not have focus, check
+                                // if focus has been regained, every this time
+
+    global_pan_sync_time: 300,  // ms - when you pan or zoom a chart, the background
+                                // auto-refreshing of charts is paused for this amount
+                                // of time
+
+    sync_selection_delay: 400,  // ms - when you pan or zoom a chart, wait this amount
+                                // of time before setting up synchronized selections
+                                // on hover.
+
+    sync_selection: true,       // enable or disable selection sync
+
+    pan_and_zoom_delay: 50,     // when panning or zooming, how ofter to update the chart
+
+    sync_pan_and_zoom: true,    // enable or disable pan and zoom sync
+
+    pan_and_zoom_data_padding: true, // fetch more data for the master chart when panning or zooming
+
+    update_only_visible: true,  // enable or disable visibility management / used for printing
+
+    parallel_refresher: !isSlowDevice(), // enable parallel refresh of charts
+
+    concurrent_refreshes: true, // when parallel_refresher is enabled, sync also the charts
+
+    destroy_on_hide: isSlowDevice(), // destroy charts when they are not visible
+
+    // when enabled the charts will show some help
+    // when there's no bootstrap, we can't show it
+    show_help: netdataShowHelp && !window.netdataNoBootstrap,
+    show_help_delay_show_ms: 500,
+    show_help_delay_hide_ms: 0,
+
+    eliminate_zero_dimensions: true, // do not show dimensions with just zeros
+
+    stop_updates_when_focus_is_lost: true, // boolean - shall we stop auto-refreshes when document does not have user focus
+    stop_updates_while_resizing: 1000,  // ms - time to stop auto-refreshes while resizing the charts
+
+    double_click_speed: 500,    // ms - time between clicks / taps to detect double click/tap
+
+    smooth_plot: !isSlowDevice(), // enable smooth plot, where possible
+
+    color_fill_opacity_line: 1.0,
+    color_fill_opacity_area: 0.2,
+    color_fill_opacity_fake_stacked: 1,
+    color_fill_opacity_stacked: 0.8,
+
+    pan_and_zoom_factor: 0.25,      // the increment when panning and zooming with the toolbox
+    pan_and_zoom_factor_multiplier_control: 2.0,
+    pan_and_zoom_factor_multiplier_shift: 3.0,
+    pan_and_zoom_factor_multiplier_alt: 4.0,
+
+    abort_ajax_on_scroll: false,            // kill pending ajax page scroll
+    async_on_scroll: false,                 // sync/async onscroll handler
+    onscroll_worker_duration_threshold: 30, // time in ms, for async scroll handler
+
+    retries_on_data_failures: 3, // how many retries to make if we can't fetch chart data from the server
+
+    setOptionCallback: function () {
+    }
+  },
+
+  debug: {
+    show_boxes: false,
+    main_loop: false,
+    focus: false,
+    visibility: false,
+    chart_data_url: false,
+    chart_errors: true, // remember to set it to false before merging
+    chart_timing: false,
+    chart_calls: false,
+    libraries: false,
+    dygraph: false,
+    globalSelectionSync: false,
+    globalPanAndZoom: false
+  }
+};
+
+
+NETDATA.statistics = {
+  refreshes_total: 0,
+  refreshes_active: 0,
+  refreshes_active_max: 0
+};
+
+NETDATA.themes = {
+  white: {
+    bootstrap_css: "css/bootstrap-3.3.7.css",
+    dashboard_css: "css/dashboard.css?v20180210-1",
+    background: "#FFFFFF",
+    foreground: "#000000",
+    grid: "#F0F0F0",
+    axis: "#F0F0F0",
+    highlight: "#F5F5F5",
+    colors: ["#3366CC", "#DC3912", "#109618", "#FF9900", "#990099", "#DD4477",
+      "#3B3EAC", "#66AA00", "#0099C6", "#B82E2E", "#AAAA11", "#5574A6",
+      "#994499", "#22AA99", "#6633CC", "#E67300", "#316395", "#8B0707",
+      "#329262", "#3B3EAC"],
+    easypiechart_track: "#f0f0f0",
+    easypiechart_scale: "#dfe0e0",
+    gauge_pointer: "#C0C0C0",
+    gauge_stroke: "#F0F0F0",
+    gauge_gradient: false,
+    gauge_stop_color: "#FC8D5E",
+    gauge_start_color: "#B0E952",
+    d3pie: {
+      title: "#333333",
+      subtitle: "#666666",
+      footer: "#888888",
+      other: "#aaaaaa",
+      mainlabel: "#333333",
+      percentage: "#dddddd",
+      value: "#aaaa22",
+      tooltip_bg: "#000000",
+      tooltip_fg: "#efefef",
+      segment_stroke: "#ffffff",
+      gradient_color: "#000000",
+    },
+  },
+  slate: {
+    bootstrap_css: "css/bootstrap-slate-flat-3.3.7.css?v20161229-1",
+    dashboard_css: "css/dashboard.slate.css?v20180210-1",
+    background: "#272b30",
+    foreground: "#C8C8C8",
+    grid: "#283236",
+    axis: "#283236",
+    highlight: "#383838",
+    colors: ["#66AA00", "#FE3912", "#3366CC", "#D66300", "#0099C6", "#DDDD00",
+      "#5054e6", "#EE9911", "#BB44CC", "#e45757", "#ef0aef", "#CC7700",
+      "#22AA99", "#109618", "#905bfd", "#f54882", "#4381bf", "#ff3737",
+      "#329262", "#3B3EFF"],
+    easypiechart_track: "#373b40",
+    easypiechart_scale: "#373b40",
+    gauge_pointer: "#474b50",
+    gauge_stroke: "#373b40",
+    gauge_gradient: false,
+    gauge_stop_color: "#FC8D5E",
+    gauge_start_color: "#B0E952",
+    d3pie: {
+      title: "#C8C8C8",
+      subtitle: "#283236",
+      footer: "#283236",
+      other: "#283236",
+      mainlabel: "#C8C8C8",
+      percentage: "#dddddd",
+      value: "#cccc44",
+      tooltip_bg: "#272b30",
+      tooltip_fg: "#C8C8C8",
+      segment_stroke: "#283236",
+      gradient_color: "#000000",
+    },
+  },
+}
+
+// Codacy declarations
+/* global netdataTheme */
+
+NETDATA.updateTheme = function () {
+  if (typeof window.netdataTheme !== 'undefined'
+    && typeof NETDATA.themes[netdataTheme] !== 'undefined'
+  ) {
+    NETDATA.themes.current = NETDATA.themes[window.netdataTheme];
+  } else {
+    NETDATA.themes.current = NETDATA.themes.white;
+  }
+
+  NETDATA.colors = NETDATA.themes.current.colors;
+}
+
+NETDATA.updateTheme()
+
+// these are the colors Google Charts are using
+// we have them here to attempt emulate their look and feel on the other chart libraries
+// http://there4.io/2012/05/02/google-chart-color-list/
+//NETDATA.colors        = [ '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6',
+//                      '#DD4477', '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11',
+//                      '#6633CC', '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC' ];
+
+// an alternative set
+// http://www.mulinblog.com/a-color-palette-optimized-for-data-visualization/
+//                         (blue)     (red)      (orange)   (green)    (pink)     (brown)    (purple)   (yellow)   (gray)
+//NETDATA.colors        = [ '#5DA5DA', '#F15854', '#FAA43A', '#60BD68', '#F17CB0', '#B2912F', '#B276B2', '#DECF3F', '#4D4D4D' ];
+// dygraph
+
+// local storage options
+
+NETDATA.localStorage = {
+  default: {},
+  current: {},
+  callback: {} // only used for resetting back to defaults
+};
+
+
+// todo temporary stuff which was originally in dashboard.js
+// but needs to be refractored
+NETDATA.name2id = function (s) {
+  return s
+  .replace(/ /g, '_')
+  .replace(/:/g, '_')
+  .replace(/\(/g, '_')
+  .replace(/\)/g, '_')
+  .replace(/\./g, '_')
+  .replace(/\//g, '_');
+};
+
+NETDATA.globalChartUnderlay = {
+  clear: () => {},
+  init: () => {},
+}
+
+NETDATA.globalPanAndZoom = {
+  callback: () => {},
+}
+NETDATA.unpause = () => {}
+
+
+// ----------------------------------------------------------------------------------------------------------------
+// XSS checks
+
+NETDATA.xss = {
+  enabled: (typeof netdataCheckXSS === 'undefined') ? false : netdataCheckXSS,
+  enabled_for_data: (typeof netdataCheckXSS === 'undefined') ? false : netdataCheckXSS,
+
+  string: function (s) {
+    return s.toString()
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+  },
+
+  object: function (name, obj, ignore_regex) {
+    if (typeof ignore_regex !== 'undefined' && ignore_regex.test(name)) {
+      // console.log('XSS: ignoring "' + name + '"');
+      return obj;
+    }
+
+    switch (typeof(obj)) {
+      case 'string':
+        const ret = this.string(obj);
+        if (ret !== obj) {
+          console.log('XSS protection changed string ' + name + ' from "' + obj + '" to "' + ret + '"');
+        }
+        return ret;
+
+      case 'object':
+        if (obj === null) {
+          return obj;
+        }
+
+        if (Array.isArray(obj)) {
+          // console.log('checking array "' + name + '"');
+
+          let len = obj.length;
+          while (len--) {
+            obj[len] = this.object(name + '[' + len + ']', obj[len], ignore_regex);
+          }
+        } else {
+          // console.log('checking object "' + name + '"');
+
+          for (var i in obj) {
+            if (obj.hasOwnProperty(i) === false) {
+              continue;
+            }
+            if (this.string(i) !== i) {
+              console.log('XSS protection removed invalid object member "' + name + '.' + i + '"');
+              delete obj[i];
+            } else {
+              obj[i] = this.object(name + '.' + i, obj[i], ignore_regex);
+            }
+          }
+        }
+        return obj;
+
+      default:
+        return obj;
+    }
+  },
+
+  checkOptional: function (name, obj, ignore_regex) {
+    if (this.enabled) {
+      //console.log('XSS: checking optional "' + name + '"...');
+      return this.object(name, obj, ignore_regex);
+    }
+    return obj;
+  },
+
+  checkAlways: function (name, obj, ignore_regex) {
+    //console.log('XSS: checking always "' + name + '"...');
+    return this.object(name, obj, ignore_regex);
+  },
+
+  checkData: function (name, obj, ignore_regex) {
+    if (this.enabled_for_data) {
+      //console.log('XSS: checking data "' + name + '"...');
+      return this.object(name, obj, ignore_regex);
+    }
+    return obj;
+  }
+};
+
+
+
+const fixHost = (host) => {
+  while (host.slice(-1) === '/') {
+    host = host.substring(0, host.length - 1);
+  }
+
+  return host;
+}
+
+NETDATA.chartRegistry = {
+  charts: {},
+
+  globalReset: function () {
+    this.charts = {};
+  },
+
+  add: function (host, id, data) {
+    if (typeof this.charts[host] === 'undefined') {
+      this.charts[host] = {};
+    }
+
+    //console.log('added ' + host + '/' + id);
+    this.charts[host][id] = data;
+  },
+
+  get: function (host, id) {
+    if (typeof this.charts[host] === 'undefined') {
+      return null;
+    }
+
+    if (typeof this.charts[host][id] === 'undefined') {
+      return null;
+    }
+
+    //console.log('cached ' + host + '/' + id);
+    return this.charts[host][id];
+  },
+
+  downloadAll: function (host, callback) {
+    host = fixHost(host);
+
+    let self = this;
+
+    function got_data(h, data, callback) {
+      if (data !== null) {
+        self.charts[h] = data.charts;
+        window.charts = data.charts
+
+        // update the server timezone in our options
+        if (typeof data.timezone === 'string') {
+          NETDATA.options.server_timezone = data.timezone;
+        }
+      } else {
+        NETDATA.error(406, h + '/api/v1/charts');
+      }
+
+      if (typeof callback === 'function') {
+        callback(data);
+      }
+    }
+
+    if (window.netdataSnapshotData !== null) {
+      got_data(host, window.netdataSnapshotData.charts, callback);
+    } else {
+      $.ajax({
+        url: host + '/api/v1/charts',
+        async: true,
+        cache: false,
+        xhrFields: {withCredentials: true} // required for the cookie
+      })
+      .done(function (data) {
+        data = NETDATA.xss.checkOptional('/api/v1/charts', data);
+        got_data(host, data, callback);
+      })
+      .fail(function () {
+        NETDATA.error(405, host + '/api/v1/charts');
+
+        if (typeof callback === 'function') {
+          callback(null);
+        }
+      });
+    }
+  }
+};
+
+
+NETDATA.fixHost = function (host) {
+  while (host.slice(-1) === '/') {
+    host = host.substring(0, host.length - 1);
+  }
+
+  return host;
+};
+
+
+NETDATA.registryHello = function (host, callback) {
+  host = NETDATA.fixHost(host);
+
+  // send HELLO to a netdata server:
+  // 1. verifies the server is reachable
+  // 2. responds with the registry URL, the machine GUID of this netdata server and its hostname
+  $.ajax({
+    url: host + '/api/v1/registry?action=hello',
+    async: true,
+    cache: false,
+    headers: {
+      'Cache-Control': 'no-cache, no-store',
+      'Pragma': 'no-cache'
+    },
+    xhrFields: {withCredentials: true} // required for the cookie
+  })
+  .done(function (data) {
+    data = NETDATA.xss.checkOptional('/api/v1/registry?action=hello', data);
+
+    if (typeof data.status !== 'string' || data.status !== 'ok') {
+      // NETDATA.error(408, host + ' response: ' + JSON.stringify(data));
+      data = null;
+    }
+
+    if (typeof callback === 'function') {
+      return callback(data);
+    }
+  })
+  .fail(function () {
+    // NETDATA.error(407, host);
+
+    if (typeof callback === 'function') {
+      return callback(null);
+    }
+  });
+}
+
+NETDATA.registrySearch = function (machine_guid, getFromRegistry, serverDefault, callback) {
+  // SEARCH for the URLs of a machine:
+  $.ajax({
+    url: getFromRegistry("registryServer") + '/api/v1/registry?action=search&machine='
+      + getFromRegistry("machineGuid") + '&name=' + encodeURIComponent(getFromRegistry("hostname"))
+      + '&url=' + encodeURIComponent(serverDefault) + '&for=' + machine_guid,
+    async: true,
+    cache: false,
+    headers: {
+      'Cache-Control': 'no-cache, no-store',
+      'Pragma': 'no-cache'
+    },
+    xhrFields: {withCredentials: true} // required for the cookie
+  })
+  .done(function (data) {
+    data = NETDATA.xss.checkAlways('/api/v1/registry?action=search', data);
+
+    if (typeof data.status !== 'string' || data.status !== 'ok') {
+      // NETDATA.error(417, getFromRegistry("registryServer") + ' responded with: ' + JSON.stringify(data));
+      console.warn(getFromRegistry("registryServer") + ' responded with: ' + JSON.stringify(data));
+      data = null;
+    }
+
+    if (typeof callback === 'function') {
+      return callback(data);
+    }
+  })
+  .fail(function () {
+    // NETDATA.error(418, getFromRegistry("registryServer"));
+    console.warn("registry search call failed", getFromRegistry("registryServer"))
+
+    if (typeof callback === 'function') {
+      return callback(null);
+    }
+  });
+}
+
+NETDATA.registryDelete = function (getFromRegistry, serverDefault, delete_url, callback) {
+  // send DELETE to a netdata registry:
+  $.ajax({
+    url: getFromRegistry("registryServer") + '/api/v1/registry?action=delete&machine='
+      + getFromRegistry("machineGuid") + '&name=' + encodeURIComponent(getFromRegistry("hostname"))
+      + '&url=' + encodeURIComponent(serverDefault) + '&delete_url=' + encodeURIComponent(delete_url),
+      // + '&url=' + encodeURIComponent("http://n5.katsuna.com:19999/") + '&delete_url=' + encodeURIComponent(delete_url),
+    async: true,
+    cache: false,
+    headers: {
+      'Cache-Control': 'no-cache, no-store',
+      'Pragma': 'no-cache'
+    },
+    xhrFields: {withCredentials: true} // required for the cookie
+  })
+  .done(function (data) {
+    // data = NETDATA.xss.checkAlways('/api/v1/registry?action=delete', data);
+
+    if (typeof data.status !== 'string' || data.status !== 'ok') {
+      // NETDATA.error(411, NETDATA.registry.server + ' responded with: ' + JSON.stringify(data));
+      console.warn(411, getFromRegistry("registryServer") + ' responded with: ' + JSON.stringify(data));
+      data = null;
+    }
+
+    if (typeof callback === 'function') {
+      return callback(data);
+    }
+  })
+  .fail(function () {
+    // NETDATA.error(412, NETDATA.registry.server);
+    console.warn(412, getFromRegistry("registryServer"));
+
+    if (typeof callback === 'function') {
+      return callback(null);
+    }
+  });
+}
+
+
+// NETDATA.currentScript = document.currentScript
--- a/web/gui/dashboard/dashboard.css
+++ b/web/gui/dashboard/dashboard.css
@ -0,0 +1,785 @@
+/* SPDX-License-Identfier: GPL-3.0-or-later */
+:root {
+    --color-main: #35414A;
+    --color-primary: #00ab44;
+    --color-border: #93a3b0;
+}
+
+html,
+body {
+    /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-style: normal;
+    font-variant: normal;
+}
+
+.morelink {
+    color: var(--color-attention, #765d9c);
+    text-decoration: none;
+}
+
+.morelink:hover {
+    color: var(--color-attentionSecondary, #563d7c);
+    text-decoration: none;
+}
+
+.morelink:focus {
+    color: var(--color-attention, #765d9c);
+    text-decoration: none;
+}
+
+.netdata-chart-alignment {
+    /* 55 for legend-right */
+    margin-left: 35px;
+}
+
+.netdata-chart-row {
+    width: 100%;
+    text-align: center;
+    display: flex;
+    display: -webkit-flex;
+    display: -moz-flex;
+    align-items: baseline;
+    -moz-align-items: baseline;
+    -webkit-align-items: baseline;
+    justify-content: center;
+    -webkit-justify-content: center;
+    -moz-justify-content: center;
+    padding-top: 10px;
+}
+
+.netdata-container {
+    display: inline-block;
+    overflow: hidden;
+
+    transform: translate3d(0,0,0);
+
+    /* required for child elements to have absolute position */
+    position: relative;
+
+    /* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-container-gauge {
+    display: inline-block;
+    overflow: hidden;
+
+    transform: translate3d(0,0,0);
+
+    /* required for child elements to have absolute position */
+    position: relative;
+
+    /* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-container-gauge:after {
+    padding-top: 60%;
+    display: block;
+    content: '';
+}
+
+.netdata-container-easypiechart {
+    display: inline-block;
+    overflow: hidden;
+
+    transform: translate3d(0,0,0);
+
+    /* required for child elements to have absolute position */
+    position: relative;
+
+    /* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-container-easypiechart:after {
+    padding-top: 100%;
+    display: block;
+    content: '';
+}
+
+.netdata-aspect {
+    position: relative;
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
+}
+
+.netdata-container-with-legend {
+    display: inline-block;
+    overflow: hidden;
+
+    transform: translate3d(0,0,0);
+
+    /* fix minimum scrollbar issue in firefox */
+    min-height: 99px;
+
+    /* required for child elements to have absolute position */
+    position: relative;
+
+    /* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-container-with-legend.netdata-container-with-legend--bottom {
+    display: flex;
+    flex-direction: column;
+}
+
+.netdata-legend-resize-handler {
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    height: 15px;
+    width: 20px;
+    background-color: var(--color-mainBackground, #fff);
+    font-size: 15px;
+    vertical-align: middle;
+    line-height: 15px;
+    cursor: ns-resize;
+    color: var(--color-selected, #CDCDCD);
+    text-align: center;
+    overflow: hidden;
+    padding: 0px;
+    margin: 0px;
+}
+
+.netdata-legend-toolbox {
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    right: 30px;
+    height: 15px;
+    width: 110px;
+    font-size: 12px;
+    vertical-align: middle;
+    line-height: 15px;
+    color: var(--color-placeholder, #DDDDDD);
+    text-align: center;
+    overflow: hidden;
+    padding: 0px;
+    margin: 0px;
+
+    /* prevent text selection after double click */
+    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+    -moz-user-select: none; /* mozilla browsers */
+    -khtml-user-select: none; /* webkit (konqueror) browsers */
+    -ms-user-select: none; /* IE10+ */
+}
+
+.netdata-legend-toolbox-button {
+    display: inline-block;
+    position: relative;
+    height: 15px;
+    width: 18px;
+    background-color: var(--color-mainBackground, #fff);
+    font-size: 12px;
+    vertical-align: middle;
+    line-height: 15px;
+    color: var(--color-selected, #CDCDCD);
+    text-align: center;
+    overflow: hidden;
+    padding: 0px;
+    margin: 0px;
+    cursor: pointer;
+
+    /* prevent text selection after double click */
+    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+    -moz-user-select: none; /* mozilla browsers */
+    -khtml-user-select: none; /* webkit (konqueror) browsers */
+    -ms-user-select: none; /* IE10+ */
+}
+
+.netdata-message {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    text-align: left;
+    vertical-align: top;
+    font-weight: bold;
+    font-size: x-small;
+    overflow: hidden;
+    background: inherit;
+    z-index: 0;
+}
+
+.netdata-message.hidden {
+    display: none;
+}
+
+.netdata-message.icon {
+    color: var(--color-borderSecondary, #F8F8F8);
+    text-align: center;
+    vertical-align: middle;
+}
+
+.netdata-chart-legend {
+    position: absolute; /* within .netdata-container */
+    top: 26px;
+    bottom: 18px;
+    right: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    text-overflow: ellipsis;
+    line-height: 14px;
+    display: block;
+    width: 140px; /* --legend-width */
+    font-size: 10px;
+    margin-top: 5px;
+    text-align: left;
+    /* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-legend-title-date {
+    font-size: 10px;
+    font-weight: normal;
+    margin-top: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.netdata-legend-title-time {
+    font-size: 11px;
+    font-weight: bold;
+    margin-top: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.netdata-legend-title-units {
+    position: absolute;
+    right: 10px;
+    float: right;
+    font-size: 11px;
+    vertical-align: top;
+    font-weight: normal;
+    margin-top: 0px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.netdata-legend-series {
+    position: absolute;
+    width: 140px; /* legend-width */
+    height: calc(100% - 50px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 14.5px; /* line spacing at the legend */
+    display: block;
+    font-size: 10px;
+    margin-top: 0px;
+}
+
+.netdata-legend-name-table-line {
+    display: inline-block;
+    width: 13px;
+    height: 4px;
+    border-width: 0px;
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
+    border-bottom-color: white;
+}
+
+.netdata-legend-name-table-area {
+    display: inline-block;
+    width: 13px;
+    height: 5px;
+    border-width: 1px;
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: inherit;
+}
+
+.netdata-legend-name-table-stacked {
+    display: inline-block;
+    width: 13px;
+    height: 5px;
+    border-width: 1px;
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: inherit;
+}
+
+.netdata-legend-name-tr {
+}
+
+.netdata-legend-name-td {
+}
+
+.netdata-legend-name {
+    text-align: left;
+    font-size: 11px; /* legend: dimension name size */
+    font-weight: bold;
+    vertical-align: bottom;
+    margin-top: 0px;
+    z-index: 9;
+    padding: 0px;
+    width: 80px !important;
+    max-width: 80px !important;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    cursor: pointer;
+    -webkit-print-color-adjust: exact;
+}
+
+.netdata-legend-value {
+    /*margin-left: 14px;*/
+    position: absolute;
+    right: 10px;
+    float: right;
+    text-align: right;
+    font-size: 11px; /* legend: dimension value size */
+    font-weight: bold;
+    vertical-align: bottom;
+    background-color: var(--color-mainBackground, #fff);
+    margin-top: 0px;
+    z-index: 10;
+    padding: 0px;
+    padding-left: 15px;
+    cursor: pointer;
+    /* -webkit-font-smoothing: none; */
+}
+
+.netdata-legend-value, .netdata-legend-name {
+  /* prevent highlight when shift-clicking */
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+/* eslint recommends adding tabIndex for a11y, but the outline is showing on click */
+.netdata-legend-name:focus, .netdata-legend-value:focus {
+    outline: none;
+}
+
+.netdata-legend-name.not-selected {
+    font-weight: normal;
+    opacity: 0.3;
+}
+
+.netdata-chart {
+    position: absolute; /* within .netdata-container */
+    top: 0; /* within .netdata-container */
+    left: 0; /* within .netdata-container */
+    display: inline-block;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+
+    /* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-chart-with-legend-right {
+    position: absolute; /* within .netdata-container */
+    top: 0; /* within .netdata-container */
+    left: 0; /* within .netdata-container */
+    display: block;
+    overflow: hidden;
+    margin-right: 140px; /* --legend-width */
+    width: calc(100% - 140px); /* --legend-width */
+    height: 100%;
+    z-index: 5;
+    flex-grow: 1;
+
+    /* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-chart-with-legend-bottom {
+    display: block;
+    overflow: hidden;
+    flex-grow: 1;
+}
+
+.netdata-peity-chart {
+
+}
+
+.netdata-sparkline-chart {
+
+}
+
+.netdata-dygraph-chart {
+
+}
+
+.netdata-morris-chart {
+
+}
+
+.netdata-google-chart {
+
+}
+
+.dygraph-ylabel {
+}
+
+.dygraph-axis-label-x {
+    overflow-x: hidden;
+}
+
+.dygraph-label-rotate-left {
+    text-align: center;
+    /* See http://caniuse.com/#feat=transforms2d */
+    transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+}
+
+/* For y2-axis label */
+.dygraph-label-rotate-right {
+    text-align: center;
+    /* See http://caniuse.com/#feat=transforms2d */
+    transform: rotate(-90deg);
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+}
+
+.dygraph-title {
+    /* 56 for legend-right */
+    text-indent: 36px;
+    text-align: left;
+    position: absolute;
+    left: 0px;
+    top: 4px;
+    font-size: 11px;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+/* fix for sparkline tooltip under bootstrap */
+.jqstooltip {
+    width: auto !important;
+    height: auto !important;
+}
+
+.easyPieChart {
+    position: relative;
+    text-align: center;
+}
+
+.easyPieChart canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.easyPieChartLabel {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: var(--color-main);
+    font-weight: normal;
+    text-shadow: var(--color-elementBackground, #BBB) 0px 0px 1px;
+    /* -webkit-font-smoothing: none; */
+}
+
+.easyPieChartTitle {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 64%;
+    margin-left: 18% !important;
+    text-align: center;
+    color: var(--color-border, #999999);
+    font-weight: bold;
+}
+
+.easyPieChartUnits {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 60%;
+    margin-left: 20% !important;
+    text-align: center;
+    color: var(--color-border, #999999);
+    font-weight: normal;
+}
+
+.gaugeChart {
+    position: relative;
+    text-align: center;
+}
+
+.gaugeChart canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 0;
+}
+
+.gaugeChartLabel {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: var(--color-main);
+    font-weight: bold;
+    z-index: 1;
+    text-shadow: var(--color-elementBackground, #777) 0px 0px 1px;
+    /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
+    /* -webkit-text-stroke: 1px #777; */
+    /* -webkit-font-smoothing: none; */
+}
+
+.gaugeChartTitle {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: var(--color-border, #999999);
+    font-weight: bold;
+}
+
+.gaugeChartUnits {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    text-align: left;
+    margin-left: 5%;
+    color: var(--color-border, #999999);
+    font-weight: normal;
+}
+
+.gaugeChartMin {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    bottom: 8%;
+    width: 92%;
+    margin-left: 8%;
+    text-align: left;
+    color: var(--color-main);
+    font-weight: normal;
+}
+
+.gaugeChartMax {
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    bottom: 8%;
+    width: 95%;
+    margin-right: 5%;
+    text-align: right;
+    color: var(--color-main);
+    font-weight: normal;
+}
+
+.popover-title {
+    font-weight: bold;
+    font-size: 12px;
+}
+
+.popover-content {
+    font-size: 11px;
+}
+
+/* ----------------------------------------------------------------------------
+   perfect-scrollbar settings
+ */
+
+.ps-container {
+    -ms-touch-action: auto;
+    touch-action: auto;
+    overflow: hidden !important;
+    -ms-overflow-style: none;
+}
+
+@supports (-ms-overflow-style: none) {
+    .ps-container {
+        overflow: auto !important;
+    }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .ps-container {
+        overflow: auto !important;
+    }
+}
+
+.ps-container.ps-active-x > .ps-scrollbar-x-rail,
+.ps-container.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+    background-color: transparent;
+}
+
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: transparent; /* background color when dragged away */
+    opacity: 0.9;
+}
+
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    background-color: #aaa; /* scrollbar color when dragged away */
+    height: 5px;
+}
+
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: transparent; /* background color when dragged away */
+    opacity: 0.9;
+}
+
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    background-color: #aaa; /* scrollbar color when dragged away */
+    width: 5px;
+}
+
+.ps-container > .ps-scrollbar-x-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0.2; /* the opacity when not on hover of the content */
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    bottom: 0px;
+    /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 15px;
+}
+
+.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    position: absolute;
+    /* please don't change 'position' */
+    background-color: var(--color-elementBackground, #666); /* #aaa; the color on content hover */
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+    -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+    -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+    bottom: 2px;
+    /* there must be 'bottom' for ps-scrollbar-x */
+    height: 5px; /* the width of the scrollbar */
+}
+
+.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
+    height: 4px;
+}
+
+.ps-container > .ps-scrollbar-y-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0.2; /* the opacity when not on hover of the content */
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    right: 0;
+    /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 15px;
+}
+
+.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    position: absolute;
+    /* please don't change 'position' */
+    background-color: var(--color-elementBackground, #666); /* #aaa; the color on content hover */
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+    -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+    -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+    right: 2px;
+    /* there must be 'right' for ps-scrollbar-y */
+    width: 5px; /* the width of the scrollbar */
+}
+
+.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
+    width: 5px;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: transparent; /* background color when dragged */
+    opacity: 0.9;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    background-color: #bbb; /* scrollbar color when dragged */
+    height: 5px;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: transparent; /* background color when dragged */
+    opacity: 0.9;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    background-color: #bbb; /* scrollbar color when dragged */
+    width: 5px;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail,
+.ps-container:hover > .ps-scrollbar-y-rail {
+    opacity: 0.6;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail:hover {
+    background-color: transparent; /* the background color on hover of the scrollbar */
+    opacity: 0.9;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+    background-color: #999; /* scrollbar color on hover */
+}
+
+.ps-container:hover > .ps-scrollbar-y-rail:hover {
+    background-color: transparent; /* the background color on hover of the scrollbar */
+    opacity: 0.9;
+}
+
+.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+    background-color: #999; /* scrollbar color on hover */
+}
+
+.dygraph__history-tip {
+    position: absolute;
+    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;
+}
--- a/web/gui/dashboard/dashboard.html
+++ b/web/gui/dashboard/dashboard.html
@ -518,7 +518,7 @@ Sparklines using dygraphs

 <hr>
 <h1>Google Charts</h1>
-NetData was originally developed with Google Charts.
+NetData was originaly developed with Google Charts.
 NetData is a complete Google Visualization API provider.
 <br/>
 <div style="width: 33%; display: inline-block;">
@ -559,7 +559,7 @@ NetData is a complete Google Visualization API provider.
    
 <hr>
 <h1>Morris Charts</h1>
-Unfortunately, Morris Charts are very slow. Here we force them to lower their detail to get acceptable results.
+Unfortunatelly, Morris Charts are very slow. Here we force them to lower their detail to get acceptable results.
 <br/>
 <div style="width: 33%; display: inline-block;">
    <div data-netdata="system.processes"
@ -601,8 +601,8 @@ Unfortunately, Morris Charts are very slow. Here we force them to lower their de
 C3 charts are not usable in large scale. They suffer from the following issues:
 <ul>
 <li>extreme use of transitions (implemented with D3 instead of CSS, meaning they are javascript rendered) that cannot be disabled - even opacity is hardcoded in the javascript library</li>
- <li>rendering is done with <code>SVG</code> instead of <code>canvas</code>, so they use DOM elements for every point, becoming useless if more than 500 points are drawn</li>
- <li>lack of a <code>raw</code> data format, so every time a chart is updated, data conversion in javascript is required</li>
+ <li>rendering is done with <code>SVG</code> instead of <code>canvas</code>, so they use DOM elements for every point, becomimg useless if more than 500 points are drawn</li>
+ <li>lack of a <code>raw</code> data format, so every time a chart is updated, data convertion in javascript is required</li>
 <li>lack of <code>stacked</code> charts support</li>
 </ul>
 So, to avoid flashing the charts, we destroy and re-create the charts on each update. Also, since they manipulate the data with javascript we were forced to lower the detail they render to get acceptable speeds.
--- a/web/gui/dashboard/dashboard.js
+++ b/web/gui/dashboard/dashboard.js
@ -63,7 +63,7 @@
 *                                                  (default: null) */
 /*global netdataAlarmsRecipients     *//* array,    an array of alarm recipients to show notifications for
 *                                                  (default: null) */
-/*global netdataAlarmsRemember       *//* boolean,  keep our position in the alarm log at browser local storage
+/*global netdataAlarmsRemember       *//* boolen,   keep our position in the alarm log at browser local storage
 *                                                  (default: true) */
 /*global netdataAlarmsActiveCallback *//* function, a hook for the alarm logs
 *                                                  (default: undefined) */
@ -827,6 +827,13 @@ NETDATA.unitsConversion = {
            'GiB/s': 1024 * 1024,
            'TiB/s': 1024 * 1024 * 1024
        },
+        'bytes': {
+            'bytes': 1,
+            'kilobytes': 1024,
+            'megabytes': 1024 * 1024,
+            'gigabytes': 1024 * 1024 * 1024,
+            'terabytes': 1024 * 1024 * 1024 * 1024
+        },
        'B': {
            'B': 1,
            'KiB': 1024,
@ -889,7 +896,17 @@ NETDATA.unitsConversion = {
            'num (M)': 1000000,
            'num (G)': 1000000000,
            'num (T)': 1000000000000
-        }
+        },
+        'Hz': {
+            'Hz': 1,
+            'kHz': 10 ** 3,
+            'MHz': 10 ** 6,
+            'GHz': 10 ** 9,
+            'THz': 10 ** 12,
+            'PHz': 10 ** 15,
+            'EHz': 10 ** 18,
+            'ZHz': 10 ** 21,
+        },
        /*
        'milliseconds': {
            'seconds': 1000
@ -2199,9 +2216,6 @@ NETDATA.dygraphChartCreate = function (state, data) {
        visibility: state.dimensions_visibility.selected2BooleanArray(state.data.dimension_names),
        logscale: NETDATA.chartLibraries.dygraph.isLogScale(state) ? 'y' : undefined,

-        // Expects a string in the format "<series name>: <style>" where each series is separated by a |
-        perSeriesStyle: NETDATA.dataAttribute(state.element, 'dygraph-per-series-style', ''),
-
        axes: {
            x: {
                pixelsPerLabel: NETDATA.dataAttribute(state.element, 'dygraph-xpixelsperlabel', 50),
@ -2858,23 +2872,18 @@ NETDATA.dygraphChartCreate = function (state, data) {
        //state.tmp.dygraph_options.isZoomedIgnoreProgrammaticZoom = true;
    }

-    let seriesStyles = NETDATA.dygraphGetSeriesStyle(state.tmp.dygraph_options);
-    state.tmp.dygraph_options.series = seriesStyles;
+    state.tmp.dygraph_instance = new Dygraph(state.element_chart,
+        data.result.data, state.tmp.dygraph_options);

-    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>
+           <a href="https://learn.netdata.cloud/guides/longer-metrics-storage/" 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>.
+           or use the <a href="https://learn.netdata.cloud/docs/agent/database/engine/" target=_blank>DB engine</a>.
        </span>
    `;
    state.tmp.dygraph_history_tip_element.className = 'dygraph__history-tip';
@ -2903,51 +2912,6 @@ NETDATA.dygraphChartCreate = function (state, data) {

    return true;
 };
-
-NETDATA.dygraphGetSeriesStyle = function(dygraphOptions) {
-    const seriesStyleStr = dygraphOptions.perSeriesStyle;
-    let formattedStyles = {};
-
-    if (seriesStyleStr === '') {
-      return formattedStyles;
-    }
-
-    // Parse the config string into a JSON object
-    let styles = seriesStyleStr.replace(' ', '').split('|');
-
-    styles.forEach(style => {
-        const keys = style.split(':');
-        formattedStyles[keys[0]] = keys[1];
-    });
-
-    for (let key in formattedStyles) {
-        if (formattedStyles.hasOwnProperty(key)) {
-            let settings;
-
-            switch (formattedStyles[key]) {
-                case 'line':
-                    settings = { fillGraph: false };
-                    break;
-                case 'area':
-                    settings = { fillGraph: true };
-                    break;
-                case 'dot':
-                    settings = {
-                        fillGraph: false,
-                        drawPoints: true,
-                        pointSize: dygraphOptions.pointSize
-                    };
-                    break;
-                default:
-                    settings = undefined;
-            }
-
-            formattedStyles[key] = settings;
-        }
-    }
-
-    return formattedStyles;
-};
 // ----------------------------------------------------------------------------------------------------------------
 // sparkline

@ -3512,7 +3476,7 @@ NETDATA.gaugeChartCreate = function (state, data) {
        colorStart: startColor,     // Colors
        colorStop: stopColor,       // just experiment with them
        strokeColor: strokeColor,   // to see which ones work best for you
-        generateGradient: (generateGradient === true), // gmosx: 
+        generateGradient: (generateGradient === true), // gmosx:
        gradientType: 0,
        highDpiSupport: true        // High resolution support
    };
@ -6654,7 +6618,7 @@ let chartState = function (element) {
            if (NETDATA.options.current.show_help) {
                if (this.element_legend_childs.toolbox !== null) {
                    if (this.debug) {
-                        this.log('hideChart(): hiding legend popovers');
+                        this.log('hideChart(): hidding legend popovers');
                    }

                    $(this.element_legend_childs.toolbox_left).popover('hide');
@ -8201,7 +8165,7 @@ let chartState = function (element) {
            }
        }

-        // create a hidden div to be used for hiding
+        // create a hidden div to be used for hidding
        // the original legend of the chart library
        let el = document.createElement('div');
        if (this.element_legend !== null) {
@ -8395,7 +8359,6 @@ let chartState = function (element) {
        if (this.dimensions) {
            this.data_url += "&dimensions=" + this.dimensions;
        }
-
        if (NETDATA.options.debug.chart_data_url || this.debug) {
            this.log('chartURL(): ' + this.data_url + ' WxH:' + this.chartWidth() + 'x' + this.chartHeight() + ' points: ' + data_points.toString() + ' library: ' + this.library_name);
        }
@ -10020,7 +9983,7 @@ NETDATA.registry = {
                }
                NETDATA.registry.access(2, function (person_urls) {
                    NETDATA.registry.parsePersonUrls(person_urls);
-                });    
+                });
            }
        });
    },
@ -10071,7 +10034,7 @@ NETDATA.registry = {
            // data.
            name = NETDATA.registry.hostname;
            url = NETDATA.serverDefault;
-        } 
+        }

        console.log("ACCESS", name, url);

--- a/web/gui/dashboard/dashboard.slate.css
+++ b/web/gui/dashboard/dashboard.slate.css
@ -1,10 +1,30 @@
 /* SPDX-License-Identifier: GPL-3.0-or-later */
+:root {
+    --color-main: #FFFFFF;
+    --color-primary: #00ab44;
+    --color-border: #878b90;
+}
+
 html,
 body {
    /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-variant: normal;
+    color: #878b90;
+}
+
+/* fixes for default slate theme */
+code {
+    color: #bbb; /*#c7254e;*/
+    background-color: #555; /* #f9f2f4; */
+}
+
+.dashboard-sidebar .nav > .active > a,
+.dashboard-sidebar .nav > .active:hover > a,
+.dashboard-sidebar .nav > .active:focus > a {
+    color: #765d9c;
+    border-left: 2px solid #765d9c;
 }

 .morelink {
@ -23,7 +43,8 @@ body {
 }

 .netdata-chart-alignment {
-    margin-left: 55px;
+    /* 55 for legend-right */
+    margin-left: 35px;
 }

 .netdata-chart-row {
@ -32,11 +53,11 @@ body {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
-    align-items: baseline;
-    -moz-align-items: baseline;
-    -webkit-align-items: baseline;
+    align-items: flex-end;
+    -moz-align-items: flex-end;
+    -webkit-align-items: flex-end;
    justify-content: center;
-    -webkit-justify-content: center;
+    -moz--webkit-justify-content: center;
    -moz-justify-content: center;
    padding-top: 10px;
 }
@ -111,6 +132,11 @@ body {
    /* width and height is given per chart with data-width and data-height */
 }

+.netdata-container-with-legend.netdata-container-with-legend--bottom {
+    display: flex;
+    flex-direction: column;
+}
+
 .netdata-legend-resize-handler {
    display: block;
    position: absolute;
@ -118,15 +144,14 @@ body {
    right: 0px;
    height: 15px;
    width: 20px;
-    background-color: White;
+    background-color: #272b30;
    font-size: 15px;
    vertical-align: middle;
    line-height: 15px;
    cursor: ns-resize;
-    color: #DDDDDD;
+    color: var(--color-selected, #373b40);
    text-align: center;
    overflow: hidden;
-    z-index: 20;
    padding: 0px;
    margin: 0px;
 }
@ -138,14 +163,12 @@ body {
    right: 30px;
    height: 15px;
    width: 110px;
-    background-color: White;
    font-size: 12px;
    vertical-align: middle;
    line-height: 15px;
-    color: #DDDDDD;
+    color: #373b40;
    text-align: center;
    overflow: hidden;
-    z-index: 20;
    padding: 0px;
    margin: 0px;

@ -161,14 +184,13 @@ body {
    position: relative;
    height: 15px;
    width: 18px;
-    background-color: White;
+    background-color: #272b30;
    font-size: 12px;
    vertical-align: middle;
    line-height: 15px;
-    color: #CDCDCD;
+    color: var(--color-selected, #373b40);
    text-align: center;
    overflow: hidden;
-    z-index: 21;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
@ -201,7 +223,7 @@ body {
 }

 .netdata-message.icon {
-    color: #F8F8F8;
+    color: #2f3338;
    text-align: center;
    vertical-align: middle;
 }
@ -272,7 +294,7 @@ body {
    border-width: 0px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
-    border-bottom-color: white;
+    border-bottom-color: #272b30;
 }

 .netdata-legend-name-table-area {
@ -328,7 +350,7 @@ body {
    font-size: 11px; /* legend: dimension value size */
    font-weight: bold;
    vertical-align: bottom;
-    background-color: White;
+    background-color: #272b30;
    margin-top: 0px;
    z-index: 10;
    padding: 0px;
@ -337,6 +359,19 @@ body {
    /* -webkit-font-smoothing: none; */
 }

+.netdata-legend-value, .netdata-legend-name {
+    /* prevent highlight when shift-clicking */
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+/* eslint recommends adding tabIndex for a11y, but the outline is showing on click */
+.netdata-legend-name:focus, .netdata-legend-value:focus {
+    outline: none;
+}
+
 .netdata-legend-name.not-selected {
    font-weight: normal;
    opacity: 0.3;
@ -370,6 +405,12 @@ body {
    /* width and height is calculated (depends on the appearance of the legend) */
 }

+.netdata-chart-with-legend-bottom {
+    display: block;
+    overflow: hidden;
+    flex-grow: 1;
+}
+
 .netdata-peity-chart {

 }
@ -397,6 +438,10 @@ body {
    overflow-x: hidden;
 }

+.dygraph-axis-label {
+    color: #6c7075;
+}
+
 .dygraph-label-rotate-left {
    text-align: center;
    /* See http://caniuse.com/#feat=transforms2d */
@ -419,7 +464,8 @@ body {
 }

 .dygraph-title {
-    text-indent: 56px;
+    /* 56 for legend-right */
+    text-indent: 36px;
    text-align: left;
    position: absolute;
    left: 0px;
@ -455,9 +501,9 @@ body {
    left: 0;
    width: 100%;
    text-align: center;
-    color: #666;
+    color: var(--color-main);
    font-weight: normal;
-    text-shadow: #BBB 0px 0px 1px;
+    text-shadow: #272b30 0px 0px 1px;
    /* -webkit-font-smoothing: none; */
 }

@ -469,7 +515,7 @@ body {
    width: 64%;
    margin-left: 18% !important;
    text-align: center;
-    color: #999999;
+    color: var(--color-border,#676b70);
    font-weight: bold;
 }

@ -481,7 +527,7 @@ body {
    width: 60%;
    margin-left: 20% !important;
    text-align: center;
-    color: #999999;
+    color:var(--color-border,#676b70);
    font-weight: normal;
 }

@ -506,10 +552,10 @@ body {
    left: 0;
    width: 100%;
    text-align: center;
-    color: #FFFFFF;
+    color: var(--color-main);
    font-weight: bold;
    z-index: 1;
-    text-shadow: #777 0px 0px 1px;
+    text-shadow: #272b30 0px 0px 1px;
    /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
    /* -webkit-text-stroke: 1px #777; */
    /* -webkit-font-smoothing: none; */
@ -522,7 +568,7 @@ body {
    left: 0;
    width: 100%;
    text-align: center;
-    color: #999999;
+    color: var(--color-border, #676b70);
    font-weight: bold;
 }

@ -535,7 +581,7 @@ body {
    width: 100%;
    text-align: left;
    margin-left: 5%;
-    color: #999999;
+    color: var(--color-border,#676b70);
    font-weight: normal;
 }

@ -548,7 +594,7 @@ body {
    width: 92%;
    margin-left: 8%;
    text-align: left;
-    color: #999999;
+    color: var(--color-main);
    font-weight: normal;
 }

@ -561,7 +607,7 @@ body {
    width: 95%;
    margin-right: 5%;
    text-align: right;
-    color: #999999;
+    color: var(--color-main);
    font-weight: normal;
 }

@ -656,7 +702,7 @@ body {
 }

 .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
-    height: 4px;
+    height: 5px;
 }

 .ps-container > .ps-scrollbar-y-rail {
@ -742,7 +788,7 @@ body {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
-    display: none; /* overridden in js */
+    display: none; /* overriden in js */
    margin-right: 25px;
    direction: rtl;
    overflow: hidden;
--- a/web/gui/dashboard/demo.html
+++ b/web/gui/dashboard/demo.html
--- a/web/gui/dashboard/demo2.html
+++ b/web/gui/dashboard/demo2.html
@ -15,14 +15,14 @@

    <meta property="og:locale" content="en_US" />
    <meta property="og:image" content="https://cloud.githubusercontent.com/assets/2662304/22945737/e98cd0c6-f2fd-11e6-96f1-5501934b0955.png"/>
-    <meta property="og:url" content="https://my-netdata.io/"/>
+    <meta property="og:url" content="http://my-netdata.io/"/>
    <meta property="og:type" content="website"/>
    <meta property="og:site_name" content="netdata"/>
    <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
    <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
 </head>
 <script>var netdataTheme = 'slate';</script>
-<script type="text/javascript" src="https://my-netdata.io/dashboard.js?v20190902-0"></script>
+<script type="text/javascript" src="http://my-netdata.io/dashboard.js?v20190902-0"></script>
 <body>

 <div class="container" style="width: 90%; padding-top: 10px; text-align: center; color: #AAA">
--- a/web/gui/dashboard/demosites.html
+++ b/web/gui/dashboard/demosites.html
@ -603,7 +603,7 @@ p {
        font-size: 13px;
    }

-    .mygauge-donation {
+    .mygause-donation {
        font-size: 9px;
        color: #999;
    }
@ -687,7 +687,7 @@ p {
        <div class=site-logo>my-netdata.io</div>
        <ul class="site-nav inline-block-list">
            <li><a href=https://github.com/netdata/netdata data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label="Source code" target="_blank">Source code</a>
-            <li><a href=https://docs.netdata.cloud data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=Docs target="_blank">Docs</a>
+            <li><a href=https://learn.netdata.cloud/docs/ data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=Docs target="_blank">Docs</a>
        </ul>
    </div>
    <div class=site-promo><h1><span class="title">Monitor your systems and applications, the right way!</span></h1>
@ -697,7 +697,7 @@ p {
            with stunning, <strong>interactive</strong> web dashboards
            and powerful <strong>performance</strong> and <strong>health</strong> alarms.
        <div class=cta-option>
-            <a class="btn btn-download" href="https://docs.netdata.cloud/packaging/installer/" data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=Install><strong>Install netdata now</strong></a>
+            <a class="btn btn-download" href="https://learn.netdata.cloud/docs/agent/packaging/installer/" data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=Install><strong>Install netdata now</strong></a>
            <a class=last-update href="https://github.com/netdata/netdata/releases" data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=Releases>See netdata releases</a></div>
        <div class=cta-option>
            <a class="btn btn-alt" href="#demosites" data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=Demo>netdata live demo</a>
@ -728,7 +728,7 @@ p {
        </div>
    </div>
    <div>
-        <a href="https://docs.netdata.cloud/docs/why-netdata/1s-granularity/">Learn more about high resolution metrics</a>
+        <a href="https://learn.netdata.cloud/docs/agent/why-netdata/1s-granularity/">Learn more about high resolution metrics</a>
    </div>
 </div>

@ -756,7 +756,7 @@ p {
        </div>
    </div>
    <div>
-        <a href="https://docs.netdata.cloud/docs/why-netdata/unlimited-metrics/">Learn more about unlimited metrics</a>
+        <a href="https://learn.netdata.cloud/docs/agent/why-netdata/unlimited-metrics/">Learn more about unlimited metrics</a>
    </div>
 </div>
 <div class="site-section">
@ -783,7 +783,7 @@ p {
        </div>
    </div>
    <div>
-        <a href="https://docs.netdata.cloud/docs/why-netdata/meaningful-presentation/">Learn more about meaningful presentation</a>
+        <a href="https://learn.netdata.cloud/docs/agent/why-netdata/meaningful-presentation/">Learn more about meaningful presentation</a>
    </div>
 </div>

@ -812,7 +812,7 @@ p {
        </div>
    </div>
    <div>
-        <a href="https://docs.netdata.cloud/docs/why-netdata/immediate-results/">Learn more about immediate results</a>
+        <a href="https://learn.netdata.cloud/docs/agent/why-netdata/immediate-results/">Learn more about immediate results</a>
    </div>
 </div>

@ -912,7 +912,7 @@ p {
                </div>
                <div class="mygauge-button">
                    <a class="btn btn-alt mygauge-legend-button" href=//london.my-netdata.io/default.html data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=DemoLondon><strong>Enter London!</strong></a>
-                    <div class="mygauge-donation">
+                    <div class="mygause-donation">
                        Donated by DigitalOcean.com
                    </div>
                </div>
@ -933,7 +933,7 @@ p {
                </div>
                <div class="mygauge-button">
                    <a class="btn btn-alt mygauge-legend-button" href=//atlanta.my-netdata.io/default.html data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=DemoAtlanta><strong>Enter Atlanta!</strong></a>
-                    <div class="mygauge-donation">
+                    <div class="mygause-donation">
                        Donated by CDN77.com
                    </div>
                </div>
@ -954,7 +954,7 @@ p {
                </div>
                <div class="mygauge-button">
                    <a class="btn btn-alt mygauge-legend-button" href=//sanfrancisco.my-netdata.io/default.html data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=DemoSanfrancisco><strong>Enter California!</strong></a>
-                    <div class="mygauge-donation">
+                    <div class="mygause-donation">
                        Donated by DigitalOcean.com
                    </div>
                </div>
@ -975,7 +975,7 @@ p {
                </div>
                <div class="mygauge-button">
                    <a class="btn btn-alt mygauge-legend-button" href=//toronto.my-netdata.io/default.html data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=DemoToronto><strong>Enter Canada!</strong></a>
-                    <div class="mygauge-donation">
+                    <div class="mygause-donation">
                        Donated by DigitalOcean.com
                    </div>
                </div>
@ -997,7 +997,7 @@ p {
                </div>
                <div class="mygauge-button">
                    <a class="btn btn-alt mygauge-legend-button" href=//frankfurt.my-netdata.io/default.html data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=DemoFrankfurt><strong>Enter Germany!</strong></a>
-                    <div class="mygauge-donation">
+                    <div class="mygause-donation">
                        Donated by DigitalOcean.com
                    </div>
                </div>
@ -1018,7 +1018,7 @@ p {
                </div>
                <div class="mygauge-button">
                    <a class="btn btn-alt mygauge-legend-button" href=//newyork.my-netdata.io/default.html data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=DemoNewYork><strong>Enter New York!</strong></a>
-                    <div class="mygauge-donation">
+                    <div class="mygause-donation">
                        Donated by DigitalOcean.com
                    </div>
                </div>
@ -1039,7 +1039,7 @@ p {
                </div>
                <div class="mygauge-button">
                    <a class="btn btn-alt mygauge-legend-button" href=//singapore.my-netdata.io/default.html data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=DemoSingapore><strong>Enter Singapore!</strong></a>
-                    <div class="mygauge-donation">
+                    <div class="mygause-donation">
                        Donated by DigitalOcean.com
                    </div>
                </div>
@ -1060,7 +1060,7 @@ p {
                </div>
                <div class="mygauge-button">
                    <a class="btn btn-alt mygauge-legend-button" href=//bangalore.my-netdata.io/default.html data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=DemoBangalore><strong>Enter India!</strong></a>
-                    <div class="mygauge-donation">
+                    <div class="mygause-donation">
                        Donated by DigitalOcean.com
                    </div>
                </div>
@ -1095,7 +1095,7 @@ p {
                    </div>
                    <div class="mygauge-button">
                        <a class="btn btn-alt mygauge-legend-button" href=//octopuscs.my-netdata.io/default.html data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=DemoOctopuscs><strong>Enter Israel!</strong></a>
-                        <div class="mygauge-donation">
+                        <div class="mygause-donation">
                            Donated by octopuscs.com
                        </div>
                    </div>
@ -1130,7 +1130,7 @@ p {
                    </div>
                    <div class="mygauge-button">
                        <a class="btn btn-alt mygauge-legend-button" href=//stackscale.my-netdata.io/default.html data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=DemoStackScale><strong>Enter Madrid!</strong></a>
-                        <div class="mygauge-donation">
+                        <div class="mygause-donation">
                            Donated by stackscale.com
                        </div>
                    </div>
@ -1300,7 +1300,7 @@ p {
            </div>
        </div>
        <div class=cta-option>
-            <a class="btn btn-download" href="https://docs.netdata.cloud/packaging/installer/" data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=InstallAfterDemo><strong>Install netdata now</strong></a>
+            <a class="btn btn-download" href="https://learn.netdata.cloud/docs/agent/packaging/installer/" data-ga-category="Outbound links" data-ga-action="Nav click" data-ga-label=InstallAfterDemo><strong>Install netdata now</strong></a>
        </div>
    </div>
 </div>
--- a/web/gui/dashboard/demosites2.html
+++ b/web/gui/dashboard/demosites2.html
@ -602,13 +602,13 @@

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
-        <li role="presentation" class="active"><a href="#outbound" aria-controls="outbound" role="tab" data-toggle="tab">Outbound</a></li>
+        <li role="presentation" class="active"><a href="#outbout" aria-controls="outbout" role="tab" data-toggle="tab">Outbound</a></li>
        <li role="presentation"><a href="#inbound" aria-controls="inbound" role="tab" data-toggle="tab">Inbound</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
-        <div role="tabpanel" class="tab-pane active" id="outbound">
+        <div role="tabpanel" class="tab-pane active" id="outbout">
            <div class="myfullchart">
                <div data-netdata="tc.world_out"
                    data-host="//london.my-netdata.io"
--- a/web/gui/dashboard/favicon.ico
+++ b/web/gui/dashboard/favicon.ico
--- a/web/gui/dashboard/fonts/glyphicons-halflings-regular.eot
+++ b/web/gui/dashboard/fonts/glyphicons-halflings-regular.eot
--- a/web/gui/dashboard/fonts/glyphicons-halflings-regular.svg
+++ b/web/gui/dashboard/fonts/glyphicons-halflings-regular.svg
--- a/web/gui/dashboard/fonts/glyphicons-halflings-regular.ttf
+++ b/web/gui/dashboard/fonts/glyphicons-halflings-regular.ttf
--- a/web/gui/dashboard/fonts/glyphicons-halflings-regular.woff
+++ b/web/gui/dashboard/fonts/glyphicons-halflings-regular.woff
--- a/web/gui/dashboard/fonts/glyphicons-halflings-regular.woff2
+++ b/web/gui/dashboard/fonts/glyphicons-halflings-regular.woff2
--- a/web/gui/dashboard/goto-host-from-alarm.html
+++ b/web/gui/dashboard/goto-host-from-alarm.html
@ -2,13 +2,6 @@
 <!-- SPDX-License-Identifier: GPL-3.0-or-later -->
 <html lang="en">
 <head>
-    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-N6CBMJD');
-    dataLayer.push({"anonymous_statistics" : "false"});
-    </script>    
    <title>Goto a host you know...</title>
    <meta name="application-name" content="netdata">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@ -70,6 +63,9 @@ var urlOptions = {
    alarm_id: 0,
    alarm_event_id: 0,
    alarm_when: 0,
+    alarm_status: null,
+    alarm_chart: null,
+    alarm_value: null,
    hasProperty: function(property) {
        return typeof this[property] !== 'undefined';
    }
@ -103,6 +99,9 @@ function netdataURL(url) {
        + ';alarm_id=' + urlOptions.alarm_id.toString()
        + ';alarm_event_id=' + urlOptions.alarm_event_id.toString()
        + ';alarm_when=' + urlOptions.alarm_when.toString()
+        + ';alarm_status=' + urlOptions.alarm_status
+        + ';alarm_value=' + encodeURIComponent(urlOptions.alarm_value)
+        + ';alarm_chart=' + urlOptions.alarm_chart
        ;
 }

--- a/web/gui/dashboard/images/alert-128-orange.png
+++ b/web/gui/dashboard/images/alert-128-orange.png
--- a/web/gui/dashboard/images/alert-128-red.png
+++ b/web/gui/dashboard/images/alert-128-red.png
--- a/web/gui/dashboard/images/alert-multi-size-orange.ico
+++ b/web/gui/dashboard/images/alert-multi-size-orange.ico
--- a/web/gui/dashboard/images/alert-multi-size-red.ico
+++ b/web/gui/dashboard/images/alert-multi-size-red.ico
--- a/web/gui/dashboard/images/android-icon-144x144.png
+++ b/web/gui/dashboard/images/android-icon-144x144.png
--- a/web/gui/dashboard/images/android-icon-192x192.png
+++ b/web/gui/dashboard/images/android-icon-192x192.png
--- a/web/gui/dashboard/images/android-icon-36x36.png
+++ b/web/gui/dashboard/images/android-icon-36x36.png
--- a/web/gui/dashboard/images/android-icon-48x48.png
+++ b/web/gui/dashboard/images/android-icon-48x48.png
--- a/web/gui/dashboard/images/android-icon-72x72.png
+++ b/web/gui/dashboard/images/android-icon-72x72.png
--- a/web/gui/dashboard/images/android-icon-96x96.png
+++ b/web/gui/dashboard/images/android-icon-96x96.png
--- a/web/gui/dashboard/images/animated.gif
+++ b/web/gui/dashboard/images/animated.gif
--- a/web/gui/dashboard/images/apple-icon-114x114.png
+++ b/web/gui/dashboard/images/apple-icon-114x114.png
--- a/web/gui/dashboard/images/apple-icon-120x120.png
+++ b/web/gui/dashboard/images/apple-icon-120x120.png
--- a/web/gui/dashboard/images/apple-icon-144x144.png
+++ b/web/gui/dashboard/images/apple-icon-144x144.png
--- a/web/gui/dashboard/images/apple-icon-152x152.png
+++ b/web/gui/dashboard/images/apple-icon-152x152.png
--- a/web/gui/dashboard/images/apple-icon-180x180.png
+++ b/web/gui/dashboard/images/apple-icon-180x180.png
--- a/web/gui/dashboard/images/apple-icon-57x57.png
+++ b/web/gui/dashboard/images/apple-icon-57x57.png
--- a/web/gui/dashboard/images/apple-icon-60x60.png
+++ b/web/gui/dashboard/images/apple-icon-60x60.png
--- a/web/gui/dashboard/images/apple-icon-72x72.png
+++ b/web/gui/dashboard/images/apple-icon-72x72.png
--- a/web/gui/dashboard/images/apple-icon-76x76.png
+++ b/web/gui/dashboard/images/apple-icon-76x76.png
--- a/web/gui/dashboard/images/apple-icon-precomposed.png
+++ b/web/gui/dashboard/images/apple-icon-precomposed.png
--- a/web/gui/dashboard/images/apple-icon.png
+++ b/web/gui/dashboard/images/apple-icon.png
--- a/web/gui/dashboard/images/banner-icon-144x144.png
+++ b/web/gui/dashboard/images/banner-icon-144x144.png
--- a/web/gui/dashboard/images/check-mark-2-128-green.png
+++ b/web/gui/dashboard/images/check-mark-2-128-green.png
--- a/web/gui/dashboard/images/check-mark-2-multi-size-green.ico
+++ b/web/gui/dashboard/images/check-mark-2-multi-size-green.ico
--- a/web/gui/dashboard/images/favicon-128.png
+++ b/web/gui/dashboard/images/favicon-128.png
--- a/web/gui/dashboard/images/favicon-16x16.png
+++ b/web/gui/dashboard/images/favicon-16x16.png
--- a/web/gui/dashboard/images/favicon-196x196.png
+++ b/web/gui/dashboard/images/favicon-196x196.png
--- a/web/gui/dashboard/images/favicon-32x32.png
+++ b/web/gui/dashboard/images/favicon-32x32.png
--- a/web/gui/dashboard/images/favicon-96x96.png
+++ b/web/gui/dashboard/images/favicon-96x96.png
--- a/web/gui/dashboard/images/favicon.ico
+++ b/web/gui/dashboard/images/favicon.ico
--- a/web/gui/dashboard/images/ms-icon-144x144.png
+++ b/web/gui/dashboard/images/ms-icon-144x144.png
--- a/web/gui/dashboard/images/ms-icon-150x150.png
+++ b/web/gui/dashboard/images/ms-icon-150x150.png
--- a/web/gui/dashboard/images/ms-icon-310x150.png
+++ b/web/gui/dashboard/images/ms-icon-310x150.png
--- a/web/gui/dashboard/images/ms-icon-310x310.png
+++ b/web/gui/dashboard/images/ms-icon-310x310.png
--- a/web/gui/dashboard/images/ms-icon-36x36.png
+++ b/web/gui/dashboard/images/ms-icon-36x36.png
--- a/web/gui/dashboard/images/ms-icon-70x70.png
+++ b/web/gui/dashboard/images/ms-icon-70x70.png
--- a/web/gui/dashboard/images/netdata-logomark.svg
+++ b/web/gui/dashboard/images/netdata-logomark.svg
--- a/web/gui/dashboard/images/netdata.svg
+++ b/web/gui/dashboard/images/netdata.svg
--- a/web/gui/dashboard/images/packaging-beta-tag.svg
+++ b/web/gui/dashboard/images/packaging-beta-tag.svg
--- a/web/gui/dashboard/images/post.png
+++ b/web/gui/dashboard/images/post.png
--- a/web/gui/dashboard/images/seo-performance-128.png
+++ b/web/gui/dashboard/images/seo-performance-128.png
--- a/web/gui/dashboard/index-node-view.html
+++ b/web/gui/dashboard/index-node-view.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
+<html lang="en">
+<head>
+  <title>NetData TV 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 property="og:locale" content="en_US" />
+  <meta property="og:image" content="https://cloud.githubusercontent.com/assets/2662304/22945737/e98cd0c6-f2fd-11e6-96f1-5501934b0955.png"/>
+  <meta property="og:url" content="http://my-netdata.io/"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:site_name" content="netdata"/>
+  <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
+  <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
+  <!--  todo generate urls like this from prod build  -->
+  <!--    <link href="/dashboard/build/static/css/main.19393e92.chunk.css" rel="stylesheet">-->
+
+</head>
+<body>
+<div id="root"></div>
+
+</body>
+</html>
--- a/web/gui/dashboard/index.html
+++ b/web/gui/dashboard/index.html
--- a/web/gui/dashboard/infographic.html
+++ b/web/gui/dashboard/infographic.html
@ -69,9 +69,9 @@
            <b>New to netdata?</b> <a href="//my-netdata.io" target="_blank">Have a look at a netdata demo</a>. You will love it!
        </p>
        <p>
-            <embed style="padding-top: 10px; padding-bottom: 25px;" src="//registry.my-netdata.io/api/v1/badge.svg?chart=netdata.registry_entries&dimensions=persons&label=user%20base&units=null&value_color=blue&precision=0&v42" type="image/svg+xml" height="20" />
-            <embed style="padding-top: 10px; padding-bottom: 25px;" src="//registry.my-netdata.io/api/v1/badge.svg?chart=netdata.registry_entries&dimensions=machines&label=servers%20monitored&units=null&value_color=orange&precision=0&v42" type="image/svg+xml" height="20" />
-            <embed style="padding-top: 10px; padding-bottom: 25px;" src="//registry.my-netdata.io/api/v1/badge.svg?chart=netdata.registry_sessions&label=sessions%20served&units=null&value_color=yellowgreen&precision=0&v42" type="image/svg+xml" height="20" />
+            <embed style="padding-top: 10px; padding-botton: 25px;" src="//registry.my-netdata.io/api/v1/badge.svg?chart=netdata.registry_entries&dimensions=persons&label=user%20base&units=null&value_color=blue&precision=0&v42" type="image/svg+xml" height="20" />
+            <embed style="padding-top: 10px; padding-botton: 25px;" src="//registry.my-netdata.io/api/v1/badge.svg?chart=netdata.registry_entries&dimensions=machines&label=servers%20monitored&units=null&value_color=orange&precision=0&v42" type="image/svg+xml" height="20" />
+            <embed style="padding-top: 10px; padding-botton: 25px;" src="//registry.my-netdata.io/api/v1/badge.svg?chart=netdata.registry_sessions&label=sessions%20served&units=null&value_color=yellowgreen&precision=0&v42" type="image/svg+xml" height="20" />
        </p>
        <hr/>
    </div>
--- a/web/gui/dashboard/lib/bootstrap-3.3.7.min.js
+++ b/web/gui/dashboard/lib/bootstrap-3.3.7.min.js
--- a/web/gui/dashboard/lib/bootstrap-slider-10.0.0.min.js
+++ b/web/gui/dashboard/lib/bootstrap-slider-10.0.0.min.js
--- a/web/gui/dashboard/lib/bootstrap-table-1.11.0.min.js
+++ b/web/gui/dashboard/lib/bootstrap-table-1.11.0.min.js
--- a/web/gui/dashboard/lib/bootstrap-table-export-1.11.0.min.js
+++ b/web/gui/dashboard/lib/bootstrap-table-export-1.11.0.min.js
--- a/web/gui/dashboard/lib/bootstrap-toggle-2.2.2.min.js
+++ b/web/gui/dashboard/lib/bootstrap-toggle-2.2.2.min.js
--- a/web/gui/dashboard/lib/clipboard-polyfill-be05dad.js
+++ b/web/gui/dashboard/lib/clipboard-polyfill-be05dad.js
--- a/web/gui/dashboard/lib/d3-4.12.2.min.js
+++ b/web/gui/dashboard/lib/d3-4.12.2.min.js
--- a/web/gui/dashboard/lib/d3pie-0.2.1-netdata-3.js
+++ b/web/gui/dashboard/lib/d3pie-0.2.1-netdata-3.js
--- a/web/gui/dashboard/lib/dygraph-c91c859.min.js
+++ b/web/gui/dashboard/lib/dygraph-c91c859.min.js
--- a/web/gui/dashboard/lib/dygraph-smooth-plotter-c91c859.js
+++ b/web/gui/dashboard/lib/dygraph-smooth-plotter-c91c859.js
--- a/web/gui/dashboard/lib/fontawesome-all-5.0.1.min.js
+++ b/web/gui/dashboard/lib/fontawesome-all-5.0.1.min.js
--- a/web/gui/dashboard/lib/gauge-1.3.2.min.js
+++ b/web/gui/dashboard/lib/gauge-1.3.2.min.js
--- a/Show more
+++ b/Show more
				`@ -1 +0,0 @@`
				`34155f1eb3c8bb84b9ad0d8603a835f3865c3c477b2202b18eba59db73a5fbdd dashboard.tar.gz`