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 caractères HTMLJSON, ou Markdown. Markdown est renvoyé JSON sous la forme suivante :

   {"markdown":"markdown content"}

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

Si la fonction revientHTML, la plupart des HTML balises sont prises en charge. Vous pouvez utiliser les styles Cascading Style Sheets (CSS) et Scalable Vector Graphics (SVG) pour créer des vues sophistiquées.

Le style par défaut des HTML éléments 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 HTML élément avec la classe decwdb-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
  }
}                    
                

CSSStyle par défaut

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

• Vous pouvez utiliser la CSS classe 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 CSS classe 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 (« ``). 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>
```