Interattività nel widget personalizzato in CloudWatch - Amazon CloudWatch
Definizione e utilizzo di <cwdb-action>

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Interattività nel widget personalizzato in CloudWatch

Anche se non JavaScript è consentito, esistono altri modi per consentire l'interattività con l'HTML restituito.

  • A qualsiasi elemento nell'HTML restituito può essere assegnato un tag con una configurazione speciale in un tag <cwdb-action>, che può visualizzare le informazioni nei popup, chiedere conferma sui clic e chiamare qualsiasi funzione Lambda quando viene scelto quell'elemento. Ad esempio, puoi definire pulsanti che chiamano qualsiasi AWS API utilizzando una funzione Lambda. L'HTML restituito può essere impostato in modo da sostituire il contenuto del widget Lambda esistente o da essere visualizzato all'interno di un elemento modale.

  • Il codice HTML restituito può includere collegamenti che aprono nuove console, aprono altre pagine dei clienti o caricano altri pannelli di controllo.

  • L'HTML può includere l'attributo title per un elemento, che offre informazioni aggiuntive se l'utente passa con il mouse su tale elemento.

  • L'elemento può contenere selettori CSS, ad esempio :hover, che può richiamare animazioni o altri effetti CSS. Inoltre, puoi visualizzare o nascondere elementi nella pagina.

Definizione e utilizzo di <cwdb-action>

L'elemento <cwdb-action> definisce un comportamento sull'elemento immediatamente precedente. Il contenuto di <cwdb-action> è HTML da visualizzare o un blocco JSON di parametri da passare a una funzione Lambda.

Di seguito è illustrato un esempio di un elemento <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 (operazione): i valori validi sono call, che chiama una funzione Lambda, e html, che visualizza qualsiasi codice HTML contenuto in <cwdb-action>. Il valore predefinito è html.

  • confirmation (conferma): visualizza un messaggio di conferma che deve essere accettato prima di iniziare l'operazione, consentendo al cliente di annullarla.

  • display (visualizza): i valori validi sono popup e widget, che sostituisce il contenuto del widget stesso. Il valore predefinito è widget.

  • endpoint: Amazon Resource Name (ARN) della funzione Lambda da chiamare. Questo è necessario se action è call.

  • event (evento): definisce l'evento sull'elemento precedente che richiama l'azione. I valori validi sono click, dblclick e mouseenter. È·possibile utilizzare l'evento mouseenter solo in combinazione con l'operazione html. Il valore predefinito è click.

Examples (Esempi)

Di seguito è riportato un esempio di come utilizzare il <cwdb-action> tag per creare un pulsante che riavvia un' EC2 istanza Amazon utilizzando una chiamata di funzione Lambda. Visualizza l'esito della chiamata in un pop-up.

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

Nell'esempio seguente vengono visualizzate ulteriori informazioni in un pop-up.

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

Questo esempio è un pulsante Next (Successivo) che sostituisce il contenuto di un widget con una chiamata a una funzione 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>