これは、シンプルなZabbixフロントエンドモジュールを作成する方法を示すステップバイステップのチュートリアルです。 このモジュールのすべてのファイルをZIPアーカイブとしてダウンロードできます: MyAddress.zip。
このチュートリアルでは、まず新しいMy Addressメニューセクションを追加するフロントエンドモジュールを構築し、次にそれをより高度なフロントエンドモジュールに変換します。このモジュールは、https://api.seeip.orgにHTTPリクエストを送信し、レスポンス(コンピューターのIPアドレス)を新しく作成されたMy Addressメニューセクションの新しいページに表示します。 完成したモジュールは次のようになります:

ZabbixフロントエンドインストールのmodulesディレクトリにMyAddressディレクトリを作成します (例: zabbix/ui/modules)。
基本モジュールのメタデータを含むmanifest.jsonファイルを作成します (サポートされているパラメーターの説明を参照)。
ui/modules/MyAddress/manifest.json
{ "manifest_version": 2.0, "id": "my-address", "name": "My IP Address", "version": "1.0", "namespace": "MyAddress", "description": "My External IP Address." }

これで、モジュールがフロントエンドに登録されました。ただし、モジュールの機能を定義する必要があるため、まだ表示されていません。 モジュールディレクトリにコンテンツを追加し、ページを更新すると、Zabbixフロントエンドの変更がすぐに表示されます。
このファイルは、デフォルトのCModuleクラスを拡張する新しいModuleクラスを実装します。 Moduleクラスは、新しいMy Addressメニューセクションをメインメニューに挿入します。
setAction()メソッドは、メニューセクションをクリックしたときに実行されるアクションを指定します。 まず、事前定義されたアクションuserprofile.editを使用すると、ユーザープロファイルページが開きます。 このチュートリアルのパートIIIでは、カスタムアクションの作成方法を学習します。
ui/modules/MyAddress/Module.php
<?php namespace Modules\MyAddress; use Zabbix\Core\CModule, APP, CMenuItem; class Module extends CModule { public function init(): void { APP::Component()->get('menu.main') ->add((new CMenuItem(_('My Address'))) ->setAction('userprofile.edit')); } }'userprofile.edit'を他のアクション、たとえば'charts.view'(カスタムグラフを開く)、'problems.view'(データ監視 → 障害を開く)、または 'report.status'(システム情報レポートを開く)に置き換えることができます。

このパートでは、My Addressメニューセクションを監視データセクションに移動しし、そこにネストされたメニューを追加します。 その結果、ユーザーは監視データ → マイ アドレスメニューセクションから2つのサブメニューページにアクセスできるようになります。
ui/modules/MyAddress/Module.php
<?php namespace Modules\MyAddress; use Zabbix\Core\CModule, APP, CMenuItem; class Module extends CModule { public function init(): void { APP::Component()->get('menu.main') ->findOrAdd(_('Monitoring')) ->getSubmenu() ->insertAfter(_('Discovery'), (new CMenuItem(_('My Address')))->setAction('userprofile.edit') ); } }
このステップでは、2つのサブセクションが作成されます。
ネストされたメニューの場合は、前の手順で使用したクラスに加えてCMenuクラスを使用する必要があることに注意してください。
ui/modules/MyAddress/Module.php
<?php namespace Modules\MyAddress; use Zabbix\Core\CModule, APP, CMenu, CMenuItem; class Module extends CModule { public function init(): void { APP::Component()->get('menu.main') ->findOrAdd(_('Monitoring')) ->getSubmenu() ->insertAfter(_('Discovery'), (new CMenuItem(_('My Address')))->setSubMenu( new CMenu([ (new CMenuItem(_('External IP')))->setAction('my.address'), (new CMenuItem(_('User profile')))->setAction('userprofile.edit') ]) ) ); } }
アクションは、actions/MyAddress.phpとviews/my.address.phpの2つのファイルに実装されます。 actions/MyAddress.phpファイルはビジネスロジックの実装を担当し、views/my.address.phpファイルはビューを担当します。
MyAddressディレクトリにactionsディレクトリを作成します。
actionsディレクトリにMyAddress.phpファイルを作成します。
アクションロジックはMyAddressクラスで定義されます。 このアクションクラスは、init()、checkInput()、checkPermissions()、doAction()の4つの関数を実装します。 Zabbixフロントエンドは、アクションが要求されるとdoAction()関数を呼び出します。 この関数は、モジュールのビジネスロジックを担当します。
データは連想配列として編成する必要があります。 配列は多次元にすることができ、ビューで予期される任意のデータを含めることができます。
ui/modules/MyAddress/actions/MyAddress.php
<?php namespace Modules\MyAddress\Actions; use CController, CControllerResponseData; class MyAddress extends CController { public function init(): void { $this->disableCsrfValidation(); } protected function checkInput(): bool { return true; } protected function checkPermissions(): bool { return true; } protected function doAction(): void { $data = ['my-ip' => file_get_contents("https://api.seeip.org")]; $response = new CControllerResponseData($data); $this->setResponse($response); } }MyAddressディレクトリに新しいディレクトリviewsを作成します。
viewsディレクトリにmy.address.phpファイルを作成し、モジュールビューを定義します。
変数$dataは、特に定義しなくてもビューで使用できることに注意してください。 フレームワークは自動的に連想配列をビューに渡します。
ui/modules/MyAddress/views/my.address.php
<?php (new CHtmlPage()) ->setTitle(_('The HTML Title of My Address Page')) ->addItem(new CDiv($data['my-ip'])) ->show();actionsを追加します。my.address)my.addressオブジェクトのclassキーの値としてのアクションクラス名 (MyAddress)my.addressオブジェクトのviewキーの値としてのアクションビュー名 (my.address)ui/modules/MyAddress/manifest.json
{ "manifest_version": 2.0, "id": "my-address", "name": "My IP Address", "version": "1.0", "namespace": "MyAddress", "description": "My External IP Address.", "actions": { "my.address": { "class": "MyAddress", "view": "my.address" } } }