grafana

Grafanaプラグインを読んでいく – Clock plugin

投稿日:

最も単純そうなプラグインを読んでいくシリーズ。
プラグインは Clock plugin。Panelプラグイン。配布はここ

最も単純そうなDataSourceプラグインを読む記事は以下。

ダッシュボードに時計を表示できる。
ダッシュボードから設定をおこない表示に反映する機能を備えていて、
PanelプラグインのHelloWorldには良い感じ。

The Clock Panel can show the current time or a countdown and updates every second.
Show the time in another office or show a countdown to an important event.

肝心のデータプロットに関する機能は無いので別途違うコンポーネントを読む。

インストール、ビルド

公式からインストールすると src が含まれない。
ソースコードをclone、buildすることにする。
初回だけgrafana-serverのrestartが必要。

ディレクトリ・ファイル構成

ディレクトリ・ファイル構成は以下の通り。

エントリポイント

./module.ts の内容は以下の通り。 ClockPanel.tsxで定義済みのClockPanelクラスをexportしている。
options.tsxに記述したオプション画面関連のクラスを.setPanelOptions()を介して設定する。

本体 (ClockPanel.tsx)

./ClockPanel.tsxを読んでいく。React+TypeScript。

設定 (options.tsx)

設定画面側を読んでいく。
PanelOptionsEditorBuilder型の引数を取り、builderに対して機能実装していく。
機能実装というのは、つまり、ラジオボタンを追加したり、カスタムエディタを追加したり、など。
この実装で以下のような設定画面が表示される。(README.mdは古いので注意)。

Modeとして、時間をそのまま表示するTimeモードか、カウンドダウンモードかを二者択一で設定する。
背景色(BackgroundColor)をカラーピッカーで設定する。(ちなみにGrafanaV7では機能しない様子)。
addTimeFormat()メソッドにより、24h表示/12h表示/カスタム表示,FontSize,FontWeightの設定機能を追加する。
addTimeZone()メソッドにより,TimeZoneと表示有無の設定機能を追加する。
カウントダウンモードに設定すると、カウントダウン設定をおこなえるが,
addCountdown()メソッドにより,カウントダウン設定を追加する。

決められた構文にしたがって欲しい機能を追加していくだけなので、
設定画面の実装が必要になったら必要な構文を調べて追加していくことになりそう。

-grafana
-

Copyright© ikuty.com , 2021 AllRights Reserved Powered by AFFINGER4.