dash.html (#6603)

Multi-Host custom dashboard: dash.html is a single-file solution to show graphs, charts, and alarms from all streamed hosts on one page. It takes one defined set of graphs and charts and replicates it for each host. It is quite simple, but quite effective.

web/gui/Makefile.am

@@ -67,6 +67,7 @@ dist_web_DATA = \
 	refresh-badges.js \
 	sitemap.xml \
 	tv.html \
+	dash-example.html \
 	version.txt \
 	$(NULL)
 

web/gui/custom/README.md

@@ -11,12 +11,13 @@ Netdata charts can also be added to existing web pages.
 
 Check this **[very simple working example of a custom dashboard](http://netdata.firehol.org/demo.html)**, and its **[html source](../demo.html)**.
 
-You should also look at the **[custom dashboard template](https://my-netdata.io/dashboard.html)**, that contains samples of all supported charts. The code is [here](../dashboard.html). 
+You should also look at the **[custom dashboard template](https://my-netdata.io/dashboard.html)**, that contains samples of all supported charts. The code is [here](../dashboard.html).
 
 If you plan to put the dashboard on TV, check **[tv.html](../tv.html)**. This is a screenshot of it, monitoring 2 servers on the same page:
 
 ![image](https://cloud.githubusercontent.com/assets/2662304/14252187/d8d5f78e-fa8e-11e5-990d-99821d38c874.png)
--- 
+
+--
 
 ## Web directory
 
@@ -51,6 +52,59 @@ If you need to create a new dashboard on an empty page, we suggest the following
 </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 it will be automatically replicated for all of your hosts; showing alarms and graphs for all your hosts on **one page!**
+
+### Configure Dash
+
+First, rename the file so it doesn't get overwritten. For instance, with a webroot at `/usr/share/netdata/web`:
+```
+cp /usr/share/netdata/web/dash-example.html /usr/share/netdata/web/dash.html
+```
+
+Change the following line in `dash.html` to reflect your URLs. The second URL is used if you access your netdata dashboard from a reverse proxy. The reverse proxy URL is optional, if it is not set then both will use the netdata host URL.
+
+```js
+/*
+* TUTORIAL: Change this to the URL of your netdata host
+* If you use netdata behind a reverse proxy, add a second parameter for the reverse proxy url like so:
+* 		new Dash('http://localhost:19999', 'https://my-domain.com/stats');
+*/
+var dash = new Dash('http://localhost:19999');
+```
+
+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:
+```
+<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
+/*
+* TUTORIAL: Change your graph/chart dimensions here. Host columns will automatically adjust.
+* 			Charts are square! Their width is the same as their height.
+*/
+this.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
+
+
 ## dashboard.js
 
 To add Netdata charts to any web page (dedicated to Netdata or not), you need to include the `/dashboard.js` file of a Netdata server.