Switched to the new React dashboard code as the default dashboard. (#8363)

* Initial installer components for new dashboard.

* Add script to switch between react and classic dashboards.

* Update to newest version of react dashboard.

* Properly substitute webdir.

* Fix installation of dashboard switch script.

* Properly handle file ownership and permissions.

* Fix install of react dashboard.

* Add dashboard_info.js to the react dashboard tree.

* Update to version 0.3.2 of the React dashboard.

* Switch using file lists instead of nuking old directory.

* Properly handle updates.

* Fix variable naming in switching script.

* Fix copying of files in switching script.

* Fix switching script invocation in installer.

* update dashboard to v0.4.0

* v0.4.1

gauge & easypiechart width update
proper centering when clicking alarm in alarms-log
keep loader until react app is ready
fix top bar not showing when highlighting (few lines of code)
"check known URLs" issue
"reset" options is not hooked up
go to host node from streamed node (low priority, because that's removed on release)

* Persist user selection of dashboard across updates.

* update dashboard to v0.4.2 (temperature, units options fixed)

* v0.4.5
fixed print modal progress text
force reload on sync-selection option change

* fix memory leak on firefox

* fix active-alarms number in main.js header
fix "back to normal" notifications constantly throwing in loop

* fix active-alarms fetching

* support subpaths

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

.gitignore

@@ -128,6 +128,7 @@ collectors/python.d.plugin/python.d.plugin
 collectors/fping.plugin/fping.plugin
 collectors/ioping.plugin/ioping.plugin
 collectors/go.d.plugin
+web/netdata-switch-dashboard.sh
 
 # installer generated files
 /netdata-uninstaller.sh

Makefile.am

@@ -60,6 +60,8 @@ dist_noinst_DATA = \
     package.json \
     docs \
     packaging/version \
+    packaging/dashboard.version \
+    packaging/dashboard.checksums \
     packaging/go.d.version \
     packaging/go.d.checksums \
     packaging/libwebsockets.version \

build/subst.inc

@@ -8,6 +8,7 @@
 		-e 's#[@]cachedir_POST@#$(cachedir)#g' \
 		-e 's#[@]registrydir_POST@#$(registrydir)#g' \
 		-e 's#[@]varlibdir_POST@#$(varlibdir)#g' \
+		-e 's#[@]webdir_POST@#$(webdir)#g' \
 		$< > $@.tmp; then \
 		mv "$@.tmp" "$@"; \
 	else \

netdata-installer.sh

@@ -571,6 +571,13 @@ bundle_libwebsockets() {
 
 bundle_libwebsockets
 
+# -----------------------------------------------------------------------------
+# If we have the dashboard switching logic, make sure we're on the classic
+# dashboard during the install (updates don't work correctly otherwise).
+if [ -x "${NETDATA_PREFIX}/usr/libexec/netdata-switch-dashboard.sh" ] ; then
+  "${NETDATA_PREFIX}/usr/libexec/netdata-switch-dashboard.sh" classic
+fi
+
 # -----------------------------------------------------------------------------
 echo >&2
 progress "Run autotools to configure the build environment"
@@ -964,6 +971,57 @@ fi
 
 # -----------------------------------------------------------------------------
 
+copy_react_dashboard() {
+  run rm -rf "${NETDATA_WEB_DIR}-react"
+  run rm -rf "${NETDATA_WEB_DIR}-classic"
+  run cp -a "${1}/" "${NETDATA_WEB_DIR}-react"
+  run cp -a "${NETDATA_WEB_DIR}/dashboard_info.js" "${NETDATA_WEB_DIR}-react"
+  run cp -a "${NETDATA_WEB_DIR}/dashboard.slate.css" "${NETDATA_WEB_DIR}-react"
+  run cp -a "${NETDATA_WEB_DIR}/dashboard.css" "${NETDATA_WEB_DIR}-react"
+  run cp -a "${NETDATA_WEB_DIR}/main.css" "${NETDATA_WEB_DIR}-react"
+  run echo "$(cd ${NETDATA_WEB_DIR}-react && find . -type f | sed -e 's/\.\///')" > "${NETDATA_WEB_DIR}-react/.files"
+  run cp -a "${NETDATA_WEB_DIR}" "${NETDATA_WEB_DIR}-classic"
+  run echo "$(find web/gui -type f | sed -e "s/web\/gui\///")" > "${NETDATA_WEB_DIR}-classic/.files"
+  run chown -R "${NETDATA_WEB_USER}:${NETDATA_WEB_GROUP}" "${NETDATA_WEB_DIR}-react"
+}
+
+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
+      if run "${NETDATA_PREFIX}/usr/libexec/netdata/netdata-switch-dashboard.sh" "${NETDATA_SELECTED_DASHBOARD:-react}" ; then
+        run_ok "React dashboard installed."
+      else
+        run_failed "Failed to switch to React dashboard."
+        run rm -rf "${NETDATA_WEB_DIR}"
+        run cp -a "${NETDATA_WEB_DIR}-classic" "${NETDATA_WEB_DIR}"
+      fi
+    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
@@ -1512,6 +1570,7 @@ REINSTALL_OPTIONS="${REINSTALL_OPTIONS}"
 RELEASE_CHANNEL="${RELEASE_CHANNEL}"
 IS_NETDATA_STATIC_BINARY="${IS_NETDATA_STATIC_BINARY}"
 NETDATA_LIB_DIR="${NETDATA_LIB_DIR}"
+NETDATA_SELECTED_DASHBOARD="${NETDATA_SELECTED_DASHBOARD:-react}"
 EOF
 run chmod 0644 "${NETDATA_USER_CONFIG_DIR}/.environment"
 

packaging/dashboard.checksums

@@ -0,0 +1 @@
+42e43aa7caf411f01799c2858621f9cd23061bf55e3ceef3f1bb9b2327ff3172  dashboard.tar.gz

packaging/dashboard.version

@@ -0,0 +1 @@
+v0.4.9

packaging/installer/netdata-updater.sh

@@ -185,8 +185,12 @@ update() {
       do_not_start="--dont-start-it"
     fi
 
+    if [ -n "${NETDATA_SELECTED_DASHBOARD}" ] ; then
+        env="NETDATA_SELECTED_DASHBOARD=${NETDATA_SELECTED_DASHBOARD}"
+    fi
+
     info "Re-installing netdata..."
-    eval "./netdata-installer.sh ${REINSTALL_OPTIONS} --dont-wait ${do_not_start}" >&3 2>&3 || fatal "FAILED TO COMPILE/INSTALL NETDATA"
+    eval "${env} ./netdata-installer.sh ${REINSTALL_OPTIONS} --dont-wait ${do_not_start}" >&3 2>&3 || fatal "FAILED TO COMPILE/INSTALL NETDATA"
 
     # We no longer store checksum info here. but leave this so that we clean up all environment files upon next update.
     sed -i '/NETDATA_TARBALL/d' "${ENVIRONMENT_FILE}"

web/Makefile.am

@@ -9,8 +9,20 @@ SUBDIRS = \
     server \
     $(NULL)
 
+CLEANFILES = \
+    netdata-switch-dashboard.sh \
+    $(NULL)
+
 usersslconfigdir=$(configdir)/ssl
 
+include $(top_srcdir)/build/subst.inc
+SUFFIXES = .in
+
+scriptsdir=${prefix}/libexec/netdata
+scripts_SCRIPTS = \
+    netdata-switch-dashboard.sh \
+    $(NULL)
+
 # Explicitly install directories to avoid permission issues due to umask
 install-exec-local:
 	$(INSTALL) -d $(DESTDIR)$(usersslconfigdir)
@@ -19,4 +31,5 @@ dist_noinst_DATA = \
     README.md \
     gui/confluence/README.md \
     gui/custom/README.md \
+    netdata-switch-dashboard.sh.in \
     $(NULL)

web/netdata-switch-dashboard.sh.in

@@ -0,0 +1,60 @@
+#!/bin/sh
+# SPDX-License-Identifier: GPL-3.0-or-later
+# (c) 2020 Netdata Incorporated
+
+set -e
+
+webdir="@webdir_POST@"
+configdir="@configdir_POST@"
+
+usage() {
+    cat << EOF
+USAGE: switch-netdata-dashboard.sh <dashboard-name>
+
+<dashboard-name> is required, it specifies which dashboard to use. Valid
+arguments are 'react' to use the new React dashboard, and 'classic'
+to use the old dashboard.
+
+Once run, you can use the new dashboard by performing a valdiating reload
+in your browser (Ctrl-Shift-R in most browsers).
+EOF
+exit 1
+}
+
+switch_dashboard() {
+    new="${1}"
+    path="${webdir}-${new}"
+
+    echo "Switching to ${new} dashboard..."
+
+    for dashboard in classic react ; do
+        # shellcheck disable=SC2013
+        for item in $(cat ${webdir}-${dashboard}/.files) ; do
+            rm -f "${webdir}/${item}"
+        done
+    done
+
+    cp -a "${path}/." "${webdir}"
+
+    if [ -e "${configdir}/.environment" ] ; then
+        if grep -q NETDATA_SELECTED_DASHBOARD "${configdir}/.environment" ; then
+            sed -E "s/^NETDATA_SELECTED_DASHBOARD=\".*\"$/NETDATA_SELECTED_DASHBOARD=\"${new}\"/" "${configdir}/.environment"
+        else
+            echo "NETDATA_SELECTED_DASHBOARD=\"${new}\"" >> "${configdir}/.environment"
+        fi
+    fi
+
+    exit 0
+}
+
+case "${1}" in
+    react)
+        switch_dashboard react
+        ;;
+    classic)
+        switch_dashboard classic
+        ;;
+    *)
+        usage
+        ;;
+esac