カスタムウィジェットのインタラクティブ性 - Amazon CloudWatch
<cwdb-action> 定義と使用

カスタムウィジェットのインタラクティブ性

JavaScript が許可されていなくても、返された HTML とのインタラクティブ性を許可する他の方法があります。

  • 返された HTML 内のすべての要素は、<cwdb-action> タグの特別な設定でタグ付けすることができ、その要素が選択されたときに、ポップアップで情報を表示したり、クリック時に確認を求めたり、任意の Lambda 関数を呼び出したりすることができます。例えば、Lambda 関数を使用して任意の AWS API を呼び出すボタンを定義できます。返される HTML は、既存の Lambda ウィジェットのコンテンツを置き換えるか、モーダル内に表示するように設定できます。

  • 返される HTML には、新しいコンソールを開いたり、他の顧客のページを開いたり、他のダッシュボードを読み込んだりするためのリンクを含めることができます。

  • HTML には、要素の title 属性を含めることができます。これにより、ユーザーがその要素の上にカーソルを置いた場合に追加情報が提供されます。

  • 要素には、アニメーションやその他の CSS 効果を呼び出すことができる :hover などの 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>

  • action — 有効な値は、Lambda 関数を呼び出す call と、<cwdb-action> に含まれるすべての HTML を表示する html です。デフォルト: html。

  • confirmation — 把握する必要のあるアクションを実行する前に確認メッセージを表示し、お客様がキャンセルできるようにします。

  • display — 有効な値は popup および widget で、ウィジェット自体の内容を置き換えます。デフォルト: widget。

  • endpoint － 呼び出す Lambda 関数の Amazon リソースネーム (ARN)。これは、action が call である場合に必要です。

  • event — アクションを呼び出す前の要素のイベントを定義します。有効な値は、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>