CloudWatch 中自定义小组件中的交互性
尽管不允许使用 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
。确认 – 显示在执行操作之前必须确认的确认消息,允许客户取消。
显示 – 有效值为
popup
和widget
,会替换小组件本身的内容。默认为widget
。端点 – 要调用的 Lambda 函数的 Amazon Resource Name (ARN)。如果
action
是call
,则这是必需的。事件 – 定义上一个调用操作的元素上的事件。有效值包括
click
、dblclick
和mouseenter
。mouseenter
事件仅能与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>