사용자 지정 위젯의 상호 작용 - Amazon CloudWatch
<cwdb-action> 정의 및 사용법

사용자 지정 위젯의 상호 작용

JavaScript가 허용되지는 않지만 반환된 HTML과의 상호 작용을 허용하는 다른 방법이 있습니다.

  • 팝업에 정보를 표시하고 클릭 시 확인을 요청하며 해당 요소가 선택되었을 때 Lambda 함수를 호출할 수 있는 <cwdb-action> 태그의 특수 구성으로 반환된 HTML의 요소에 태그를 지정할 수 있습니다. 예를 들어 Lambda 함수를 사용하여 AWS API를 호출하는 버튼을 정의할 수 있습니다. 기존 Lambda 위젯의 콘텐츠를 대체하거나 모달 내부에 표시되도록 반환된 HTML을 설정할 수 있습니다.

  • 반환된 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>

이 예는 위젯의 콘텐츠를 Lambda 함수에 대한 호출로 바꾸는 [다음(Next)] 버튼입니다.

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