Rincian tentang widget kustom di CloudWatch

Widget kustom bekerja seperti berikut ini:

1. CloudWatch Dasbor memanggil fungsi Lambda yang berisi kode widget. Dasbor tersebut akan memasukkan parameter-parameter kustom apa pun yang ditentukan dalam widget.

2. Fungsi Lambda kemudian akan mengembalikan string HTML, JSON, atau Markdown. Markdown dikembalikan sebagai JSON dalam format berikut ini:

   {"markdown":"markdown content"}

3. Dasboard akan menampilkan HTML atau JSON.

Jika fungsi mengembalikan HTML, maka sebagian besar tanda HTML didukung. Anda dapat menggunakan gaya Cascading Style Sheets (CSS) dan Scalable Vector Graphics (SVG) untuk membuat tampilan-tampilan yang canggih.

Gaya default elemen HTML seperti tautan dan tabel mengikuti gaya CloudWatch dasbor. Anda dapat menyesuaikan gaya ini dengan menggunakan gaya-gaya inline, dengan menggunakan tanda <style>. Anda juga dapat menonaktifkan gaya default dengan menyertakan elemen HTML tunggal dengan kelas cwdb-no-default-styles. Contoh berikut menonaktifkan gaya default: <div class="cwdb-no-default-styles"></div>.

Setiap panggilan oleh sebuah widget kustom ke Lambda akan menyertakan sebuah elemen widgetContext dengan konten-konten berikut, untuk menyediakan pengembang fungsi Lambda dengan informasi konteks yang berguna.

{
  "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
  }
}                    
                

Penataan gaya CSS default

Widget kustom menyediakan elemen-elemen penataan gaya CSS default berikut ini:

• Anda dapat menggunakan kelas CSS btn untuk menambahkan sebuah tombol. Ia akan mengubah anchor (<a>) menjadi sebuah tombol seperti pada contoh berikut:

  <a class="btn" href=https://amazon.com”>Open Amazon</a>

• Anda dapat menggunakan kelas CSS btn btn-primary untuk menambahkan sebuah tombol utama.

• Elemen-elemen berikut ditata gayanya secara default: tabel, pilih, header (h1, h2, dan h3), teks yang telah diformat sebelumnya (pra), input, dan area teks.

Menggunakan parameter describe

Kami sangat menyarankan agar Anda mendukung parameter describe dalam fungsi Anda, bahkan jika parameter itu hanya mengembalikan sebuah string kosong. Jika Anda tidak mendukungnya, dan parameter itu dipanggil di widget kustom, maka parameter itu akan menampilkan konten widget seolah-olah itu adalah dokumentasi.

Jika Anda menyertakan parameter describe, maka fungsi Lambda akan mengembalikan dokumentasi dalam format Markdown dan tidak akan melakukan hal lain.

Saat Anda membuat sebuah widget kustom di konsol, setelah Anda memilih fungsi Lambda, tombol Dapatkan dokumentasi akan muncul. Jika Anda memilih tombol ini, maka fungsi akan diinvokasi dengan parameter describe dan akan mengembalikan dokumentasi fungsi. Jika dokumentasi diformat dengan baik dalam penurunan harga, CloudWatch parsing entri pertama dalam dokumentasi yang dikelilingi oleh tiga karakter backtick tunggal (```) di YAMAL. Kemudian, ia akan secara otomatis mengisi dokumentasi dalam parameter. Berikut ini adalah satu contoh dokumentasi yang diformat dengan baik.

``` yaml
echo: <h1>Hello world</h1>
```