CloudWatch의 사용자 지정 위젯에 대한 세부 정보입니다. - Amazon CloudWatch
기본 CSS 스타일 지정describe 파라미터 사용

CloudWatch의 사용자 지정 위젯에 대한 세부 정보입니다.

사용자 지정 위젯은 다음과 같이 작동합니다.

  1. CloudWatch 대시보드는 위젯 코드가 포함된 Lambda 함수를 호출합니다. 그리고 위젯에 정의된 사용자 지정 파라미터를 전달합니다.

  2. Lambda 함수는 HTML, JSON 또는 Markdown 문자열을 반환합니다. Markdown은 다음 형식의 JSON으로 반환됩니다.

    {"markdown":"markdown content"}

  3. 대시보드는 반환된 HTML 또는 JSON을 표시합니다.

함수가 HTML을 반환하는 경우 대부분의 HTML 태그가 지원됩니다. Cascading Style Sheets(CSS) 스타일 및 Scalable Vector Graphics(SVG)를 사용하여 정교한 보기를 구축할 수 있습니다.

링크 및 테이블과 같은 HTML 요소의 기본 스타일은 CloudWatch 대시보드의 스타일 지정을 준수합니다. <style> 태그를 활용하여 인라인 스타일을 사용함으로써 이 스타일을 사용자 지정할 수 있습니다. 또한 cwdb-no-default-styles 클래스와 함께 단일 HTML 요소를 포함하여 기본 스타일을 비활성화할 수도 있습니다. 예를 들어 <div class="cwdb-no-default-styles"></div>는 기본 스타일을 비활성화합니다.

Lambda에 대한 사용자 지정 위젯의 모든 호출에는 Lambda 함수 개발자에게 유용한 컨텍스트 정보를 제공하는 다음 내용이 들어 있는 widgetContext 요소가 포함됩니다.


{
  "widgetContext": {
    "dashboardName": "Name-of-current-dashboard",
    "widgetId": "widget-16",
    "accountId": "012345678901",
    "locale": "en",
    "timezone": {
      "label": "UTC",
      "offsetISO": "+00:00",
      "offsetInMinutes": 0
    },
    "period": 300,
    "isAutoPeriod": true,
    "timeRange": {
      "mode": "relative",
      "start": 1627236199729,
      "end": 1627322599729,
      "relativeStart": 86400012,
      "zoom": {
        "start": 1627276030434,
        "end": 1627282956521
      }
    },
    "theme": "light",
    "linkCharts": true,
    "title": "Tweets for Amazon website problem",
    "forms": {
      "all": {}
    },
    "params": {
      "original": "param-to-widget"
    },
    "width": 588,
    "height": 369
  }
}

기본 CSS 스타일 지정

사용자 지정 위젯은 다음과 같은 기본 CSS 스타일 지정 요소를 제공합니다.

  • CSS 클래스 [btn]을 사용하여 버튼을 추가할 수 있습니다. 다음 예와 같이 앵커(<a>)를 버튼으로 바꿉니다.

    <a class="btn" href=https://amazon.com”>Open Amazon</a>

  • CSS 클래스 [btn btn-primary]를 사용하여 기본 버튼을 추가할 수 있습니다.

  • [table], [select], [headers(h1, h2, h3)], [preformatted text(pre)], [input], [text area]와 같은 요소는 기본적으로 스타일이 지정됩니다.

describe 파라미터 사용

빈 문자열만 반환하는 경우에도 함수에서 [describe] 파라미터를 지원하는 것이 좋습니다. 이 파라미터를 지원하지 않고 사용자 지정 위젯에서 호출하면 위젯 콘텐츠가 문서인 것처럼 표시됩니다.

[describe] 파라미터를 포함하는 경우 Lambda 함수는 문서를 Markdown 형식으로 반환하고 그 밖에 아무것도 하지 않습니다.

콘솔에서 사용자 지정 위젯을 생성할 때 Lambda 함수를 선택하면 [문서 가져오기(Get documentation)] 버튼이 표시됩니다. 이 버튼을 선택하면 함수가 [describe] 파라미터와 함께 호출되고 함수의 문서가 반환됩니다. 문서의 형식이 올바른 Markdown인 경우 CloudWatch는 YAML에서 세 개의 단일 백틱 문자(```)로 둘러싸인 문서의 첫 번째 항목을 구문 분석합니다. 그런 다음, 파라미터의 문서를 자동으로 채웁니다. 다음은 이러한 형식이 잘 지정된 문서의 예입니다.

``` yaml
echo: <h1>Hello world</h1>
```