Agent dashboard reorganization. (#15200)

* Add v0 copy of legacy dashboard.

* Update dashboard bundling script and remove old copy of single-node dashboard.

* Add updated single-node dashboard to v1 path.

* Add dummy `switch.html` page.

* Add v2 dashboard.

* Exclude v2 dashboard from eslint checking.

* Update to latest v2 dashboard.

.eslintignore

@@ -1,2 +1,3 @@
 **/*{.,-}min.js
-web/gui/dashboard/*
+web/gui/v1/*
+web/gui/v2/*

.github/workflows/dashboard-pr.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Update Files
         id: update
         run: |
-          web/gui/bundle_dashboard.py ${{ github.event.inputs.dashboard_version }}
+          web/gui/bundle_dashboard_v1.py ${{ github.event.inputs.dashboard_version }}
       - name: Create Pull Request
         id: pr
         uses: peter-evans/create-pull-request@v5

.github/workflows/review.yml

@@ -54,7 +54,7 @@ jobs:
         run: |
           if [ "${{ contains(github.event.pull_request.labels.*.name, 'run-ci/eslint') }}" = "true" ]; then
             echo "run=true" >> "${GITHUB_OUTPUT}"
-          elif git diff --name-only origin/${{ github.base_ref }} HEAD | grep -v "web/gui/dashboard" | grep -Eq '.*\.js|node\.d\.plugin\.in' ; then
+          elif git diff --name-only origin/${{ github.base_ref }} HEAD | grep -v "web/gui/v1" | grep -v "web/gui/v2" | grep -Eq '.*\.js|node\.d\.plugin\.in' ; then
             echo "run=true" >> "${GITHUB_OUTPUT}"
             echo 'JS files have changed, need to run ESLint.'
           else

configure.ac

@@ -1996,7 +1996,8 @@ AC_CONFIG_FILES([
     web/api/queries/trimmed_mean/Makefile
     web/api/health/Makefile
     web/gui/Makefile
-    web/gui/dashboard/Makefile
+    web/gui/v1/Makefile
+    web/gui/v2/Makefile
     web/rtc/Makefile
     web/server/Makefile
     web/server/static/Makefile

web/gui/.dashboard-v2-notice.md

@@ -0,0 +1,8 @@
+# Do not edit any files in this directory!
+
+If you spot any errors or bugs in these files please open a bug report
+at https://github.com/netdata/netdata/issues/new/choose.
+
+These files are maintained in a seprate private repository and copied
+here when they are updated there, so any changes made in this directory
+will eventually be overwritten.

web/gui/Makefile.am

@@ -9,7 +9,8 @@ CLEANFILES = \
     $(NULL)
 
 SUBDIRS = \
-    dashboard \
+    v1 \
+    v2 \
     $(NULL)
 
 DASHBOARD_JS_FILES = \
@@ -52,6 +53,7 @@ dist_noinst_DATA = \
 
 dist_web_DATA = \
     dashboard.js \
+    $(srcdir)/switch.html \
     $(srcdir)/dashboard_info.js \
     $(srcdir)/dashboard_info_custom_example.js \
     $(srcdir)/main.css \
@@ -64,6 +66,11 @@ dist_webold_DATA = \
     $(srcdir)/old/index.html \
     $(NULL)
 
+webv0dir=$(webdir)/v0
+dist_webv0_DATA = \
+    $(srcdir)/old/index.html \
+    $(NULL)
+
 webstaticdir=$(webdir)/static/img
 dist_webstatic_DATA = \
     $(srcdir)/static/img/netdata-logomark.svg \

web/gui/bundle_dashboard.py → web/gui/bundle_dashboard_v1.py

@@ -2,7 +2,7 @@
 #
 # Copyright: © 2021 Netdata Inc.
 # SPDX-License-Identifier: GPL-3.0-or-later
-'''Bundle the dashboard code into the agent repo.
+'''Bundle the v1 dashboard code into the agent repo.
 
    This is designed to be run as part of a GHA workflow, but will work fine outside of one.'''
 
@@ -15,7 +15,7 @@ from pathlib import Path
 
 os.chdir(Path(__file__).parent.absolute())
 
-BASEPATH = Path('dashboard')
+BASEPATH = Path('v1')
 
 URLTEMPLATE = 'https://github.com/netdata/dashboard/releases/download/{0}/dashboard.tar.gz'
 
@@ -32,6 +32,12 @@ dist_web_DATA = \\
     {0} \\
     $(NULL)
 
+webv1dir=$(webdir)/v1
+
+dist_webv1_DATA = \\
+    index.html \\
+    $(NULL)
+
 webcssdir=$(webdir)/css
 dist_webcss_DATA = \\
     {1} \\

web/gui/bundle_dashboard_v2.py

@@ -0,0 +1,183 @@
+#!/usr/bin/env python3
+#
+# Copyright: © 2023 Netdata Inc.
+# SPDX-License-Identifier: GPL-3.0-or-later
+'''Bundle the v2 dashboard code into the agent repo.
+
+   This is designed to be run as part of a GHA workflow, but will work fine outside of one.'''
+
+import os
+import shutil
+import subprocess
+
+from pathlib import Path
+
+os.chdir(Path(__file__).parent.absolute())
+
+BASEDIR = 'v2'
+
+BASEPATH = Path(BASEDIR)
+
+TMPPATH = Path('tmp')
+
+URLSRC = 'https://app.netdata.cloud/agent.tar.gz'
+
+MAKEFILETEMPLATE = '''
+# Auto-generated by bundle_dashboard_v2.py
+# Copyright: © 2023 Netdata Inc.
+# SPDX-License-Identifier: GPL-3.0-or-later
+MAINTAINERCLEANFILES = $(srcdir)/Makefile.in
+
+dist_noinst_DATA = \\
+    $(srcdir)/README.md
+
+webv2dir=$(webdir)/v2
+
+dist_webv2_DATA = \\
+    {0} \\
+    $(NULL)
+
+webv2staticdir=$(webv2dir)/static
+dist_webv2static_DATA = \\
+    {1} \\
+    $(NULL)
+
+webv2staticemailimgdir=$(webv2staticdir)/email/img
+dist_webv2staticemailimg_DATA = \\
+    {2} \\
+    $(NULL)
+
+webv2staticimgdir=$(webv2staticdir)/img
+dist_webv2staticimg_DATA = \\
+    {3} \\
+    $(NULL)
+
+webv2staticimgintegrationsdir=$(webv2staticimgdir)/integrations
+dist_webv2staticimgintegrations_DATA = \\
+    {4} \\
+    $(NULL)
+
+webv2staticimglogososdir=$(webv2staticimgdir)/logos/os
+dist_webv2staticimglogosos_DATA = \\
+    {5} \\
+    $(NULL)
+
+webv2staticimglogosservicesdir=$(webv2staticimgdir)/logos/services
+dist_webv2staticimglogosservices_DATA = \\
+    {6} \\
+    $(NULL)
+
+webv2staticimgmaildir=$(webv2staticimgdir)/mail
+dist_webv2staticimgmail_DATA = \\
+    {7} \\
+    $(NULL)
+
+webv2staticsitealarmsdir=$(webv2staticdir)/site/alarms
+dist_webv2staticsitealarms_DATA = \\
+    {8} \\
+    $(NULL)
+
+webv2staticsitepageserror404dir=$(webv2staticdir)/site/pages/error-404
+dist_webv2staticsitepageserror404_DATA = \\
+    {9} \\
+    $(NULL)
+
+webv2staticsitepageserror500dir=$(webv2staticdir)/site/pages/error-500
+dist_webv2staticsitepageserror500_DATA = \\
+    {10} \\
+    $(NULL)
+
+webv2staticsitepageserror501dir=$(webv2staticdir)/site/pages/error-501
+dist_webv2staticsitepageserror501_DATA = \\
+    {11} \\
+    $(NULL)
+
+webv2staticsitepageserror502dir=$(webv2staticdir)/site/pages/error-502
+dist_webv2staticsitepageserror502_DATA = \\
+    {12} \\
+    $(NULL)
+
+webv2staticsitepageserror503dir=$(webv2staticdir)/site/pages/error-503
+dist_webv2staticsitepageserror503_DATA = \\
+    {13} \\
+    $(NULL)
+
+webv2staticsitepageserror5xxdir=$(webv2staticdir)/site/pages/error-5xx
+dist_webv2staticsitepageserror5xx_DATA = \\
+    {14} \\
+    $(NULL)
+
+webv2staticsitepagesholding503dir=$(webv2staticdir)/site/pages/holding-page-503
+dist_webv2staticsitepagesholding503_DATA = \\
+    {15} \\
+    $(NULL)
+'''
+
+
+def copy_dashboard():
+    '''Fetch and bundle the dashboard code.'''
+    print('Preparing target directory')
+    shutil.rmtree(BASEPATH)
+    TMPPATH.mkdir()
+    print('::group::Fetching dashboard release tarball')
+    subprocess.check_call(f'curl -L -o agent.tar { URLSRC }', shell=True)
+    print('::endgroup::')
+    print('::group::Extracting dashboard release tarball')
+    subprocess.check_call(f"tar -xvf agent.tar -C { TMPPATH } --strip-components=1 --exclude='*.br' --exclude='*.gz'", shell=True)
+    print('::endgroup::')
+    print('Copying files')
+    (TMPPATH / BASEDIR).rename(BASEPATH)
+    (TMPPATH / 'index.html').rename(Path('./v2live.html'))
+    shutil.copytree(TMPPATH / 'static', Path('./static'), dirs_exist_ok=True)
+    shutil.rmtree(TMPPATH)
+    print('Copying README.md')
+    BASEPATH.joinpath('README.md').symlink_to('../.dashboard-v2-notice.md')
+    print('Removing dashboard release tarball')
+    BASEPATH.joinpath('..', 'agent.tar').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([("$(srcdir)/" + str(f)) for f in files])
+
+
+def write_makefile():
+    '''Write out the makefile for the dashboard code.'''
+    print('Generating Makefile')
+    MAKEFILEDATA = MAKEFILETEMPLATE.format(
+        genfilelist(BASEPATH),
+        genfilelist(BASEPATH.joinpath('static')),
+        genfilelist(BASEPATH.joinpath('static', 'email', 'img')),
+        genfilelist(BASEPATH.joinpath('static', 'img')),
+        genfilelist(BASEPATH.joinpath('static', 'img', 'integrations')),
+        genfilelist(BASEPATH.joinpath('static', 'img', 'logos', 'os')),
+        genfilelist(BASEPATH.joinpath('static', 'img', 'logos', 'services')),
+        genfilelist(BASEPATH.joinpath('static', 'img', 'mail')),
+        genfilelist(BASEPATH.joinpath('static', 'site', 'alarms')),
+        genfilelist(BASEPATH.joinpath('static', 'site', 'pages', 'error-404')),
+        genfilelist(BASEPATH.joinpath('static', 'site', 'pages', 'error-500')),
+        genfilelist(BASEPATH.joinpath('static', 'site', 'pages', 'error-501')),
+        genfilelist(BASEPATH.joinpath('static', 'site', 'pages', 'error-502')),
+        genfilelist(BASEPATH.joinpath('static', 'site', 'pages', 'error-503')),
+        genfilelist(BASEPATH.joinpath('static', 'site', 'pages', 'error-5xx')),
+        genfilelist(BASEPATH.joinpath('static', 'site', 'pages', 'holding-page-503')),
+    )
+
+    BASEPATH.joinpath('Makefile.am').write_text(MAKEFILEDATA)
+
+
+def list_changed_files():
+    '''Create a list of changed files, and set it in an environment variable.'''
+    if 'GITHUB_ENV' in os.environ:
+        print('Generating file list for commit.')
+        subprocess.check_call('echo "COMMIT_FILES<<EOF" >> $GITHUB_ENV', shell=True)
+        subprocess.check_call('git status --porcelain=v1 --no-renames --untracked-files=all | rev | cut -d \' \' -f 1 | rev >> $GITHUB_ENV', shell=True)
+        subprocess.check_call('echo "EOF" >> $GITHUB_ENV', shell=True)
+
+
+copy_dashboard()
+write_makefile()
+list_changed_files()

web/gui/static/splash.css

@@ -0,0 +1,154 @@
+:root {
+  --main-bg: #080a0a;
+  --font-color: #b7c2c2;
+  --primary-green: #00ab44;
+  --column-gap: 8px;
+  --logo-color: #f1fff7;
+  --button-text-green: #00cd51;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  background: var(--main-bg);
+  color: var(--font-color);
+  font-weight: 200;
+  font-size: 14px;
+  line-height: 20px;
+}
+#agent-splash-screen a:link,
+#agent-splash-screen a:visited,
+#agent-splash-screen a:active {
+  font-size: 12px;
+  color: var(--primary-green);
+  font-weight: normal;
+}
+#agent-splash-screen .hero {
+  position: relative;
+  display: flex;
+  width: 500px;
+  margin: auto;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: calc(var(--column-gap) * 4);
+  text-align: center;
+  margin: 120px auto 32px;
+}
+#agent-splash-screen .logo-container {
+  position: relative;
+}
+#agent-splash-screen .logo-blur {
+  position: absolute;
+  width: 315px;
+  height: 315px;
+  left: -100%;
+  top: -100%;
+  filter: blur(30px);
+  pointer-events: none;
+}
+#agent-splash-screen .logo {
+  filter: drop-shadow(-6px -2px 20px rgba(255, 255, 255, 0.6)) blur(0.7px);
+}
+
+#agent-splash-screen.loading .logo {
+  animation: glow 800ms linear infinite alternate;
+}
+#agent-splash-screen .headings {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--column-gap) * 2);
+  height: 104px;
+}
+#agent-splash-screen .title {
+  font-size: 22px;
+  line-height: 26px;
+  font-weight: 200;
+  margin: 0;
+}
+#agent-splash-screen .subtitle {
+  font-size: 14px;
+  line-height: 20px;
+  margin: 0;
+}
+#agent-splash-screen .flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+#agent-splash-screen .flex-column {
+  flex-direction: column;
+}
+#agent-splash-screen a.button {
+  appearance: none;
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+  text-decoration: none;
+  text-align: center;
+}
+#agent-splash-screen a.button svg {
+  width: 22px;
+  height: 16px;
+}
+#agent-splash-screen a.button.ghost {
+  background: transparent;
+  color: var(--button-text-green);
+  padding: 4px 6px;
+  font-size: 14px;
+  font-weight: 200;
+}
+#agent-splash-screen a.button.ghost:hover {
+  background: #00441b;
+}
+
+#agent-splash-screen a.button.large {
+  background: transparent;
+  border: 1px solid var(--primary-green);
+  font-size: 18px;
+  padding: 12px;
+  color: var(--button-text-green);
+  width: 100%;
+  font-weight: 200;
+}
+#agent-splash-screen a.button.large:hover {
+  background: #00441b;
+}
+#agent-splash-screen .loading-message .subtitle {
+  display:none;
+}
+#agent-splash-screen.loading .loading-message .subtitle {
+  display:block;
+  height: 56px;
+}
+#agent-splash-screen .loading-message .flex-center {
+  display: none;
+}
+#agent-splash-screen.error .loading-message .flex-center {
+  display: flex;
+  margin: 8px auto;
+}
+#agent-splash-screen .dashboard-buttons {
+  width: 320px;
+  margin: auto;
+  gap: 24px;
+}
+#agent-splash-screen .terms {
+  position: absolute;
+  bottom: 40px;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+@keyframes glow {
+  from {
+    filter: drop-shadow(-6px -2px 20px rgba(255, 255, 255, 0.9)) blur(0.9px);
+  }
+  to {
+    filter: drop-shadow(-6px -2px 20px rgba(255, 255, 255, 0.3)) blur(0.4px);
+  }
+}