有关自定义小组件的详细信息 - Amazon CloudWatch
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异,请参阅 中国的 Amazon Web Services 服务入门 (PDF)

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

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

  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> ```