Interactivité dans le widget personnalisé dans CloudWatch - Amazon CloudWatch
Définition et utilisation de <cwdb-action>

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.

Interactivité dans le widget personnalisé dans CloudWatch

Même si JavaScript ce n'est pas autorisé, il existe d'autres moyens d'autoriser l'interactivité avec le code HTML renvoyé.

  • Tout élément du code HTML renvoyé peut être balisé avec une configuration spéciale dans une balise <cwdb-action>, qui peut afficher des informations dans des fenêtres contextuelles, demander une confirmation avant un clic et appeler n'importe quelle fonction Lambda lorsque cet élément est choisi. Par exemple, vous pouvez définir des boutons qui appellent n'importe quelle AWS API à l'aide d'une fonction Lambda. Le code HTML renvoyé peut être configuré pour remplacer le contenu du widget Lambda existant, ou pour s'afficher dans une boîte de dialogue modale.

  • Le code HTML renvoyé peut inclure des liens qui ouvrent de nouvelles consoles, ouvrent d'autres pages client ou chargent d'autres tableaux de bord.

  • Le code HTML peut inclure l'attribut title pour un élément, qui donne des informations supplémentaires si l'utilisateur passe la souris sur cet élément.

  • L'élément peut inclure des sélecteurs CSS, tels que :hover, qui peut invoquer des animations ou d'autres effets CSS. Vous pouvez également afficher ou masquer des éléments dans la page.

Définition et utilisation de <cwdb-action>

L'élément <cwdb-action> définit un comportement sur l'élément précédent immédiat. Le contenu de <cwdb-action> équivaut à du code HTML pour l'affichage, ou à un bloc JSON de paramètres pour passer à une fonction Lambda.

Voici un exemple d'un élément <cwdb-action>.

<cwdb-action 
     action="call|html" 
     confirmation="message" 
     display="popup|widget" 
     endpoint="<lambda ARN>" 
     event="click|dblclick|mouseenter">  
 
     html | params in JSON
</cwdb-action>

  • action — Les valeurs valides sont call, qui appelle une fonction Lambda, et html, qui affiche tout code HTML contenu dans <cwdb-action>. La valeur par défaut est html.

  • confirmation — Affiche un message de confirmation devant être accepté avant que l'action ne soit prise, ce qui permet au client d'annuler l'opération.

  • display (afficher) : les valeurs valides sont popup et widget, qui remplacent le contenu du widget lui-même. L’argument par défaut est widget.

  • endpoint — Amazon Resource Name (ARN) de la fonction Lambda à appeler. Cet élément est obligatoire si action est call.

  • event — Définit l'événement sur l'élément précédent qui appelle l'action. Les valeurs valides sont click, dblclick et mouseenter. Le mouseenter peut être utilisé avec l'action html. L’argument par défaut est click.

Exemples

Voici un exemple d'utilisation de la <cwdb-action> balise pour créer un bouton qui redémarre une EC2 instance Amazon à l'aide d'un appel de fonction Lambda. Ainsi, la réussite ou l'échec de l'appel est affiché dans une fenêtre contextuelle.

<a class="btn">Reboot Instance</a>
<cwdb-action action="call" endpoint="arn:aws:lambda:us-east-1:123456:function:rebootInstance" display="popup">  
       { "instanceId": "i-342389adbfef" }
</cwdb-action>

L'exemple suivant affiche davantage d'informations dans une fenêtre contextuelle.

<a>Click me for more info in popup</a>
<cwdb-action display="popup"> 
   <h1>Big title</h1>
   More info about <b>something important</b>.
</cwdb-action>

Cet exemple représente un bouton Next (Suivant) qui remplace le contenu d'un widget par un appel à une fonction Lambda.

<a class="btn btn-primary">Next</a>
<cwdb-action action="call" endpoint="arn:aws:lambda:us-east-1:123456:function:nextPage"> 
   { "pageNum": 2 }
</cwdb-action>