MIRACLE ZBX のマップの文字サイズを変更する

MIRACLE ZBX のカスタムテーマを使ってマップのアイコンラベルの文字サイズを変更する方法を紹介します。

概要

MIRACLE ZBX を使用しているお客様からマップのアイコンラベルの文字サイズを大きくしたいといった要望がありました。そこで当記事ではカスタムテーマ機能を使ってアイコンラベルの文字サイズを変更する方法を紹介します。
カスタムテーマでは、CSS を記述することで MIRACLE ZBX の Web フロントエンドの表示をカスタマイズできます。この機能を利用してマップ画面のアイコンラベルの文字サイズを変更します。

対象環境

当記事は以下の環境で確認をしました。アップデートにより関連するコードが変更された場合は、当記事で紹介する CSS のコードでは意図した表示にならないことがあります。

MIRACLE ZBX 7.0.17-4
MIRACLE ZBX 6.0.41-2
MIRACLE ZBX 5.0.47-6

手順

1. 既存のテーマを複製する

ここでは、デフォルトで用意されているテーマの「Blue」をもとにカスタムテーマを作成します。blue-theme.css をコピーして my-theme.css を作成します。

# cp /usr/share/zabbix/assets/styles/blue-theme.css /usr/share/zabbix/assets/styles/my-theme.css

2. CSS ファイルを編集する

作成した my-theme.css にマップのアイコンラベルの文字サイズを変更するコードを追加します。
ファイルの末尾に以下のコードを追加します。font-size には任意の値を設定してください。

/usr/share/zabbix/assets/styles/my-theme.css

.map-elements >g:nth-child(n) >text >tspan:nth-child(n) {
    font-size: 200%;
}

3. Web フロントエンドの設定に作成したカスタムテーマを追加する

APP.php を編集して Web フロントエンドの設定に作成したカスタムテーマを追加します。

/usr/share/zabbix/include/classes/core/APP.php

~ 略 ~
class APP extends ZBase {
    public static function getThemes() {
        return array_merge(parent::getThemes(),[
            'my-theme' =>_('My theme')
        ]);
    }
}