有关 CloudWatch 中自定义小组件的详细信息 - Amazon CloudWatch
默认 CSS 样式使用描述参数

有关 CloudWatch 中自定义小组件的详细信息

自定义小组件的工作方式如下：

  1. CloudWatch 控制面板调用包含小组件代码的 Lambda 函数。并传递在小组件中定义的任何自定义参数。

  2. Lambda 函数返回 HTML、JSON 或 Markdown 字符串。Markdown 以 JSON 格式返回，格式如下：

    {"markdown":"markdown content"}

  3. 控制面板显示返回的 HTML 或 JSON。

如果函数返回 HTML，则支持大多数 HTML 标签。您可以使用 Cascading 样式表 (CSS) 样式和可扩展矢量图形 (SVG) 来构建复杂的视图。

HTML 元素（例如链接和表格）的默认样式遵循 CloudWatch 控制面板的样式。您可以通过使用内联样式和 <style> 标签来自定义此样式。您还可以通过包含具有 cwdb-no-default-styles 类的单个 HTML 元素，停用默认样式。以下示例会停用默认样式：<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-primary 添加主按钮。

  • 默认情况下，以下元素采用样式：table（表）、select（选择）、headers (h1, h2, and h3)（标头（标头 1、标头 2 和 标头 3））、preformatted text (pre)（预先格式化的文本（预先））、input（输入）和 text area（文本区域）。

使用描述参数

我们强烈建议您在函数中支持 describe（描述）参数，即使它只返回一个空字符串。如果您不支持它，并在自定义小组件中将其调用，它会像显示文档一样显示小组件内容。

如果您包含 describe（描述）参数，Lambda 函数以 Markdown 格式返回文档，而不执行任何其他操作。

当您在控制台中创建自定义小组件时，在选择 Lambda 函数后，将出现一个 Get documentation（获取文档）按钮。如果选择此按钮，则会使用 describe（描述）参数调用该函数并返回该函数的文档。如果文档在 Markdown 中格式正确，CloudWatch 会解析文档中由 YAML 中的三个反引号字符 (```) 引起的第一个条目。然后，它会自动填充参数中的文档。以下是此类格式正确的文档示例。

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