ダッシュボードのパネルタイプ

監視ダッシュボードでは、以下のパネルタイプがサポートされています。

面積図または折れ線グラフ

ダッシュボードにエリア・チャート・パネル・タイプを追加するには、次のサンプル・ダッシュボード・ファイルを見てください： 

dashboard: 'Dashboard Title'
panel_groups:
  - group: 'Group Title'
    panels:
      - type: area-chart # or line-chart
        title: 'Area Chart Title'
        y_label: "Y-Axis"
        y_axis:
          format: number
          precision: 0
        metrics:
          - id: area_http_requests_total
            query_range: 'http_requests_total'
            label: "Instance: {{instance}}, Method: {{method}}"
            unit: "count"

以下の特性に注意してください：

プロパティ タイプ 必須 説明
タイプ 列 いいえ レンダリングされるパネルのタイプ。 エリアパネルタイプの場合はオプション。
クエリーレンジ 列 必須 エリア・パネル・タイプの場合は、レンジ・クエリを使用する必要があります。

area panel chart

バージョン12.8から、Y軸の値がデータに応じて自動的にスケーリングされるようになりました。 以前は常に0から始まっていました。

アノマリーチャート

GitLab 12.5で導入されました。

ダッシュボードに異常チャート・パネル・タイプを追加するには、正確に3 つのメトリクスを持つパネルを追加します。

最初のメトリクスは現在の状態を表し、2番目と3番目のメトリクスはそれぞれ上限と下限を表します： 

dashboard: 'Dashboard Title'
panel_groups:
  - group: 'Group Title'
    panels:
      - type: anomaly-chart
        title: "Chart Title"
        y_label: "Y-Axis"
        metrics:
          - id: anomaly_requests_normal
            query_range: 'http_requests_total'
            label: "# of Requests"
            unit: "count"
        metrics:
          - id: anomaly_requests_upper_limit
            query_range: 10000
            label: "Max # of requests"
            unit: "count"
        metrics:
          - id: anomaly_requests_lower_limit
            query_range: 2000
            label: "Min # of requests"
            unit: "count"

以下の特性に注意してください：

プロパティ タイプ 必須 説明
タイプ 列 必須 異常パネルタイプはanomaly-chart である必要があります。
クエリーレンジ はい 必須 異常パネル・タイプでは、すべてのメトリクスで範囲クエリを使用する必要があります。

anomaly panel type

棒グラフ

ダッシュボードに棒グラフを追加するには、次のサンプル・ダッシュボード・ファイルを見てください： 

dashboard: 'Dashboard Title'
panel_groups:
  - group: 'Group title'
    panels:
      - type: bar
        title: "Http Handlers"
        x_label: 'Response Size'
        y_axis:
          name: "Handlers"
        metrics:
          - id: prometheus_http_response_size_bytes_bucket
            query_range: "sum(increase(prometheus_http_response_size_bytes_bucket[1d])) by (handler)"
            unit: 'Bytes'

以下の特性に注意してください：

プロパティ タイプ 必須 説明
type 列 はい レンダリングされるパネルのタイプ。 棒グラフの場合は、次のように設定します。bar
query_range はい はい 棒グラフの場合は、範囲クエリを使用する必要があります。

bar chart panel type

カラムチャート

ダッシュボードにカラムパネルタイプを追加するには、以下のサンプルダッシュボードファイルを見てください： 

dashboard: 'Dashboard Title'
panel_groups:
  - group: 'Group title'
    panels:
      - title: "Column"
        type: "column"
        metrics:
        - id: 1024_memory
          query: 'avg(sum(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-([^c].*|c([^a]|a([^n]|n([^a]|a([^r]|r[^y])))).*|)-(.*)",namespace="%{kube_namespace}"}) by (job)) without (job) / count(avg(container_memory_usage_bytes{container_name!="POD",pod_name=~"^%{ci_environment_slug}-([^c].*|c([^a]|a([^n]|n([^a]|a([^r]|r[^y])))).*|)-(.*)",namespace="%{kube_namespace}"}) without (job)) /1024/1024'
          unit: MB
          label: "Memory Usage"

以下の特性に注意してください：

プロパティ タイプ 必須 説明
タイプ 列 はい レンダリングされるパネルのタイプ。 コラムパネルタイプの場合は、次のように設定します。column
クエリーレンジ はい はい 列パネル・タイプの場合は、範囲クエリを使用する必要があります。

anomaly panel type

スタックド・カラム

GitLab 12.8で導入されました。

ダッシュボードにスタック・カラム・パネル・タイプを追加するには、以下のサンプル・ダッシュボード・ファイルを見てください： 

dashboard: 'Dashboard title'
priority: 1
panel_groups:
  - group: 'Group Title'
    priority: 5
    panels:
      - type: 'stacked-column'
        title: "Stacked column"
        y_label: "y label"
        x_label: 'x label'
        metrics:
          - id: memory_1
            query_range: 'memory_query'
            label: "memory query 1"
            unit: "count"
            series_name: 'group 1'
          - id: memory_2
            query_range: 'memory_query_2'
            label: "memory query 2"
            unit: "count"
            series_name: 'group 2'

stacked column panel type

プロパティ タイプ 必須 説明
type 列 はい レンダリングされるパネルのタイプ。 スタックカラムパネルタイプの場合はstacked-column
query_range はい はい スタック列パネル・タイプでは、範囲クエリを使用する必要があります。

シングルスタット

単一の統計パネル・タイプをダッシュボードに追加するには、以下のサンプル・ダッシュボード・ファイルを見てください： 

dashboard: 'Dashboard Title'
panel_groups:
  - group: 'Group Title'
    panels:
      - title: "Single Stat"
        type: "single-stat"
        metrics:
          - id: 10
            query: 'max(go_memstats_alloc_bytes{job="prometheus"})'
            unit: MB
            label: "Total"

以下の特性に注意してください：

プロパティ タイプ 必須 説明
タイプ 列 はい レンダリングされるパネルのタイプ。 シングルスタットパネルタイプの場合は、次のように設定します。single-stat
クエリ 列 はい 単一のスタット・パネル・タイプの場合は、インスタント・クエリを使用する必要があります。

single stat panel type

パーセンタイルに基づく結果

GitLab 12.8で導入されました。

クエリ結果は、100% 中のパーセンテージ値として表現する必要がある場合があります。パネル定義のルートでmax_value プロパティを使用できます： 

dashboard: 'Dashboard Title'
panel_groups:
  - group: 'Group Title'
    panels:
      - title: "Single Stat"
        type: "single-stat"
        max_value: 100
        metrics:
          - id: 10
            query: 'max(go_memstats_alloc_bytes{job="prometheus"})'
            unit: '%'
            label: "Total"

例えば、クエリの値が53.6である場合、% を単位として追加すると、1 つの stat 値は53.6%になりますが、クエリの最大期待値が120である場合、値は44.6%になります。max_value を追加すると、正しいパーセンテージ値が表示されます。

ヒートマップ

GitLab 12.5で導入されました。

ダッシュボードにヒートマップパネルタイプを追加するには、次のサンプルダッシュボードファイルを見てください： 

dashboard: 'Dashboard Title'
panel_groups:
  - group: 'Group Title'
    panels:
      - title: "Heatmap"
        type: "heatmap"
        metrics:
          - id: 10
            query: 'sum(rate(nginx_upstream_responses_total{upstream=~"%{kube_namespace}-%{ci_environment_slug}-.*"}[60m])) by (status_code)'
            unit: req/sec
            label: "Status code"

以下の特性に注意してください：

プロパティ タイプ 必須 説明
タイプ 列 はい レンダリングされるパネルのタイプ。 ヒートマップ・パネルタイプの場合は、次のように設定します。heatmap
クエリーレンジ はい はい エリア・パネル・タイプの場合は、レンジ・クエリを使用する必要があります。

heatmap panel type

警告: クエリがあまりにも多くのデータ・ポイントを返すと、ヒートマップ・データ・バケッ トの寸法が 0 に下がり、下の画像のようにチャートのデータが見えなくなります。 この問題を解決するには、メトリクス・ダッシュボード UI の時間範囲フィルタを変更するか、ダッシュボードの YAML ファイルにstepプロパティを追加して、返されるデータ量を制限します。

heatmap chart_too_much_data