Improvements to dash-example.html (#10870)
Thomas Anderson committed
Apr 15, 2021 at 10:04 UTC
18a5cb9e7c33fb8c4f2bb14696c1b9dc532ea5d6
2 files changed
+87
-59
web/gui/custom/README.md
+17
-16
@@ -73,31 +73,32 @@ header:
73
74
`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!**
75
76
-__**Dash will only work if you have implemented netdata streaming using `stream.conf`**__
76
+__**Dash will only work if you have implemented netdata streaming using `stream.conf`. It is not part of Netdata Cloud.**__
77
78
`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!
79
80
### Configure Dash
81
82
First, rename the file so it doesn't get overwritten. For instance, with a webroot at `/usr/share/netdata/web`:
83
-```
83
+```bash
84
cp /usr/share/netdata/web/dash-example.html /usr/share/netdata/web/dash.html
85
```
86
87
-Find and change the following line in `dash.html` to reflect your Netdata URLs. The second URL is only used if you access your Netdata dashboard through a reverse proxy. The reverse proxy URL is optional; if it is not set then both will use the Netdata host URL.
87
+> NOTE: Ensure the owner/permissions match those in the rest of the files in the directory. Usually `netdata:netdata` and `0644`.
88
+
89
+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.
90
91
```js
90
-/*
91
-* TUTORIAL: Change this to the URL of your netdata host
92
-* If you use netdata behind a reverse proxy, add a second parameter for the reverse proxy url like so:
93
-* new Dash('http://localhost:19999', 'https://my-domain.com/stats');
94
-*/
95
-var dash = new Dash('http://localhost:19999');
92
+/**
93
+ * Netdata URLS. If you use a reverse proxy, add it and uncomment the line below
94
+ */
95
+NETDATA_HOST = 'https://localhost:19999';
96
+// REVERSE_PROXY_URL = 'https://my-domain.com/stats'
97
```
98
99
### The `dash-*` Syntax
100
100
-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:
101
+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.
102
```
103
<div class="dash-graph" <---- Use class dash-graph for line graphs, etc
104
data-dash-netdata="system.cpu" <---- REQUIRED: Use data-dash-netdata to set the data source
@@ -112,17 +113,17 @@ If you want to change the graphs or styling to fit your needs, just add an eleme
113
</div>
114
```
115
115
-To change the sizes of graphs and charts, find the `Dash.options` object in `dash.html` and set your preferences:
116
+To change the sizes of graphs and charts, find the `DASH_OPTIONS` object in `dash.html` and set your preferences:
117
```js
118
/*
118
-* TUTORIAL: Change your graph/chart dimensions here. Host columns will automatically adjust.
119
-* Charts are square! Their width is the same as their height.
120
-*/
121
-this.options = {
119
+ * Change your graph/chart dimensions here. Host columns will automatically adjust.
120
+ * Charts are square! Their width is the same as their height.
121
+ */
122
+DASH_OPTIONS = {
123
graph_width: '40em',
124
graph_height: '20em',
125
chart_width: '10em' // Charts are square
125
-};
126
+}
127
```
128
129
To change the display order of your hosts, which is saved in localStorage, click the settings gear in the lower right corner
web/gui/dash-example.html
+70
-43
@@ -9,6 +9,43 @@
9
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
10
</head>
11
<body>
12
+ <script type="application/javascript">
13
+ /*****************
14
+ * CONFIGURATION *
15
+ *****************/
16
+
17
+ /**
18
+ * Netdata URLS. If you use a reverse proxy, add it and uncomment the line below
19
+ */
20
+ NETDATA_HOST = 'https://localhost:19999';
21
+ // REVERSE_PROXY_URL = 'https://my-domain.com/stats'
22
+
23
+ /**
24
+ * Whether to use dark theme in PickNSort. Default is true
25
+ */
26
+ DARK_THEME = true;
27
+
28
+ /**
29
+ * How often alarms are refreshed in seconds
30
+ */
31
+ ALARM_REFRESH_INTERVAL = 6;
32
+
33
+ /*
34
+ * Change your graph/chart dimensions here. Host columns will automatically adjust.
35
+ * Charts are square! Their width is the same as their height.
36
+ */
37
+ DASH_OPTIONS = {
38
+ graph_width: '40em',
39
+ graph_height: '20em',
40
+ chart_width: '10em' // Charts are square
41
+ }
42
+
43
+ /*****************
44
+ * END CONFIG *
45
+ *****************/
46
+ </script>
47
+
48
+
49
<div id="alarms" class="collapsed">
50
<div class="alarm-collapse-button" onclick="dash.toggle_alarm_collapse()">›</div>
51
<span class="alarm-count"></span>
@@ -93,12 +130,11 @@
130
</div>
131
</div>
132
</body>
96
-<script
97
- src="https://code.jquery.com/jquery-3.4.1.min.js"
98
- integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
99
- crossorigin="anonymous">
133
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"
134
+ integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
135
+ crossorigin="anonymous">
136
</script>
101
-<script type="text/javascript">
137
+<script type="application/javascript">
138
class PickNSort {
139
// PickNSort.js
140
@@ -297,7 +333,7 @@ class PickNSort {
333
334
add_css_to_page (dark) {
335
/*
300
- * TUTORIAL: Change your theme colors here. Not sure how well it will work...
336
+ * You can change your PickNSort theme colors here. Not sure how well it will work...
337
*/
338
var light_theme = {
339
windowbg: "#FFF",
@@ -404,7 +440,7 @@ class PickNSort {
440
}
441
}
442
</script>
407
-<script type="text/javascript">
443
+<script type="application/javascript">
444
// Dash JS
445
446
function picknsort_setup () {
@@ -418,6 +454,21 @@ class PickNSort {
454
}
455
}
456
457
+ function load_dashboard_js () {
458
+ // Import dashboard.js
459
+ $.ajax({
460
+ url: dash.base_url + '/dashboard.js',
461
+ cache: true,
462
+ dataType: "script",
463
+ success: function () {
464
+ console.log("Loaded dashboard.js");
465
+ setTimeout(function () {
466
+ $('#alarms').css("visibility", "visible");
467
+ }, 400);
468
+ }
469
+ });
470
+ }
471
+
472
class Dash {
473
constructor (base_url, link_base_url) {
474
this.base_url = base_url; // URL of netdata host, with port
@@ -425,17 +476,7 @@ class PickNSort {
476
this.current_alarms = {};
477
this.new_alarms = {};
478
this.first_build = true;
428
- /*
429
- * TUTORIAL: Change your graph/chart dimensions here. Host columns will automatically adjust.
430
- * Charts are square! Their width is the same as their height.
431
- */
432
- this.options = {
433
- graph_width: '40em',
434
- graph_height: '20em',
435
- chart_width: '10em' // Charts are square
436
- };
437
-
438
- this.init();
479
+ this.options = DASH_OPTIONS;
480
}
481
482
reorder_hosts () {
@@ -514,12 +555,13 @@ class PickNSort {
555
}
556
557
517
- init () {
558
+ init (callback) {
559
var that = this;
560
$.get(this.get_api_url() + '/info', function (data) {
561
that.netdata_info = data;
562
picknsort_setup()
563
that.build();
564
+ callback();
565
});
566
}
567
@@ -651,7 +693,6 @@ class PickNSort {
693
}
694
695
update_alarm_count () {
654
- console.log(this.all_alarms_are_warnings());
696
var count = $('img.alarm-badge').length;
697
$('.alarm-count').text($('img.alarm-badge').length);
698
$('.alarm-count').removeClass('no-alarms warnings-only');
@@ -768,26 +809,19 @@ class PickNSort {
809
}
810
}
811
771
- /*
772
- * TUTORIAL: Change this to the URL of your netdata host
773
- * If you use netdata behind a reverse proxy, add a second parameter for the reverse proxy url like so:
774
- * new Dash('http://localhost:19999', 'https://my-domain.com/stats');
775
- */
776
- var dash = new Dash('http://localhost:19999');
777
-
778
- var picknsort = new PickNSort(true);
779
-
780
- // Import dashboard.js
781
- $.getScript(dash.base_url + '/dashboard.js', function() {
782
- console.log("Loaded dashboard.js");
783
- setTimeout(function () {
784
- $('#alarms').css("visibility", "visible");
785
- }, 400);
812
+ if (typeof REVERSE_PROXY_URL === 'undefined') REVERSE_PROXY_URL = null;
813
+
814
+ var dash = new Dash(NETDATA_HOST, REVERSE_PROXY_URL);
815
+
816
+ var picknsort = new PickNSort(DARK_THEME);
817
+
818
+ dash.init(function () {
819
+ load_dashboard_js();
820
});
821
822
setInterval(function () {
823
dash.digest();
790
- }, 6 * 1000);
824
+ }, ALARM_REFRESH_INTERVAL * 1000);
825
826
</script>
827
<style type="text/css">
@@ -987,13 +1021,6 @@ class PickNSort {
1021
margin-right: 27em;
1022
}
1023
990
- .netdata-host-stats {
991
-
992
- }
993
-
994
- .netdata-message {
995
- }
996
-
1024
.dash-graph {
1025
margin-bottom: 1em;
1026
}