1<?php 2/* 3** Zabbix 4** Copyright (C) 2001-2021 Zabbix SIA 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 2 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, write to the Free Software 18** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. 19**/ 20 21 22/** 23 * @var CView $this 24 */ 25?> 26 27<script> 28 function initializeView(dashboard, widget_defaults, time_period, page) { 29 30 const init = () => { 31 ZABBIX.Dashboard = new CDashboard(document.querySelector('.<?= ZBX_STYLE_DASHBOARD ?>'), { 32 containers: { 33 grid: document.querySelector('.<?= ZBX_STYLE_DASHBOARD_GRID ?>'), 34 navigation: document.querySelector('.<?= ZBX_STYLE_DASHBOARD_NAVIGATION ?>'), 35 navigation_tabs: document.querySelector('.<?= ZBX_STYLE_DASHBOARD_NAVIGATION_TABS ?>') 36 }, 37 buttons: { 38 previous_page: document.querySelector('.<?= ZBX_STYLE_DASHBOARD_PREVIOUS_PAGE ?>'), 39 next_page: document.querySelector('.<?= ZBX_STYLE_DASHBOARD_NEXT_PAGE ?>') 40 }, 41 data: { 42 dashboardid: dashboard.dashboardid, 43 name: dashboard.name, 44 userid: null, 45 templateid: dashboard.templateid, 46 display_period: dashboard.display_period, 47 auto_start: dashboard.auto_start 48 }, 49 max_dashboard_pages: <?= DASHBOARD_MAX_PAGES ?>, 50 cell_width: 100 / <?= DASHBOARD_MAX_COLUMNS ?>, 51 cell_height: 70, 52 max_columns: <?= DASHBOARD_MAX_COLUMNS ?>, 53 max_rows: <?= DASHBOARD_MAX_ROWS ?>, 54 widget_min_rows: <?= DASHBOARD_WIDGET_MIN_ROWS ?>, 55 widget_max_rows: <?= DASHBOARD_WIDGET_MAX_ROWS ?>, 56 widget_defaults: widget_defaults, 57 is_editable: true, 58 is_edit_mode: true, 59 can_edit_dashboards: true, 60 is_kiosk_mode: false, 61 time_period: time_period, 62 dynamic_hostid: null 63 }); 64 65 for (const page of dashboard.pages) { 66 for (const widget of page.widgets) { 67 widget.fields = (typeof widget.fields === 'object') ? widget.fields : {}; 68 widget.configuration = (typeof widget.configuration === 'object') ? widget.configuration : {}; 69 } 70 71 ZABBIX.Dashboard.addDashboardPage(page); 72 } 73 74 ZABBIX.Dashboard.activate(); 75 76 document 77 .getElementById('dashboard-config') 78 .addEventListener('click', () => ZABBIX.Dashboard.editProperties()); 79 80 document 81 .getElementById('dashboard-add-widget') 82 .addEventListener('click', () => ZABBIX.Dashboard.addNewWidget()); 83 84 document 85 .getElementById('dashboard-add') 86 .addEventListener('click', events.addClick); 87 88 document 89 .getElementById('dashboard-save') 90 .addEventListener('click', () => save()); 91 92 document 93 .getElementById('dashboard-cancel') 94 .addEventListener('click', (e) => { 95 cancelEditing(); 96 e.preventDefault(); 97 } 98 ); 99 100 ZABBIX.Dashboard.on(DASHBOARD_EVENT_BUSY, events.busy); 101 ZABBIX.Dashboard.on(DASHBOARD_EVENT_IDLE, events.idle); 102 103 enableNavigationWarning(); 104 105 if (dashboard.dashboardid === null) { 106 ZABBIX.Dashboard.editProperties(); 107 } 108 }; 109 110 const save = () => { 111 clearMessages(); 112 113 is_busy_saving = true; 114 updateBusy(); 115 116 const request_data = ZABBIX.Dashboard.save(); 117 118 request_data.sharing = dashboard.sharing; 119 120 const curl = new Curl('zabbix.php'); 121 122 curl.setArgument('action', 'template.dashboard.update'); 123 124 fetch(curl.getUrl(), { 125 method: 'POST', 126 headers: { 127 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' 128 }, 129 body: urlEncodeData(request_data) 130 }) 131 .then((response) => response.json()) 132 .then((response) => { 133 if ('errors' in response) { 134 throw {html_string: response.errors}; 135 } 136 137 if ('system-message-ok' in response) { 138 postMessageOk(response['system-message-ok']); 139 } 140 141 disableNavigationWarning(); 142 cancelEditing(); 143 }) 144 .catch((error) => { 145 if (typeof error === 'object' && 'html_string' in error) { 146 addMessage(error.html_string); 147 } 148 else { 149 const message = dashboard.dashboardid === null 150 ? <?= json_encode(_('Failed to create dashboard')) ?> 151 : <?= json_encode(_('Failed to update dashboard')) ?>; 152 153 addMessage(makeMessageBox('bad', [], message, true, false)); 154 } 155 }) 156 .finally(() => { 157 is_busy_saving = false; 158 updateBusy(); 159 }); 160 }; 161 162 const updateBusy = () => { 163 document.getElementById('dashboard-save').disabled = is_busy || is_busy_saving; 164 }; 165 166 const cancelEditing = () => { 167 const curl = new Curl('zabbix.php', false); 168 169 curl.setArgument('action', 'template.dashboard.list'); 170 curl.setArgument('templateid', dashboard.templateid); 171 172 if (page !== null) { 173 curl.setArgument('page', page); 174 } 175 176 location.replace(curl.getUrl()); 177 }; 178 179 const enableNavigationWarning = () => { 180 window.addEventListener('beforeunload', events.beforeUnload, {passive: false}); 181 }; 182 183 const disableNavigationWarning = () => { 184 window.removeEventListener('beforeunload', events.beforeUnload); 185 }; 186 187 const events = { 188 addClick: (e) => { 189 const menu = [ 190 { 191 items: [ 192 { 193 label: <?= json_encode(_('Add widget')) ?>, 194 clickCallback: () => ZABBIX.Dashboard.addNewWidget() 195 }, 196 { 197 label: <?= json_encode(_('Add page')) ?>, 198 clickCallback: () => ZABBIX.Dashboard.addNewDashboardPage() 199 } 200 ] 201 }, 202 { 203 items: [ 204 { 205 label: <?= json_encode(_('Paste widget')) ?>, 206 clickCallback: () => ZABBIX.Dashboard.pasteWidget( 207 ZABBIX.Dashboard.getStoredWidgetDataCopy() 208 ), 209 disabled: (ZABBIX.Dashboard.getStoredWidgetDataCopy() === null) 210 }, 211 { 212 label: <?= json_encode(_('Paste page')) ?>, 213 clickCallback: () => ZABBIX.Dashboard.pasteDashboardPage( 214 ZABBIX.Dashboard.getStoredDashboardPageDataCopy() 215 ), 216 disabled: (ZABBIX.Dashboard.getStoredDashboardPageDataCopy() === null) 217 } 218 ] 219 } 220 ]; 221 222 $(e.target).menuPopup(menu, new jQuery.Event(e), { 223 position: { 224 of: e.target, 225 my: 'left top', 226 at: 'left bottom', 227 within: '.wrapper' 228 } 229 }); 230 }, 231 232 beforeUnload: (e) => { 233 if (ZABBIX.Dashboard.isUnsaved()) { 234 // Display confirmation message. 235 e.preventDefault(); 236 e.returnValue = ''; 237 } 238 }, 239 240 busy: () => { 241 is_busy = true; 242 updateBusy(); 243 }, 244 245 idle: () => { 246 is_busy = false; 247 updateBusy(); 248 } 249 }; 250 251 let is_busy = false; 252 let is_busy_saving = false; 253 254 init(); 255 } 256</script> 257