added refresh-badges.js script for refreshing badges that are added to web pages as images
Costa Tsaousis (ktsaou) committed
Dec 24, 2017 at 03:11 UTC
f6ea8d1a0303aeff1e25302a21878168ddf26768
2 files changed
+98
web/Makefile.am
+1
@@ -21,6 +21,7 @@ dist_web_DATA = \
21
netdata-swagger.yaml \
22
netdata-swagger.json \
23
robots.txt \
24
+ refresh-badges.js \
25
registry.html \
26
sitemap.xml \
27
tv.html \
web/refresh-badges.js
new
+97
@@ -0,0 +1,97 @@
1
+// ----------------------------------------------------------------------------
2
+// This script periodically updates all the netdata badges you have added to a
3
+// page as images. You don't need this script if you add the badges with
4
+// <embed src="..."/> - embedded badges auto-refresh by themselves.
5
+//
6
+// You can set the following variables before loading this script:
7
+
8
+/*global netdata_update_every *//* number, the time in seconds to update the badges
9
+ * (default: 15) */
10
+/*global netdata_live_callback *//* function, callback to be called on each iteration while updating the badges
11
+ * (default: null) */
12
+/*global netdata_paused_callback *//* function, callback to be called when the update pauses
13
+ * (default: null) */
14
+
15
+/*
16
+// EXAMPLE HTML PAGE:
17
+
18
+<html>
19
+<head>
20
+<script>
21
+// how frequently to update the badges?
22
+var netdata_update_every = 15;
23
+
24
+// show a count-down for badge refreshes
25
+var netdata_live_callback = function(secs, count) {
26
+ document.body.style.opacity = 1;
27
+ if(count)
28
+ document.getElementById("pageliveinfo").innerHTML = "This page is live - updated <b>" + count + "</b> badges...";
29
+ else
30
+ document.getElementById("pageliveinfo").innerHTML = "This page is live - badges will be updated in <b>" + secs + "</b> seconds...";
31
+};
32
+
33
+// show that we paused refreshes
34
+var netdata_paused_callback = function() {
35
+ document.body.style.opacity = 0.5;
36
+ document.getElementById("pageliveinfo").innerHTML = "Refresh paused - the page does not have your focus";
37
+};
38
+</script>
39
+<script src="https://localhost:19999/refresh-badges.js"></script>
40
+
41
+</head>
42
+<body>
43
+<div id="pageliveinfo">Please wait... loading...</div>
44
+<img src="http://localhost:19999/api/v1/badge.svg?chart=system.cpu"/>
45
+</body>
46
+</html>
47
+
48
+*/
49
+
50
+if(typeof netdata_update_every === 'undefined')
51
+ netdata_update_every = 15;
52
+
53
+var netdata_was_live = false;
54
+var netdata_is_live = true;
55
+var netdata_loops = 0;
56
+
57
+function update_netdata_badges() {
58
+ netdata_loops++;
59
+ netdata_is_live = false;
60
+
61
+ var updated = 0;
62
+ var focus = document.hasFocus();
63
+
64
+ if(focus && netdata_loops >= netdata_update_every) {
65
+ var len = document.images.length;
66
+ while(len--) {
67
+ var url = document.images[len].src;
68
+ if(url.match(/\api\/v1\/badge\.svg/)) {
69
+ if(url.match(/\?/))
70
+ url = url.replace(/&cacheBuster=\d*/, "") + "&cacheBuster=" + new Date().getTime().toString();
71
+ else
72
+ url = url.replace(/\?cacheBuster=\d*/, "") + "?cacheBuster=" + new Date().getTime().toString();
73
+
74
+ document.images[len].src = url;
75
+ updated++;
76
+ }
77
+ }
78
+ netdata_loops = 0;
79
+ }
80
+
81
+ if(focus || updated)
82
+ netdata_is_live = true;
83
+
84
+ try {
85
+ if(netdata_is_live && typeof netdata_live_callback === 'function')
86
+ netdata_live_callback(netdata_update_every - netdata_loops, updated);
87
+ else if(netdata_was_live !== netdata_is_live && typeof netdata_paused_callback === 'function')
88
+ netdata_paused_callback();
89
+ }
90
+ catch(e) {
91
+ console.log(e);
92
+ }
93
+ netdata_was_live = netdata_is_live;
94
+
95
+ setTimeout(update_netdata_badges, 1000);
96
+}
97
+setTimeout(update_netdata_badges, 1000);