opensourcemirror
/
netdata
mirror of https://github.com/netdata/netdata.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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.
This commit is contained in:
Austin S. Hemmelgarn 2021-05-14 11:41:16 -04:00 committed by GitHub
parent 48dd96c532
commit 9574cb4c95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
177 changed files with 4787 additions and 1707 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

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

22
.github/workflows/checks.yml vendored
View File

@ -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

9
.github/workflows/dashboard-pr.yml vendored
View File

@ -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 }}

1
.gitignore vendored
View File

@ -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

3
Makefile.am
View File

@ -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 \

1
configure.ac
View File

@ -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

1
contrib/debian/rules
View File

@ -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; \

34
netdata-installer.sh
View File

@ -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

1
netdata.spec.in
View File

@ -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

14
packaging/bundle-dashboard.sh
View File

@ -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}"

1
packaging/dashboard.checksums
View File

@ -1 +0,0 @@
34155f1eb3c8bb84b9ad0d8603a835f3865c3c477b2202b18eba59db73a5fbdd dashboard.tar.gz

1
packaging/dashboard.version
View File

@ -1 +0,0 @@
v2.17.0

7
web/gui/.dashboard-notice.md Normal file
View File

@ -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.

99
web/gui/Makefile.am
View File

@ -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 $@

105
web/gui/bundle_dashboard.py Executable file
View File

@ -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()

198
web/gui/dashboard/Makefile.am Normal file
View File

@ -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)

1
web/gui/dashboard/README.md Symbolic link
View File

@ -0,0 +1 @@
../.dashboard-notice.md

47
web/gui/dashboard/asset-manifest.json Normal file
View File

@ -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"
]
}

0
web/gui/console.html → web/gui/dashboard/console.html
View File

12
web/gui/css/bootstrap-3.3.7.css → web/gui/dashboard/css/bootstrap-3.3.7.css vendored
View File

@ -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;

0
web/gui/css/bootstrap-slate-flat-3.3.7.css → web/gui/dashboard/css/bootstrap-slate-flat-3.3.7.css vendored
View File

0
web/gui/css/bootstrap-slider-10.0.0.min.css → web/gui/dashboard/css/bootstrap-slider-10.0.0.min.css vendored
View File

0
web/gui/css/bootstrap-theme-3.3.7.min.css → web/gui/dashboard/css/bootstrap-theme-3.3.7.min.css vendored
View File

0
web/gui/css/bootstrap-toggle-2.2.2.min.css → web/gui/dashboard/css/bootstrap-toggle-2.2.2.min.css vendored
View File

785
web/gui/dashboard/css/dashboard.css Normal file
View File

@ -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;
}

62
web/gui/dashboard.slate.css → web/gui/dashboard/css/dashboard.slate.css
View File

@ -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;

1020
web/gui/dashboard/dash-example.html Normal file
View File

File diff suppressed because it is too large Load Diff

675
web/gui/dashboard/dashboard-react.js Normal file
View File

@ -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

785
web/gui/dashboard/dashboard.css Normal file
View File

@ -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;
}

8
web/gui/dashboard.html → web/gui/dashboard/dashboard.html
View File

@ -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.

93
web/gui/dashboard.js → web/gui/dashboard/dashboard.js
View File

@ -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);

106
web/gui/dashboard.css → web/gui/dashboard/dashboard.slate.css
View File

@ -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;

0
web/gui/demo.html → web/gui/dashboard/demo.html
View File

4
web/gui/demo2.html → web/gui/dashboard/demo2.html
View File

@ -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">

36
web/gui/demosites.html → web/gui/dashboard/demosites.html
View File

@ -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>

4
web/gui/demosites2.html → web/gui/dashboard/demosites2.html
View File

@ -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"

0
web/gui/favicon.ico → web/gui/dashboard/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
web/gui/fonts/glyphicons-halflings-regular.eot → web/gui/dashboard/fonts/glyphicons-halflings-regular.eot
View File

0
web/gui/fonts/glyphicons-halflings-regular.svg → web/gui/dashboard/fonts/glyphicons-halflings-regular.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 106 KiB

0
web/gui/fonts/glyphicons-halflings-regular.ttf → web/gui/dashboard/fonts/glyphicons-halflings-regular.ttf
View File

0
web/gui/fonts/glyphicons-halflings-regular.woff → web/gui/dashboard/fonts/glyphicons-halflings-regular.woff
View File

0
web/gui/fonts/glyphicons-halflings-regular.woff2 → web/gui/dashboard/fonts/glyphicons-halflings-regular.woff2
View File

13
web/gui/goto-host-from-alarm.html → web/gui/dashboard/goto-host-from-alarm.html
View File

@ -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
;
}

0
web/gui/images/alert-128-orange.png → web/gui/dashboard/images/alert-128-orange.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

0
web/gui/images/alert-128-red.png → web/gui/dashboard/images/alert-128-red.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

0
web/gui/images/alert-multi-size-orange.ico → web/gui/dashboard/images/alert-multi-size-orange.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 110 KiB

0
web/gui/images/alert-multi-size-red.ico → web/gui/dashboard/images/alert-multi-size-red.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 110 KiB

0
web/gui/images/android-icon-144x144.png → web/gui/dashboard/images/android-icon-144x144.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

0
web/gui/images/android-icon-192x192.png → web/gui/dashboard/images/android-icon-192x192.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

0
web/gui/images/android-icon-36x36.png → web/gui/dashboard/images/android-icon-36x36.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 539 B

After

Width:  |  Height:  |  Size: 539 B

0
web/gui/images/android-icon-48x48.png → web/gui/dashboard/images/android-icon-48x48.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 762 B

After

Width:  |  Height:  |  Size: 762 B

0
web/gui/images/android-icon-72x72.png → web/gui/dashboard/images/android-icon-72x72.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
web/gui/images/android-icon-96x96.png → web/gui/dashboard/images/android-icon-96x96.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

0
web/gui/images/animated.gif → web/gui/dashboard/images/animated.gif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 380 KiB

After

Width:  |  Height:  |  Size: 380 KiB

0
web/gui/images/apple-icon-114x114.png → web/gui/dashboard/images/apple-icon-114x114.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

0
web/gui/images/apple-icon-120x120.png → web/gui/dashboard/images/apple-icon-120x120.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

0
web/gui/images/apple-icon-144x144.png → web/gui/dashboard/images/apple-icon-144x144.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

0
web/gui/images/apple-icon-152x152.png → web/gui/dashboard/images/apple-icon-152x152.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

0
web/gui/images/apple-icon-180x180.png → web/gui/dashboard/images/apple-icon-180x180.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

0
web/gui/images/apple-icon-57x57.png → web/gui/dashboard/images/apple-icon-57x57.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

0
web/gui/images/apple-icon-60x60.png → web/gui/dashboard/images/apple-icon-60x60.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

0
web/gui/images/apple-icon-72x72.png → web/gui/dashboard/images/apple-icon-72x72.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

0
web/gui/images/apple-icon-76x76.png → web/gui/dashboard/images/apple-icon-76x76.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

0
web/gui/images/apple-icon-precomposed.png → web/gui/dashboard/images/apple-icon-precomposed.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

0
web/gui/images/apple-icon.png → web/gui/dashboard/images/apple-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

0
web/gui/images/banner-icon-144x144.png → web/gui/dashboard/images/banner-icon-144x144.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

0
web/gui/images/check-mark-2-128-green.png → web/gui/dashboard/images/check-mark-2-128-green.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

0
web/gui/images/check-mark-2-multi-size-green.ico → web/gui/dashboard/images/check-mark-2-multi-size-green.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 109 KiB

After

Width:  |  Height:  |  Size: 109 KiB

0
web/gui/images/favicon-128.png → web/gui/dashboard/images/favicon-128.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

0
web/gui/images/favicon-16x16.png → web/gui/dashboard/images/favicon-16x16.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 285 B

After

Width:  |  Height:  |  Size: 285 B

0
web/gui/images/favicon-196x196.png → web/gui/dashboard/images/favicon-196x196.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

0
web/gui/images/favicon-32x32.png → web/gui/dashboard/images/favicon-32x32.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 454 B

After

Width:  |  Height:  |  Size: 454 B

0
web/gui/images/favicon-96x96.png → web/gui/dashboard/images/favicon-96x96.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

0
web/gui/images/favicon.ico → web/gui/dashboard/images/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
web/gui/images/ms-icon-144x144.png → web/gui/dashboard/images/ms-icon-144x144.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

0
web/gui/images/ms-icon-150x150.png → web/gui/dashboard/images/ms-icon-150x150.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

0
web/gui/images/ms-icon-310x150.png → web/gui/dashboard/images/ms-icon-310x150.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

0
web/gui/images/ms-icon-310x310.png → web/gui/dashboard/images/ms-icon-310x310.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

0
web/gui/images/ms-icon-36x36.png → web/gui/dashboard/images/ms-icon-36x36.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 536 B

After

Width:  |  Height:  |  Size: 536 B

0
web/gui/images/ms-icon-70x70.png → web/gui/dashboard/images/ms-icon-70x70.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

0
web/gui/images/netdata-logomark.svg → web/gui/dashboard/images/netdata-logomark.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 701 B

After

Width:  |  Height:  |  Size: 701 B

0
web/gui/images/netdata.svg → web/gui/dashboard/images/netdata.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

0
web/gui/images/packaging-beta-tag.svg → web/gui/dashboard/images/packaging-beta-tag.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

0
web/gui/images/post.png → web/gui/dashboard/images/post.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

0
web/gui/images/seo-performance-128.png → web/gui/dashboard/images/seo-performance-128.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

30
web/gui/dashboard/index-node-view.html Normal file
View File

@ -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>

16
web/gui/dashboard/index.html Normal file
View File

File diff suppressed because one or more lines are too long

6
web/gui/infographic.html → web/gui/dashboard/infographic.html
View File

@ -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>

0
web/gui/lib/bootstrap-3.3.7.min.js → web/gui/dashboard/lib/bootstrap-3.3.7.min.js vendored
View File

0
web/gui/lib/bootstrap-slider-10.0.0.min.js → web/gui/dashboard/lib/bootstrap-slider-10.0.0.min.js vendored
View File

0
web/gui/lib/bootstrap-table-1.11.0.min.js → web/gui/dashboard/lib/bootstrap-table-1.11.0.min.js vendored
View File

0
web/gui/lib/bootstrap-table-export-1.11.0.min.js → web/gui/dashboard/lib/bootstrap-table-export-1.11.0.min.js vendored
View File

0
web/gui/lib/bootstrap-toggle-2.2.2.min.js → web/gui/dashboard/lib/bootstrap-toggle-2.2.2.min.js vendored
View File

0
web/gui/lib/clipboard-polyfill-be05dad.js → web/gui/dashboard/lib/clipboard-polyfill-be05dad.js
View File

0
web/gui/lib/d3-4.12.2.min.js → web/gui/dashboard/lib/d3-4.12.2.min.js vendored
View File

0
web/gui/lib/d3pie-0.2.1-netdata-3.js → web/gui/dashboard/lib/d3pie-0.2.1-netdata-3.js
View File

0
web/gui/lib/dygraph-c91c859.min.js → web/gui/dashboard/lib/dygraph-c91c859.min.js vendored
View File

0
web/gui/lib/dygraph-smooth-plotter-c91c859.js → web/gui/dashboard/lib/dygraph-smooth-plotter-c91c859.js
View File

0
web/gui/lib/fontawesome-all-5.0.1.min.js → web/gui/dashboard/lib/fontawesome-all-5.0.1.min.js vendored
View File

0
web/gui/lib/gauge-1.3.2.min.js → web/gui/dashboard/lib/gauge-1.3.2.min.js vendored
View File

Some files were not shown because too many files have changed in this diff Show More