Esta página foi traduzida automaticamente. Se você notar um erro, selecione-o e pressione Ctrl+Enter para reportá-lo aos editores.

Configuração

Esta página descreve as classes que podem ser usadas para criar uma visualização de configuração do widget com campos de configuração personalizados. A exibição de configuração do widget é a parte do widget que permite ao usuário configurar os parâmetros do widget para presentation.

Widget

Classe primária de widget, estende a classe base de todos os widgets do painel - CWidget. Necessário para substituir o comportamento padrão do widget.

A classe Widget deve estar localizada no diretório raiz do widget (por exemplo, ui/modules/my_custom_widget).

Exemplo de Widget.php

<?php
       
       namespace Modules\MyCustomWidget;
       
       use Zabbix\Core\CWidget;
       
       class Widget extends CWidget {
       
           public const MY_CONSTANT = 0;
       
           função pública getTranslationStrings(): array {
               retorna [
                   'class.widget.js' => [
                       'Sem dados' => _('Sem dados')
                   ]
               ];
           }
       }

WidgetForm

A classe WidgetForm estende a classe padrão CWidgetForm e contém um conjunto de campos CWidgetField que são necessários para definir a estrutura de armazenamento da configuração do widget no banco de dados e manipular a validação de entrada.

A classe WidgetForm deve estar localizada no diretório includes. Se a classe tiver um nome diferente, o nome deverá ser especificado no parâmetro widget/form_class no arquivo manifest.json.

Exemplo 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 {
       
           função pública addFields(): self {
               return $this
                   ->addField(
                       (novo CWidgetFieldMultiSelectItem('itemid', _('Item')))
                           ->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK)
                           ->setMultiple(false)
                           ->setFilterParameter('numeric', true)
                   )
                   ->addField(
                       new CWidgetFieldTextBox('description', _('Description'))
                   )
                   ->addField(
                       (new CWidgetFieldColor('chart_color', _('Color')))->setDefault('FF0000')
                   );
           }
       }

CWidgetFormView

A classe CWidgetFormView é necessária para especificar a lógica de apresentação dos campos definidos na classe WidgetForm, determinando sua aparência e comportamento quando renderizados na exibição de configuração.

A classe CWidgetFormView é compatível com os seguintes métodos:

  • addField() - recebe uma instância da classe CWidgetFieldView como parâmetro; Cada classe CWidgetField tem uma respectiva classe CWidgetFieldView para uso na exibição de configuração do widget.
  • includeJsFile() - permite adicionar um arquivo JavaScript à visualização de configuração do widget.
  • addJavaScript() - permite adicionar JavaScript em linha que será executado assim que a visualização de configuração do widget for carregada.

A classe CWidgetFormView deve estar localizada no diretório views.

Exemplo de views/widget.edit.php

<?php
           
       /**
        * Minha visualização de formulário de widget personalizado.
        *
        * @var CView $this
        * @var array $data
        */
       
       use Zabbix\Widgets\Fields\CWidgetFieldGraphDataSet;
       
       (novo CWidgetFormView($data))
           ->addField(
               new CWidgetFieldMultiSelectItemView($data['fields']['itemid'], $data['captions']['items']['itemid'])
           )
           ->addField(
               new CWidgetFieldTextBoxView($data['fields']['description']),
               'js-advanced-configuration'
           )
           ->addField(
               new CWidgetFieldColorView($data['fields']['chart_color']),
               'js-advanced-configuration'
           )
           ->includeJsFile('widget.edit.js.php')
           ->addJavaScript('my_widget_form.init('.json_encode([
               'color_palette' => CWidgetFieldGraphDataSet::DEFAULT_COLOR_PALETTE
           ], JSON_THROW_ON_ERROR).');')
           ->show();

JavaScript

Uma classe JavaScript pode ser usada para adicionar comportamento dinâmico e interatividade à visualização de configuração do widget. Por exemplo, você pode inicializar um seletor de cores, definido na classe CWidgetFormView.

A classe JavaScript deve ser carregada com o formulário, portanto, deve ser referenciada na classe CWidgetFormView usando os métodos includeJsFile() e addJavaScript().

No exemplo abaixo, uma instância de classe singleton é imediatamente criada e armazenada sob o nome window.my_custom_widget_form. Assim, abrir o formulário pela segunda vez recriará a instância.

A classe JavaScript deve estar localizada no diretório views.

Exemplo de views/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 de jQuery('.<?= ZBX_STYLE_COLOR_PICKER ?> input')) {
       jQuery(colorpicker).colorpicker();
       }
       
       const overlay = overlays_stack.getById('widget_properties');
       
       for (const event de ['overlay.reload', 'overlay.close']) {
       overlay.$dialogue[0].addEventListener(event, () => { jQuery.colorpicker('hide'); });
       }
       }
       };

CWidgetField

A classe CWidgetField é uma classe base da qual todas as classes de campos de formulário (CWidgetFieldCheckBox, CWidgetFieldTextArea, CWidgetFieldRadioButtonList, etc.) são herdadas. As classes que estendem CWidgetField são responsáveis por receber, salvar e validar os valores de configuração do widget.

As seguintes classes CWidgetField estão disponíveis.

Classe CWidgetField Tipo de campo de banco de dados Descrição
CWidgetFieldCheckBox int32 Caixa de seleção única.
CWidgetFieldCheckBoxList matriz de int32 Várias caixas de seleção em um único campo de configuração.
CWidgetFieldColor string Campo de seleção de cor.
CWidgetFieldDatePicker string Campo de seleção de data.
CWidgetFieldHostPatternSelect string Campo de seleção múltipla que permite selecionar um ou vários hosts. Suporta a definição de padrões de nome de host (todos os hosts correspondentes serão selecionados).
CWidgetFieldIntegerBox int32 Campo para inserir um número inteiro. Pode ser usado para configurar valores mínimo e máximo.
CWidgetFieldLatLng string Caixa de texto que permite inserir latitude, longitude e nível de zoom do mapa, separados por vírgula.
CWidgetFieldMultiSelectAction ID Campo de seleção múltipla para selecionar ações (da lista de ações definidas em Alertas → Ações).
CWidgetFieldMultiSelectGraph ID Campo de seleção múltipla para selecionar gráficos personalizados.
CWidgetFieldMultiSelectGraphPrototype ID Campo de seleção múltipla para selecionar protótipos de gráficos personalizados.
CWidgetFieldMultiSelectGroup ID Campo de seleção múltipla para selecionar grupos de hosts.
CWidgetFieldMultiSelectHost ID Campo de seleção múltipla para selecionar hosts.
CWidgetFieldMultiSelectItem ID Campo de seleção múltipla para selecionar itens.
CWidgetFieldMultiSelectItemPattern ID Campo de seleção múltipla para selecionar padrões de itens.
CWidgetFieldMultiSelectItemPrototype ID Campo de seleção múltipla para selecionar protótipos de itens.
CWidgetFieldMultiSelectMap ID Campo de seleção múltipla para selecionar mapas.
CWidgetFieldMultiSelectMediaType ID Campo de seleção múltipla para selecionar tipos de mídia.
CWidgetFieldMultiSelectOverrideHost ID Campo de seleção múltipla para selecionar uma fonte de dados (painel ou outro widget) contendo um host para o qual o widget pode exibir dados.
CWidgetFieldMultiSelectService ID Campo de seleção múltipla para selecionar serviços.
CWidgetFieldMultiSelectSla ID Campo de seleção múltipla para selecionar SLAs.
CWidgetFieldMultiSelectUser ID Campo de seleção múltipla para selecionar usuários.
CWidgetFieldNumericBox string Campo para inserir um número flutuante.
CWidgetFieldRadioButtonList int32 Grupo de caixas de opção que consiste em uma ou mais caixas de opção.
CWidgetFieldRangeControl int32 Controle deslizante para selecionar um valor do tipo inteiro.
CWidgetFieldReference string Cria um identificador exclusivo para este widget no painel. Ele é usado para referenciar este widget a partir de outros widgets.
CWidgetFieldSelect int32 Caixa de seleção suspensa.
CWidgetFieldSeverities matriz de int32 CWidgetFieldCheckBoxList predefinida com severidades de gatilho.
CWidgetFieldTags matriz de (string, int32, string) Permite configurar uma ou mais linhas de filtro de tags.
CWidgetFieldTextArea string Área de texto para inserir texto com várias linhas.
CWidgetFieldTextBox string Caixa de texto para inserir texto com uma única linha.
CWidgetFieldTimePeriod matriz de strings Campo de seleção de período.
CWidgetFieldTimeZone string Lista suspensa com fusos horários.
CWidgetFieldThresholds matriz de (string, string) Permite configurar pares de cores e números.
CWidgetFieldUrl string Caixa de texto que permite inserir URLs.

As seguintes classes CWidgetField foram criadas para widgets específicos. Essas classes têm casos de uso muito específicos, mas também podem ser reutilizadas, se necessário.

Classe CWidgetField Tipo de campo do banco de dados Descrição
CWidgetFieldColumnsList matriz de (vários mistos) Para o widget Principais hosts. Cria uma tabela com colunas personalizadas dos tipos permitidos.
CWidgetFieldNavTree string Para o widget Árvore de navegação do mapa. Substitui a visualização do widget no modo de edição pela árvore de seleção de mapa.