自定义小组件中的交互性 - Amazon CloudWatch
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异,请参阅中国的 Amazon Web Services 服务入门

自定义小组件中的交互性

尽管不允许使用 JavaScript,但还有其他方法允许与返回的 HTML 进行交互。

  • 返回的 HTML 中的任何元素都可以在 <cwdb-action> 标签中使用特殊配置进行标记,该配置可以在弹出窗口中显示信息,在点击时要求确认,并在选择该元素时调用任何 Lambda 函数。例如,您可以定义使用 Lambda 函数调用任何 Amazon API 的按钮。可以将返回的 HTML 设置为替换现有 Lambda 小组件的内容,或在模式中显示。

  • 返回的 HTML 可以包含打开新控制台、打开其他客户页面或加载其他控制面板的链接。

  • HTML 可以包含元素的 title 属性,如果用户在该元素上悬停,它会提供附加信息。

  • 元素可以包含 CSS 选择器,如 :hover,它可以调用动画或其他 CSS 效果。该元素可以包含 CSS 选择器,例如,可以调用动画或其他 CSS 效果。您还可以在页面中显示或隐藏元素。您还可以显示或隐藏页面中的元素。

<cwdb-action> 定义和用法

<cwdb-action> 元素定义了前一个元素的行为。<cwdb-action> 的内容为要显示的 HTML 或要传递给 Lambda 函数的参数的 JSON 数据块。

以下是 <cwdb-action> 元素的示例。

<cwdb-action action="call|html" confirmation="message" display="popup|widget" endpoint="<lambda ARN>" event="click|dblclick|mouseenter"> html | params in JSON </cwdb-action>
  • 操作 – 有效值为 call,会调用 Lambda 函数并且显示包含在 <cwdb-action> 中的任何 HTML 的 html。默认为 html

  • 确认 – 显示在执行操作之前必须确认的确认消息,允许客户取消。

  • 显示 – 有效值为 popupwidget,会替换小组件本身的内容。默认为 widget

  • 端点 – 要调用的 Lambda 函数的 Amazon Resource Name (ARN)。如果 actioncall,则这是必需的。

  • 事件 – 定义上一个调用操作的元素上的事件。有效值包括 clickdblclickmouseentermouseenter 事件仅能与 html 操作结合使用。默认为 click

示例

以下示例说明了如何使用 <cwdb-action> 标签创建按钮,该按钮可使用 Lambda 函数调用重启 Amazon EC2 实例。此选项会在弹出窗口中显示呼叫成功或失败。

<a class="btn">Reboot Instance</a> <cwdb-action action="call" endpoint="arn:aws:lambda:us-east-1:123456:function:rebootInstance" display="popup"> { "instanceId": "i-342389adbfef" } </cwdb-action>

下一个示例会在弹出窗口中显示更多信息。

<a>Click me for more info in popup</a> <cwdb-action display="popup"> <h1>Big title</h1> More info about <b>something important</b>. </cwdb-action>

此示例为 Next(下一步)按钮,该按钮使用对 Lambda 函数的调用替换小组件的内容。

<a class="btn btn-primary">Next</a> <cwdb-action action="call" endpoint="arn:aws:lambda:us-east-1:123456:function:nextPage"> { "pageNum": 2 } </cwdb-action>