Prezentācija

Šajā lapā aprakstīti komponenti, kurus var izmantot logrīka prezentācijas skata izveidei. Logrīka prezentācijas skats ir logrīka daļa, kas saņem datus atbilstoši tā konfigurācijai un parāda tos informācijas panelī konteinerā.

Prezentācijas 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();
}

Metode onDestroy() veic tīrīšanas uzdevumus, pirms logrīks tiek dzēsts no informācijas paneļa. Tas var ietvert datubāzes savienojuma aizvēršanu, kas tika izveidots logrīka inicializācijas laikā, pagaidu datu tīrīšanu, lai atbrīvotu sistēmas atmiņu un novērstu resursu noplūdes, 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, u. c.

Šī metode tiek izsaukta, kad tiek dzēsts logrīks vai informācijas paneļa lapa, kurā tas atrodas.

Ņ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);
    }
}

The onEdit() metode nosaka logrīka izskatu un darbību, kad informācijas panelis pāriet rediģēšanas režīmā. Šī metode tiek izsaukta, kad informācijas panelis pāriet rediģēšanas režīmā, parasti tad, kad lietotājs mijiedarbojas ar logrīka pogu Edit vai informācijas 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žādus rekvizītus 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 ietver 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 implementācija:

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
    };
}

Metode processUpdateResponse(response) apstrādā no servera saņemto atbildi pēc atjaunināšanas pieprasījuma un, ja atjaunināšanas process ir veiksmīgi pabeigts bez kļūdām, notīra logrīka datus un, izmantojot metodi setContents(), parāda jaunu saturu.
Šī metode tiek izsaukta tikai kā daļa no noklusējuma metodes promiseUpdate(), 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);
}

Metode setContents(response) parāda logrīka saturu, ja logrīka atjaunināšanas process ir veiksmīgs un nav radies neviens kļūdas stāvoklis. Tas var ietvert DOM elementu manipulēšanu, lietotāja saskarnes komponentu atjaunināšanu, stilu vai formatējuma lietošanu u. c.

Šī metode tiek izsaukta tikai kā daļa no noklusējuma processUpdateResponse(response) metodes, tas ir, apstrādājot atbildi, kas saņemta no servera pēc atjaunināšanas pieprasījuma.

Noklusējuma implementācija:

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. Tas var ietvert elementu pārkārtošanu, elementu izmēru pielāgošanu, teksta saīsināšanu, slinkās ielādes ieviešanu, lai izmēra maiņas laikā uzlabotu reaģētspēju, u. c.

Šī metode tiek izsaukta, kad tiek mainīts logrīka izmērs, piemēram, kad lietotājs manuāli maina logrīka izmēru vai tiek mainīts pārlūkprogrammas 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;
}