my-netdata menu now finds the proper URL for a server; added example registry.html page that renders charts for each registry entry
Costa Tsaousis committed
May 26, 2016 at 02:14 UTC
ac9e7f6a48a0211e03f1257d9039bd22ec6ccada
4 files changed
+291
-25
web/Makefile.am
+1
@@ -16,6 +16,7 @@ dist_web_DATA = \
16
netdata-swagger.yaml \
17
netdata-swagger.json \
18
robots.txt \
19
+ registry.html \
20
tv.html \
21
version.txt \
22
$(NULL)
web/dashboard.js
+22
-11
@@ -3541,6 +3541,10 @@
3541
var numberDigitGroupCount = self.data('sparkline-numberdigitgroupcount') || undefined;
3542
var animatedZooms = self.data('sparkline-animatedzooms') || false;
3543
3544
+ if(spotColor === 'disable') spotColor='';
3545
+ if(minSpotColor === 'disable') minSpotColor='';
3546
+ if(maxSpotColor === 'disable') maxSpotColor='';
3547
+
3548
state.sparkline_options = {
3549
type: type,
3550
lineColor: lineColor,
@@ -3714,20 +3718,22 @@
3718
state.log('dygraphChartUpdate() forced zoom update');
3719
3720
options.dateWindow = (state.requested_padding !== null)?[ state.view_after, state.view_before ]:null;
3717
- options.valueRange = null;
3721
+ options.valueRange = state.dygraph_options.valueRange;
3722
options.isZoomedIgnoreProgrammaticZoom = true;
3723
state.dygraph_force_zoom = false;
3724
}
3725
else if(state.current.name !== 'auto') {
3726
if(NETDATA.options.debug.dygraph === true || state.debug === true)
3727
state.log('dygraphChartUpdate() loose update');
3728
+
3729
+ options.valueRange = state.dygraph_options.valueRange;
3730
}
3731
else {
3732
if(NETDATA.options.debug.dygraph === true || state.debug === true)
3733
state.log('dygraphChartUpdate() strict update');
3734
3735
options.dateWindow = (state.requested_padding !== null)?[ state.view_after, state.view_before ]:null;
3730
- options.valueRange = null;
3736
+ options.valueRange = state.dygraph_options.valueRange;
3737
options.isZoomedIgnoreProgrammaticZoom = true;
3738
}
3739
@@ -3791,6 +3797,8 @@
3797
xRangePad: self.data('dygraph-xrangepad') || 0,
3798
yRangePad: self.data('dygraph-yrangepad') || 1,
3799
3800
+ valueRange: self.data('dygraph-valuerange') || null,
3801
+
3802
ylabel: state.units,
3803
yLabelWidth: self.data('dygraph-ylabelwidth') || 12,
3804
@@ -5500,21 +5508,23 @@
5508
person_guid: null, // the unique ID of this browser / user
5509
machine_guid: null, // the unique ID the netdata server that served dashboard.js
5510
hostname: null, // the hostname of the netdata server that served dashboard.js
5503
- urls: null, // the user's other URLs
5504
- urls_array: null, // the user's other URLs in an array
5511
+ machines: null, // the user's other URLs
5512
+ machines_array: null, // the user's other URLs in an array
5513
+ person_urls: null,
5514
5515
parsePersonUrls: function(person_urls) {
5516
// console.log(person_urls);
5517
+ NETDATA.registry.person_urls = person_urls;
5518
5519
if(person_urls) {
5510
- NETDATA.registry.urls = {};
5511
- NETDATA.registry.urls_array = new Array();
5520
+ NETDATA.registry.machines = {};
5521
+ NETDATA.registry.machines_array = new Array();
5522
5523
var now = new Date().getTime();
5524
var apu = person_urls;
5525
var i = apu.length;
5526
while(i--) {
5517
- if(typeof NETDATA.registry.urls[apu[i][0]] === 'undefined') {
5527
+ if(typeof NETDATA.registry.machines[apu[i][0]] === 'undefined') {
5528
// console.log('adding: ' + apu[i][4] + ', ' + ((now - apu[i][2]) / 1000).toString());
5529
5530
var obj = {
@@ -5525,14 +5535,15 @@
5535
name: apu[i][4],
5536
alternate_urls: new Array()
5537
};
5538
+ obj.alternate_urls.push(apu[i][1]);
5539
5529
- NETDATA.registry.urls[apu[i][0]] = obj;
5530
- NETDATA.registry.urls_array.push(obj);
5540
+ NETDATA.registry.machines[apu[i][0]] = obj;
5541
+ NETDATA.registry.machines_array.push(obj);
5542
}
5543
else {
5544
// console.log('appending: ' + apu[i][4] + ', ' + ((now - apu[i][2]) / 1000).toString());
5545
5535
- var pu = NETDATA.registry.urls[apu[i][0]];
5546
+ var pu = NETDATA.registry.machines[apu[i][0]];
5547
if(pu.last_t < apu[i][2]) {
5548
pu.url = apu[i][1];
5549
pu.last_t = apu[i][2];
@@ -5545,7 +5556,7 @@
5556
}
5557
5558
if(typeof netdataRegistryCallback === 'function')
5548
- netdataRegistryCallback(NETDATA.registry.urls_array);
5559
+ netdataRegistryCallback(NETDATA.registry.machines_array);
5560
},
5561
5562
init: function() {
web/index.html
+66
-14
@@ -373,41 +373,35 @@
373
return saveLocalStorage('netdataTheme', theme);
374
}
375
376
- var netdataRegistryCallback = function(urls_array) {
376
+ var netdataRegistryCallback = function(machines_array) {
377
var el = '';
378
var a1 = '';
379
var found = 0;
380
381
- if(urls_array) {
381
+ if(machines_array) {
382
function name_comparator_desc(a, b) {
383
if (a.name > b.name) return -1;
384
if (a.name < b.name) return 1;
385
return 0;
386
}
387
388
- var urls = urls_array.sort(name_comparator_desc);
389
- var len = urls.length;
388
+ var machines = machines_array.sort(name_comparator_desc);
389
+ var len = machines.length;
390
while(len--) {
391
- var u = urls[len];
392
-
393
- var status = "enabled";
391
+ var u = machines[len];
392
found++;
395
-
396
- if(u.guid === NETDATA.registry.machine_guid)
397
- status = "disabled"
398
-
399
- el += '<li id="registry_server_' + u.guid + '" class="' + status + '"><a href="' + u.url + '">' + u.name + '</a></li>';
393
+ el += '<li id="registry_server_' + u.guid + '"><a href="#" onClick="return gotoServerModalHandler(\'' + u.guid + '\');">' + u.name + '</a></li>';
394
a1 += '<li id="registry_action_' + u.guid + '"><a href="#" onclick="deleteRegistryModalHandler(\'' + u.guid + '\',\'' + u.name + '\',\'' + u.url + '\'); return false;"><i class="fa fa-trash-o" aria-hidden="true" style="color: #999;"></i></a></li>';
395
}
396
}
397
398
if(!found) {
405
- if(urls)
399
+ if(machines)
400
el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #666;" target="_blank">your netdata server list is empty...</a></li>';
401
else
402
el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #666;" target="_blank">failed to contact the registry...</a></li>';
403
410
- a1 += '<li><a href="#"> </a></li>';
404
+ a1 += '<li><a href="#" onClick="return false;"> </a></li>';
405
406
el += '<li role="separator" class="divider"></li>' +
407
'<li><a href="//london.netdata.rocks/default.html">EU - London (DigitalOcean.com)</a></li>' +
@@ -973,6 +967,28 @@
967
</div>
968
</div>
969
970
+ <div class="modal fade" id="gotoServerModal" tabindex="-1" role="dialog" aria-labelledby="gotoServerModalLabel">
971
+ <div class="modal-dialog" role="document">
972
+ <div class="modal-content">
973
+ <div class="modal-header">
974
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
975
+ <h4 class="modal-title" id="gotoServerModalLabel"><span id="gotoServerName"></span></h4>
976
+ </div>
977
+ <div class="modal-body">
978
+ Checking known URLs for this server...
979
+ <div style="padding-top: 20px;">
980
+ <table id="gotoServerList">
981
+ </table>
982
+ </div>
983
+ <div id="gotoServerResponse" style="display: block; width: 100%; text-align: center; padding-top: 20px;"></div>
984
+ </div>
985
+ <div class="modal-footer">
986
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
987
+ </div>
988
+ </div>
989
+ </div>
990
+ </div>
991
+
992
<script>
993
var this_is_demo = null;
994
function isdemo() {
@@ -999,6 +1015,42 @@ function isdemo() {
1015
if(isdemo()) {
1016
document.getElementById('masthead').style.display = 'block';
1017
}
1018
+var gotoServerValidateRemaining = 0;
1019
+function gotoServerValidateUrl(id, guid, url) {
1020
+ setTimeout(function() {
1021
+ document.getElementById('gotoServerList').innerHTML += '<tr><td style="padding-left: 20px;">' + url + '</td><td style="padding-left: 30px;"><code id="' + guid + '-' + id + '-status">checking...</code></td></tr>';
1022
+ NETDATA.registry.hello(url, function(data) {
1023
+ if (data) {
1024
+ console.log('OK ' + id + ' URL: ' + url);
1025
+ document.getElementById(guid + '-' + id + '-status').innerHTML = "OK";
1026
+ document.location = url;
1027
+ }
1028
+ else {
1029
+ document.getElementById(guid + '-' + id + '-status').innerHTML = "failed!";
1030
+ gotoServerValidateRemaining--;
1031
+ if(gotoServerValidateRemaining <= 0)
1032
+ document.getElementById('gotoServerResponse').innerHTML = '<b>Sorry! I cannot find any operational URL for this server</b>';
1033
+ }
1034
+ });
1035
+ }, id * 50);
1036
+}
1037
+
1038
+function gotoServerModalHandler(guid) {
1039
+ console.log('goto server: ' + guid);
1040
+
1041
+ var len = NETDATA.registry.machines[guid].alternate_urls.length;
1042
+
1043
+ document.getElementById('gotoServerResponse').innerHTML = '';
1044
+ document.getElementById('gotoServerList').innerHTML = '';
1045
+ document.getElementById('gotoServerName').innerHTML = NETDATA.registry.machines[guid].name;
1046
+ $('#gotoServerModal').modal('show');
1047
+
1048
+ gotoServerValidateRemaining = len;
1049
+ while(len--)
1050
+ gotoServerValidateUrl(len, guid, NETDATA.registry.machines[guid].alternate_urls[len]);
1051
+
1052
+ return false;
1053
+}
1054
1055
function switchRegistryModalHandler() {
1056
document.getElementById('switchRegistryPersonGUID').value = NETDATA.registry.person_guid;
web/registry.html
new
+202
@@ -0,0 +1,202 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+ <title>NetData Registry Dashboard</title>
5
+
6
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7
+ <meta charset="utf-8">
8
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9
+ <meta name="viewport" content="width=device-width, initial-scale=1">
10
+ <meta name="apple-mobile-web-app-capable" content="yes">
11
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
12
+
13
+ <meta property="og:locale" content="en_US" />
14
+ <meta property="og:image" content="https://my-netdata.io/images/seo-performance-512.png"/>
15
+ <meta property="og:url" content="http://my-netdata.io/"/>
16
+ <meta property="og:type" content="website"/>
17
+ <meta property="og:site_name" content="netdata"/>
18
+ <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
19
+ <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
20
+
21
+ <script>
22
+ // this section has to appear before loading dashboard.js
23
+
24
+ // Select a theme.
25
+ // uncomment on of the two themes:
26
+
27
+ // var netdataTheme = 'default'; // this is white
28
+ var netdataTheme = 'slate'; // this is dark
29
+
30
+
31
+ // Set the default netdata server.
32
+ // on charts without a 'data-host', this one will be used.
33
+ // the default is the server that dashboard.js is downloaded from.
34
+
35
+ // var netdataServer = 'http://my.server:19999/';
36
+
37
+ function registryGotoServer(guid) {
38
+ console.log('goto server: ' + guid);
39
+ }
40
+
41
+ function registryAddServer(u) {
42
+ return '<div id="registry_server_' + u.guid + '" class="registry-server-container" onClick="registryGotoServer(\'' + u.guid + '\'); return false;">'
43
+ + '<div class="registry-server-name">' + u.name + '</div>'
44
+ + '<div data-netdata="system.cpu"'
45
+ + ' data-host="' + u.url + '"'
46
+ + ' data-chart-library="sparkline"'
47
+ + ' data-sparkline-chartrangemin="0"'
48
+ + ' data-sparkline-chartrangemax="100"'
49
+ + ' data-sparkline-chartrangeclip="true"'
50
+ + ' data-sparkline-disabletooltips="true"'
51
+ + ' data-sparkline-disableinteraction="true"'
52
+ + ' data-sparkline-disablehighlight="true"'
53
+ + ' data-sparkline-linecolor="#444"'
54
+ + ' data-sparkline-spotcolor="disable"'
55
+ + ' data-sparkline-minspotcolor="disable"'
56
+ + ' data-sparkline-maxspotcolor="disable"'
57
+ + ' data-width="100%"'
58
+ + ' data-height="20px"'
59
+ + ' data-after="-200"'
60
+ + '></div>'
61
+ + '</div>';
62
+ }
63
+
64
+ var netdataRegistryCallback = function(machines_array) {
65
+ var el = '';
66
+ var a1 = '';
67
+ var found = 0;
68
+
69
+ if(machines_array) {
70
+ function name_comparator_desc(a, b) {
71
+ if (a.name > b.name) return -1;
72
+ if (a.name < b.name) return 1;
73
+ return 0;
74
+ }
75
+
76
+ var machines = machines_array.sort(name_comparator_desc);
77
+ var len = machines.length;
78
+ while(len--) {
79
+ var u = machines[len];
80
+
81
+ var status = "enabled";
82
+ found++;
83
+
84
+ if(u.guid === NETDATA.registry.machine_guid)
85
+ status = "disabled"
86
+
87
+ el += registryAddServer(u);
88
+ a1 += '<li id="registry_action_' + u.guid + '"><a href="#" onclick="deleteRegistryModalHandler(\'' + u.guid + '\',\'' + u.name + '\',\'' + u.url + '\'); return false;"><i class="fa fa-trash-o" aria-hidden="true" style="color: #999;"></i></a></li>';
89
+ }
90
+ }
91
+
92
+ if(!found) {
93
+ if(machines)
94
+ el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #666;" target="_blank">your netdata server list is empty...</a></li>';
95
+ else
96
+ el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #666;" target="_blank">failed to contact the registry...</a></li>';
97
+
98
+ a1 += '<li><a href="#"> </a></li>';
99
+
100
+ el += '<li role="separator" class="divider"></li>' +
101
+ '<li><a href="//london.netdata.rocks/default.html">EU - London (DigitalOcean.com)</a></li>' +
102
+ '<li><a href="//atlanta.netdata.rocks/default.html">US - Atlanta (CDN77.com)</a></li>' +
103
+ '<li><a href="//athens.netdata.rocks/default.html">EU - Athens</a></li>';
104
+ a1 += '<li role="separator" class="divider"></li>' +
105
+ '<li><a href="#"> </a></li>' +
106
+ '<li><a href="#"> </a></li>'+
107
+ '<li><a href="#"> </a></li>';
108
+ }
109
+
110
+ el += '<li role="separator" class="divider"></li>';
111
+ a1 += '<li role="separator" class="divider"></li>';
112
+
113
+ el += '<li><a href="https://github.com/firehol/netdata/wiki/mynetdata-menu-item" style="color: #999;" target="_blank">What is this?</a></li>';
114
+ a1 += '<li><a href="#" style="color: #999;" onclick="switchRegistryModalHandler(); return false;"><i class="fa fa-cog" aria-hidden="true" style="color: #999;"></i></a></li>'
115
+
116
+ document.getElementById('mynetdata_servers').innerHTML = el;
117
+ //document.getElementById('mynetdata_servers2').innerHTML = el;
118
+ //document.getElementById('mynetdata_actions1').innerHTML = a1;
119
+ NETDATA.updatedDom();
120
+ };
121
+ </script>
122
+
123
+ <!--
124
+ Load dashboard.js
125
+
126
+ to host this HTML file on your web server,
127
+ you have to load dashboard.js from the netdata server.
128
+
129
+ So, pick one the two below
130
+ If you pick the first, set the server name/IP.
131
+
132
+ The second assumes you host this file on /usr/share/netdata/web
133
+ and that you have chown it to be owned by netdata:netdata
134
+ -->
135
+ <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
136
+ <script type="text/javascript" src="dashboard.js?v38"></script>
137
+
138
+ <script>
139
+ // Set options for TV operation
140
+ // This has to be done, after dashboard.js is loaded
141
+
142
+ // destroy charts not shown (lowers memory on the browser)
143
+ NETDATA.options.current.destroy_on_hide = true;
144
+
145
+ // set this to false, to always show all dimensions
146
+ NETDATA.options.current.eliminate_zero_dimensions = true;
147
+
148
+ // lower the pressure on this browser
149
+ NETDATA.options.current.concurrent_refreshes = true;
150
+
151
+ // if the tv browser is too slow (a pi?)
152
+ // set this to false
153
+ NETDATA.options.current.parallel_refresher = true;
154
+
155
+ // always update the charts, even if focus is lost
156
+ // NETDATA.options.current.stop_updates_when_focus_is_lost = false;
157
+ </script>
158
+
159
+ <style>
160
+ .registry-container {
161
+ margin-left: 50px;
162
+ max-width: 400px;
163
+ min-width: 200px;
164
+ border: 1px solid #555;
165
+ max-height: 80vh;
166
+ height: auto;
167
+ overflow-x: hidden;
168
+ /* background-color: #3a3f44; */
169
+ text-align: center;
170
+ }
171
+ .registry-server-container {
172
+ width: 100%;
173
+ height: auto;
174
+ overflow-x: hidden;
175
+ font-size: 10px;
176
+ padding-left: 10px;
177
+ padding-right: 10px;
178
+ }
179
+ .registry-server-container:hover {
180
+ color: #f5f5f5;
181
+ background-color: #262626;
182
+ }
183
+ .registry-server-name {
184
+ display: block;
185
+ text-decoration: none !important;
186
+ clear: both;
187
+ font-size: 16px;
188
+ font-weight: bold;
189
+ white-space: normal;
190
+ padding-top: 10px;
191
+ }
192
+ </style>
193
+</head>
194
+<body>
195
+
196
+<div id="mynetdata_servers" class="registry-container" onscroll="NETDATA.onscroll();">
197
+
198
+ Loading....
199
+
200
+</div> <!-- registry-container -->
201
+</body>
202
+</html>