3.11.2 ダッシュボードの作成・編集・削除
ダッシュボードの作成、編集について以下を示します。
ダッシュボードは1つ以上のパネルからなります。パネルはデータソースから取得したデータを表示するコンポーネントです。パネルごとに取得するデータ、取得したデータの変換、取得したデータを視覚的に表示するための設定などを行います。また、フォルダを作成しその中にダッシュボードを配置します。目的に応じたフォルダを作成することで、ダッシュボードを分類できます。（1）ダッシュボード作成・編集・削除の概要
[Home]-[Dashboards]から[Dashboards]画面にアクセスします。
【ダッシュボードの作成】
ダッシュボードの作成の大まかな流れを以下に示します。
（表）ダッシュボード作成の流れ
| 手順 | 説明 | |
|---|---|---|
| 1 | フォルダを作成する | ダッシュボードを配置するフォルダを作成します。 [New]ボタンの[New folder]をクリックします。既存のフォルダにダッシュボードを追加する場合は、新たに作成する必要はありません。 |
| 2 | ダッシュボードを作成する | パネルを配置するための、ダッシュボードを作成します。 [New]ボタンの[New dashboard]をクリックします。 |
| 3 | パネルを作成する | パネルを作成するための設定画面を開きます。 [Add visualization]をクリックします。 |
| 4 | クエリの設定 | パネルに表示するデータを取得するため、データ取得に用いるOps Iの公開APIを設定します。必要なデータのみ取得できるようにフィルタを設定できます。
[Queries]タブで設定します。 使用できるデータソースのプラグインは「Infinity」です。Infinityのクエリの設定については以下を参照してください。 https://grafana.com/docs/plugins/yesoreyeram-infinity-datasource/ 設定項目の例は「ダッシュボードの作成例」を参照してください。  メモ
|
| 5 | 表示するデータの選択・変換 | 取得したデータの中からパネルに表示するデータの選択や変換をします。 [Transformations]タブで設定します。Transformationは複数設定できます。 |
| 6 | データ形式の設定 | 時系列グラフやヒストグラム、表などデータを視覚的に表示するための設定をします。表やグラフのタイトル、グラフの軸などの設定も行います。 [Visualization]ペインで設定します。 |
| 7 | Permissionの設定 | 必要に応じてフォルダ、ダッシュボードにPermissionを設定します。設定方法は「Permissionの設定」を参照してください。 |
メモ- [Queries]タブの[Data source]で[-- Dashboard --]を選択することで、ダッシュボード内の別のパネルで設定した[Queries]タブでの取得結果を使用することができます。一度のデータ取得で、異なるTransformation、Visualizationのパネルを配置することができます。
- 複数のダッシュボードで同じパネルを利用したい場合は、library panelを作成することで共有することができます。library panelを変更すると、参照しているダッシュボードすべてに変更が反映されます。
https://grafana.com/docs/grafana/v12.3/visualizations/panels-visualizations/
https://grafana.com/docs/grafana/v12.3/visualizations/dashboards/
【ダッシュボードの編集】
ダッシュボードを編集する場合は、以下の手順で行ってください。
- ダッシュボードを開く
- ダッシュボードの画面右上にある「Edit」ボタンを選択する
- 編集する
- 作成済のパネルを編集する場合：
パネルの右上にある三点リーダーから「Edit」を選択し、編集する - 作成済のパネルを削除する場合：
パネルの右上にある三点リーダーから「Remove」を選択する - 既存のダッシュボードに新しいパネルを追加する場合：
画面右上の[Add]から「Visualization」を選択し、新規作成の手順と同様にパネルの設定をする
- 作成済のパネルを編集する場合：
- [Save dashboard]をクリックし保存する
【ダッシュボードの削除】
ダッシュボードを削除する場合は、以下の手順で行ってください。
- 画面右上の[Edit]をクリックすると表示される[Settings]を選択する
- [Delete dashboard]をクリックする
注意事項
- ダッシュボードの表示時にデータソースからデータを取得します。その際、操作をするユーザーのACLが適用され、ユーザーがアクセスできるデータのみ表示されます。
- ダッシュボード、フォルダの作成直後、およびインポート直後は、Permissionが正しく設定されず、作成やインポートしたユーザーがアクセスできない場合があります。アクセスできない場合は、1分ほど待機してから、画面を更新してください。
- データソースから必要なデータのみを取得してダッシュボードを作成してください。数万件を超えるデータを取得する場合は、事前にデータの取得、およびグラフの表示に問題がないか検証をしてください。
- [Queries]タブの[Type]でJSONやCSVなどを選択する前に、[Queries]タブの折りたたみアイコンをクリックし[Queries]タブを折りたたむと、エラーが表示されます。[Type]を1回以上設定すると、その後[Type]の値を削除して折りたたみの動作をしてもエラーは表示されません。
- データソースのプラグイン「Infinity」には以下の制限があります。
https://grafana.com/docs/plugins/yesoreyeram-infinity-datasource/latest/#-known-limitations
（2）ダッシュボードの作成例
以下の例を示します。
（a）ワークフローの実行数のグラフ作成例（GraphQL以外の標準提供APIを使用する例）
日ごとのワークフローの実行数をグラフにする場合について、以下に示します。
API「GET /api/v1/practice-contexts」の結果を「createdOn」の日付ごとに集計しグラフにします。
手順1、2、10の詳細は「（表）ダッシュボード作成の流れ」の手順1、2、7を参考にしてください。
また、ダッシュボードは取得するデータがないと実施できない作成手順があります。あらかじめワークフローを複数実行し、データを用意してください。
- フォルダを作成します。
ダッシュボードを配置するフォルダを作成します。作成したフォルダのPermissionを設定します。 - ダッシュボードを作成します。
- [Add visualization]ボタンからVisualizationを追加しパネルを作成します。
- [Select data source]で「Ops I」を選択すると[Edit panel]が開きます。
- [Queries]タブで以下の設定をしてグラフの元となるデータを取得します。設定後に[Table view]をONにすると、取得されたデータが表示されます。ここで「Rows/Root」はリストの位置を指定します。「Parser」で指定したJSONataの形式で指定します。
項目 値 Data source Ops I Type JSON Parser JSONata Method GET URL /api/v1/practice-contexts Rows/Root※1 $.data.content URL Query Params※2 key-value形式で以下を設定します。keyに設定できる項目については、API「GET /practice-contexts」の詳細から確認できます。 - pageSize：10000
取得する件数を指定します。 - sortBy：createdOn:desc
作成日時が新しいワークフローから順に取得します。 - filterBy：createdOn:ge:${__from:date:iso},createdOn:lt:${__to:date:iso}
取得する期間を指定します。
「__from」、「__to」は以下を参照してください。
https://grafana.com/docs/grafana/v12.3/visualizations/dashboards/variables/add-template-variables/#global-variables
※1：[Parsing options & Result fields]をクリックすると表示されます。※2：[Headers, Request params]をクリックすると表示されます。
- pageSize：10000
- [Transformations]タブで以下の設定をします。[Add transformation]をクリックすると表示されるtransformationの一覧から使用するtransformationの種類を選択し、設定をします。2つ目以降のtransformationの設定を追加する場合は、[Add another transformation]をクリックすると一覧から選択できます。手順7の[Visualization]ペインでグラフの種類を先に指定すると、[Transformations]での設定がグラフに反映されていることをリアルタイムで確認できます。
種類 設定 Filter fields by name 「createdOn」以外のチェックを外し、createdOnのデータのみ表示します。 Format string 以下の設定で時間情報を非表示にします。日時情報から日付の情報のみ残すために表示する文字の範囲を指定しています。 - Field：createdOn
- Format：Substring
- Substring range：0～10
Group by createdOnに「Group by」と「Count」を指定し、データの件数をカウントします。 Sort by 「createdOn」を指定し、createdOn順にデータの並び替えをします。 Organize fields by name 以下を指定し、表示するフィールド名を変更します。 - createdOn：作成日
- createdOn（count）：件数
- [Visualization]ペインでグラフの種類「Bar chart」を選択します。[Table view]をOFFにすると選択したグラフ、設定でデータが表示されます。以下のグラフの設定をします。
設定 値 [Panel options]-[Title] 「ワークフローの件数」などを指定します。 [Standard options]-[Decimals] 「0」を指定し、軸の数値を整数で表示します。 - [Back to dashboard]をクリックし、ダッシュボードの編集画面に戻ります。必要に応じて作成されたグラフのサイズをドラッグ操作で調整します。また、右上の表示期間を変更することもできます。
- [Save dashboard]をクリックします。ダッシュボードの名称やダッシュボードを配置するフォルダを指定し保存します。
- （任意）作成したダッシュボードのPermissionを設定します。
（b）データモデルを使用したグラフ作成例（GraphQLを使用する例）
DatamodelのYAMLファイル「カスタムテーブルの定義例」のデータモデルが登録されており、lend_vm_tableテーブルにデータが登録されているとします。
指定した期間に利用開始日を迎える申請一覧を表で表示する場合について以下に示します。
API「POST /api/v1/graphql」を使用し、「start_date」でフィルタした結果を表で出力します。
手順1、2、9の詳細は「（表）ダッシュボード作成の流れ」の手順1、2、7を参考にしてください。
また、ダッシュボードは取得するデータがないと実施できない作成手順があります。あらかじめワークフローを複数実行し、データを用意してください。
- フォルダを作成します。
ダッシュボードを配置するフォルダを作成します。作成したフォルダのPermissionを設定します。 - ダッシュボードを作成します。
- [Add visualization]ボタンからVisualizationを追加しパネルを作成します。
- [Select data source]で「Ops I」を選択すると[Edit panel]が開きます。
- [Queries]タブで以下の設定をしてグラフの元となるデータを取得します。設定後に[Table view]をONにすると、取得されたデータが表示されます。ここで「Rows/Root」はリストの位置を指定します。「Parser」で指定したJSONataの形式で指定します。
項目 値 Data source Ops I Type GraphQL Parser JSONata Method POST URL /api/v1/graphql URL options Body Type※1 GraphQLを選択しGraphQL queryに以下を設定します。 {「__from」、「__to」は以下を参照してください。
u_lend_vm_table(where: {_and: [
{start_date: {_gte: " ${__from:date:iso}"}},
{start_date: {_lte: " ${__to:date:iso}"}}
]}) {
app_number
sys_name
vm_name
os_name
cpu
start_date
applicant
}
}
https://grafana.com/docs/grafana/v12.3/visualizations/dashboards/variables/add-template-variables/#global-variablesRows/Root※2 $.data.data.u_lend_vm_table ※1：[Headers, Body, Request params]をクリックすると表示されます。※2：[Parsing options & Result fields]をクリックすると表示されます。
- [Visualization]ペインでグラフの種類「Table」を選択します。[Table view]をOFFにします。
項目 値 [Panel options]-[Title] 「申請一覧」などを指定します。 - [Back to dashboard]をクリックし、ダッシュボードの編集画面に戻ります。必要に応じて作成されたグラフのサイズをドラッグ操作で調整します。また、右上の表示期間を変更することもできます。
- [Save dashboard]をクリックします。ダッシュボードの名称やダッシュボードを配置するフォルダを指定し保存します。
- （任意）作成したダッシュボードのPermissionを設定します。