Exemples de tableaux de bord et de dispositions

Ce guide fournit des configurations de tableau de bord supplémentaires que vous pouvez créer à l'aide de l'API Cloud Monitoring.

Quand utiliser l'API ?

L'API Dashboard vous permet de gérer plusieurs tableaux de bord à la fois. Même si vous pouvez vous servir de Google Cloud Console pour gérer vos tableaux de bord, vous trouverez peut-être l'API plus simple pour gérer vos tableaux de bord personnalisés de façon groupée.

Vous devez également utiliser l'API si vous souhaitez ajouter les widgets Text, Scorecard ou à espace réservé vide à votre tableau de bord.

Dispositions de tableaux de bord

Tableau de bord dans GridLayout

Ce tableau de bord affiche une ressource GridLayout comportant trois widgets.

{
      "dashboards" : [
        {
          "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": {},
                  "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": {},
                  "yAxis": {
                    "label": "y1Axis",
                    "scale": "LINEAR"
                  }
                }
              }
            ]
          }
        }
      ]
    }
    

Le tableau de bord ressemble à l'exemple suivant :

Exemple de tableau de bord avec une disposition en grille

Tableau de bord dans RowLayout

Ce tableau de bord affiche une ressource RowLayout comportant trois widgets.

{
      "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"
                }
              }
            ]
          }
        ]
      }
    }
    

Le tableau de bord ressemble à l'exemple suivant :

Exemple de tableau de bord avec une disposition en lignes

Tableau de bord dans ColumnLayout

Ce tableau de bord affiche une ressource ColumnLayout comportant trois widgets.

{
      "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"
                }
              }
            ]
          }
        ]
      }
    }

    

Le tableau de bord ressemble à l'exemple suivant :

Exemple de tableau de bord avec une disposition en colonnes

Tableaux de bord avec Widgets

Tableau de bord avec un widget XyChart

Ce tableau de bord affiche un tableau de bord comportant un widget XyChart de base. Si vous avez déjà utilisé Google Cloud Console pour créer des graphiques sur des tableaux de bord, ces graphiques sont des instances du widget XyChart.

À l'instar de la fonctionnalité fournie dans Cloud Console, l'API propose des options permettant de modifier la ressource PlotType ou de configurer les modes d'affichage du graphique.

{
      "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"
              }
            }
          }
        ]
      }
    }
    

Le tableau de bord ressemble à l'exemple suivant :

Exemple de widget XyChart

Tableau de bord avec un widget XyChart comportant une ressource STACKED_AREA PlotType

Ce tableau de bord affiche un widget XyChart comportant une ressource 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"
              }
            }
          }
        ]
      }
    }

    

Le tableau de bord ressemble à l'exemple suivant :

Exemple de widget XyChart avec un graphique en aires empilées

Tableau de bord avec un widget XyChart comportant une ressource STACKED_BAR PlotType

Ce tableau de bord affiche un widget XyChart comportant une ressource 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"
              }
            }
          },
        ]
      }
    }

    

Le tableau de bord ressemble à l'exemple suivant :

Exemple de widget XyChart avec un graphique en barres empilées

Tableau de bord avec un widget Scorecard

Ce tableau de bord affiche un widget Scorecard basé sur la somme des connexions acceptées. Étant donné que la valeur est inférieure au seuil spécifié, elle est considérée comme une réussite.

{
      "displayName": "Untitled Dashboard"
      "gridLayout" {
        "columns": 1
        "widgets": [
          {
            "title": "Example Scorecard"
            "scorecard" {
              "timeSeriesQuery" {
                "timeSeriesFilter" {
                  "filter": "metric.type=\"agent.googleapis.com/nginx/connections/accepted_count\""
                  "aggregation" {
                    "perSeriesAligner": "ALIGN_RATE"
                    "crossSeriesReducer": "REDUCE_SUM"
                  }
                }
                "unitOverride": "1"
              }
              "sparkChartView" {
              }
              "thresholds": [
                {
                  "value": 70
                  "direction": "BELOW"
                }
              ]
            }
          }
        ]
      }
    }
    

Le tableau de bord ressemble à l'exemple suivant :

Exemple de tableau de bord avec un widget Scorecard

Tableau de bord avec un widget Scorecard comportant une ressource GaugeView

Ce tableau de bord affiche un widget Scorecard comportant un graphique jauge. Il évalue le nombre de connexions acceptées pour voir si la valeur est en deçà du seuil défini. Étant donné que la métrique dépasse la valeur upper_bound de la ressource gauge_view, la jauge affiche un échec.

{
      "displayName": "Untitled Dashboard",
      "gridLayout": {
        "columns": "1",
        "widgets": [
          {
            "title": "Example Scorecard",
            "scorecard": {
              "timeSeriesQuery": {
                "timeSeriesFilter": {
                  "filter": "metric.type=\"agent.googleapis.com/nginx/connections/accepted_count\"",
                  "aggregation": {
                    "perSeriesAligner": "ALIGN_RATE",
                    "crossSeriesReducer": "REDUCE_SUM"
                  }
                },
                "unitOverride": "1"
              },
              "gaugeView": {
                "upperBound": 65
              },
              "thresholds": [
                {
                  "value": 70,
                  "color": "RED",
                  "direction": "BELOW"
                }
              ]
            }
          }
        ]
      }
    }

    

Le tableau de bord ressemble à l'exemple suivant :

Exemple de tableau de bord avec un widget Scorecard comportant une ressource GaugeView

Tableau de bord avec un widget Text

Cet exemple montre un tableau de bord simple avec un widget Text.

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

Le tableau de bord ressemble à l'exemple suivant :

Exemple de tableau de bord avec un widget Text

Tableau de bord avec un widget vide

Cet exemple montre un tableau de bord simple avec un widget à espace réservé et vide. Notez que seul le paramètre displayName du tableau de bord apparaît dans le widget.

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

Le tableau de bord ressemble à l'exemple suivant :

Exemple de tableau de bord avec un widget vide