zabbix/ui/widgets/graph/assets/js/class.widget.js

/*
** Zabbix
** Copyright (C) 2001-2023 Zabbix SIA
**
** 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.
**
** You should have received a copy of the GNU General Public License
** along with this program; if not, write to the Free Software
** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
**/


class CWidgetGraph extends CWidget {

	onInitialize() {
		this._is_graph_mode = false;
	}

	onActivate() {
		if (this._is_graph_mode) {
			this._activateGraph();
		}
	}

	onDeactivate() {
		if (this._is_graph_mode) {
			this._deactivateGraph();
		}
	}

	onResize() {
		if (this._is_graph_mode && this.getState() === WIDGET_STATE_ACTIVE) {
			const graph_size = this._getGraphSize();

			if (graph_size.width <= 0 || graph_size.height <= 0) {
				return;
			}

			const image = document.getElementById('graph_' + this._unique_id);

			if (!image.complete) {
				image.addEventListener('load', () => this.resize(), {once: true});

				return;
			}

			timeControl.objectList['graph_' + this._unique_id].objDims.width = graph_size.width;
			timeControl.objectList['graph_' + this._unique_id].objDims.graphHeight = graph_size.height;

			const image_curl = new Curl(image.src);

			image_curl.setArgument('width', graph_size.width);
			image_curl.setArgument('height', graph_size.height);
			image_curl.setArgument('_', (new Date).getTime().toString(34));
			image.src = image_curl.getUrl();
		}
	}

	updateProperties({name, view_mode, fields}) {
		if (this._state === WIDGET_STATE_ACTIVE) {
			this._stopUpdating();
		}

		this._is_graph_mode = false;

		super.updateProperties({name, view_mode, fields});
	}

	onEdit() {
		if (this._is_graph_mode && this._graph_url !== null) {
			this._flickerfreescreen_container.href = 'javascript:void(0)';
			this._flickerfreescreen_container.setAttribute('role', 'button');
		}
	}

	setDynamicHost(dynamic_hostid) {
		if (this._state === WIDGET_STATE_ACTIVE) {
			this._stopUpdating();
		}

		if (this._is_graph_mode) {
			this._is_graph_mode = false;
			this._deactivateGraph();
		}

		super.setDynamicHost(dynamic_hostid);
	}

	promiseUpdate() {
		if (this._is_graph_mode) {
			timeControl.refreshObject('graph_' + this._unique_id);

			return Promise.resolve();
		}

		return super.promiseUpdate();
	}

	setContents(response) {
		super.setContents(response);

		if (!this._is_graph_mode && response.async_data !== undefined) {
			this._is_graph_mode = true;

			this._graph_url = response.async_data.graph_url;

			this._flickerfreescreen = this._body.querySelector('.flickerfreescreen');
			this._flickerfreescreen.id = 'flickerfreescreen_graph_' + this._unique_id;

			this._flickerfreescreen_container = this._flickerfreescreen.querySelector('.dashboard-widget-graph-link');
			this._flickerfreescreen_container.id = 'graph_container_' + this._unique_id;

			if (this._graph_url !== null && this.isEditMode()) {
				this._flickerfreescreen_container.href = 'javascript:void(0)';
				this._flickerfreescreen_container.setAttribute('role', 'button');
			}

			this._time_control_data = {
				...response.async_data.time_control_data,
				id: 'graph_' + this._unique_id,
				containerid: 'graph_container_' + this._unique_id
			};

			this._flickerfreescreen_data = {
				...response.async_data.flickerfreescreen_data,
				id: 'graph_' + this._unique_id
			};

			this._activateGraph();
		}
	}

	_activateGraph() {
		if (this._graph_url !== null) {
			const curl = new Curl(this._graph_url);

			curl.setArgument('from', this._time_period.from);
			curl.setArgument('to', this._time_period.to);

			this._flickerfreescreen_container.href = curl.getUrl();
		}

		const graph_size = this._getGraphSize();

		this._time_control_data.objDims.width = graph_size.width;
		this._time_control_data.objDims.graphHeight = graph_size.height;

		const curl = new Curl(this._time_control_data.src);

		curl.setArgument('from', this._time_period.from);
		curl.setArgument('to', this._time_period.to);

		this._time_control_data.src = curl.getUrl();

		this._flickerfreescreen_data.timeline = this._time_period;

		timeControl.addObject('graph_' + this._unique_id, this._time_period, this._time_control_data);
		timeControl.processObjects();

		flickerfreeScreen.add(this._flickerfreescreen_data);
	}

	_deactivateGraph() {
		timeControl.removeObject('graph_' + this._unique_id);
		flickerfreeScreen.remove(this._flickerfreescreen_data);
	}

	_getGraphSize() {
		const contents = this._contents;
		const style = getComputedStyle(contents);

		return {
			width: Math.floor(contents.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)),
			height: Math.floor(contents.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom))
		};
	}

	getActionsContextMenu({can_paste_widget}) {
		const menu = super.getActionsContextMenu({can_paste_widget});

		if (this.isEditMode()) {
			return menu;
		}

		let menu_actions = null;

		for (const search_menu_actions of menu) {
			if ('label' in search_menu_actions && search_menu_actions.label === t('Actions')) {
				menu_actions = search_menu_actions;

				break;
			}
		}

		if (menu_actions === null) {
			menu_actions = {
				label: t('Actions'),
				items: []
			};

			menu.unshift(menu_actions);
		}

		menu_actions.items.push({
			label: t('Download image'),
			disabled: !this._is_graph_mode,
			clickCallback: () => {
				downloadPngImage(this._body.querySelector('img'), 'image.png');
			}
		});

		return menu;
	}

	hasPadding() {
		return true;
	}
}