You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
769 lines
23 KiB
769 lines
23 KiB
1 year ago
|
<?php
|
||
|
|
/*
|
||
|
|
** 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.
|
||
|
|
**/
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @var CView $this
|
||
|
|
*/
|
||
|
|
?>
|
||
|
|
|
||
|
|
<script type="text/x-jquery-tmpl" id="tmpl-item-row-<?= GRAPH_TYPE_NORMAL ?>">
|
||
|
|
<tr id="items_#{number}" class="sortable">
|
||
|
|
<!-- icon + hidden -->
|
||
|
|
<?php if ($readonly): ?>
|
||
|
|
<td>
|
||
|
|
<?php else: ?>
|
||
|
|
<td class="<?= ZBX_STYLE_TD_DRAG_ICON ?>">
|
||
|
|
<div class="<?= ZBX_STYLE_DRAG_ICON ?>"></div>
|
||
|
|
<?php endif ?>
|
||
|
|
<input type="hidden" id="items_#{number}_gitemid" name="items[#{number}][gitemid]" value="#{gitemid}">
|
||
|
|
<input type="hidden" id="items_#{number}_itemid" name="items[#{number}][itemid]" value="#{itemid}">
|
||
|
|
<input type="hidden" id="items_#{number}_sortorder" name="items[#{number}][sortorder]" value="#{sortorder}">
|
||
|
|
<input type="hidden" id="items_#{number}_flags" name="items[#{number}][flags]" value="#{flags}">
|
||
|
|
<input type="hidden" id="items_#{number}_type" name="items[#{number}][type]" value="<?= GRAPH_ITEM_SIMPLE ?>">
|
||
|
|
<input type="hidden" id="items_#{number}_calc_fnc" name="items[#{number}][calc_fnc]" value="#{calc_fnc}">
|
||
|
|
<input type="hidden" id="items_#{number}_drawtype" name="items[#{number}][drawtype]" value="#{drawtype}">
|
||
|
|
<input type="hidden" id="items_#{number}_yaxisside" name="items[#{number}][yaxisside]" value="#{yaxisside}">
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- row number -->
|
||
|
|
<td>
|
||
|
|
<span id="items_#{number}_number" class="items_number">#{number_nr}:</span>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- name -->
|
||
|
|
<td>
|
||
|
|
<?php if ($readonly): ?>
|
||
|
|
<span id="items_#{number}_name">#{name}</span>
|
||
|
|
<?php else: ?>
|
||
|
|
<a href="javascript:void(0)"><span id="items_#{number}_name">#{name}</span></a>
|
||
|
|
<?php endif ?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- function -->
|
||
|
|
<td>
|
||
|
|
<?= (new CSelect('items[#{number}][calc_fnc]'))
|
||
|
|
->setValue('#{calc_fnc}')
|
||
|
|
->addOptions(CSelect::createOptionsFromArray([
|
||
|
|
CALC_FNC_ALL => _('all'),
|
||
|
|
CALC_FNC_MIN => _('min'),
|
||
|
|
CALC_FNC_AVG => _('avg'),
|
||
|
|
CALC_FNC_MAX => _('max')
|
||
|
|
]))
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- drawtype -->
|
||
|
|
<td>
|
||
|
|
<?= (new CSelect('items[#{number}][drawtype]'))
|
||
|
|
->setValue('#{drawtype}')
|
||
|
|
->addOptions(CSelect::createOptionsFromArray($graph_item_drawtypes))
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- yaxisside -->
|
||
|
|
<td>
|
||
|
|
<?= (new CSelect('items[#{number}][yaxisside]'))
|
||
|
|
->setValue('#{yaxisside}')
|
||
|
|
->addOptions(CSelect::createOptionsFromArray([
|
||
|
|
GRAPH_YAXIS_SIDE_LEFT => _('Left'),
|
||
|
|
GRAPH_YAXIS_SIDE_RIGHT => _('Right')
|
||
|
|
]))
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<td>
|
||
|
|
<?= (new CColor('items[#{number}][color]', '#{color}', 'items_#{number}_color'))
|
||
|
|
->appendColorPickerJs(false)
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<?php if (!$readonly): ?>
|
||
|
|
<td class="<?= ZBX_STYLE_NOWRAP ?>">
|
||
|
|
<button type="button" class="<?= ZBX_STYLE_BTN_LINK ?>" id="items_#{number}_remove" data-remove="#{number}" onclick="view.removeItem(this);"><?= _('Remove') ?></button>
|
||
|
|
</td>
|
||
|
|
<?php endif ?>
|
||
|
|
</tr>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="text/x-jquery-tmpl" id="tmpl-item-row-<?= GRAPH_TYPE_STACKED ?>">
|
||
|
|
<tr id="items_#{number}" class="sortable">
|
||
|
|
<!-- icon + hidden -->
|
||
|
|
<?php if ($readonly): ?>
|
||
|
|
<td>
|
||
|
|
<?php else: ?>
|
||
|
|
<td class="<?= ZBX_STYLE_TD_DRAG_ICON ?>">
|
||
|
|
<div class="<?= ZBX_STYLE_DRAG_ICON ?>"></div>
|
||
|
|
<?php endif ?>
|
||
|
|
<input type="hidden" id="items_#{number}_gitemid" name="items[#{number}][gitemid]" value="#{gitemid}">
|
||
|
|
<input type="hidden" id="items_#{number}_itemid" name="items[#{number}][itemid]" value="#{itemid}">
|
||
|
|
<input type="hidden" id="items_#{number}_sortorder" name="items[#{number}][sortorder]" value="#{sortorder}">
|
||
|
|
<input type="hidden" id="items_#{number}_flags" name="items[#{number}][flags]" value="#{flags}">
|
||
|
|
<input type="hidden" id="items_#{number}_type" name="items[#{number}][type]" value="<?= GRAPH_ITEM_SIMPLE ?>">
|
||
|
|
<input type="hidden" id="items_#{number}_calc_fnc" name="items[#{number}][calc_fnc]" value="#{calc_fnc}">
|
||
|
|
<input type="hidden" id="items_#{number}_drawtype" name="items[#{number}][drawtype]" value="#{drawtype}">
|
||
|
|
<input type="hidden" id="items_#{number}_yaxisside" name="items[#{number}][yaxisside]" value="#{yaxisside}">
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- row number -->
|
||
|
|
<td>
|
||
|
|
<span id="items_#{number}_number" class="items_number">#{number_nr}:</span>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- name -->
|
||
|
|
<td>
|
||
|
|
<?php if ($readonly): ?>
|
||
|
|
<span id="items_#{number}_name">#{name}</span>
|
||
|
|
<?php else: ?>
|
||
|
|
<a href="javascript:void(0)"><span id="items_#{number}_name">#{name}</span></a>
|
||
|
|
<?php endif ?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- function -->
|
||
|
|
<td>
|
||
|
|
<?= (new CSelect('items[#{number}][calc_fnc]'))
|
||
|
|
->setValue('#{calc_fnc}')
|
||
|
|
->addOptions(CSelect::createOptionsFromArray([
|
||
|
|
CALC_FNC_MIN => _('min'),
|
||
|
|
CALC_FNC_AVG => _('avg'),
|
||
|
|
CALC_FNC_MAX => _('max')
|
||
|
|
]))
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- yaxisside -->
|
||
|
|
<td>
|
||
|
|
<?= (new CSelect('items[#{number}][yaxisside]'))
|
||
|
|
->setValue('#{yaxisside}')
|
||
|
|
->addOptions(CSelect::createOptionsFromArray([
|
||
|
|
GRAPH_YAXIS_SIDE_LEFT => _('Left'),
|
||
|
|
GRAPH_YAXIS_SIDE_RIGHT => _('Right')
|
||
|
|
]))
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<td>
|
||
|
|
<?= (new CColor('items[#{number}][color]', '#{color}', 'items_#{number}_color'))
|
||
|
|
->appendColorPickerJs(false)
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<?php if (!$readonly): ?>
|
||
|
|
<td class="<?= ZBX_STYLE_NOWRAP ?>">
|
||
|
|
<button type="button" class="<?= ZBX_STYLE_BTN_LINK ?>" id="items_#{number}_remove" data-remove="#{number}" onclick="view.removeItem(this);"><?= _('Remove') ?></button>
|
||
|
|
</td>
|
||
|
|
<?php endif ?>
|
||
|
|
</tr>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="text/x-jquery-tmpl" id="tmpl-item-row-<?= GRAPH_TYPE_PIE ?>">
|
||
|
|
<tr id="items_#{number}" class="sortable">
|
||
|
|
<!-- icon + hidden -->
|
||
|
|
<?php if ($readonly): ?>
|
||
|
|
<td>
|
||
|
|
<?php else: ?>
|
||
|
|
<td class="<?= ZBX_STYLE_TD_DRAG_ICON ?>">
|
||
|
|
<div class="<?= ZBX_STYLE_DRAG_ICON ?>"></div>
|
||
|
|
<?php endif ?>
|
||
|
|
<input type="hidden" id="items_#{number}_gitemid" name="items[#{number}][gitemid]" value="#{gitemid}">
|
||
|
|
<input type="hidden" id="items_#{number}_itemid" name="items[#{number}][itemid]" value="#{itemid}">
|
||
|
|
<input type="hidden" id="items_#{number}_sortorder" name="items[#{number}][sortorder]" value="#{sortorder}">
|
||
|
|
<input type="hidden" id="items_#{number}_flags" name="items[#{number}][flags]" value="#{flags}">
|
||
|
|
<input type="hidden" id="items_#{number}_type" name="items[#{number}][type]" value="#{type}">
|
||
|
|
<input type="hidden" id="items_#{number}_calc_fnc" name="items[#{number}][calc_fnc]" value="#{calc_fnc}">
|
||
|
|
<input type="hidden" id="items_#{number}_drawtype" name="items[#{number}][drawtype]" value="<?= GRAPH_ITEM_DRAWTYPE_LINE ?>">
|
||
|
|
<input type="hidden" id="items_#{number}_yaxisside" name="items[#{number}][yaxisside]" value="<?= GRAPH_YAXIS_SIDE_LEFT ?>">
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- row number -->
|
||
|
|
<td>
|
||
|
|
<span id="items_#{number}_number" class="items_number">#{number_nr}:</span>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- name -->
|
||
|
|
<td>
|
||
|
|
<?php if ($readonly): ?>
|
||
|
|
<span id="items_#{number}_name">#{name}</span>
|
||
|
|
<?php else: ?>
|
||
|
|
<a href="javascript:void(0)"><span id="items_#{number}_name">#{name}</span></a>
|
||
|
|
<?php endif ?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- type -->
|
||
|
|
<td>
|
||
|
|
<?= (new CSelect('items[#{number}][type]'))
|
||
|
|
->setValue('#{type}')
|
||
|
|
->addOptions(CSelect::createOptionsFromArray([
|
||
|
|
GRAPH_ITEM_SIMPLE =>_('Simple'),
|
||
|
|
GRAPH_ITEM_SUM =>_('Graph sum')
|
||
|
|
]))
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- function -->
|
||
|
|
<td>
|
||
|
|
<?= (new CSelect('items[#{number}][calc_fnc]'))
|
||
|
|
->setValue('#{calc_fnc}')
|
||
|
|
->addOptions(CSelect::createOptionsFromArray([
|
||
|
|
CALC_FNC_MIN => _('min'),
|
||
|
|
CALC_FNC_AVG => _('avg'),
|
||
|
|
CALC_FNC_MAX => _('max'),
|
||
|
|
CALC_FNC_LST => _('last')
|
||
|
|
]))
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<td>
|
||
|
|
<?= (new CColor('items[#{number}][color]', '#{color}', 'items_#{number}_color'))
|
||
|
|
->appendColorPickerJs(false)
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<?php if (!$readonly): ?>
|
||
|
|
<td class="<?= ZBX_STYLE_NOWRAP ?>">
|
||
|
|
<button type="button" class="<?= ZBX_STYLE_BTN_LINK ?>" id="items_#{number}_remove" data-remove="#{number}" onclick="view.removeItem(this);"><?= _('Remove') ?></button>
|
||
|
|
</td>
|
||
|
|
<?php endif ?>
|
||
|
|
</tr>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="text/x-jquery-tmpl" id="tmpl-item-row-<?= GRAPH_TYPE_EXPLODED ?>">
|
||
|
|
<tr id="items_#{number}" class="sortable">
|
||
|
|
<!-- icon + hidden -->
|
||
|
|
<?php if ($readonly): ?>
|
||
|
|
<td>
|
||
|
|
<?php else: ?>
|
||
|
|
<td class="<?= ZBX_STYLE_TD_DRAG_ICON ?>">
|
||
|
|
<div class="<?= ZBX_STYLE_DRAG_ICON ?>"></div>
|
||
|
|
<?php endif ?>
|
||
|
|
<input type="hidden" id="items_#{number}_gitemid" name="items[#{number}][gitemid]" value="#{gitemid}">
|
||
|
|
<input type="hidden" id="items_#{number}_itemid" name="items[#{number}][itemid]" value="#{itemid}">
|
||
|
|
<input type="hidden" id="items_#{number}_sortorder" name="items[#{number}][sortorder]" value="#{sortorder}">
|
||
|
|
<input type="hidden" id="items_#{number}_flags" name="items[#{number}][flags]" value="#{flags}">
|
||
|
|
<input type="hidden" id="items_#{number}_type" name="items[#{number}][type]" value="#{type}">
|
||
|
|
<input type="hidden" id="items_#{number}_calc_fnc" name="items[#{number}][calc_fnc]" value="#{calc_fnc}">
|
||
|
|
<input type="hidden" id="items_#{number}_drawtype" name="items[#{number}][drawtype]" value="<?= GRAPH_ITEM_DRAWTYPE_LINE ?>">
|
||
|
|
<input type="hidden" id="items_#{number}_yaxisside" name="items[#{number}][yaxisside]" value="<?= GRAPH_YAXIS_SIDE_LEFT ?>">
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- row number -->
|
||
|
|
<td>
|
||
|
|
<span id="items_#{number}_number" class="items_number">#{number_nr}:</span>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- name -->
|
||
|
|
<td>
|
||
|
|
<?php if ($readonly): ?>
|
||
|
|
<span id="items_#{number}_name">#{name}</span>
|
||
|
|
<?php else: ?>
|
||
|
|
<a href="javascript:void(0)"><span id="items_#{number}_name">#{name}</span></a>
|
||
|
|
<?php endif ?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- type -->
|
||
|
|
<td>
|
||
|
|
<?= (new CSelect('items[#{number}][type]'))
|
||
|
|
->setValue('#{type}')
|
||
|
|
->addOptions(CSelect::createOptionsFromArray([
|
||
|
|
GRAPH_ITEM_SIMPLE => _('Simple'),
|
||
|
|
GRAPH_ITEM_SUM => _('Graph sum')
|
||
|
|
]))
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- function -->
|
||
|
|
<td>
|
||
|
|
<?= (new CSelect('items[#{number}][calc_fnc]'))
|
||
|
|
->setValue('#{calc_fnc}')
|
||
|
|
->addOptions(CSelect::createOptionsFromArray([
|
||
|
|
CALC_FNC_MIN => _('min'),
|
||
|
|
CALC_FNC_AVG => _('avg'),
|
||
|
|
CALC_FNC_MAX => _('max'),
|
||
|
|
CALC_FNC_LST => _('last')
|
||
|
|
]))
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<td>
|
||
|
|
<?= (new CColor('items[#{number}][color]', '#{color}', 'items_#{number}_color'))
|
||
|
|
->appendColorPickerJs(false)
|
||
|
|
?>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<?php if (!$readonly): ?>
|
||
|
|
<td class="<?= ZBX_STYLE_NOWRAP ?>">
|
||
|
|
<button type="button" class="<?= ZBX_STYLE_BTN_LINK ?>" id="items_#{number}_remove" data-remove="#{number}" onclick="view.removeItem(this);"><?= _('Remove') ?></button>
|
||
|
|
</td>
|
||
|
|
<?php endif ?>
|
||
|
|
</tr>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const view = {
|
||
|
|
form_name: null,
|
||
|
|
graphs: null,
|
||
|
|
context: null,
|
||
|
|
parent_discoveryid: null,
|
||
|
|
|
||
|
|
init({form_name, theme_colors, graphs, items, context, parent_discoveryid}) {
|
||
|
|
this.form_name = form_name;
|
||
|
|
colorPalette.setThemeColors(theme_colors);
|
||
|
|
this.graphs = graphs;
|
||
|
|
this.context = context;
|
||
|
|
this.is_discovery = parent_discoveryid !== null;
|
||
|
|
|
||
|
|
items.forEach((item, i) => {
|
||
|
|
item.number = i;
|
||
|
|
item.number_nr = i + 1;
|
||
|
|
item.name = item.host + '<?= NAME_DELIMITER ?>' + item.name;
|
||
|
|
|
||
|
|
this.loadItem(item);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#tabs').on('tabscreate tabsactivate', (event, ui) => {
|
||
|
|
const $panel = (event.type === 'tabscreate') ? ui.panel : ui.newPanel;
|
||
|
|
|
||
|
|
if ($panel.attr('id') === 'previewTab') {
|
||
|
|
const $preview_chart = $('#previewChart');
|
||
|
|
const src = new Curl('chart3.php');
|
||
|
|
|
||
|
|
if ($preview_chart.find('.is-loading').length) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
src.setArgument('period', '3600');
|
||
|
|
src.setArgument('name', $('#name').val());
|
||
|
|
src.setArgument('width', $('#width').val());
|
||
|
|
src.setArgument('height', $('#height').val());
|
||
|
|
src.setArgument('graphtype', $('#graphtype').val());
|
||
|
|
src.setArgument('legend', $('#show_legend').is(':checked') ? 1 : 0);
|
||
|
|
|
||
|
|
if (this.graphs.graphtype == <?= GRAPH_TYPE_PIE ?>
|
||
|
|
|| this.graphs.graphtype == <?= GRAPH_TYPE_EXPLODED ?>) {
|
||
|
|
src.setPath('chart7.php');
|
||
|
|
src.setArgument('graph3d', $('#show_3d').is(':checked') ? 1 : 0);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (this.graphs.graphtype == <?= GRAPH_TYPE_NORMAL ?>) {
|
||
|
|
src.setArgument('percent_left', $('#percent_left').val());
|
||
|
|
src.setArgument('percent_right', $('#percent_right').val());
|
||
|
|
}
|
||
|
|
src.setArgument('ymin_type', $('#ymin_type').val());
|
||
|
|
src.setArgument('ymax_type', $('#ymax_type').val());
|
||
|
|
src.setArgument('yaxismin', $('#yaxismin').val());
|
||
|
|
src.setArgument('yaxismax', $('#yaxismax').val());
|
||
|
|
|
||
|
|
if ($('#ymin_type').val() == <?= GRAPH_YAXIS_TYPE_ITEM_VALUE ?>) {
|
||
|
|
const ymin_item_data = $('#ymin_itemid').multiSelect('getData');
|
||
|
|
|
||
|
|
if (ymin_item_data.length) {
|
||
|
|
src.setArgument('ymin_itemid', ymin_item_data[0]['id']);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if ($('#ymax_type').val() == <?= GRAPH_YAXIS_TYPE_ITEM_VALUE ?>) {
|
||
|
|
const ymax_item_data = $('#ymax_itemid').multiSelect('getData');
|
||
|
|
|
||
|
|
if (ymax_item_data.length) {
|
||
|
|
src.setArgument('ymax_itemid', ymax_item_data[0]['id']);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
src.setArgument('showworkperiod', $('#show_work_period').is(':checked') ? 1 : 0);
|
||
|
|
src.setArgument('showtriggers', $('#show_triggers').is(':checked') ? 1 : 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#itemsTable tr.sortable').each((i, node) => {
|
||
|
|
const short_fmt = [];
|
||
|
|
|
||
|
|
$(node).find('*[name]').each((_, input) => {
|
||
|
|
if (!$.isEmptyObject(input) && input.name != null) {
|
||
|
|
const regex = /items\[\d+\]\[([a-zA-Z0-9\-\_\.]+)\]/;
|
||
|
|
const name = input.name.match(regex);
|
||
|
|
|
||
|
|
short_fmt.push((name[1]).substr(0, 2) + ':' + input.value);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
src.setArgument('i[' + i + ']', short_fmt.join(','));
|
||
|
|
});
|
||
|
|
|
||
|
|
const $image = $('img', $preview_chart);
|
||
|
|
|
||
|
|
if ($image.length != 0) {
|
||
|
|
$image.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
$preview_chart.append($('<div>', {css: {'position': 'relative', 'min-height': '50px'}})
|
||
|
|
.addClass('is-loading'));
|
||
|
|
|
||
|
|
$('<img>')
|
||
|
|
.attr('src', src.getUrl())
|
||
|
|
.on('load', function() {
|
||
|
|
$preview_chart.html($(this));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (this.graphs.readonly) {
|
||
|
|
$('#itemsTable').sortable({disabled: true}).find('input').prop('readonly', true);
|
||
|
|
$('z-select', '#itemsTable').prop('disabled', true);
|
||
|
|
|
||
|
|
const size = $('#itemsTable tr.sortable').length;
|
||
|
|
|
||
|
|
for (let i = 0; i < size; i++) {
|
||
|
|
$('#items_' + i + '_color').removeAttr('onchange');
|
||
|
|
$('#lbl_items_' + i + '_color').removeAttr('onclick');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Y axis min clean unused fields.
|
||
|
|
$('#ymin_type').change(function() {
|
||
|
|
switch ($(this).val()) {
|
||
|
|
case '<?= GRAPH_YAXIS_TYPE_CALCULATED ?>':
|
||
|
|
$('#yaxismin').val('');
|
||
|
|
$('#ymin_name').val('');
|
||
|
|
$('#ymin_itemid').val('0');
|
||
|
|
break;
|
||
|
|
|
||
|
|
case '<?= GRAPH_YAXIS_TYPE_FIXED ?>':
|
||
|
|
$('#ymin_name').val('');
|
||
|
|
$('#ymin_itemid').val('0');
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
$('#yaxismin').val('');
|
||
|
|
}
|
||
|
|
|
||
|
|
$('form[name="' + view.form_name + '"]').submit();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Y axis max clean unused fields.
|
||
|
|
$('#ymax_type').change(function() {
|
||
|
|
switch ($(this).val()) {
|
||
|
|
case '<?= GRAPH_YAXIS_TYPE_CALCULATED ?>':
|
||
|
|
$('#yaxismax').val('');
|
||
|
|
$('#ymax_name').val('');
|
||
|
|
$('#ymax_itemid').val('0');
|
||
|
|
break;
|
||
|
|
|
||
|
|
case '<?= GRAPH_YAXIS_TYPE_FIXED ?>':
|
||
|
|
$('#ymax_name').val('');
|
||
|
|
$('#ymax_itemid').val('0');
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
$('#yaxismax').val('');
|
||
|
|
}
|
||
|
|
|
||
|
|
$('form[name="' + view.form_name + '"]').submit();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#graphtype').change(() => {
|
||
|
|
$('form[name="' + view.form_name + '"]').submit();
|
||
|
|
});
|
||
|
|
|
||
|
|
!this.graphs.readonly && this.initSortable();
|
||
|
|
},
|
||
|
|
|
||
|
|
loadItem(item) {
|
||
|
|
const itemTpl = new Template($('#tmpl-item-row-' + this.graphs.graphtype).html());
|
||
|
|
const $row = $(itemTpl.evaluate(item));
|
||
|
|
|
||
|
|
$('#itemButtonsRow').before($row);
|
||
|
|
$row.find('.<?= ZBX_STYLE_COLOR_PICKER ?> input').colorpicker();
|
||
|
|
|
||
|
|
!this.graphs.readonly && this.rewriteNameLinks();
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @see init.js add.popup event
|
||
|
|
*/
|
||
|
|
addPopupValues(list) {
|
||
|
|
if (!isset('object', list) || list.object != 'itemid') {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
const form = document.getElementsByName(this.form_name)[0];
|
||
|
|
const itemTpl = new Template($('#tmpl-item-row-' + this.graphs.graphtype).html());
|
||
|
|
|
||
|
|
for (let i = 0; i < list.values.length; i++) {
|
||
|
|
const used_colors = [];
|
||
|
|
|
||
|
|
for (const color of form.querySelectorAll('.<?= ZBX_STYLE_COLOR_PICKER ?> input')) {
|
||
|
|
if (color.value !== '') {
|
||
|
|
used_colors.push(color.value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const number = $('#itemsTable tr.sortable').length;
|
||
|
|
const item = {
|
||
|
|
number: number,
|
||
|
|
number_nr: number + 1,
|
||
|
|
gitemid: null,
|
||
|
|
itemid: list.values[i].itemid,
|
||
|
|
calc_fnc: null,
|
||
|
|
drawtype: 0,
|
||
|
|
yaxisside: 0,
|
||
|
|
sortorder: number,
|
||
|
|
flags: (typeof list.values[i].flags === 'undefined') ? 0 : list.values[i].flags,
|
||
|
|
color: colorPalette.getNextColor(used_colors),
|
||
|
|
name: list.values[i].name
|
||
|
|
};
|
||
|
|
const $row = $(itemTpl.evaluate(item));
|
||
|
|
|
||
|
|
$('#itemButtonsRow').before($row);
|
||
|
|
$row.find('#items_' + number + '_calc_fnc').val('<?= CALC_FNC_AVG ?>');
|
||
|
|
$(`#items_${number}_color`).colorpicker();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!this.graphs.readonly) {
|
||
|
|
this.activateSortable();
|
||
|
|
this.rewriteNameLinks();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
getOnlyHostParam() {
|
||
|
|
return this.graphs.is_template
|
||
|
|
? {only_hostid: this.graphs.hostid}
|
||
|
|
: {real_hosts: '1', hostid: this.graphs.hostid};
|
||
|
|
},
|
||
|
|
|
||
|
|
rewriteNameLinks() {
|
||
|
|
const size = $('#itemsTable tr.sortable').length;
|
||
|
|
|
||
|
|
for (let i = 0; i < size; i++) {
|
||
|
|
const parameters = {
|
||
|
|
srcfld1: 'itemid',
|
||
|
|
srcfld2: 'name',
|
||
|
|
dstfrm: this.form_name,
|
||
|
|
dstfld1: 'items_' + i + '_itemid',
|
||
|
|
dstfld2: 'items_' + i + '_name',
|
||
|
|
numeric: 1,
|
||
|
|
writeonly: 1
|
||
|
|
};
|
||
|
|
|
||
|
|
if ($('#items_' + i + '_flags').val() == <?= ZBX_FLAG_DISCOVERY_PROTOTYPE ?>) {
|
||
|
|
parameters['srctbl'] = 'item_prototypes',
|
||
|
|
parameters['srcfld3'] = 'flags',
|
||
|
|
parameters['dstfld3'] = 'items_' + i + '_flags',
|
||
|
|
parameters['parent_discoveryid'] = this.graphs.parent_discoveryid;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
parameters['srctbl'] = 'items';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.graphs.normal_only !== '') {
|
||
|
|
parameters['normal_only'] = '1';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!this.graphs.parent_discoveryid && this.graphs.hostid) {
|
||
|
|
parameters['hostid'] = this.graphs.hostid;
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#items_' + i + '_name').attr('onclick', 'PopUp("popup.generic", ' +
|
||
|
|
'$.extend(' + JSON.stringify(parameters) + ', view.getOnlyHostParam()),' +
|
||
|
|
'{dialogue_class: "modal-popup-generic", trigger_element: this});'
|
||
|
|
);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
removeItem(obj) {
|
||
|
|
const number = $(obj).data('remove');
|
||
|
|
|
||
|
|
$('#items_' + number).find('*').remove();
|
||
|
|
$('#items_' + number).remove();
|
||
|
|
|
||
|
|
this.recalculateSortOrder();
|
||
|
|
!this.graphs.readonly && this.activateSortable();
|
||
|
|
},
|
||
|
|
|
||
|
|
recalculateSortOrder() {
|
||
|
|
let i = 0;
|
||
|
|
|
||
|
|
// Rewrite IDs, set "tmp" prefix.
|
||
|
|
$('#itemsTable tr.sortable').find('*[id]').each(function() {
|
||
|
|
const $obj = $(this);
|
||
|
|
|
||
|
|
$obj.attr('id', 'tmp' + $obj.attr('id'));
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#itemsTable tr.sortable').each(function() {
|
||
|
|
const $obj = $(this);
|
||
|
|
|
||
|
|
$obj.attr('id', 'tmp' + $obj.attr('id'));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Rewrite IDs to new order.
|
||
|
|
$('#itemsTable tr.sortable').each(function() {
|
||
|
|
const $obj = $(this);
|
||
|
|
|
||
|
|
// Rewrite IDs in input fields.
|
||
|
|
$obj.find('*[id]').each(function() {
|
||
|
|
const $obj = $(this);
|
||
|
|
const id = $obj.attr('id').substring(3);
|
||
|
|
const part1 = id.substring(0, id.indexOf('items_') + 5);
|
||
|
|
let part2 = id.substring(id.indexOf('items_') + 6);
|
||
|
|
|
||
|
|
part2 = part2.substring(part2.indexOf('_') + 1);
|
||
|
|
|
||
|
|
$obj.attr('id', part1 + '_' + i + '_' + part2);
|
||
|
|
|
||
|
|
// Set sortorder.
|
||
|
|
if (part2 === 'sortorder') {
|
||
|
|
$obj.val(i);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Rewrite IDs in <tr>.
|
||
|
|
const id = $obj.attr('id').substring(3);
|
||
|
|
const part1 = id.substring(0, id.indexOf('items_') + 5);
|
||
|
|
|
||
|
|
$obj.attr('id', part1 + '_' + i);
|
||
|
|
|
||
|
|
i++;
|
||
|
|
});
|
||
|
|
|
||
|
|
i = 0;
|
||
|
|
|
||
|
|
$('#itemsTable tr.sortable').each(function() {
|
||
|
|
// Set row number.
|
||
|
|
$('.items_number', this).text((i + 1) + ':');
|
||
|
|
|
||
|
|
// Set remove number.
|
||
|
|
$('#items_' + i + '_remove').data('remove', i);
|
||
|
|
|
||
|
|
i++;
|
||
|
|
});
|
||
|
|
|
||
|
|
!view.graphs.readonly && view.rewriteNameLinks();
|
||
|
|
},
|
||
|
|
|
||
|
|
initSortable() {
|
||
|
|
$('#itemsTable').sortable({
|
||
|
|
disabled: ($('#itemsTable .sortable').length < 2),
|
||
|
|
items: '.sortable',
|
||
|
|
axis: 'y',
|
||
|
|
containment: 'parent',
|
||
|
|
cursor: 'grabbing',
|
||
|
|
handle: '.<?= ZBX_STYLE_DRAG_ICON ?>',
|
||
|
|
tolerance: 'pointer',
|
||
|
|
opacity: 0.6,
|
||
|
|
update: this.recalculateSortOrder,
|
||
|
|
helper: (e, ui) => {
|
||
|
|
for (const td of ui.find('>td')) {
|
||
|
|
const $td = $(td);
|
||
|
|
$td.attr('width', $td.width())
|
||
|
|
}
|
||
|
|
|
||
|
|
return ui;
|
||
|
|
},
|
||
|
|
stop: (e, ui) => {
|
||
|
|
ui.item.find('>td').removeAttr('width');
|
||
|
|
},
|
||
|
|
start: (e, ui) => {
|
||
|
|
$(ui.placeholder).height($(ui.helper).height());
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
activateSortable() {
|
||
|
|
$('#itemsTable').sortable({disabled: ($('#itemsTable tr.sortable').length < 2)});
|
||
|
|
},
|
||
|
|
|
||
|
|
editHost(e, hostid) {
|
||
|
|
e.preventDefault();
|
||
|
|
const host_data = {hostid};
|
||
|
|
|
||
|
|
this.openHostPopup(host_data);
|
||
|
|
},
|
||
|
|
|
||
|
|
openHostPopup(host_data) {
|
||
|
|
const original_url = location.href;
|
||
|
|
const overlay = PopUp('popup.host.edit', host_data, {
|
||
|
|
dialogueid: 'host_edit',
|
||
|
|
dialogue_class: 'modal-popup-large',
|
||
|
|
prevent_navigation: true
|
||
|
|
});
|
||
|
|
|
||
|
|
overlay.$dialogue[0].addEventListener('dialogue.submit',
|
||
|
|
this.events.elementSuccess.bind(this, this.context, this.is_discovery), {once: true}
|
||
|
|
);
|
||
|
|
overlay.$dialogue[0].addEventListener('dialogue.close', () => {
|
||
|
|
history.replaceState({}, '', original_url);
|
||
|
|
}, {once: true});
|
||
|
|
},
|
||
|
|
|
||
|
|
editTemplate(e, templateid) {
|
||
|
|
e.preventDefault();
|
||
|
|
const template_data = {templateid};
|
||
|
|
|
||
|
|
this.openTemplatePopup(template_data);
|
||
|
|
},
|
||
|
|
|
||
|
|
openTemplatePopup(template_data) {
|
||
|
|
const overlay = PopUp('template.edit', template_data, {
|
||
|
|
dialogueid: 'templates-form',
|
||
|
|
dialogue_class: 'modal-popup-large',
|
||
|
|
prevent_navigation: true
|
||
|
|
});
|
||
|
|
|
||
|
|
overlay.$dialogue[0].addEventListener('dialogue.submit',
|
||
|
|
this.events.elementSuccess.bind(this, this.context, this.is_discovery), {once: true}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh() {
|
||
|
|
const url = new Curl('');
|
||
|
|
const form = document.getElementsByName(this.form_name)[0];
|
||
|
|
const fields = getFormFields(form);
|
||
|
|
|
||
|
|
post(url.getUrl(), fields);
|
||
|
|
},
|
||
|
|
|
||
|
|
events: {
|
||
|
|
elementSuccess(context, discovery, e) {
|
||
|
|
const data = e.detail;
|
||
|
|
let curl = null;
|
||
|
|
|
||
|
|
if ('success' in data) {
|
||
|
|
postMessageOk(data.success.title);
|
||
|
|
|
||
|
|
if ('messages' in data.success) {
|
||
|
|
postMessageDetails('success', data.success.messages);
|
||
|
|
}
|
||
|
|
|
||
|
|
if ('action' in data.success && data.success.action === 'delete') {
|
||
|
|
curl = discovery ? new Curl('host_discovery.php') : new Curl('graphs.php');
|
||
|
|
curl.setArgument('context', context);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (curl == null) {
|
||
|
|
view.refresh();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
location.href = curl.getUrl();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|