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 Ihre Dashboards zwar mit der Google Cloud Console verwalten, es ist jedoch unter Umständen einfacher, Ihre eigenen benutzerdefinierten Dashboards per API zu verwalten.
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:
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:
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:
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:
Dashboards mit Widgets
Dashboard mit einem XyChart
In diesem Dashboard sehen Sie ein einfaches XyChart. Wenn Sie jemals mit der Google Cloud Console Diagramme in Dashboards erstellt haben, sind diese Diagramme Instanzen des XyChart-Widgets.
Ähnlich wie bei den Funktionen in der Google Cloud Console bietet die API Optionen zum Ändern des PlotType oder zum Konfigurieren der Anzeigemodi des Diagramms.
{
"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:
Im nächsten Abschnitt wird gezeigt, wie ein Grenzwert in einem Diagramm angezeigt wird und wie Sie konfigurieren, ob das Diagramm die linke Y-Achse, die rechte Y-Achse oder beides verwendet.
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:
Sie können Diagramme erstellen, die mehrere Messwerttypen mit der linken und rechten Achse anzeigen. Das vorherige Beispiel zeigt ein Diagramm mit einem einzelnen Messwerttyp, d. h., das Element dataSets enthält ein Element.
Wenn Sie zwei Messwerttypen im Diagramm darstellen, enthält das Array dataSets zwei Elemente und jedes Element gibt seine targetAxis an.
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:
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:
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:
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:
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:
Dashboard mit einem TimeSeriesTable-Widget
Dashboards können Daten in einem tabellarischen Format anzeigen, wobei für jede überwachte Zeitachse eine Zeile vorhanden ist. In Tabellen werden keine Daten im Zeitverlauf angezeigt, sondern nur der letzte Wert.
Alle Tabellen werden durch das Widget TimeSeriesTable angegeben:
Legen Sie das Feld
pickTimeSeriesFilterfest, um die maximale Anzahl der anzuzeigenden Zeilen zu konfigurieren. Wenn Sie beispielsweise nur die zwei Zeitachsen mit dem größten durchschnittlichen Wert in den letzten 10 Minuten anzeigen lassen möchten, fügen Sie Folgendes ein:"pickTimeSeriesFilter": { "direction": "TOP", "numTimeSeries": 2, "rankingMethod": "METHOD_MEAN" },Wenn Sie das Feld
pickTimeSeriesFilterweglassen, werden in der Tabelle maximal 300 Zeilen angezeigt.Verwenden Sie das Feld
metricVisualization, um zu konfigurieren, wie die Daten in der Tabelle angezeigt werden:- Wenn Sie nur einen Wert wie "25%" anzeigen möchten, lassen Sie entweder dieses Feld weg oder setzen Sie den Wert auf
"NUMBER". Wenn Sie diese Konfiguration verwenden, wird das Widget in der Google Cloud Console als Tabellen-Widget angezeigt. - Wenn Sie den Wert und einen visuellen Indikator des Werts im Vergleich zum Bereich möglicher Werte anzeigen lassen möchten, setzen Sie den Wert dieses Feldes auf
"BAR". Wenn Sie diese Konfiguration verwenden, wird das Widget in der Google Cloud Console als Top-Listen-Widget angezeigt.
- Wenn Sie nur einen Wert wie "25%" anzeigen möchten, lassen Sie entweder dieses Feld weg oder setzen Sie den Wert auf
Mit dem Feld
columnSettingskönnen Sie festlegen, welche Spalten angezeigt werden. Das folgende Beispiel führt zu einer Tabelle mit zwei Spalten, eine mit dem TitelLatest Value, die eine obligatorische Spalte ist, und die andereName (from instance_id)."columnSettings": [ { "column": "Name (from instance_id)", "visible": true }Wenn Sie das Feld
columnSettingsweglassen, wird in der Tabelle eine Spalte für jedes Label angezeigt.
Das folgende Beispiel zeigt ein Dashboard mit einem Widget Tabelle und einem Widget Top-Liste:
{
"category": "CUSTOM",
"dashboardFilters": [],
"displayName": "Top List and Table example",
"labels": {},
"mosaicLayout": {
"columns": 12,
"tiles": [
{
"height": 4,
"widget": {
"timeSeriesTable": {
"dataSets": [
{
"minAlignmentPeriod": "60s",
"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\"",
"secondaryAggregation": {
"alignmentPeriod": "60s",
"crossSeriesReducer": "REDUCE_NONE",
"perSeriesAligner": "ALIGN_NONE"
}
}
}
}
],
"metricVisualization": "NUMBER"
},
"title": "VM Instance - CPU utilization [MEAN]"
},
"width": 6,
"xPos": 0,
"yPos": 4
},
{
"height": 4,
"widget": {
"timeSeriesTable": {
"columnSettings": [
{
"column": "Name (from instance_id)",
"visible": true
}
],
"dataSets": [
{
"minAlignmentPeriod": "60s",
"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\"",
"pickTimeSeriesFilter": {
"direction": "TOP",
"numTimeSeries": 300,
"rankingMethod": "METHOD_MEAN"
},
"secondaryAggregation": {
"alignmentPeriod": "60s",
"crossSeriesReducer": "REDUCE_NONE",
"perSeriesAligner": "ALIGN_NONE"
}
}
}
}
],
"metricVisualization": "BAR"
},
"title": "VM Instance - CPU utilization [MEAN]"
},
"width": 6,
"xPos": 0,
"yPos": 0
}
]
}
}
Wie im folgenden Screenshot gezeigt, zeigen beide Widgets Daten in Tabellenform an und enthalten beide eine Filterleiste. Die beiden Widgets sind jedoch so konfiguriert, dass sie unterschiedliche Spalten anzeigen und den numerischen Wert unterschiedlich darstellen:
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:
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:
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 im Feld resourceNames angezeigt. Im vorherigen Beispiel wurde nur ein Projekt angegeben. Sie können jedoch mehrere Projekte in diese Liste aufnehmen.
Das Log-Feld sieht etwa so aus:
Informationen zur Fehlerbehebung finden Sie unter Fehler beim API-Aufruf zum Erstellen eines Dashboards mit einem Log-Feld.
Dashboard mit einem CollapsibleGroup-Widget
In diesem Dashboard sehen Sie ein CollapsibleGroup-Widget:
{
"category": "CUSTOM",
"displayName": "Group testing",
"mosaicLayout": {
"columns": 12,
"tiles": [
{
"height": 4,
"widget": {
"collapsibleGroup": {
"collapsed": false
},
"title": "My group"
},
"width": 12,
"xPos": 0,
"yPos": 0
},
{
"height": 4,
"widget": {
"title": "VM Instance - CPU utilization [MEAN]",
"xyChart": {
"chartOptions": {
"mode": "COLOR"
},
"dataSets": [
{
"minAlignmentPeriod": "60s",
"plotType": "LINE",
"targetAxis": "Y1",
"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": [],
"timeshiftDuration": "0s",
"yAxis": {
"label": "y1Axis",
"scale": "LINEAR"
}
}
},
"width": 6,
"xPos": 0,
"yPos": 0
}
]
}
}
Im vorherigen Beispiel enthält das minimierbare Gruppen-Widget ein einzelnes Diagramm, das die CPU-Auslastung einer VM-Instanz anzeigt. Minimierbare Gruppen-Widgets erstrecken sich über eine ganze Zeile einer Tabelle. Ein Widget ist in einer Gruppe enthalten, wenn die x- und y-Position und die x- und y-Position des Widgets enthalten sind. Im vorherigen Beispiel befindet sich die Gruppe auf der Position (0,0) und ist Höhe 4. xyChart befindet sich an der Position (0,0) und ist daher in der Gruppe enthalten. Wird jedoch die Position dieses Diagramms in (0,5) geändert, wird das Diagramm aus der Gruppe ausgeschlossen. Wenn schließlich die Position eines Widgets (x, y) dazu führt,dass das Widget in die Gruppe aufgenommen wird, kann die Höhe des minimierbaren Gruppen-Widgets erweitert werden.
Wenn Sie ein Gruppen-Widget in ein Dashboard einbinden möchten, muss das Dashboard einen MosaicLayout haben.
Das minimierbare Gruppen-Widget ähnelt dem folgenden Beispiel:
Dashboard mit einem SLO-Widget
Dieses Dashboard zeigt ein Dashboard mit einem SLO-Widget:
{
"category": "CUSTOM",
"displayName": "SLO widget on dashboard",
"mosaicLayout": {
"columns": 12,
"tiles": [
{
"height": 6,
"widget": {
"title": "SLO Error Budget: 95% - Metric Mean in Range - Calendar week",
"xyChart": {
"chartOptions": {
"mode": "COLOR"
},
"dataSets": [
{
"legendTemplate": "Remaining error requests before SLO is burned",
"plotType": "LINE",
"targetAxis": "Y1",
"timeSeriesQuery": {
"apiSource": "DEFAULT_CLOUD",
"timeSeriesFilter": {
"aggregation": {
"crossSeriesReducer": "REDUCE_NONE",
"perSeriesAligner": "ALIGN_NEXT_OLDER"
},
"filter": "select_slo_budget(\"projects/Project_Number/services/SERVICE_ID/serviceLevelObjectives/SLO_ID\")",
"secondaryAggregation": {
"crossSeriesReducer": "REDUCE_NONE"
}
},
"unitOverride": "1"
}
}
],
"thresholds": []
}
},
"width": 10,
"xPos": 0,
"yPos": 0
}
]
}
}
Wie die vorherige JSON-Datei zeigt, werden SLO-Diagramme als XyChart-Objekte dargestellt. Diese Objekte geben alle Aggregationsfelder, Schwellenwerte an und der Wert des Felds filter ist ein Zeitachsenselektor. Weitere Informationen zu diesen Selektoren finden Sie unter SLO-Daten abrufen.
Das SLO-Widget sieht ungefähr so aus:
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:
Dashboards mit dauerhaften Filtern
Ein Beispiel für ein Dashboard mit einem dauerhaften Filter finden Sie unter Dashboard-Filter.