Configuración

Esta página describe las clases que se pueden usar para crear una vista de configuración de widgets con campos de configuración personalizados. La vista de configuración del widget es la parte del widget que permite al usuario configurar los parámetros del widget para presentation.

Widget

Clase de widget principal, extiende la clase base de todos los widgets del tablero: CWidget. Necesario para anular el comportamiento predeterminado del widget.

La clase Widget debe estar ubicada en el directorio raíz del widget (por ejemplo, zabbix/ui/modules/my_custom_widget).

Ejemplo de Widget.php

<?php
       
       namespace Modules\MyCustomWidget;
       
       use Zabbix\Core\CWidget;
       
       class Widget extends CWidget {
       
       public const MY_CONSTANT = 0;
       
       public function getTranslationStrings(): array {
       return [
       'class.widget.js' => [
       'No data' => _('No data')
       ]
       ];
       }
       }

WidgetForm

La clase WidgetForm extiende la clase predeterminada CWidgetForm y contiene un conjunto de campos CWidgetField que son necesarios para definir la estructura de almacenamiento de configuración del widget en la base de datos y manejar la validación de las entradas.

La clase WidgetForm debe estar ubicada en el directorio includes. Si la clase tiene un nombre diferente, el nombre debe especificarse en el parámetro widget/form_class en el archivo manifest.json.

ejemplo de includes/WidgetForm.php

<?php
       
       namespace Modules\MyCustomWidget\Includes;
       
       use Modules\MyCustomWidget\Widget;
       
       use Zabbix\Widgets\{
           CWidgetField,
           CWidgetForm
       };
       
       use Zabbix\Widgets\Fields\{
           CWidgetFieldMultiSelectItem,
           CWidgetFieldTextBox,
           CWidgetFieldColor
       };
       
       class WidgetForm extends CWidgetForm {
           public const DEFAULT_COLOR_PALETTE = [
           'FF465C', 'B0AF07', '0EC9AC', '524BBC', 'ED1248', 'D1E754', '2AB5FF', '385CC7', 'EC1594', 'BAE37D',
           '6AC8FF', 'EE2B29', '3CA20D', '6F4BBC', '00A1FF', 'F3601B', '1CAE59', '45CFDB', '894BBC', '6D6D6D'
           ];
       
           public function addFields(): self {
           return $this
           ->addField(
           (new CWidgetFieldMultiSelectItem('itemid', _('Item')))
           ->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK)
           ->setMultiple(false)
           )
           ->addField(
           new CWidgetFieldTextBox('description', _('Description'))
           )
           ->addField(
           (new CWidgetFieldColor('chart_color', _('Color')))->setDefault('FF0000')
           );
           }
       }

CWidgetFormView

La clase CWidgetFormView es necesaria para especificar la lógica de presentación de los campos definidos en la clase WidgetForm, determinando su apariencia y comportamiento cuando se representan en la vista de configuración.

La clase CWidgetFormView admite los siguientes métodos:

  • addField() - recibe una instancia de la clase CWidgetFieldView como parámetro; cada clase CWidgetField tiene una clase CWidgetFieldView respectiva para usar en la vista de configuración del widget.
  • addFieldset(): recibe una instancia de la clase CWidgetFieldsGroupView que combina campos en un contenedor plegable.
  • addFieldsGroup() - recibe una instancia de CWidgetFormFieldsetCollapsibleView que visualmente (con un borde) combina campos en un grupo.
  • includeJsFile() - permite agregar un archivo JavaScript a la vista de configuración del widget.
  • addJavaScript() - permite agregar JavaScript en línea que se ejecutará tan pronto como se cargue la vista de configuración del widget.

La clase CWidgetFormView debe estar ubicada en el directorio views.

ejemplo de vistas/widget.edit.php

<?php
       
       /**
        * My custom widget form view.
        *
        * @var CView $this
        * @var array $data
        */
       
       use Modules\MyCustomWidget\Includes\WidgetForm;
       
       (new CWidgetFormView($data))
           ->addField(
               (new CWidgetFieldMultiSelectItemView($data['fields']['itemid']))->setPopupParameter('numeric', true)
           )
           ->addFieldset(
               (new CWidgetFormFieldsetCollapsibleView(_('Advanced configuration')))
                   ->addField(
                       new CWidgetFieldTextBoxView($data['fields']['description'])
                   )
                   ->addField(
                       new CWidgetFieldColorView($data['fields']['chart_color'])
                   )
           )
           ->includeJsFile('widget.edit.js.php')
           ->addJavaScript('my_custom_widget_form.init('.json_encode([
               'color_palette' => WidgetForm::DEFAULT_COLOR_PALETTE
           ]).');')
           ->show();

JavaScript

Se puede utilizar una clase de JavaScript para agregar comportamiento dinámico e interactividad a la vista de configuración del widget. Por ejemplo, puede inicializar un selector de color, definido en la clase CWidgetFormView.

La clase JavaScript debe cargarse con el formulario, por lo tanto, se debe hacer referencia a ella en la clase CWidgetFormView utilizando los métodos includeJsFile() y addJavaScript().

En el siguiente ejemplo, se crea inmediatamente una instancia de clase singleton y se almacena con el nombre window.my_custom_widget_form. Por lo tanto, al abrir el formulario por segunda vez se volverá a crear la instancia.

La clase JavaScript debe estar ubicada en el directorio views.

ejemplo de vistas/widget.edit.js.php

<?php
       
       use Modules\MyCustomWidget\Widget;
       
       ?>
       
       window.my_custom_widget_form = new class {
       
           init({color_palette}) {
               colorPalette.setThemeColors(color_palette);
       
               for (const colorpicker of jQuery('.<?= ZBX_STYLE_COLOR_PICKER ?> input')) {
                   jQuery(colorpicker).colorpicker();
               }
       
               const overlay = overlays_stack.getById('widget_properties');
       
               for (const event of ['overlay.reload', 'overlay.close']) {
                   overlay.$dialogue[0].addEventListener(event, () => { jQuery.colorpicker('hide'); });
               }
           }
       };

CWidgetField

La clase CWidgetField es una clase base de la cual se heredan todas las clases de campos de formulario (CWidgetFieldCheckBox, CWidgetFieldTextArea, CWidgetFieldRadioButtonList, etc.). Las clases que extienden CWidgetField son responsables de recibir, guardar y validar los valores de configuración del widget.

Las siguientes clases CWidgetField están disponibles.

Clase CWidgetField Tipo de campo de base de datos Descripción
CWidgetFieldCheckBox int32 Casilla de verificación única.
CWidgetFieldCheckBoxList matriz de int32 Varias casillas de verificación en un único campo de configuración.
CWidgetFieldColor cadena Campo de selección de color.
CWidgetFieldDatePicker cadena Campo de selección de fecha.
CWidgetFieldHostPatternSelect string Campo de selección múltiple que permite seleccionar uno o varios equipos. Admite la definición de patrones de nombres de equipo (se seleccionarán todos los equipos coincidentes).
CWidgetFieldIntegerBox int32 Campo para ingresar un número entero. Se puede utilizar para configurar valores mínimos y máximos.
CWidgetFieldLatLng cadena Cuadro de texto que permite ingresar latitud, longitud y nivel de zoom del mapa separados por comas.
CWidgetFieldMultiSelectAction ID Campo de selección múltiple para seleccionar acciones (de la lista de acciones definidas en Alertas → Acciones).
CWidgetFieldMultiSelectGraph ID Campo de selección múltiple para seleccionar gráficos personalizados.
CWidgetFieldMultiSelectGraphPrototype ID Campo de selección múltiple para seleccionar prototipos de gráficos personalizados.
CWidgetFieldMultiSelectGroup ID Campo de selección múltiple para seleccionar grupos de equipos.
CWidgetFieldMultiSelectHost ID Campo de selección múltiple para seleccionar equipos.
CWidgetFieldMultiSelectItem ID Campo de selección múltiple para seleccionar métricas.
CWidgetFieldMultiSelectItemPattern ID Campo de selección múltiple para seleccionar patrones de métricas.
CWidgetFieldMultiSelectItemPrototype ID Campo de selección múltiple para seleccionar prototipos de métricas.
CWidgetFieldMultiSelectMap ID Campo de selección múltiple para seleccionar mapas.
CWidgetFieldMultiSelectMediaType ID Campo de selección múltiple para seleccionar tipos de medios.
CWidgetFieldMultiSelectOverrideHost ID Campo de selección múltiple para seleccionar una fuente de datos (panel u otro widget) que contiene un host para el cual el widget puede mostrar datos.
CWidgetFieldMultiSelectService ID Campo de selección múltiple para seleccionar servicios.
CWidgetFieldMultiSelectSla ID Campo de selección múltiple para seleccionar SLA.
CWidgetFieldMultiSelectUser ID Campo de selección múltiple para seleccionar usuarios.
CWidgetFieldNumericBox string Campo para ingresar un número flotante.
CWidgetFieldRadioButtonList int32 Grupo de cuadros de radio que consta de uno o más cuadros de radio.
CWidgetFieldRangeControl int32 Deslizador para seleccionar un valor de tipo entero.
CWidgetFieldReference cadena Crea un identificador único para este widget en el panel. Se utiliza para hacer referencia a este widget desde otros widgets.
CWidgetFieldSelect int32 Cuadro de selección desplegable.
CWidgetFieldSeverities matriz de int32 CWidgetFieldCheckBoxList preestablecido con gravedades de activación.
CWidgetFieldTags matriz de (string, int32, string) Permite configurar una o más filas de filtro de etiquetas.
CWidgetFieldTextArea string Área de texto para ingresar texto de varias líneas.
CWidgetFieldTextBox cadena Cuadro de texto para ingresar texto de una sola línea.
CWidgetFieldTimePeriod matriz de cadena Campo de selección de período de tiempo.
CWidgetFieldTimeZone cadena Desplegable con zonas horarias.
CWidgetFieldThresholds matriz de (cadena, cadena) Permite configurar pares de colores y números.
CWidgetFieldUrl cadena Cuadro de texto que permite ingresar URL.

Se han creado las siguientes clases CWidgetField para widgets particulares. Estas clases tienen casos de uso muy específicos, pero también se pueden reutilizar si es necesario.

Clase CWidgetField Tipo de campo de base de datos Descripción
CWidgetFieldColumnsList matriz de (múltiples mixtos) Para el widget Equipos principales. Cree una tabla con columnas personalizadas de tipos permitidos.
CWidgetFieldNavTree string Para el widget Árbol de navegación del mapa. Reemplaza la vista del widget en modo de edición con el árbol de selección de mapas.