Attēlojums

Šajā lapā ir aprakstīti komponenti, kurus var izmantot, lai izveidotu logrīka attēlojuma skatu. Logrīka attēlojuma skats ir logrīka daļa, kas saņem datus atbilstoši tā konfigurācijai un attēlo tos informācijas panelī konteinerā.

Attēlojuma skats sastāv no trim daļām:

• Logrīka darbība
• Logrīka skats
• JavaScript

Logdaļas darbība

Logdaļas darbības klase (WidgetView) satur metodes darbībām ar logdaļām attēlojuma skata režīmā. Lielākā daļa logdaļu darbību izmanto un/vai paplašina noklusējuma kontroliera klasi CControllerDashboardWidgetView.

Logdaļas darbības klasei jāatrodas actions direktorijā un tai jābūt norādītai actions parametrā (actions/widget.{id}.view/class) failā manifest.json.

Piemērs actions/WidgetView.php (ieviests Zabbix iebūvētajā System information logdaļā)

class WidgetView extends CControllerDashboardWidgetView {

    protected function doAction(): void {
        $this->setResponse(new CControllerResponseData([
            'name' => $this->getInput('name', $this->widget->getDefaultName()),
            'system_info' => CSystemInfoHelper::getData(),
            'info_type' => $this->fields_values['info_type'],
            'user_type' => CWebUser::getType(),
            'user' => [
                'debug_mode' => $this->getDebugMode()
            ]
        ]));
    }
}

Logrīka skats

Logrīka skata klase (CWidgetView) ir atbildīga par logrīka attēlojuma skata izveidi.

Logrīka skata klasei jāatrodas views direktorijā. Ja fails, kas satur logrīka skata klasi, tiek nosaukts citādi nekā pēc noklusējuma (widget.view.php), tad tas jānorāda manifest.json faila actions parametrā (actions/widget.{id}.view/view).

views/widget.view.php piemērs

<?php

/**
 * Mans pielāgotais logrīka skats.
 *
 * @var CView $this
 * @var array $data
 */

(new CWidgetView($data))
    ->addItem(
        new CTag('h1', true, $data['name'])
    )
    ->show();

JavaScript

JavaScript klase ir atbildīga par logrīka darbības noteikšanu, piemēram, logrīka datu atjaunināšanu, logrīka izmēra maiņu, logrīka elementu attēlošanu utt.

Visas JavaScript darbības izmanto un/vai paplašina visu paneļa logrīku pamata JavaScript klasi — CWidget. Klase CWidget satur metožu kopu ar noklusējuma ieviešanu logrīka darbībai. Atkarībā no logrīka sarežģītības šīs metodes var izmantot esošajā veidā vai paplašināt.

Klase CWidget satur šādas metodes:

• Metodes, kas nosaka logrīka dzīves ciklu: onInitialize(), onStart(), onActivate(), onDeactivate(), onDestroy(), onEdit().
• Metodes, kas apstrādā logrīka datu atjaunināšanu un attēlošanu: promiseUpdate(), getUpdateRequestData(), processUpdateResponse(response), processUpdateErrorResponse(error), setContents(response).
• Metodes, kas maina logrīka izskatu: onResize(), hasPadding().

JavaScript klasei jāatrodas direktorijā assets/js, un tai jābūt norādītai assets (assets/js) parametrā failā manifest.json.

Dzīves cikla metodes

Logrīka dzīves cikla metodes izsauc informācijas panelis dažādos logrīka dzīves cikla posmos tā pastāvēšanas laikā informācijas panelī.

Metode onInitialize() definē logrīka sākotnējo stāvokli un/vai vērtības, neveicot nekādas HTML vai datu manipulācijas. Šī metode tiek izsaukta, kad logrīks tiek izveidots (tiek inicializēts logrīka objekts), parasti pievienojot logrīku paneļa lapai vai ielādējot paneļa lapu.

Piemērs:

onInitialize() {
    this._time_offset = 0;
    this._interval_id = null;
    this._clock_type = CWidgetClock.TYPE_ANALOG;
    this._time_zone = null;
    this._show_seconds = true;
    this._time_format = 0;
    this._tzone_format = 0;
    this._show = [];
    this._has_contents = false;
    this._is_enabled = true;
}

Metode onStart() definē logrīka HTML struktūru, neveicot nekādu datu apstrādi. Šī metode tiek izsaukta pirms pirmās paneļa lapas aktivizēšanas, tas ir, pirms panelis un tā logrīki tiek pilnībā parādīti lietotājam.

Piemērs:

onStart() {
    this._events.resize = () => {
        const padding = 25;
        const header_height = this._view_mode === ZBX_WIDGET_VIEW_MODE_HIDDEN_HEADER
            ? 0
            : this._header.offsetHeight;

        this._target.style.setProperty(
            '--content-height',
            `${this._cell_height * this._pos.height - padding * 2 - header_height}px`
        );
    }
}

Metode onActivate() padara logrīku aktīvu un interaktīvu, iespējojot pielāgotus notikumu klausītājus (lai reaģētu uz lietotāja darbībām) un uzsākot logrīka atjaunināšanas ciklu (lai uzturētu tā saturu aktuālu). Šī metode tiek izsaukta, kad paneļa lapa tiek aktivizēta, tas ir, kad tā ir pilnībā attēlota lietotāja saskarnē.

Ņemiet vērā, ka pirms onActivate() metodes izsaukšanas logrīks ir neaktīvā stāvoklī (WIDGET_STATE_INACTIVE). Pēc veiksmīgas izsaukšanas logrīks pāriet aktīvā stāvoklī (WIDGET_STATE_ACTIVE). Aktīvajā stāvoklī logrīks reaģē, uztver notikumus, periodiski atjaunina savu saturu un var mijiedarboties ar citiem logrīkiem.

Piemērs:

onActivate() {
    this._startClock();

    this._resize_observer = new ResizeObserver(this._events.resize);
    this._resize_observer.observe(this._target);
}

onDeactivate() metode aptur visas logrīka darbības un interaktivitāti, deaktivizējot pielāgotos notikumu klausītājus un apturot logrīka atjaunināšanas ciklu. Šī metode tiek izsaukta, kad paneļa lapa tiek deaktivizēta, tas ir, kad no tās pārslēdzas prom vai tā tiek dzēsta, vai arī kad logrīks tiek dzēsts no paneļa lapas.

Ņemiet vērā, ka pirms onDeactivate() metodes izsaukšanas logrīks ir aktīvā stāvoklī (WIDGET_STATE_ACTIVE). Pēc veiksmīgas izsaukšanas logrīks pāriet neaktīvā stāvoklī (WIDGET_STATE_INACTIVE).

Piemērs:

onDeactivate() {
    this._stopClock();
    this._resize_observer.disconnect();
}

onDestroy() metode veic tīrīšanas uzdevumus, pirms logrīks tiek dzēsts no paneļa, kas var ietvert datubāzes savienojuma aizvēršanu, kas tika izveidots logrīka inicializācijas laikā, pagaidu datu dzēšanu, lai atbrīvotu sistēmas atmiņu un izvairītos no resursu noplūdēm, ar izmēra maiņas notikumiem vai pogu klikšķiem saistīto notikumu klausītāju reģistrācijas atcelšanu, lai novērstu nevajadzīgu notikumu apstrādi un atmiņas noplūdes, utt. Šī metode tiek izsaukta, kad logrīks vai paneļa lapa, kurā tas atrodas, tiek dzēsta.

Ņemiet vērā, ka pirms onDestroy() metodes izsaukšanas logrīks aktīvā stāvoklī (WIDGET_STATE_ACTIVE) vienmēr tiek deaktivizēts, izsaucot onDeactivate() metodi.

Piemērs:

onDestroy() {
    if (this._filter_widget) {
        this._filter_widget.off(CWidgetMap.WIDGET_NAVTREE_EVENT_MARK, this._events.mark);
        this._filter_widget.off(CWidgetMap.WIDGET_NAVTREE_EVENT_SELECT, this._events.select);
    }
}

onEdit() metode nosaka logrīka izskatu un darbību, kad panelis pārslēdzas rediģēšanas režīmā. Šī metode tiek izsaukta, kad panelis pārslēdzas rediģēšanas režīmā, parasti tad, kad lietotājs mijiedarbojas ar logrīka pogu Edit vai paneļa pogu Edit dashboard.

Piemērs:

onEdit() {
    this._deactivateGraph();
}

Atjaunināšanas procesa metodes

Logrīka atjaunināšanas procesa metodes ir atbildīgas par atjauninātu datu iegūšanu no Zabbix serveris vai jebkura cita datu avota un to attēlošanu logrīkā.

promiseUpdate() metode uzsāk datu atjaunināšanas procesu, iegūstot datus, parasti izmantojot tīmekļa pieprasījumus vai API izsaukumus. Šī metode tiek izsaukta, kad tiek parādīta paneļa lapa, un pēc tam periodiski, līdz paneļa lapa tiek pārslēgta uz citu paneļa lapu.

Tālāk ir sniegts piemērs noklusējuma promiseUpdate() metodes ieviešanai, ko izmanto lielākā daļa Zabbix vietējo logrīku. Noklusējuma ieviešanā promiseUpdate() metode ievēro vispārīgu modeli datu iegūšanai no servera. Tā izveido jaunu Curl objektu ar atbilstošo URL un pieprasījuma parametriem, nosūta POST pieprasījumu, izmantojot fetch() metodi ar datu objektu, ko izveido getUpdateRequestData() metode, un attiecīgi apstrādā atbildi (vai kļūdas atbildi) ar processUpdateResponse(response) vai processUpdateErrorResponse(error). Šī ieviešana ir piemērota lielākajai daļai logrīku, jo tie parasti iegūst datus JSON formātā un apstrādā tos konsekventā veidā.

promiseUpdate() {
    const curl = new Curl('zabbix.php');

    curl.setArgument('action', `widget.${this._type}.view`);

    return fetch(curl.getUrl(), {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(this.getUpdateRequestData()),
        signal: this._update_abort_controller.signal
    })
        .then((response) => response.json())
        .then((response) => {
            if ('error' in response) {
                this.processUpdateErrorResponse(response.error);

                return;
            }

            this.processUpdateResponse(response);
        });
    }

Metode getUpdateRequestData() sagatavo servera pieprasījuma datus logrīka atjaunināšanai, apkopojot dažādas īpašības un to atbilstošās vērtības (logrīka identifikatorus, filtra iestatījumus, laika diapazonus u.c.) no logrīka stāvokļa un konfigurācijas, un izveidojot datu objektu, kas attēlo nepieciešamo informāciju nosūtīšanai serverim atjaunināšanas pieprasījumā. Šī metode tiek izsaukta tikai kā daļa no noklusējuma promiseUpdate() metodes, tas ir, logrīka atjaunināšanas procesa laikā.

Noklusējuma ieviešana:

getUpdateRequestData() {
    return {
        templateid: this._dashboard.templateid ?? undefined,
        dashboardid: this._dashboard.dashboardid ?? undefined,
        widgetid: this._widgetid ?? undefined,
        name: this._name !== '' ? this._name : undefined,
        fields: Object.keys(this._fields).length > 0 ? this._fields : undefined,
        view_mode: this._view_mode,
        edit_mode: this._is_edit_mode ? 1 : 0,
        dynamic_hostid: this._dashboard.templateid !== null || this.supportsDynamicHosts()
            ? (this._dynamic_hostid ?? undefined)
            : undefined,
        ...this._contents_size
    };
}

processUpdateResponse(response) metode apstrādā atbildi, kas saņemta no servera pēc atjaunināšanas pieprasījuma, un, ja atjaunināšanas process ir bijis veiksmīgs un bez kļūdām, notīra logrīka datus un parāda jauno saturu ar setContents() metodi. Šī metode tiek izsaukta tikai kā daļa no noklusējuma promiseUpdate() metodes, tas ir, logrīka atjaunināšanas procesa laikā.

Noklusējuma implementācija:

processUpdateResponse(response) {
    this._setHeaderName(response.name);

    this._updateMessages(response.messages);
    this._updateInfo(response.info);
    this._updateDebug(response.debug);

    this.setContents(response);
}

processUpdateErrorResponse(error) metode apstrādā atbildi, kas saņemta no servera pēc atjaunināšanas pieprasījuma, ja atbilde ir kļūda, un parāda kļūdas ziņojumu/-us. Šī metode tiek izsaukta tikai kā daļa no noklusējuma promiseUpdate() metodes, tas ir, logrīka atjaunināšanas procesa laikā.

Noklusējuma ieviešana:

processUpdateErrorResponse(error) {
    this._updateMessages(error.messages, error.title);
}

setContents(response) metode parāda logrīka saturu, ja logrīka atjaunināšanas process ir bijis veiksmīgs un bez kļūdām, kas var ietvert DOM elementu manipulēšanu, UI komponentu atjaunināšanu, stilu vai formatējuma piemērošanu utt. Šī metode tiek izsaukta tikai kā daļa no noklusējuma processUpdateResponse(response) metodes, tas ir, apstrādājot no servera saņemto atbildi pēc atjaunināšanas pieprasījuma.

Noklusējuma ieviešana:

setContents(response) {
    this._body.innerHTML = response.body ?? '';
}

Logrīka attēlojuma modificēšanas metodes

Logrīka attēlojuma modificēšanas metodes ir atbildīgas par logrīka izskata modificēšanu.

Metode onResize() ir atbildīga par logrīka vizuālo elementu pielāgošanu, lai tie atbilstu jaunajam logrīka izmēram, kas var ietvert elementu pārkārtošanu, elementu izmēru pielāgošanu, teksta saīsināšanu, atlikto ielādi, lai uzlabotu atsaucību izmēra maiņas laikā, u.c. Šī metode tiek izsaukta, kad logrīka izmērs tiek mainīts, piemēram, kad lietotājs manuāli maina logrīka izmēru vai kad tiek mainīts pārlūka loga izmērs.

Piemērs:

onResize() {
    if (this.getState() === WIDGET_STATE_ACTIVE) {
        this._startUpdating();
    }
}

Metode hasPadding() ir atbildīga par 8px vertikālās atkāpes piemērošanu logrīka apakšdaļā, ja tas ir konfigurēts rādīt savu galveni. Šī metode tiek izsaukta, kad tiek aktivizēta paneļa lapa, tas ir, kad tā kļūst par lietotāja saskarnē attēloto lapu.

Noklusējuma ieviešana:

hasPadding() {
    return this.getViewMode() !== ZBX_WIDGET_VIEW_MODE_HIDDEN_HEADER;
}

Dažiem logrīkiem ir nepieciešams izmantot visu pieejamo logrīka vietu, lai, piemēram, konfigurētu pielāgotu fona krāsu. Tālāk ir parādīts hasPadding() metodes ieviešanas piemērs, kas tiek izmantots Zabbix iebūvētajā Vienuma vērtība logrīkā.

hasPadding() {
    return false;
}