diff options
author | Thomas Anderson <tnyeanderson@users.noreply.github.com> | 2021-05-10 10:00:50 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-05-10 17:00:50 +0300 |
commit | cd089089f75a4ebc0069415fa50e0e3fd69e1460 (patch) | |
tree | 70b89f8f1cad81c55b5a6324e2bf48288edac984 | |
parent | 695342fc7a27a517e25900e2c6e9602a3131c53c (diff) |
Remove dash-example, place in community repo (#11077)
* Remove dash-example, place in community repo
* Remove Makefile reference to dash-example.html
-rw-r--r-- | web/gui/Makefile.am | 1 | ||||
-rw-r--r-- | web/gui/custom/README.md | 62 | ||||
-rw-r--r-- | web/gui/dash-example.html | 1055 |
3 files changed, 0 insertions, 1118 deletions
diff --git a/web/gui/Makefile.am b/web/gui/Makefile.am index c69380f934..7901884e2f 100644 --- a/web/gui/Makefile.am +++ b/web/gui/Makefile.am @@ -67,7 +67,6 @@ dist_web_DATA = \ refresh-badges.js \ sitemap.xml \ tv.html \ - dash-example.html \ version.txt \ $(NULL) diff --git a/web/gui/custom/README.md b/web/gui/custom/README.md index e6f531bd77..323f1b56b2 100644 --- a/web/gui/custom/README.md +++ b/web/gui/custom/README.md @@ -69,70 +69,8 @@ header: </html> ``` -## Dash (Multi-Host Dashboard) - -`dash-example.html` is an all-in-one page that automatically fetches graphs from all your hosts. Just add your graphs and charts (or use the defaults) one time using the `dash-*` syntax, and your selections will be automatically replicated for all of your hosts; showing alarms and graphs for all your hosts on **one page!** - -__**Dash will only work if you have implemented netdata streaming using `stream.conf`. It is not part of Netdata Cloud.**__ - -`dash-example.html` was created as an experiment to demonstrate the capabilities of netdata in a multi-host environment. If you desire more features, submit a pull request or check out Netdata Cloud! - -### Configure Dash - -First, rename the file so it doesn't get overwritten. For instance, with a webroot at `/usr/share/netdata/web`: -```bash -cp /usr/share/netdata/web/dash-example.html /usr/share/netdata/web/dash.html -``` - -> NOTE: Ensure the owner/permissions match those in the rest of the files in the directory. Usually `netdata:netdata` and `0644`. - -Find and change the following lines in `dash.html` to reflect your Netdata URLs. The `REVERSE_PROXY_URL` is optional and only used if you access your Netdata dashboard through a reverse proxy. If it is not set, it defaults to the `NETDATA_HOST` URL. - -```js -/** - * Netdata URLS. If you use a reverse proxy, add it and uncomment the line below - */ -NETDATA_HOST = 'https://localhost:19999'; -// REVERSE_PROXY_URL = 'https://my-domain.com/stats' -``` - -### The `dash-*` Syntax - -If you want to change the graphs or styling to fit your needs, just add an element to the page as shown. Child divs will be generated to create your graph/chart, and charts are replicated for each streamed host. -``` -<div class="dash-graph" <---- Use class dash-graph for line graphs, etc - data-dash-netdata="system.cpu" <---- REQUIRED: Use data-dash-netdata to set the data source - data-dygraph-valuerange="[0, 100]"> <---- OPTIONAL: This overrides the default config. Any other data-* attributes will -</div> be added to the generated div, so you can set any desired options here - -<div class="dash-chart" <---- Use class dash-chart for pie charts, etc. CHARTS ARE SQUARE - data-dash-netdata="system.io" <---- REQUIRED: Use data-dash-netdata to set the data source - data-dimensions="in" <---- Use this to override or append default options - data-title="Disk Read" <---- Use this to override or append default options - data-common-units="dash.io"> <---- Use this to override or append default options -</div> -``` - -To change the sizes of graphs and charts, find the `DASH_OPTIONS` object in `dash.html` and set your preferences: -```js -/* - * Change your graph/chart dimensions here. Host columns will automatically adjust. - * Charts are square! Their width is the same as their height. - */ -DASH_OPTIONS = { - graph_width: '40em', - graph_height: '20em', - chart_width: '10em' // Charts are square -} -``` - -To change the display order of your hosts, which is saved in localStorage, click the settings gear in the lower right corner - -We hope you like it! - --- - ## dashboard.js To add Netdata charts to any web page (dedicated to Netdata or not), you need to diff --git a/web/gui/dash-example.html b/web/gui/dash-example.html deleted file mode 100644 index a47b6e52fd..0000000000 --- a/web/gui/dash-example.html +++ /dev/null @@ -1,1055 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <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"> -</head> -<body> - <script type="application/javascript"> - /***************** - * CONFIGURATION * - *****************/ - - /** - * Netdata URLS. If you use a reverse proxy, add it and uncomment the line below - */ - NETDATA_HOST = 'https://localhost:19999'; - // REVERSE_PROXY_URL = 'https://my-domain.com/stats' - - /** - * Whether to use dark theme in PickNSort. Default is true - */ - DARK_THEME = true; - - /** - * How often alarms are refreshed in seconds - */ - ALARM_REFRESH_INTERVAL = 6; - - /* - * Change your graph/chart dimensions here. Host columns will automatically adjust. - * Charts are square! Their width is the same as their height. - */ - DASH_OPTIONS = { - graph_width: '40em', - graph_height: '20em', - chart_width: '10em' // Charts are square - } - - /***************** - * END CONFIG * - *****************/ - </script> - - - <div id="alarms" class="collapsed"> - <div class="alarm-collapse-button" onclick="dash.toggle_alarm_collapse()">›</div> - <span class="alarm-count"></span> - <h1>Alarms</h1> - <div class="alarm-host-list"></div> - <div class="settings-button" onclick="dash.reorder_hosts()">⚙︎</div> - </div> - <div id="dash"> - <div class="netdata-host-stats-container template"> - <div class="netdata-host-name">host</div> - <div class="netdata-host-stats"> - <div class="dash-graph" - data-dash-netdata="system.cpu" - data-dygraph-valuerange="[0, 100]"> - </div> - <div class="dash-graph" - data-dash-netdata="system.load"> - </div> - <div class="dash-graph" - data-dash-netdata="system.ram"> - </div> - <div class="dash-graph" - data-dash-netdata="disk_space._"> - </div> - <div class="dash-graph" - data-dash-netdata="system.net"> - </div> - <div class="dash-graph" - data-dash-netdata="system.processes"> - </div> - <div class="dash-graph" - data-dash-netdata="apps.cpu"> - </div> - <div class="dash-graph" - data-dash-netdata="apps.mem"> - </div> - <div class="dash-charts"> - <div class="dash-chart" - data-dash-netdata="system.io" - data-dimensions="in" - data-title="Disk Read" - data-common-units="dash.io"> - </div> - <div class="dash-chart" - data-dash-netdata="system.io" - data-dimensions="out" - data-title="Disk Write" - data-common-units="dash.io"> - </div> - <div class="dash-chart" - data-dash-netdata="system.cpu" - data-chart-library="gauge" - data-title="CPU" - data-units="%" - data-gauge-max-value="100" - data-colors="#22AA99" - data-gauge-stroke-color="#373B40"> - </div> - <div class="dash-chart" - data-dash-netdata="system.net" - data-dimensions="received" - data-title="Net Inbound" - data-common-units="dash.net"> - </div> - <div class="dash-chart" - data-dash-netdata="system.net" - data-dimensions="sent" - data-title="Net Outbound" - data-common-units="dash.net"> - </div> - <div class="dash-chart" - data-dash-netdata="system.ram" - data-dimensions="used|buffers|active|wired" - data-append-options="percentage" - data-title="Used RAM" - data-units="%" - data-easypiechart-max-value="100" - data-colors="#EE9911"> - </div> - </div> - </div> - </div> - </div> -</body> -<script src="https://code.jquery.com/jquery-3.6.0.min.js" - integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" - crossorigin="anonymous"> -</script> -<script type="application/javascript"> -class PickNSort { - // PickNSort.js - - constructor (dark) { - this.items = []; - this.callback = function (output, disabled) { console.log(output, disabled) }; - this.reset = function () { this.items = [] }; - this.last_output = { - enabled: [], - disabled: [] - } - - this.add_css_to_page(dark); - } - - create_modal () { - $("<div></div>", { - id: "picknsort-container" - }).appendTo('body'); - - $("<div></div>", { - id: 'picknsort-window' - }).appendTo('#picknsort-container'); - - $("<div></div>", { - id: "picknsort-close-button", - text: '\u2573' - }).appendTo('#picknsort-window'); - - $("<div></div>", { - id: "picknsort-item-list" - }).appendTo('#picknsort-window') - - $("<div></div>", { - text: "Apply", - id: "picknsort-apply-button" - }).appendTo('#picknsort-window'); - - $("<div></div>", { - text: "Reset", - id: "picknsort-reset-button" - }).appendTo('#picknsort-window'); - - $('#picknsort-close-button').click(function () { - picknsort.destroy_modal(); - picknsort.callback(null, null); - }); - - $('#picknsort-apply-button').click(function () { - picknsort.apply(); - }); - - $('#picknsort-reset-button').click(function () { - picknsort.reset(); - }); - } - - destroy_modal () { - $('#picknsort-container').remove(); - } - - populate_list () { - this.clear_list(); - - for (var i=0, len=this.items.length; i<len; i++) { - this.draw_item(i); - } - } - - draw_item (index) { - var item = this.items[index]; - - var $item = $("<div></div>").addClass("picknsort-item"); - - var $checkbox= $("<div></div>").addClass('picknsort-item-checkbox-wrapper'); - - $("<input>", { - type: "checkbox", - checked: item.enabled - }).addClass('picknsort-item-checkbox') - .appendTo($checkbox); - - var $value = $("<div></div>", { - text: item.value - }).addClass("picknsort-item-value"); - - var $nav = $("<div></div>").addClass("picknsort-item-nav") - .append("<div class='picknsort-item-down' data-index='" + index + "' onclick='picknsort.shift_down(this)'>↓</div>") - .append("<div class='picknsort-item-up' data-index='" + index + "' onclick='picknsort.shift_up(this)'>↑</div>"); - - $item.append($checkbox).append($value).append($nav).appendTo('#picknsort-item-list'); - } - - clear_list () { - $('#picknsort-item-list').html(''); - } - - popup (callback, reset, options={}) { - this.callback = callback || this.callback; - this.reset = reset || this.reset; - if (!options.enabled) { - options.enabled = this.last_output.enabled; - } - if (!options.disabled) { - options.disabled = this.last_output.disabled; - } - - this.parse_items(options.enabled, options.disabled); - if (this.items.length) { - this.create_modal(); - this.populate_list(); - } - - } - - parse_items (enabled, disabled) { - this.items = []; - - for (var i=0, len=enabled.length; i<len; i++) { - this.items.push({ - value: enabled[i], - enabled: true - }); - } - - for (var i=0, len=disabled.length; i<len; i++) { - this.items.push({ - value: disabled[i], - enabled: false - }); - } - } - - shift_down (el) { - var index = $(el).data('index'); - if (index === this.items.length - 1) { - return; - } - var temp = this.items[index]; - this.items[index] = this.items[index + 1]; - this.items[index + 1] = temp; - this.move_element_down(index); - } - - shift_up (el) { - var index = $(el).data('index'); - if (index === 0) { - return; - } - var temp = this.items[index]; - this.items[index] = this.items[index - 1]; - this.items[index - 1] = temp; - this.move_element_up(index); - } - - move_element_up (index) { - var $src = $('.picknsort-item:eq(' + index + ')'); - var $dest = $('.picknsort-item:eq(' + (index-1) + ')'); - $src.insertBefore($dest); - - // Update data-index - $src.find('.picknsort-item-down, .picknsort-item-up').data("index", index-1); - $dest.find('.picknsort-item-down, .picknsort-item-up').data("index", index); - } - - move_element_down (index) { - var $src = $('.picknsort-item:eq(' + index + ')'); - var $dest = $('.picknsort-item:eq(' + (index+1) + ')'); - $src.insertAfter($dest); - - // Update data-index - $src.find('.picknsort-item-down, .picknsort-item-up').data("index", index+1); - $dest.find('.picknsort-item-down, .picknsort-item-up').data("index", index); - } - - apply () { - var out = []; - for (var i=0, len=this.items.length; i<len; i++) { - out.push(this.items[i].value); - } - var disabled = []; - $('input.picknsort-item-checkbox:not(:checked)').each(function (elindex) { - var itemindex = $('input.picknsort-item-checkbox').index($(this)); - // Adjust for deleted elements - var spliceindex = itemindex - (1 * elindex); - var del = out.splice(spliceindex, 1); - disabled.push(del[0]); - }); - this.callback(out, disabled); - this.last_output = { - enabled: out, - disabled: disabled - } - this.destroy_modal(); - } - - add_css_to_page (dark) { - /* - * You can change your PickNSort theme colors here. Not sure how well it will work... - */ - var light_theme = { - windowbg: "#FFF", - itembg: "#F4F4F4", - itemcolor: "#535353" - } - var dark_theme = { - windowbg: "#444", - itembg: "#333", - itemcolor: "#DBDBDB" - } - - var current_theme = (dark) ? dark_theme : light_theme; - - var css_string = ` -#picknsort-container { - position: fixed; - z-index: 9999 !important; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: rgba(0,0,0,0.5); -} -#picknsort-window { - max-height: 90vh; - width: 40em; - background: ${current_theme.windowbg}; - position: absolute; - top: 5em; - left: calc(50% - 20em); - padding: 2em; - padding-top: 4em; -} -#picknsort-close-button { - position: absolute; - top: 1em; - font-size: 1.5em; - color: #666; - right: 1em; - cursor: pointer; -} -#picknsort-item-list { - max-height: 60vh; - overflow-y: scroll; - margin-bottom: 1em; -} -#picknsort-apply-button, #picknsort-reset-button { - text-align: center; - font-size: 1.5em; - padding: 1em; - background: rgb(106, 232, 165); - font-weight: bold; - color: #FFF; - cursor: pointer; - margin-top: 1em; -} -#picknsort-reset-button { - background: #CCC; -} -.picknsort-item { - padding: 1em; - border-top: solid 1px #CCC; - margin-bottom: 1em; - position: relative; - background: ${current_theme.itembg}; - color: ${current_theme.itemcolor} -} -.picknsort-item-checkbox-wrapper { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 3em; - text-align: center; -} -.picknsort-item-checkbox { - transform: scale(1.5); - margin-top: 1.3em !important; -} -.picknsort-item-value { - margin-left: 3em; -} -.picknsort-item-nav { - font-size: 2em; - position: absolute; - right: 0; - top: 0; - bottom: 0; - color: #CCC; - cursor: pointer; -} -.picknsort-item-down, .picknsort-item-up { - display: inline-block; - padding: 0em 0.5em; - height: calc(100% - 0.2em); -} - ` // End multiline string - - - $("<style>") - .prop("type", "text/css") - .html(css_string).appendTo("head"); - } -} -</script> -<script type="application/javascript"> - // Dash JS - - function picknsort_setup () { - if (localStorage.getItem('netdata_ordered_hosts')) { - picknsort.last_output = JSON.parse(localStorage.getItem('netdata_ordered_hosts')); - } else { - picknsort.last_output = { - enabled: dash.netdata_info.mirrored_hosts, - disabled: [] - } - } - } - - function load_dashboard_js () { - // Import dashboard.js - $.ajax({ - url: dash.base_url + '/dashboard.js', - cache: true, - dataType: "script", - success: function () { - console.log("Loaded dashboard.js"); - setTimeout(function () { - $('#alarms').css("visibility", "visible"); - }, 400); - } - }); - } - - class Dash { - constructor (base_url, link_base_url) { - this.base_url = base_url; // URL of netdata host, with port - this.link_base_url = link_base_url || base_url; // Reverse proxy URL (Optional) - this.current_alarms = {}; - this.new_alarms = {}; - this.first_build = true; - this.options = DASH_OPTIONS; - } - - reorder_hosts () { - picknsort.popup(dash.update_ordered_hosts, dash.find_new_hosts); - } - - get_enabled_hosts () { - try { - return JSON.parse(localStorage.getItem('netdata_ordered_hosts')).enabled - } catch (e) { - return this.netdata_info.mirrored_hosts.sort(); - } - } - - get_ordered_hosts () { - try { - return JSON.parse(localStorage.getItem('netdata_ordered_hosts')); - } catch (e) { - return null; - } - } - - set_ordered_hosts (hosts) { - localStorage.setItem('netdata_ordered_hosts', JSON.stringify(hosts)); - location.reload(); - } - - update_ordered_hosts (enabled, disabled) { - if (enabled === null && disabled === null) { - return; - } - dash.set_ordered_hosts({ - enabled: enabled, - disabled: disabled - }); - } - - find_new_hosts () { - var newhosts = dash.netdata_info.mirrored_hosts.slice(); - var currenthosts = dash.get_ordered_hosts(); - - for (var i=0,len=currenthosts.enabled.length; i<len; i++) { - var found = newhosts.indexOf(currenthosts.enabled[i]); - - if (found > -1) { - newhosts.splice(found, 1); - } else { - currenthosts.enabled.splice(i, 1); - } - } - - for (var i=0,len=currenthosts.disabled.length; i<len; i++) { - var found = newhosts.indexOf(currenthosts.disabled[i]); - - if (found > -1) { - newhosts.splice(found, 1); - } else { - currenthosts.enabled.splice(i, 1); - } - } - - for (var i=0,len=newhosts.length; i<len; i++) { - currenthosts.enabled.push(newhosts[i]); - } - - dash.set_ordered_hosts(currenthosts); - } - - get_host_url (hostname, link) { - var base = ( link ) ? this.link_base_url : this.base_url; - return (hostname) ? base + '/host/' + hostname : base; - } - - get_api_url (hostname) { - return this.get_host_url(hostname) + '/api/v1' - } - - - init (callback) { - var that = this; - $.get(this.get_api_url() + '/info', function (data) { - that.netdata_info = data; - picknsort_setup() - that.build(); - callback(); - }); - } - - digest () { - this.fetch_active_alarms(); - this.fix_layout_errors(); - } - - build () { - // Fix vertically misaligned stats on load error - $('.dash-graph').css({ - height: this.options.graph_height, - width: this.options.graph_width - }); - $('.dash-chart').css({ - height: this.options.chart_width, // Charts are square - width: this.options.chart_width - }); - - // Fix chart alignment - $('.netdata-host-stats-container').css({ - width: 'calc(' + this.options.graph_width + ' + (2 * ' + $('.netdata-host-stats-container').css('padding-left') + '))' - }); - - var $template = $('.netdata-host-stats-container').first(); - - var hosts = this.get_enabled_hosts(); - - for (var i=0, len=hosts.length; i<len; i++) { - var hostname = hosts[i]; - $('#alarms .alarm-host-list').append('<div class="host-alarms ' + hostname + '"><a onclick="return dash.scroll_to_host_stats(' + "'" + hostname + "'" + ')" href="#' + hostname + '"><h2 |