Détails sur les widgets personnalisés dans CloudWatch - Amazon CloudWatch
Mise en forme CSS par défautUtilisation du paramètre describe (Description)

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Détails sur les widgets personnalisés dans CloudWatch

Les widgets personnalisés fonctionnent comme suit :

  1. Le CloudWatch tableau de bord appelle la fonction Lambda contenant le code du widget. Il transmet tous les paramètres personnalisés définis dans le widget.

  2. La fonction Lambda renvoie une chaîne de HTML, JSON ou Markdown. Markdown est renvoyé en tant que JSON au format suivant :

    {"markdown":"markdown content"}

  3. Le tableau de bord affiche le code HTML ou JSON renvoyé.

Si la fonction renvoie du code HTML, la plupart des balises HTML sont prises en charge. Vous pouvez utiliser des feuilles de style en cascade (CSS, ou Cascading Style Sheets) et des graphiques vectoriels adaptables (SVG, ou Scalable Vector Graphics) pour créer des vues sophistiquées.

Le style par défaut des éléments HTML tels que les liens et les tableaux suit le style des CloudWatch tableaux de bord. Vous pouvez personnaliser ce style à l'aide de styles inclus, à l'aide de la balise <style>. Vous pouvez également désactiver les styles par défaut en incluant un seul élément HTML avec la classe de cwdb-no-default-styles. L'exemple suivant désactive les styles par défaut : <div class="cwdb-no-default-styles"></div>.

Chaque appel par un widget personnalisé à Lambda inclut un élément widgetContext avec le contenu suivant, afin de fournir au développeur de la fonction Lambda des informations contextuelles utiles.


{
  "widgetContext": {
    "dashboardName": "Name-of-current-dashboard",
    "widgetId": "widget-16",
    "accountId": "012345678901",
    "locale": "en",
    "timezone": {
      "label": "UTC",
      "offsetISO": "+00:00",
      "offsetInMinutes": 0
    },
    "period": 300,
    "isAutoPeriod": true,
    "timeRange": {
      "mode": "relative",
      "start": 1627236199729,
      "end": 1627322599729,
      "relativeStart": 86400012,
      "zoom": {
        "start": 1627276030434,
        "end": 1627282956521
      }
    },
    "theme": "light",
    "linkCharts": true,
    "title": "Tweets for Amazon website problem",
    "forms": {
      "all": {}
    },
    "params": {
      "original": "param-to-widget"
    },
    "width": 588,
    "height": 369
  }
}

Mise en forme CSS par défaut

Les widgets personnalisés fournissent les éléments de mise en forme CSS par défaut suivants :

  • Vous pouvez utiliser la classe CSS btn pour ajouter un bouton. Celle-ci a pour effet de transformer un point d'ancrage (<a>) en bouton, comme dans l'exemple suivant :

    <a class="btn" href=https://amazon.com”>Open Amazon</a>

  • Vous pouvez utiliser la classe CSS btn btn-primary pour ajouter un bouton principal.

  • Les éléments suivants sont mise en forme par défaut :table (Tableau), select (Sélection), headers (h1, h2, and h3) (En-têtes [h1, h2 et h3]), preformatted text (pre) (Texte préformaté [pré]), input (Saisie) et text area (Zone de texte).

Utilisation du paramètre describe (Description)

Nous vous recommandons fortement de prendre en charge le paramètre describe (Description) dans vos fonctions, même si celui-ci renvoie simplement une chaîne vide. Si vous ne le prenez pas en charge et qu'il est appelé dans le widget personnalisé, le contenu du widget est affiché comme s'il s'agissait de documentation.

Si vous intégrez le paramètre describe (Description), la fonction Lambda renvoie la documentation au format Markdown et ne fait rien d'autre.

Lorsque vous créez un widget personnalisé dans la console, un bouton Get documentation (Obtenir de la documentation) apparaît après avoir sélectionné la fonction Lambda. Si vous cliquez sur ce bouton, la fonction est appelée avec le paramètre describe (Description) et la documentation de la fonction est renvoyée. Si la documentation est bien formatée en Markdown, CloudWatch analyse la première entrée de la documentation entourée de trois caractères simples (```) en YAML. Ensuite, il remplit automatiquement la documentation dans les paramètres. Voici un exemple de documentation correctement formatée. 

``` yaml
echo: <h1>Hello world</h1>
```