Interaktivitas di widget kustom di CloudWatch - Amazon CloudWatch
Definisi dan penggunaan <cwdb-action>

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Interaktivitas di widget kustom di CloudWatch

Meskipun tidak JavaScript diperbolehkan, ada cara lain untuk memungkinkan interaktivitas dengan HTML yang dikembalikan.

  • Setiap elemen yang ada dalam HTML yang dikembalikan dapat di-tanda dengan konfigurasi khusus dalam tanda <cwdb-action>, yang dapat menampilkan informasi dalam pop-up, meminta konfirmasi dengan klik, dan memanggil fungsi Lambda ketika elemen itu dipilih. Misalnya, Anda dapat menentukan tombol yang memanggil AWS API apa pun menggunakan fungsi Lambda. HTML yang dikembalikan dapat diatur untuk menggantikan konten widget Lambda yang ada, atau ditampilkan di dalam sebuah modal.

  • HTML yang dikembalikan dapat mencakup tautan-tautan yang akan membuka konsol baru, membuka halaman pelanggan lain, atau memuat dasbor lainnya.

  • HTML dapat menyertakan atribut title untuk sebuah elemen, yang akan memberikan informasi tambahan jika pengguna mengarahkan kursor ke elemen itu.

  • Elemen tersebut dapat mencakup pemilih CSS, seperti :hover, yang dapat menginvokasi animasi atau efek CSS lainnya. Anda juga dapat menampilkan atau menyembunyikan elemen di halaman.

Definisi dan penggunaan <cwdb-action>

Elemen <cwdb-action> mendefinisikan perilaku pada elemen sebelumnya. Isi dari <cwdb-action> adalah HTML yang akan ditampilkan atau blok parameter JSON yang akan diteruskan ke fungsi Lambda, salah satunya.

Berikut ini adalah contoh dari elemen <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>

  • tindakan— Nilai yang valid adalah call, yang memanggil sebuah fungsi Lambda, dan html, yang akan menampilkan HTML apa pun yang terkandung di dalam <cwdb-action>. Bawaannya adalah html.

  • konfirmasi— Menampilkan sebuah pesan konfirmasi yang harus diakui sebelum tindakan diambil, memungkinkan pelanggan untuk membatalkan tindakan.

  • display— Nilai yang valid adalah popup dan widget, yang akan menggantikan konten dari widget itu sendiri. Bawaannya adalah widget.

  • titik akhir— Amazon Resource Name (ARN) dari fungsi Lambda yang akan dipanggil. Ini diperlukan jika action adalah call.

  • event— Menentukan peristiwa pada elemen sebelumnya yang akan menginvokasi tindakan. Nilai yang valid adalah click, dblclick, dan mouseenter. Peristiwa mouseenter ini hanya dapat digunakan bila dikombinasikan dengan tindakan html. Bawaannya adalah click.

Contoh

Berikut ini adalah contoh cara menggunakan <cwdb-action> tag untuk membuat tombol yang me-reboot EC2 instance Amazon menggunakan panggilan fungsi Lambda. Ia akan menampilkan keberhasilan atau kegagalan panggilan dengan sebuah 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>

Contoh berikutnya akan menampilkan informasi lebih banyak dengan sebuah 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>

Contoh ini adalah sebua tombol Berikutnya yang menggantikan konten dar sebuah widget dengan panggilan ke fungsi 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>