cacti/include/realtime.js

/*
  +-------------------------------------------------------------------------+
  | Copyright (C) 2004-2026 The Cacti Group                                 |
  |                                                                         |
  | This program is free software; you can redistribute it and/or           |
  | modify it under the terms of the GNU General Public License             |
  | as published by the Free Software Foundation; either version 2          |
  | of the License, or (at your option) any later version.                  |
  |                                                                         |
  | This program is distributed in the hope that it will be useful,         |
  | but WITHOUT ANY WARRANTY; without even the implied warranty of          |
  | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the           |
  | GNU General Public License for more details.                            |
  +-------------------------------------------------------------------------+
  | Cacti: The Complete RRDTool-based Graphing Solution                     |
  +-------------------------------------------------------------------------+
  | This code is designed, written, and maintained by the Cacti Group. See  |
  | about.php and/or the AUTHORS file for specific developer information.   |
  +-------------------------------------------------------------------------+
  | http://www.cacti.net/                                                   |
  +-------------------------------------------------------------------------+
*/

var realtimeArray   = [];
var keepRealtime    = [];
var inRealtime      = false;
var count           = 0;
var resltimeTimer   = '';
var originalRefresh = 0;
var timeOffset;
var realtimeTimer;
var realtimePopout  = false;
var rtWidth         = 0;
var rtHeight        = 0;
var graphsRendered  = null;
var prevTotalGraphs = null;
var url;
var local_graph_id  = null;

function realtimeDetectBrowser() {
	var browser;
	if (navigator.userAgent.indexOf('MSIE') >= 0) {
		browser = 'IE';
	} else if (navigator.userAgent.indexOf('Chrome') >= 0) {
		browser = 'Chrome';
	} else if (navigator.userAgent.indexOf('Mozilla') >= 0) {
		browser = 'FF';
	} else if (navigator.userAgent.indexOf('Opera') >= 0) {
		browser = 'Opera';
	} else {
		browser = 'Other';
	}

	return browser;
}

function imageOptionsChanged(action) {
	const graph_start  = $('#graph_start').val();

	const ds_step      = $('#ds_step').val();
	var size           = $('#size').val();
	const isThumb      = $('#thumbnails').is(':checked');
	var url            = '';

	if (size == null) {
		size = 100;
	}

	local_graph_id = $('#local_graph_id').val();

	if (rtWidth === 0) {
		rtWidth = $(window).width();
	}

	if (rtHeight === 0) {
		rtHeight = $(window).height()+50;
	}

	if (action === 'countdown') {
		url = `graph_realtime.php?action=countdown&top=0&left=0&local_graph_id=${local_graph_id}&ds_step=${ds_step}&count=${count}&size=${size}&graph_nolegend=${isThumb}`;
	} else if (action === 'initial') {
		url = `graph_realtime.php?action=initial&top=0&left=0&local_graph_id=${local_graph_id}&graph_start=-${Number.parseInt(graph_start) > 0 ? graph_start:'60'}&ds_step=${ds_step}&count=${count}&size=${size}`;
	} else {
		url = `graph_realtime.php?action=${action}&top=0&left=0&local_graph_id=${local_graph_id}&graph_start=-${Number.parseInt(graph_start) > 0 ? graph_start:'60'}&ds_step=${ds_step}&count=${count}&size=${size}&graph_nolegend=${isThumb}`;
	}

	Pace.stop();

	$.getJSON(url)
		.done(function(data) {
			const image_format = (data.image_format === 'svg+xml') ? 'svg+xml' : 'png';
			if ($('#rimage').length) {
				$('#rimage').empty().attr('src', `data:image/${image_format};base64,${data.data}`);
			} else {
				$('#image').empty().html(`<img id="rimage" class="realtimeimage" src="data:image/${image_format};base64,${data.data}"/>`);
			}

			realtimePopout = $('#rtfilter').outerHeight() + 60 + $('#rimage').outerHeight() + 30 > window.innerHeight || $('#rimage').outerWidth() + 40 > window.innerWidth ? true : false;

			if (realtimePopout) {
				setRealtimeWindowSize();

				if ($('#ds_step').val() != data.ds_step) {
					$('#ds_step').val(data.ds_step);
					if ($('#ds_step').selectmenu('instance') !== undefined) {
						$('#ds_step').selectmenu('refresh');
					} else if ($('#ds_step').hasClass('select2-hidden-accessible')) {
						$('#ds_step').trigger('change.select2');
					}
				}

				var curStart = Math.abs(data.graph_start);

				if ($('#graph_start').val() != curStart) {
					$('#graph_start').val(Math.abs(data.graph_start));
					if ($('#graph_start').selectmenu('instance') !== undefined) {
						$('#graph_start').selectmenu('refresh');
					} else if ($('#graph_start').hasClass('select2-hidden-accessible')) {
						$('#graph_start').trigger('change.select2');
					}
				}

				if ($('#size').val() != data.size) {
					$('#size').val(data.size);
					if ($('#size').selectmenu('instance') !== undefined) {
						$('#size').selectmenu('refresh');
					} else if ($('#size').hasClass('select2-hidden-accessible')) {
						$('#size').trigger('change.select2');
					}
				}

				if (data.thumbnails === 'true') {
					$('#thumbnails').prop('checked', true);
				} else {
					$('#thumbnails').prop('checked', false);
				}

				destroy(data);
			}
		})
		.fail(function(data) {
			getPresentHTTPError(data);
		});
}

function setRealtimeWindowSize() {
	if (realtimePopout === true) {
		/* set the window size */
		var height1 = $('#rtfilter').outerHeight() + 60;
		var height2 = $('#rimage').outerHeight() + 30;
		var width   = $('#rimage').outerWidth() + 40;

		if (width > 60) {
			window.outerHeight = height1+height2;
			window.outerWidth  = width
			window.resizeTo(width, height1+height2);
		}
	}
}

function countRealtimeGraphs() {
	var graphs = 0;

	for (key in realtimeArray) {
		if (realtimeArray[key] === true) {
			graphs++;
		}
	}

	return graphs;
}

function stopRealtime() {


	for (key in realtimeArray) {
		var graph_id = key;

		$(`#wrapper_${graph_id}`).html(keepRealtime[graph_id]).trigger('change');
		$(`#graph_${graph_id}_realtime`).empty().html(`<img class='drillDown' alt='' title='${realtimeClickOn}' src='${urlPath}images/chart_curve_go.png'>`).find('img').tooltip();

		// Disable right click
		$(this).children().on('contextmenu', function(event) {
			return false;
		});

		$('#graph_'+graph_id).zoom({
			inputfieldStartTime : 'date1',
			inputfieldEndTime : 'date2',
			serverTimeOffset : timeOffset
		});

		$('.dispose_'+graph_id).remove();
		$('#graph_'+graph_id).css('position','').css('top','').css('left', '');

		realtimeArray[graph_id] = false;
	}

	setFilters();
	tuneFilter();
}

function setFilters() {
	var inRT = false;
	var key;

	for (key in realtimeArray) {
		if (realtimeArray[key] === true) {
			inRT = true;
			break;
		}
	}

	if (!inRT) {
		$('#timespan').show();
		$('#realtime').hide();
		$('#search').show();
		$('#device').show();
		restorePageRefresh();
	} else {
		$('#timespan').hide();
		$('#realtime').show();
		$('#search').hide();
		$('#device').hide();
	}
}

function restorePageRefresh() {
	clearTimeout(realtimeTimer);
	refreshMSeconds = originalRefresh;
	setupPageTimeout();
}

function realtimeGrapher() {
	clearTimeout(myRefresh);
	clearTimeout(realtimeTimer);

	if (originalRefresh === 0) {
		originalRefresh = refreshMSeconds;
	}

	const graph_start = $('#graph_start').val();

	const ds_step     = $('#ds_step').val();
	var size        = $('#size').val();
    const isThumb     = $('#thumbnails').is(':checked');
	const totalGraphs = countRealtimeGraphs();
	var key;

	if (size == null) {
		size = 100;
	}

	if (graphsRendered === null || graphsRendered >= totalGraphs || prevTotalGraphs !== totalGraphs) {
		//console.log('Rendering: Total Graphs:' + totalGraphs + ', Rendered Graphs:' + graphsRendered);

		graphsRendered = 0;
		prevTotalGraphs = totalGraphs;
		const cycle = realtimeGrapher.cycle = (realtimeGrapher.cycle || 0) + 1;

		for (key in realtimeArray) {
			if (realtimeArray[key] === true) {
				local_graph_id = key

				if (isThumb) {
					if (rtWidth === 0) {
						rtWidth    = $('#wrapper_'+local_graph_id).find('img').width();
						rtHeight   = $('#wrapper_'+local_graph_id).find('img').height();
					}
				}

				var position = $('#wrapper_'+local_graph_id).find('img').position();

				Pace.ignore(function() {
					if ($(`#wrapper_${local_graph_id}`).find('img').length) {
						position = $(`#wrapper_${local_graph_id}`).find('img').position();
					} else {
						position = $('body').position();
					}

					$.getJSON(`${urlPath}graph_realtime.php?action=countdown&top=${Number.parseInt(position.top)}&left=${Number.parseInt(position.left)}${isThumb ? '&graph_nolegend=true':'&graph_nolegend=false'}&graph_end=0&graph_start=-${Number.parseInt(graph_start) > 0 ? graph_start:'60'}&local_graph_id=${local_graph_id}&ds_step=${ds_step}&count=${count}&size=${size}`)
						.done(function(data) {
							if (cycle !== realtimeGrapher.cycle) return;
							var results = data;

							if (realtimeArray[results.local_graph_id] === true) {
								const image_format = (results.image_format === 'svg+xml') ? 'svg+xml' : 'png';
								$(`#graph_${results.local_graph_id}`).attr('src', `data:image/${image_format};base64,${results.data}`).trigger('change');

								if (isThumb) {
									$(`#graph_${results.local_graph_id}`).width(rtWidth).height(rtHeight);
								} else {
									$(`#graph_${results.local_graph_id}`);
								}
							}

							destroy(data);
							destroy(results);
							destroy(position);
						})
						.fail(function(data) {
							if (cycle === realtimeGrapher.cycle) getPresentHTTPError(data);
						})
						.always(function() {
							if (cycle === realtimeGrapher.cycle) graphsRendered++;
						});
				});
			}
		}
	}

	if (totalGraphs === 0) {
		stopRealtime();
	} else if (graphsRendered < totalGraphs) {
		destroy(realtimeTimer);

		realtimeTimer = setTimeout(function() {
			realtimeGrapher();
		}, $('#ds_step').val()*1000);
	} else {
		count--;
		destroy(realtimeTimer);

		realtimeTimer = setTimeout(function() {
			realtimeGrapher();
		}, $('#ds_step').val()*1000);
	}
}

function destroy(obj) {
	for (var prop in obj){
		var property = obj[prop];

		if (property !== null && typeof(property) === 'object') {
            destroy(property);
        } else {
            obj[prop] = null;
        }
	}
}