Rincian tentang widget kustom di CloudWatch - Amazon CloudWatch
CSSGaya defaultMenggunakan parameter describe

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

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 mengembalikan stringHTML,JSON, atau Markdown. Markdown dikembalikan seperti JSON dalam format berikut:

    {"markdown":"markdown content"}

  3. Dasbor menampilkan yang dikembalikan HTML atauJSON.

Jika fungsi kembaliHTML, sebagian besar HTML tag didukung. Anda dapat menggunakan gaya Cascading Style Sheets (CSS) dan Scalable Vector Graphics (SVG) untuk membangun tampilan yang canggih.

Gaya default HTML elemen 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 satu HTML elemen 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
  }
}

CSSGaya default

Widget kustom menyediakan elemen CSS styling default berikut:

  • Anda dapat menggunakan CSS kelas btn untuk menambahkan 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 CSS kelas btn btn-primary untuk menambahkan 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. YAML 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>
```