html/html/include/rrdimage.js

   1 /*#############################################################################
   2 #                                                                             #
   3 # IPFire.org - A linux based firewall                                         #
   4 # Copyright (C) 2007-2021  IPFire Team  <info@ipfire.org>                     #
   5 #                                                                             #
   6 # This program is free software: you can redistribute it and/or modify        #
   7 # it under the terms of the GNU General Public License as published by        #
   8 # the Free Software Foundation, either version 3 of the License, or           #
   9 # (at your option) any later version.                                         #
  10 #                                                                             #
  11 # This program is distributed in the hope that it will be useful,             #
  12 # but WITHOUT ANY WARRANTY; without even the implied warranty of              #
  13 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the               #
  14 # GNU General Public License for more details.                                #
  15 #                                                                             #
  16 # You should have received a copy of the GNU General Public License           #
  17 # along with this program.  If not, see <http://www.gnu.org/licenses/>.       #
  18 #                                                                             #
  19 #############################################################################*/
  20
  21 // "onclick" event handler for graph time range select button
  22 // buttonObj: reference to the button
  23 function rrdimage_selectRange(buttonObj) {
  24         if(! (buttonObj && ('range' in buttonObj.dataset))) {
  25                 return; //required parameters are missing
  26         }
  27
  28         // Get selected time range from button
  29         const range = buttonObj.dataset.range;
  30
  31         // Get surrounding div box and select new range
  32         let graphBox = $(buttonObj).closest('div');
  33         _rrdimg_setRange(graphBox, range);
  34 }
  35
  36 // Document loaded: Process all graphs, start reload timers
  37 $(function() {
  38         $('div.rrdimage').each(function() {
  39                 let graphBox = $(this);
  40                 _rrdimg_setRange(graphBox, graphBox.data('defaultRange'), true);
  41         });
  42 });
  43
  44 //--- Internal functions ---
  45
  46 // Set or update graph time range, start automatic reloading
  47 // graphBox: jQuery object, reference to graph div box
  48 // range: time range (day, hour, ...)
  49 // initMode: don't immediately reload graph, but force timers and attributes update
  50 function _rrdimg_setRange(graphBox, range, initMode = false) {
  51         if(! ((graphBox instanceof jQuery) && (graphBox.length === 1))) {
  52                 return; //graphBox element missing
  53         }
  54
  55         // Check range parameter, default to "day" on error
  56         if(! ["hour", "day", "week", "month", "year"].includes(range)) {
  57                 range = "day";
  58         }
  59
  60         // Check if the time range is changed
  61         if((graphBox.data('range') !== range) || initMode) {
  62                 graphBox.data('range', range); //Store new range
  63
  64                 // Update button highlighting
  65                 graphBox.find('button').removeClass('selected');
  66                 graphBox.find(`button[data-range="${range}"]`).addClass('selected');
  67         }
  68
  69         // Clear pending reload timer to prevent multiple image reloads
  70         let timerId = graphBox.data('reloadTimer');
  71         if(timerId !== undefined) {
  72                 window.clearInterval(timerId);
  73                 graphBox.removeData('reloadTimer');
  74         }
  75
  76         // Determine auto reload interval (in seconds),
  77         // interval = 0 disables auto reloading by default
  78         let interval = 0;
  79         switch(range) {
  80                 case 'hour':
  81                         interval = 60;
  82                         break;
  83
  84                 case 'day':
  85                 case 'week':
  86                         interval = 300;
  87                         break;
  88         }
  89
  90         // Start reload timer and store reference
  91         if(interval > 0) {
  92                 timerId = window.setInterval(function(graphRef) {
  93                         _rrdimg_reload(graphRef);
  94                 }, interval * 1000, graphBox);
  95                 graphBox.data('reloadTimer', timerId);
  96         }
  97
  98         // Always reload image unless disabled by init mode
  99         if(! initMode) {
 100                 _rrdimg_reload(graphBox);
 101         }
 102 }
 103
 104 // Reload graph image, add timestamp to prevent caching
 105 // graphBox: jQuery object (graph element must be valid)
 106 function _rrdimg_reload(graphBox) {
 107         const origin = graphBox.data('origin');
 108         const graph = graphBox.data('graph');
 109         const timestamp = Date.now();
 110
 111         // Get user selected range or fall back to default
 112         let range = graphBox.data('range');
 113         if(! range) {
 114                 range = graphBox.data('defaultRange');
 115         }
 116
 117         // Generate new image URL with timestamp
 118         const imageUrl = `/cgi-bin/getrrdimage.cgi?origin=${origin}&graph=${graph}&range=${range}&timestamp=${timestamp}`;
 119
 120         // Get graph image and set new URL
 121         graphBox.children('img').first().attr('src', imageUrl);
 122 }