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

自定义小组件中的交互性

尽管不允许使用 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>