Beispiele für Dashboards und Layouts

Auf dieser Seite wird gezeigt, wie Sie Dashboards mit der Cloud Monitoring API erstellen. Für jedes Beispiel wird die Dashboard-Definition in JSON und das entsprechende Dashboard angezeigt.

Cloud Monitoring bietet auch eine ausgewählte Gruppe von Dashboard-Definitionen auf GitHub. Sie können diese Definitionen als benutzerdefinierte Dashboards in Ihrem Google Cloud-Projekt installieren. Informationen zu diesem Repository und zur Installation dieser Dashboards finden Sie unter Beispiel-Dashboards installieren.

Wann sollte die API verwendet werden?

Mit der Cloud Monitoring API können Sie viele Dashboards gleichzeitig verwalten. Sie können zwar auch die Google Cloud Console zur Verwaltung Ihrer Dashboards verwenden, mit der API ist die Verwaltung mehrerer benutzerdefinierter Dashboards jedoch einfacher.

Sie müssen die API auch verwenden, wenn Sie das leere Platzhalter-Widget zu Ihrem Dashboard hinzufügen möchten.

MQL mit der API verwenden

Wenn Sie ein Dashboard erstellen, können Sie eine MQL-Abfrage an die Spezifikation TimeSeriesQuery in der Methode dashboards.create bereitstellen. Weitere Informationen finden Sie unter Diagramme erstellen.

Dashboard-Layouts

Dashboard im GridLayout

In diesem Dashboard wird ein GridLayout mit drei Widgets angezeigt.

{
  "displayName": "Grid Layout Example",
  "gridLayout": {
    "columns": "2",
    "widgets": [
      {
        "title": "Widget 1",
        "xyChart": {
          "dataSets": {
            "timeSeriesQuery": {
              "timeSeriesFilter": {
                "filter": "metric.type=\"agent.googleapis.com/nginx/connections/accepted_count\"",
                "aggregation": {
                  "perSeriesAligner": "ALIGN_RATE"
                }
              },
              "unitOverride": "1"
            },
            "plotType": "LINE"
          },
          "timeshiftDuration": "0s",
          "yAxis": {
            "label": "y1Axis",
            "scale": "LINEAR"
          }
        }
      },
      {
        "text": {
          "content": "Widget 2"
        }
      },
      {
        "title": "Widget 3",
        "xyChart": {
          "dataSets": {
            "timeSeriesQuery": {
              "timeSeriesFilter": {
                "filter": "metric.type=\"agent.googleapis.com/nginx/connections/accepted_count\"",
                "aggregation": {
                  "perSeriesAligner": "ALIGN_RATE"
                }
              },
              "unitOverride": "1"
            },
            "plotType": "STACKED_BAR"
          },
          "timeshiftDuration": "0s",
          "yAxis": {
            "label": "y1Axis",
            "scale": "LINEAR"
          }
        }
      }
    ]
  }
}

Das Dashboard sieht ungefähr so aus:

Beispieldashboard mit Rasterlayout

Dashboard im MosaicLayout

In diesem Dashboard wird ein MosaicLayout mit zwei Widgets angezeigt.

{
  "displayName": "Mosaic Layout Example",
  "mosaicLayout": {
    "columns": 12,
    "tiles": [
      {
        "xPos": 2,
        "yPos": 2,
        "width": 7,
        "height": 2,
        "widget": {
          "title": "CPU utilization in us-central1-a",
          "scorecard": {
            "timeSeriesQuery": {
              "timeSeriesFilter": {
                "filter": "metric.type=\"compute.googleapis.com/instance/cpu/utilization\" resource.type=\"gce_instance\" resource.label.zone=\"us-central1-a\"",
                "aggregation": {
                  "perSeriesAligner": "ALIGN_MEAN",
                  "crossSeriesReducer": "REDUCE_MAX"
                }
              },
              "unitOverride": "1"
            },
            "gaugeView": {
              "upperBound": 1.5
            },
            "thresholds": [
              {
                "value": 0.8,
                "color": "YELLOW",
                "direction": "ABOVE"
              },
              {
                "value": 1,
                "color": "RED",
                "direction": "ABOVE"
              }
            ]
          }
        }
      },
      {
        "xPos": 1,
        "yPos": 5,
        "width": 4,
        "height": 4,
        "widget": {
          "title": "My Chart",
          "xyChart": {
            "dataSets": [
              {
                "timeSeriesQuery": {
                  "timeSeriesFilter": {
                    "filter": "metric.type=\"compute.googleapis.com/instance/cpu/utilization\" resource.type=\"gce_instance\"",
                    "aggregation": {
                      "perSeriesAligner": "ALIGN_MEAN",
                      "crossSeriesReducer": "REDUCE_MAX",
                      "groupByFields": [
                        "resource.label.zone"
                      ]
                    }
                  },
                  "unitOverride": "'1'"
                },
                "plotType": "LINE",
                "minAlignmentPeriod": "60s"
              }
            ],
            "yAxis": {
              "label": "y1Axis",
              "scale": "LINEAR"
            }
          }
        }
      }
    ]
  }
}

Das Dashboard sieht ungefähr so aus:

Beispieldashboard mit Mosaiklayout

Dashboard im RowLayout

In diesem Dashboard wird ein RowLayout mit drei Widgets angezeigt.

{
  "displayName": "Row Layout Example",
  "rowLayout": {
    "rows": [
      {
        "weight": "1",
        "widgets": [
          {
            "text": {
              "content": "Widget 1",
              "format": "MARKDOWN"
            }
          },
          {
            "text": {
              "content": "Widget 2",
              "format": "MARKDOWN"
            }
          },
          {
            "text": {
              "content": "Widget 3",
              "format": "MARKDOWN"
            }
          }
        ]
      }
    ]
  }
}

Das Dashboard sieht ungefähr so aus:

Beispieldashboard mit Zeilenlayout

Dashboard im ColumnLayout

In diesem Dashboard wird ein ColumnLayout mit drei Widgets angezeigt.

{
  "displayName": "Column Layout Example",
  "columnLayout": {
    "columns": [
      {
        "weight": "1",
        "widgets": [
          {
            "text": {
              "content": "Widget 1",
              "format": "MARKDOWN"
            }
          },
          {
            "text": {
              "content": "Widget 2",
              "format": "MARKDOWN"
            }
          },
          {
            "text": {
              "content": "Widget 3",
              "format": "MARKDOWN"
            }
          }
        ]
      }
    ]
  }
}

Das Dashboard sieht ungefähr so aus:

Beispieldashboard mit Spaltenlayout

Dashboards mit Widgets

Dashboard mit einem XyChart

In diesem Dashboard sehen Sie ein einfaches XyChart. Wenn Sie schon einmal die Google Cloud Console zum Erstellen von Diagrammen in Dashboards verwendet haben, sind diese Diagramme Instanzen des XyChart-Widgets.

Ähnlich wie die Funktionen in der Cloud Console bietet die API Optionen zum Ändern des PlotType oder die Konfiguration der Anzeigemodi von Diagrammen.

{
  "displayName": "Demo dashboard",
  "gridLayout": {
    "widgets": [
      {
        "title": "Sample line chart",
        "xyChart": {
          "dataSets": [
            {
              "timeSeriesQuery": {
                "timeSeriesFilter": {
                  "filter": "metric.type=\"compute.googleapis.com/instance/cpu/utilization\" resource.type=\"gce_instance\"",
                  "aggregation": {
                    "perSeriesAligner": "ALIGN_MEAN",
                    "crossSeriesReducer": "REDUCE_MAX",
                    "groupByFields": [
                      "resource.label.zone"
                    ]
                  }
                },
                "unitOverride": "1"
              },
              "plotType": "LINE"
            }
          ],
          "timeshiftDuration": "0s",
          "yAxis": {
            "label": "y1Axis",
            "scale": "LINEAR"
          },
          "chartOptions": {
            "mode": "COLOR"
          }
        }
      }
    ]
  }
}

Das Dashboard sieht ungefähr so aus:

Beispiel für einen XyChart

Dashboard mit einem XyChart und einem Grenzwert

In diesem Dashboard sehen Sie einen einfachen XyChart mit einem Grenzwert und der linken Y-Achse.

{
  "category": "CUSTOM",
  "displayName": "Dashboard with xyChart",
  "mosaicLayout": {
    "columns": 12,
    "tiles": [
      {
        "height": 4,
        "widget": {
          "title": "VM Instance - CPU utilization [MEAN]",
          "xyChart": {
            "chartOptions": {
              "mode": "COLOR"
            },
            "dataSets": [
              {
                "minAlignmentPeriod": "60s",
                "plotType": "LINE",
                "targetAxis": "Y2",
                "timeSeriesQuery": {
                  "apiSource": "DEFAULT_CLOUD",
                  "timeSeriesFilter": {
                    "aggregation": {
                      "alignmentPeriod": "60s",
                      "crossSeriesReducer": "REDUCE_NONE",
                      "perSeriesAligner": "ALIGN_MEAN"
                    },
                    "filter": "metric.type=\"compute.googleapis.com/instance/cpu/utilization\" resource.type=\"gce_instance\"",
                    "secondaryAggregation": {
                      "alignmentPeriod": "60s",
                      "crossSeriesReducer": "REDUCE_NONE",
                      "perSeriesAligner": "ALIGN_NONE"
                    }
                  }
                }
              }
            ],
            "thresholds": [
              {
                "label": "",
                "targetAxis": "Y2",
                "value": 0.45
              }
            ],
            "timeshiftDuration": "0s",
            "y2Axis": {
              "label": "y2Axis",
              "scale": "LINEAR"
            }
          }
        },
        "width": 6,
        "xPos": 0,
        "yPos": 0
      }
    ]
  }
}

Im vorherigen Beispiel gibt der JSON-Code die Verwendung der linken Y-Achse an, da er eine y2Axis-Struktur enthält. Verwenden Sie im Feld targetAxis "Y1" für die rechte Y-Achse und "Y2" für die linke Y-Achse. Wenn Sie das Feld targetAxis weglassen, wird die rechte Y-Achse verwendet.

Das Diagramm in diesem Dashboard sieht ungefähr so aus:

Beispiel-XyChart mit der linken Y-Achse und einem Grenzwert

Dashboard mit einem XyChart und STACKED_AREA PlotType

Dieses Dashboard enthält ein XyChart mit STACKED_AREA PlotType.

{
  "displayName": "Demo dashboard",
  "gridLayout": {
    "widgets": [
      {
        "title": "Sample stacked-area chart",
        "xyChart": {
          "dataSets": [
            {
              "timeSeriesQuery": {
                "timeSeriesFilter": {
                  "filter": "metric.type=\"compute.googleapis.com/instance/cpu/utilization\" resource.type=\"gce_instance\"",
                  "aggregation": {
                    "perSeriesAligner": "ALIGN_MEAN",
                    "crossSeriesReducer": "REDUCE_MAX",
                    "groupByFields": [
                      "resource.label.zone"
                    ]
                  }
                },
                "unitOverride": "1"
              },
              "plotType": "STACKED_AREA"
            }
          ],
          "timeshiftDuration": "0s",
          "yAxis": {
            "label": "y1Axis",
            "scale": "LINEAR"
          },
          "chartOptions": {
            "mode": "COLOR"
          }
        }
      }
    ]
  }
}

Das Dashboard sieht ungefähr so aus:

Beispiel-XyChart mit Flächendiagramm

Dashboard mit XyChart und STACKED_BAR PlotType

Dieses Dashboard enthält ein XyChart mit STACKED_BAR PlotType.

{
  "displayName": "Demo Dashboard",
  "gridLayout": {
    "widgets": [
      {
        "title": "My First Chart",
        "xyChart": {
          "dataSets": [
            {
              "timeSeriesQuery": {
                "timeSeriesFilter": {
                  "filter": "metric.type=\"compute.googleapis.com/instance/cpu/utilization\" resource.type=\"gce_instance\"",
                  "aggregation": {
                    "perSeriesAligner": "ALIGN_MEAN",
                    "crossSeriesReducer": "REDUCE_MAX",
                    "groupByFields": [
                      "resource.label.zone"
                    ]
                  }
                },
                "unitOverride": "1"
              },
              "plotType": "STACKED_BAR"
            }
          ],
          "timeshiftDuration": "0s",
          "yAxis": {
            "label": "y1Axis",
            "scale": "LINEAR"
          },
          "chartOptions": {
            "mode": "COLOR"
          }
        }
      },
    ]
  }
}

Das Dashboard sieht ungefähr so aus:

Beispiel-XyChart mit Balkendiagramm

Dashboard mit einem einfachen Scorecard

Dieses Dashboard zeigt ein Scorecard ohne Messgerät oder Sparkline. Das Beispiel zeigt die Compute Engine-CPU-Auslastung und die Kurzübersicht (Scorecard) hat zwei Grenzwerte. Ein Grenzwert verwendet eine Farbe gelb, um anzuzeigen, dass die CPU-Auslastung über 70 % liegt, der andere Grenzwert rot, um anzugeben, dass die CPU-Auslastung über 90 % liegt.

Da die aktuelle CPU-Auslastung unter den angegebenen Grenzwerten liegt, ist die Farbe grün.

{
  "displayName": "Unadorned scorecard",
  "gridLayout": {
    "widgets": [
      {
        "title": "Compute Engine CPU utilization",
        "scorecard": {
          "timeSeriesQuery": {
            "timeSeriesFilter": {
              "filter": "metric.type=\"compute.googleapis.com/instance/cpu/utilization\" resource.type=\"gce_instance\"",
              "aggregation": {
                "perSeriesAligner": "ALIGN_MEAN",
                "crossSeriesReducer": "REDUCE_MAX",
              }
            },
            "unitOverride": "1"
          },
          "thresholds": [
            {
              "color": "RED",
              "direction": "ABOVE",
              "label": "Danger",
              "value": 0.9,
            },
            {
              "color": "YELLOW",
              "direction": "ABOVE",
              "label": "Warning",
              "value": 0.7,
            }
          ]
        }
      },
    ]
  }
}

Das Dashboard sieht ungefähr so aus:

Beispieldashboard mit Scorecard-Widget

Dashboard mit Scorecard und GaugeView

Dieses Dashboard fügt der einfachen Übersicht im vorherigen Beispiel eine Anzeige hinzu. Das GaugeView-Objekt kann eine Ober- und eine Untergrenze angeben, um den Wertebereich anzugeben, der auf der Anzeige angezeigt werden soll. Da die Kurzübersicht Werte von 0 bis 1 enthält, sind diese Ober- und Untergrenzen angemessen. Fügen Sie der JSON-Datei für die einfache Übersicht Folgendes hinzu:

          "gaugeView": {
            "lowerBound": 0,
            "upperBound": 1,
          },

Im Folgenden sehen Sie die vollständige geänderte Dashboard-Spezifikation: Der aktuelle Wert liegt unter den Schwellenwerten, die auf der Anzeige entsprechend eingefärbt sind.

{
  "displayName": "Gauge scorecard",
  "gridLayout": {
    "widgets": [
      {
        "title": "Compute Engine CPU utilization",
        "scorecard": {
          "timeSeriesQuery": {
            "timeSeriesFilter": {
              "filter": "metric.type=\"compute.googleapis.com/instance/cpu/utilization\" resource.type=\"gce_instance\"",
              "aggregation": {
                "perSeriesAligner": "ALIGN_MEAN",
                "crossSeriesReducer": "REDUCE_MAX",
              }
            },
            "unitOverride": "1"
          },
          "gaugeView": {
            "lowerBound": 0,
            "upperBound": 1,
          },
          "thresholds": [
            {
              "color": "RED",
              "direction": "ABOVE",
              "label": "Danger",
              "value": 0.9,
            },
            {
              "color": "YELLOW",
              "direction": "ABOVE",
              "label": "Warning",
              "value": 0.7,
            }
          ]
        }
      },
    ]
  }
}

Das Dashboard sieht ungefähr so aus:

Beispieldashboard mit einem Scorecard-Widget mit GaugeView

Dashboard mit Scorecard und SparkChartView

Dieses Dashboard ersetzt die Anzeige im vorherigen Beispiel durch eine Sparkline. Das SparkChartView-Objekt kann Liniendiagramme oder Balkendiagramme in einer Kurzübersicht erstellen. In diesem Beispiel wird eine Linie verwendet. Solange der Wert nicht gegen einen Grenzwert verstößt, ist er grün. Um die Sparkline hinzuzufügen, ersetzen Sie das JSON-Objekt gaugeView im vorherigen Diagramm durch Folgendes:

          "sparkChartView": {
            "sparkChartType": "SPARK_LINE"
          },

Das Dashboard sieht ungefähr so aus:

Beispieldashboard mit einem Scorecard-Widget mit SparkChartView

Dashboard mit einem TimeSeriesTable-Widget

Dieses Beispiel zeigt ein einfaches Dashboard mit einem TimeSeriesTable-Widget.

{
  "category": "CUSTOM",
  "displayName": "Pams Table - Sep 7, 2021 1:35 PM",
  "mosaicLayout": {
    "columns": 12,
    "tiles": [
      {
        "height": 5,
        "widget": {
          "timeSeriesTable": {
            "dataSets": [
              {
                "minAlignmentPeriod": "0s",
                "tableDisplayOptions": {},
                "timeSeriesQuery": {
                  "timeSeriesFilter": {
                    "aggregation": {
                      "alignmentPeriod": "60s",
                      "crossSeriesReducer": "REDUCE_NONE",
                      "perSeriesAligner": "ALIGN_MEAN"
                    },
                    "filter": "metric.type=\"compute.googleapis.com/instance/cpu/utilization\" resource.type=\"gce_instance\""
                  }
                }
              }
            ]
          },
          "title": "VM Instance - CPU utilization [MEAN]"
        },
        "width": 7,
        "xPos": 0,
        "yPos": 0
      }
    ]
  }
}

Wie im folgenden Screenshot gezeigt, zeigt das Tabellen-Widget einen Titel an, enthält eine Filterleiste und zeigt Daten in einem Tabellenformat an:

Beispieldashboard mit einem Tabellen-Widget

Die Spalten der Tabelle entsprechen Labels. Jede Zeile entspricht einer Zeitachse.

Dashboard mit einem Text-Widget

Dieses Beispiel zeigt ein einfaches Dashboard mit einem Text-Widget.

{
  "displayName": "Demo Dashboard"
  "gridLayout": {
    "widgets": [
      {
        "text" {
          "content": "Hello World"
        }
      }
    ]
  }
}

Das Dashboard sieht ungefähr so aus:

Beispieldashboard mit einem Text-Widget

Dashboard mit einem AlertChart-Widget

Dieses Dashboard zeigt ein Dashboard mit einem AlertChart-Widget:

{
  "category": "CUSTOM",
  "displayName": "Alert chart example",
  "mosaicLayout": {
    "columns": 12,
    "tiles": [
      {
        "height": 8,
        "widget": {
          "alertChart": {
            "name": "projects/my-project/alertPolicies/14205854094151528373"
          }
        },
        "width": 9,
        "xPos": 0,
        "yPos": 0
      }
    ]
  }
}

Im Gegensatz zu anderen Dashboard-Widgets geben Sie keinen Titel oder Messwertmesswert für diese Widgets an. Stattdessen geben Sie den Ressourcennamen für eine Benachrichtigungsrichtlinie an. Der letzte Eintrag im Feld name ist die Kennung der Benachrichtigungsrichtlinie.

Das Dashboard sieht ungefähr so aus:

Beispiel für ein Benachrichtigungsdiagramm

In diesem Beispiel überwacht die Benachrichtigungsrichtlinie die CPU-Nutzung von zwei verschiedenen virtuellen Maschinen. Die gestrichelte Linie zeigt den Bedingungsgrenzwert an, der auf 50 % festgelegt ist. Der grüne Chip mit dem Label No incidents gibt an, dass es keine offenen Vorfälle für die Benachrichtigungsrichtlinie gibt. Wenn Sie den Zeiger auf dem Chip für Vorfälle platzieren, wird ein Dialogfeld geöffnet, das mit der zugrunde liegenden Benachrichtigungsrichtlinie verknüpft ist.

Dashboard mit einem LogsPanel-Widget

In diesem Dashboard sehen Sie ein LogsPanel-Widget:

{
  "category": "CUSTOM",
  "displayName": "Demo Logs Panel",
  "labels": {
    "pams": ""
  },
  "mosaicLayout": {
    "columns": 12,
    "tiles": [
      {
        "height": 4,
        "widget": {
          "logsPanel": {
            "filter": "",
            "resourceNames": [
              "projects/012012012012"
            ]
          },
          "title": "Logs Panel"
        },
        "width": 6,
        "xPos": 0,
        "yPos": 0
      }
    ]
  }
}

Wir empfehlen, die Höhe eines Log-Felds auf mindestens drei Einheiten und die Breite auf mindestens vier Einheiten zu konfigurieren. Im vorherigen Beispiel hat das Widget eine Höhe von vier Einheiten und eine Breite von sechs Einheiten.

Im Logbereich werden die Logs aus den Cloud-Projekten angezeigt, die im Feld resourceNames aufgeführt sind. Im vorherigen Beispiel ist nur ein Projekt angegeben. Sie können jedoch mehrere Projekte in diese Liste aufnehmen.

Das Log-Feld sieht etwa so aus:

Beispieldashboard mit einem Log-Feld-Widget.

Informationen zur Fehlerbehebung finden Sie unter Fehler beim API-Aufruf zum Erstellen eines Dashboards mit einem Log-Feld.

Dashboard mit einem leeren Widget

Dieses Beispiel zeigt ein einfaches Dashboard mit einem leeren Platzhalterwidget. Der Wert des Feldes displayName wird im Widget angezeigt.

{
  "displayName": "Demo Dashboard",
  "gridLayout": {
    "widgets": [
      {
        "blank": {}
      }
    ]
  }
}

Das Dashboard sieht ungefähr so aus:

Beispieldashboard mit einem leeren Widget