Configuració

La configuració del giny forma part del mòdul del giny que permet a l'usuari definir la configuració del ginyper a presentar. Aquesta pàgina descriu classes que es poden emprar per crear un formulari de configuració de ginys amb camps personalitzats.

Giny

Classe de giny principal que amplia la classe per defecte CWidget. Necessari per substituir els mètodes de giny predeterminats o per afegir constants.

La classe Widget ha d'ubicar-se a la carpeta arrel del giny (per exemple, zabbix/ui/modules/my_custom_widget).

Widget.php exemple

<?php
           
       namespace Modules\WidgetNameHere;
           
       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 classe WidgetForm amplia la classe per defecte (CWidgetForm) i conté un conjunt camps CWidgetField que calen per definir l'estructura d'emmagatzematge de la configuració del giny a la base de dades i gestionar la validació d'entrada.

La classe WidgetForm s'ha d'ubicar al directori include. Si la classe té un nom diferent, s'ha d'especificar al paràmetre widget/form_class de l'arxiu manifest.json.

includes/WidgetForm.php exemple

<?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 classe CWidgetFormView és necessària per especificar la lògica de presentació dels camps definits a la classe WidgetForm, determinant-ne l'aparença i el comportament quan es representen a la vista de configuració.

La classe CWidgetFormView admet els mètodes següents:

  • addField() - rep una instància de la classe CWidgetFieldView com a paràmetre; cada classe CWidgetField té una classe respectiva CWidgetFieldView per emprar-la a la vista de configuració del giny.
  • addFieldset() - rep una instància de la classe CWidgetFieldsGroupView que combina camps a un contenidor col·lapsable.
  • addFieldsGroup() - rep una instància de CWidgetFormFieldsetCollapsibleView que, visualment (amb un contorn), combina camps en un grup.
  • includeJsFile() - permet afegir un fitxer JavaScript a la vista de configuració del giny.
  • addJavaScript() - permet afegir JavaScript en línia que s'executarà tan bon punt es carregui la vista de configuració del giny.

La classe CWidgetFormView s'ha d'ubicar al directori views.

exemple de views/widget.edit.php

<?php
           
       /**
        * La meva vista de formulari de giny personalitzada.
        *
        * @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

Es pot emprar una classe JavaScript per afegir comportament dinàmic i interactivitat a la vista de configuració del giny. Per exemple, podeu inicialitzar un selector de color, definit a la classe CWidgetFormView.

La classe JavaScript s'ha de carregar amb el formulari; per tant, s'ha de fer referència a la classe CWidgetFormView emprant els mètodes includeJsFile() i addJavaScript().

A l'exemple següent, es crea immediatament una instància de classe singleton i s'emmagatzema sota el nom window.my_custom_widget_form. Així, en obrir el formulari per segon cop es tornarà a crear la instància.

La classe JavaScript s'ha d'ubicar al directori views.

views/widget.edit.js.php exemple

<?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 classe CWidgetField és una classe base de la qual s'hereten totes les classes de camp de formulari (CWidgetFieldCheckBox, CWidgetFieldTextArea, CWidgetFieldRadioButtonList, etc.). Les classes que estenen CWidgetField són les responsables de rebre, desar i validar els valors de configuració del giny.

Les següents classes CWidgetField són disponibles.

Classe CWidgetField Tipus de camp de base de dades Descripció
CWidgetFieldCheckBox int32 Caixa de verificació única.
CWidgetFieldCheckBoxList array of int32 Múltiples caselles de verificació sota un sol camp de configuració.
CWidgetFieldColor cadena Camp de tria de color.
CWidgetFieldDatePicker cadena Camp de tria de data.
CWidgetFieldHostPatternSelect cadena Camp de tria múltiple que permet triar un o diversos equips. Accepta la definició de patrons de nom d'equip (es triaran tots els equips coincidents).
CWidgetFieldIntegerBox int32 Camp per introduir un nombre enter. Es pot emprar per configurar valors mínims i màxims.
CWidgetFieldLatLng cadena Quadre de text que permet introduir la latitud, longitud i el nivell de zoom del mapa separats per comes.
CWidgetFieldMultiSelectAction ID Camp de tria múltiple per triar accions (de la llista d'accions definides a Alertes → Accions).
CWidgetFieldMultiSelectGraph ID Camp de tria múltiple per triar gràfics personalitzats.
CWidgetFieldMultiSelectGraphPrototype ID Camp de tria múltiple per triar prototips de gràfics personalitzats.
CWidgetFieldMultiSelectGroup ID Camp de tria múltiple per triar grups d'equips.
CWidgetFieldMultiSelectHost ID Camp de tria múltiple per triar equips.
CWidgetFieldMultiSelectItem ID Camp de tria múltiple per triar elements.
CWidgetFieldMultiSelectItemPattern ID Camp de tria múltiple per triar patrons d'elements.
CWidgetFieldMultiSelectItemPrototype ID Camp de tria múltiple per triar prototips d'elements.
CWidgetFieldMultiSelectMap ID Camp de tria múltiple per triar mapes.
CWidgetFieldMultiSelectMediaType ID Camp de tria múltiple per triar tipus de suports.
CWidgetFieldMultiSelectOverrideHost ID Camp de tria múltiple per triar una font de dades (tauler de control o un altre giny) que conté un equip per al qual el giny pot mostrar dades.
CWidgetFieldMultiSelectService ID Camp de tria múltiple per triar serveis.
CWidgetFieldMultiSelectSla ID Camp de tria múltiple per triar SLA.
CWidgetFieldMultiSelectUser ID Camp de tria múltiple per triar usuaris.
CWidgetFieldNumericBox cadena Camp per introduir un nombre flotant.
CWidgetFieldRadioButtonList int32 Grup de caixes de ràdio que consta d'una o més caixes de ràdio.
CWidgetFieldRangeControl int32 Lliscant per triar un valor de tipus enter.
CWidgetFieldReference cadena Crea un identificador únic per a aquest giny al tauler. S'utilitza per fer referència a aquest giny des d'altres ginys.
CWidgetFieldSelect int32 Caixa de tria desplegable.
CWidgetFieldSeverities matriu d'int32 CWidgetFieldCheckBoxList preestablert amb gravetat del trigger.
CWidgetFieldTags matriu de (cadena, int32, cadena) Permet configurar una o més files de filtre d'etiquetes.
CWidgetFieldTextArea cadena Àrea de text per introduir text de diverses línies.
CWidgetFieldTextBox cadena Quadre de text per introduir text d'una sola línia.
CWidgetFieldTimePeriod matriu de cadena Camp de tria del període de temps.
CWidgetFieldTimeZone cadena Menú desplegable amb zones horàries.
CWidgetFieldThresholds matriu de (cadena, cadena) Permet configurar parells de colors i nombres.
CWidgetFieldUrl cadena Caixa de text que permet introduir la URL.

Les següents classes CWidgetField s'han creat per a ginys concrets. Aquestes classes tenen casos d'ús molt concrets, però també es poden reutilitzar si escau.

Classe CWidgetField Tipus de camp de base de dades Descripció
CWidgetFieldColumnsList matriu de (múltiples mixtes) Per al giny Equips principals. Creeu una taula amb columnes personalitzades dels tipus permesos.
CWidgetFieldNavTree cadena Per al giny Arbre de navegació del mapa. Substitueix la vista del giny en mode d'edició per l'arbre de tria del mapa.