refresh-badges.js 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. // SPDX-License-Identifier: GPL-3.0-or-later
  2. // ----------------------------------------------------------------------------
  3. // This script periodically updates all the netdata badges you have added to a
  4. // page as images. You don't need this script if you add the badges with
  5. // <embed src="..."/> - embedded badges auto-refresh by themselves.
  6. //
  7. // You can set the following variables before loading this script:
  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. // EXAMPLE HTML PAGE:
  16. <html>
  17. <head>
  18. <script>
  19. // how frequently to update the badges?
  20. var netdata_update_every = 15;
  21. // show a count-down for badge refreshes
  22. var netdata_live_callback = function(secs, count) {
  23. document.body.style.opacity = 1;
  24. if(count)
  25. document.getElementById("pageliveinfo").innerHTML = "This page is live - updated <b>" + count + "</b> badges...";
  26. else
  27. document.getElementById("pageliveinfo").innerHTML = "This page is live - badges will be updated in <b>" + secs + "</b> seconds...";
  28. };
  29. // show that we paused refreshes
  30. var netdata_paused_callback = function() {
  31. document.body.style.opacity = 0.5;
  32. document.getElementById("pageliveinfo").innerHTML = "Refresh paused - the page does not have your focus";
  33. };
  34. </script>
  35. <script src="https://localhost:19999/refresh-badges.js"></script>
  36. </head>
  37. <body>
  38. <div id="pageliveinfo">Please wait... loading...</div>
  39. <img src="http://localhost:19999/api/v1/badge.svg?chart=system.cpu"/>
  40. </body>
  41. </html>
  42. */
  43. if(typeof netdata_update_every === 'undefined')
  44. netdata_update_every = 15;
  45. var netdata_was_live = false;
  46. var netdata_is_live = true;
  47. var netdata_loops = 0;
  48. function update_netdata_badges() {
  49. netdata_loops++;
  50. netdata_is_live = false;
  51. var updated = 0;
  52. var focus = document.hasFocus();
  53. if(focus && netdata_loops >= netdata_update_every) {
  54. var len = document.images.length;
  55. while(len--) {
  56. var url = document.images[len].src;
  57. if(url.match(/\api\/v1\/badge\.svg/)) {
  58. if(url.match(/\?/))
  59. url = url.replace(/&cacheBuster=\d*/, "") + "&cacheBuster=" + new Date().getTime().toString();
  60. else
  61. url = url.replace(/\?cacheBuster=\d*/, "") + "?cacheBuster=" + new Date().getTime().toString();
  62. document.images[len].src = url;
  63. updated++;
  64. }
  65. }
  66. netdata_loops = 0;
  67. }
  68. if(focus || updated)
  69. netdata_is_live = true;
  70. try {
  71. if(netdata_is_live && typeof netdata_live_callback === 'function')
  72. netdata_live_callback(netdata_update_every - netdata_loops, updated);
  73. else if(netdata_was_live !== netdata_is_live && typeof netdata_paused_callback === 'function')
  74. netdata_paused_callback();
  75. }
  76. catch(e) {
  77. console.log(e);
  78. }
  79. netdata_was_live = netdata_is_live;
  80. setTimeout(update_netdata_badges, 1000);
  81. }
  82. setTimeout(update_netdata_badges, 1000);