Interaktivität im benutzerdefinierten Widget in CloudWatch

Auch wenn dies nicht zulässig JavaScript ist, gibt es andere Möglichkeiten, Interaktivität mit dem zurückgegebenen HTML-Code zuzulassen.

• Jedes Element im zurückgegebenen HTML kann mit einer speziellen Konfiguration in einem <cwdb-action>-Tag versehen werden, das Informationen in Pop-ups anzeigen, bei Klicks um Bestätigung bitten und jede Lambda-Funktion aufrufen kann, wenn dieses Element ausgewählt wird. Sie können beispielsweise Schaltflächen definieren, die eine beliebige AWS API mithilfe einer Lambda-Funktion aufrufen. Der zurückgegebene HTML-Code kann so eingestellt werden, dass er entweder den Inhalt des vorhandenen Lambda-Widgets ersetzt oder in einem Modal angezeigt wird.

• Der zurückgegebene HTML-Code kann Links enthalten, die neue Konsolen öffnen, andere Kundenseiten öffnen oder andere Dashboards laden.

• Der HTML-Code kann das title-Attribut für ein Element enthalten, das zusätzliche Informationen liefert, wenn der Benutzer den Mauszeiger über dieses Element bewegt.

• Das Element kann CSS-Selektoren wie :hover enthalten, die Animationen oder andere CSS-Effekte aufrufen können. Sie können auch Elemente auf der Seite ein- oder ausblenden.

<cwdb-action> Definition und Verwendung

Das <cwdb-action>-Element definiert ein Verhalten für das unmittelbar vorhergehende Element. Der Inhalt von <cwdb-action> ist entweder HTML zum Anzeigen oder ein JSON-Parameterblock, der an eine Lambda-Funktion übergeben wird.

Es folgt ein Beispiel eines <cwdb-action>-Elements:

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

• Aktion – Gültige Werte sind call, das eine Lambda-Funktion aufruft, und html, das jegliches HTML anzeigt, das in <cwdb-action> enthalten ist. Der Standardwert ist html.

• Bestätigung – Zeigt eine Bestätigungsnachricht an, die bestätigt werden muss, bevor die Aktion ausgeführt wird, damit der Kunde stornieren kann.

• Anzeige – Gültige Werte sind popup und widget, die den Inhalt des Widgets selbst ersetzen. Der Standardwert ist widget.

• Endpunkt – Der Amazon-Ressourcenname (ARN) der aufzurufenden Lambda-Funktion. Dies ist erforderlich, wenn action call ist.

• -Ereignis – Definiert das Ereignis auf dem vorherigen Element, das die Aktion aufruft. Gültige Werte sind click, dblclick und mouseenter. Das Ereignis mouseenter kann nur in Kombination mit der Aktion html verwendet werden. Der Standardwert ist click.

Beispiele

Im Folgenden finden Sie ein Beispiel dafür, wie Sie das <cwdb-action> Tag verwenden, um eine Schaltfläche zu erstellen, die eine EC2 Amazon-Instance mithilfe eines Lambda-Funktionsaufrufs neu startet. Es zeigt den Erfolg oder das Fehlschlagen des Anrufs in einem Pop-up an.

<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> 

Im nächsten Beispiel werden weitere Informationen in einem Pop-up angezeigt.

<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> 

Dieses Beispiel ist eine Schaltfläche Weiter, die den Inhalt eines Widgets durch einen Aufruf einer Lambda-Funktion ersetzt.

<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>