grafana

Grafanaプラグインを読んでいく – simpod-json-datasource plugin

投稿日:

最も単純そうなDataSourceプラグインを読んでいく。
プラグインは simpod-json-datasource plugin。
配布はここ

JSONを返す任意のURLにリクエストを投げて結果を利用できるようにする。
TypeScriptで書かれている。

The JSON Datasource executes JSON requests against arbitrary backends.
JSON Datasource is built on top of the Simple JSON Datasource. It has refactored code, additional features and active development.

install

インストール方法は以下の通り。
初回だけgrafana-serverのrestartが必要。

build

ビルド方法は以下の通り。
yarn一発。

設定

データソースの追加で、今回インストールした DataSource/JSON (simpod-json-datasource)を
選択すると、プラグインのコンフィグを変更できる。

要求するURL一覧

URLはBaseURL。
このプラグインはURLの下にいくつかのURLが存在することを想定している。
つまり、それぞれのURLに必要な機能を実装することでプラグインが機能する。
用語については順に解説する。

必須

Method Path Memo
GET / ConfigページでStatusCheckを行うためのURL。
200が返ればConfigページで「正常」となる。
POST /search 呼び出し時に「利用可能なメトリクス」を返す。
POST /query 「メトリクスに基づくデータポイント」を返す。
POST /annotations 「アノテーション」を返す。

オプショナル

Method Path Memo
POST /tag-keys 「ad-hocフィルタ」用のタグのキーを返す。
POST /tag-values 「ad-hocフィルタ」用のタグの値を返す。

メトリクス

Grafanaにおいて、整理されていないデータの中から”ある観点”に従ったデータを取得したいという
ユースケースをモデル化している.

例えば、サーバ群の負荷状況を監視したいというケースでは「サーバ名」毎にデータを取得したいし、
センサ群から得られるデータを監視したいというケースでは「センサID」毎にデータを取得したい.

これらの観点は、Grafanaにおいて「メトリクス」または「タグ」として扱われる。
センサAからセンサZのうちセンサPとセンサQのデータのみ表示したい、という感じで使う。
ここで現れるセンサAからセンサZが「メトリクス」である。

クエリ変数のサポート (metricFindQuery)

「クエリ変数」は、「メトリクス」を格納する変数である。

データソースプラグインがクエリ変数をサポートするためには、
DataSourceApi クラスの metricFindQuery を オーバーライド する.

string型のqueryパラメタを受け取り、MetricFindValue型変数の配列を返す.
要は以下の問答を定義するものである。

– 質問 : 「どんなメトリクスがありますか?」
– 回答 : 「存在するメトリクスはxxx,yyy,zzzです」

ちなみに、metricFindQueryが受け取るqueryの型は、
metricFindQueryを呼び出すUIがstring型で呼び出すからstring型なのであって、
UIを変更することで別の型に変更することができる。

以下、simpod-json-datasource の metricFindQuery の実装。

以下、simpod-json-datasource が メトリクスを取得する部分のUI。
FormatAs, Metric, Additional JSON Dataの各項目が選択可能で、
各々の変数がViewModelとバインドされている.

コードは以下。React。
FormatAsのセレクトボックスのOnChangeでsetFormatAs()が呼ばれる。
MetricのセレクトボックスのOnChagneでsetMetric()が呼ばれる。
Additional JSON DataのonBlurでsetData()が呼ばれる。

クエリ変数から値を取得 (queryの実装)

続いて、選択したメトリクスのデータ列を得るための仕組み.
query()インターフェースを実装する.
QueryRequest型の引数を受け取る.
引数には、どのメトリクスを使う、だとか、取得範囲だとか、様々な情報が入っている。
QueryRequest型の引数を加工した値を、/query URLにPOSTで渡す.
/query URLから戻ってきた値は DataQueryResponse型と互換性があり、query()の戻り値として返る.

TypeScriptに明るくない場合、以下を参照。
Typescript-array-filter
【JavaScript】map関数を用いたおしゃれな配列処理
TypeScript – String replace()

JavaScriptのreplaceとGrafanaのreplaceが混在していて、
IDEが無いとかなり厳しい感じ。
Interpolate variables in data source plugins
Advanced variable format options

query()のパラメタについて、
Grafanaのデフォだとstring型で来るのだが、プラグインが必要に応じて好きに変更できる。
つまりquery()に値を投げる部分をプラグインが変更できるため、変更に応じて受け側も変更する。
当プラグインはDataQueryRequestインターフェースを派生させた型を用意している。
DataQueryRequest interface

getTemplateSrv()はGrafanaのユーティリティ関数。
getTemplateSrv variable
Github getTemplateSrv
Variable syntax

現在アクティブなダッシュボード内の変数が全て得られる。
* Via the TemplateSrv consumers get access to all the available template variables
* that can be used within the current active dashboard.

URLに投げるJSONは例えば以下の通り。

URLから返る値は例えば以下の通り.

アノテーションのサポート (annotationQueryの実装)

Grafanaには、ユーザがグラフの中に注意を喚起するラベル(またはラベルの範囲)を
設定する機能がある。
ユーザが自力で書くだけでなく、プラグインがアノテーションを提供することもできる。
simpod-json-datasourceプラグインは、アノテーションを提供する機能を有する。

公式の説明はこちら

例えば下図で薄く赤くなっている部分が プラグインによるアノテーション。

実装方法は以下。
– アノテーションサポートを有効にする
– annotationQueryインターフェースを実装する
– アノテーションイベントを作成する

アノテーションサポートを有効にするためには、
plugin.json に以下を追加する。

simpod-json-datasourceプラグインのannotationQueryの実装は以下。

プラグインからURLにPOSTのBODYで渡ってくるデータは以下。

これに対して以下の応答を返すとイメージのようになる。
以下はAnnotationEvent型と型が一致している。
isRegionがtrueの場合、timeEndを付与することでアノテーションが領域になる。
isRegionがfalseの場合、timeEndは不要。
tagsにタグ一覧を付与できる。

-grafana
-,

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