Prometheus/Grafanaメモ - (2)GrafanaのDashboadを作ってみる

# はじめに
先に構成した環境ではPrometheus自身のメトリックが取得されている状況なので、Grafana上にPrometheusのMetricsを可視化するダッシュボードを作成する手順を試してみます。

## 関連記事
[Prometheus/Grafanaメモ - (1)Podmanでのテスト環境構築](https://qiita.com/tomotagwork/items/5c557d871530ff47f35d)
[Prometheus/Grafanaメモ - (2)GrafanaのDashboadを作ってみる](https://qiita.com/tomotagwork/items/72ca04949b0b99dba871)


# Grafanaのダッシュボードを作成

## ダッシュボードの新規作成
ダッシュボードを新規に作成します。

左側のメニューからDashboardを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/b9e0fb4a-11c6-7f72-74cd-8f808b889597.png)

NewのプルダウンメニューからNew Dashboardを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/f42ab9d8-5478-241d-096a-00d05eb3b90b.png)


これで新しいダッシュボードを作成するための初期画面になります。

## メモリ情報のグラフを追加

"Add a new panel"を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/1e415d77-7c57-368c-ff04-a2f34f189e4c.png)

パネルの編集画面が開きます。ここでどのデータを元にどのようなグラフを作成するかを指定していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/c3b66d3d-e744-08a6-56d5-992bf41e7518.png)

まず、メモリの状況を確認するためのグラフを作成してみます。
Metricの欄から"process_resident_memory_bytes"を選択し、Run queryボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/5a76fb16-9f53-9454-881e-e649581c6269.png)
※Metricの欄ではプルダウンメニューにPrometheus上に保持されている項目がリストされるので、そこから選択できます。キーワードを入れるとそれを含む項目がフィルターされて表示されます。(使いやすい！)

グラフの表示結果のイメージが上部に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/777ab7ca-ac2f-45ae-bc91-2a3c41323ce5.png)

パネルの名前を指定し、その他適宜右側のペインで必要な設定を行い、右上のApplyボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/687b0de7-1500-8ef4-b1db-0b6af12c37e1.png)

ダッシュボードにメモリ使用量のグラフが追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/fce0599c-1753-8c72-48c3-5164b2afcb40.png)

## CPU情報のグラフを作成

このダッシュボードにもう一つ別のパネルを追加してみます。
上段のAdd Panelのアイコンをクリックし、Add a new panelをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/75d48e12-db7b-406e-9d6c-905ce677b6c7.png)

先ほどと同じ要領で、今度はprocess_cpu_seconds_totalというMetricを指定してRun queriesボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/31cd5305-4f9a-647f-21ea-059b6f1e8cf4.png)
上段にグラフが表示されましたが、この情報は消費したCPU時間の累積値が記録されているようなので、右肩上がりのグラフになっています。
このような情報は生の値をそのままグラフ化すると状況を把握しにくいので、少し加工して表示するようにします。

Metricの下にある"Operation"ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/9e0f8c1a-631a-34f4-8b48-173ea0aac931.png)

プルダウンメニューから、Range functions - Rate を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/38c35e47-0b33-b5c3-24ce-fa99ca6c6a0e.png)

Rateが追加され、Raw queryを見るとrate()関数が適用されている様子が分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/1d74c312-84d7-8939-697d-58a9af8cb340.png)

参考: 
[rate()](https://prometheus.io/docs/prometheus/latest/querying/functions/#rate)
[$__rate_interval](https://grafana.com/docs/grafana/latest/dashboards/variables/add-template-variables/#__rate_interval)

この状態で、再度 Run queries ボタンをクリックしてみると、グラフ表示が以下のように変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/7e100e69-ef01-4c3c-5ae5-74871d45b8af.png)
単位時間あたりのCPU使用時間のグラフが表示されるようになりました。

Titleを指定して右上のApplyボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/bbb3e0f8-ae4a-4dd1-f7c8-a29dcd606bbf.png)

これで、PrometheusのMemoryとCPUの状況を表すダッシュボードが作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/71263205-a901-b5cb-17ce-0fb5c69ffd37.png)

## ダッシュボードの保存
Saveアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/5c7b57bf-56e5-9aff-a04a-c851c0a38809.png)

Dashboardの名前を付けて保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132331/7c1e8159-447c-9d77-47b4-da0996667923.png)


# 補足
可視化を行う場合、当然のことながら元になるデータがどういう意味合いを持つのかを把握した上で、どのようなグラフを作成すると意味のある分かりやすいものになるかを考慮する必要があります。
GrafanaからPrometheusの情報を引っ張ってくる際にはPromQLというクエリ言語が使われることになりますが、PromQLでは可視化の際に便利な関数などがいろいろと提供されているようです。上で使用したrate()関数もその一つです。この辺りの機能を駆使することで柔軟にいろんな形の可視化が行えそうです。

参考:
[Querying Prometheus](https://prometheus.io/docs/prometheus/latest/querying/basics/)
[Grafana support for Prometheus](https://prometheus.io/docs/visualization/grafana/#creating-a-prometheus-graph)
[Grafana - Data Sources - Prometheus data source](https://grafana.com/docs/grafana/latest/datasources/prometheus/)