有關自定義窗口小部件的 CloudWatch - Amazon CloudWatch
默認CSS樣式使用描述參數

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

有關自定義窗口小部件的 CloudWatch

自訂小工運作方式如下：

  1. CloudWatch 儀表板會呼叫包含小器具程式碼的 Lambda 函數。它會傳遞在小工具中定義的任何自訂參數。

  2. Lambda 函數返回 HTMLJSON，或降價的字符串。降價返回如JSON下格式：

    {"markdown":"markdown content"}

  3. 儀表板會顯示傳回的HTML或JSON。

如果函數返回HTML，則支持大多數HTML標籤。您可以使用層疊樣式表 (CSS) 樣式和可縮放向量圖形 (SVG) 來建立複雜的檢視。

連結和表格等HTML元素的預設樣式遵循 CloudWatch 儀表板的樣式。您可以透過使用內嵌樣式和 <style> 標籤來自訂此樣式。您也可以透過將單一元HTML素與類別加入來停用預設樣式cwdb-no-default-styles。下列範例會停用預設樣式：<div class="cwdb-no-default-styles"></div>。

每次透過自訂小工具對 Lambda 的呼叫都包含 widgetContext 元素，可提供 Lambda 函數開發人員有用的內容資訊。


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

默認CSS樣式

自定義窗口小部件提供以下默認CSS樣式元素：

  • 您可以使用CSS類 btn 添加一個按鈕。它將錨點 (<a>) 轉變為按鈕，如下列範例所示：

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

  • 您可以使用CSS類 BTN BTN-主要添加一個主按鈕。

  • 依預設，下列為樣式元素：table、select、headers (h1, h2, and h3)、preformatted text (pre)、input 和 text area。

使用描述參數

強烈建議您支援 describe (描述) 參數，即使它只會傳回一個空字串。如果您不支援它，並且它在自訂小工具中被呼叫，它會像顯示文件那樣顯示小工具內容。

如果您包含 describe (描述) 參數時，Lambda 函數會傳回 Markdown 格式的文件，而且不會執行任何其他動作。

當您在主控台中建立自訂小工具時，在您選取 Lambda 函數之後，隨即便會出現 Get documentation (取得文件) 按鈕。如果您選擇此按鈕，則會使用 describe (描述) 參數，並傳回函數的文件。如果文檔在 markdown 中格式良好，則 CloudWatch 解析文檔中由三個單個反引號字符（```）包圍的文檔中的第一個條目。YAML然後，它會自動填充參數中的文件。以下是格式良好的文件的範例。

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