# CloudWatch 대시보드에 대한 샘플 사용자 지정 위젯 AWS는 JavaScript 및 Python 샘플 사용자 지정 위젯을 모두 제공합니다. 아래에 있는 목록의 각 위젯에 대한 링크를 사용하여 이러한 샘플 위젯을 생성할 수 있습니다. 또는 CloudWatch 콘솔을 사용하여 위젯을 생성하고 사용자 지정할 수 있습니다. 아래에 있는 목록의 링크는 AWS CloudFormation 콘솔을 열고 CloudFormation 빠른 생성 링크를 사용하여 사용자 지정 위젯을 생성합니다. 또한 [GitHub](https://github.com/aws-samples/cloudwatch-custom-widgets-samples)에서 사용자 지정 위젯 샘플에 액세스할 수도 있습니다. 이 목록 다음에는 각 언어에 대한 Echo 위젯의 전체 예가 나와 있습니다. ------ #### [ JavaScript ] **JavaScript 샘플 사용자 지정 위젯** + [ Echo](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetEcho-js&template=customWidgets/customWidgetEcho-js.yaml¶m_DoCreateExampleDashboard=Yes) - 새 위젯을 작성할 필요 없이 HTML이 사용자 지정 위젯에 어떻게 표시되는지 테스트하는 데 사용할 수 있는 기본 Echo 샘플입니다. + [ Hello world](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetHelloWorld-js&template=customWidgets/customWidgetHelloWorld-js.yaml¶m_DoCreateExampleDashboard=Yes) – 매우 기본적인 시작 위젯입니다. + [ 사용자 위젯 디버거](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetDebugger-js&template=customWidgets/customWidgetDebugger-js.yaml¶m_DoCreateExampleDashboard=Yes) – Lambda 런타임 환경에 관한 유용한 정보를 표시하는 디버거 위젯입니다. + [ CloudWatch Logs Insights 쿼리](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetLogsInsightsQuery-js&template=customWidgets/customWidgetLogsInsightsQuery-js.yaml¶m_DoCreateExampleDashboard=Yes) – CloudWatch Logs Insights 쿼리를 실행하고 편집합니다. + [ Amazon Athena 쿼리 실행](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetAthenaQuery-js&template=customWidgets/customWidgetAthenaQuery-js.yaml¶m_DoCreateExampleDashboard=Yes) – Athena 쿼리를 실행하고 편집합니다. + [AWS API 호출](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetAwsCall-js&template=customWidgets/customWidgetAwsCall-js.yaml¶m_DoCreateExampleDashboard=Yes) – 읽기 전용 AWS API를 호출하고 결과를 JSON 형식으로 표시합니다. + [ 빠른 CloudWatch 비트맵 그래프](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCloudWatchBitmapGraph-js&template=customWidgets/customWidgetCloudWatchBitmapGraph-js.yaml¶m_DoCreateExampleDashboard=Yes) – 빠른 표시를 위해 서버 측에서 사용하는 CloudWatch 그래프를 렌더링합니다. + [ CloudWatch 대시보드의 텍스트 위젯](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetIncludeTextWidget-js&template=customWidgets/customWidgetIncludeTextWidget-js.yaml¶m_DoCreateExampleDashboard=Yes) – 지정된 CloudWatch 대시보드의 첫 번째 텍스트 위젯을 표시합니다. + [ 테이블로 CloudWatch 지표 데이터 표시](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCloudWatchMetricDataTable-js&template=customWidgets/customWidgetCloudWatchMetricDataTable-js.yaml¶m_DoCreateExampleDashboard=Yes) – 원시 CloudWatch 지표 데이터를 테이블로 표시합니다. + [ Amazon EC2 테이블](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetEc2Table-js&template=customWidgets/customWidgetEc2Table-js.yaml¶m_DoCreateExampleDashboard=Yes) – CPU 사용률을 기준으로 상위 EC2 인스턴스를 표시합니다. 이 위젯에는 기본적으로 사용 중지된 재부팅 버튼도 포함되어 있습니다. + [AWS CodeDeploy 배포](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCodeDeploy-js&template=customWidgets/customWidgetCodeDeploy-js.yaml¶m_DoCreateExampleDashboard=Yes) – CodeDeploy 배포를 표시합니다. + [AWS Cost Explorer](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCostExplorerReport-js&template=customWidgets/customWidgetCostExplorerReport-js.yaml¶m_DoCreateExampleDashboard=Yes) 보고서 – 선택한 시간 범위에 대한 각 AWS 서비스의 비용에 관한 보고서를 표시합니다. + [ 외부 URL의 내용 표시](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetFetchURL-js&template=customWidgets/customWidgetFetchURL-js.yaml¶m_DoCreateExampleDashboard=Yes) – 외부에서 액세스할 수 있는 URL의 내용을 표시합니다. + [ Amazon S3 객체 표시](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetS3GetObject-js&template=customWidgets/customWidgetS3GetObject-js.yaml¶m_DoCreateExampleDashboard=Yes) – 계정의 Amazon S3 버킷에 있는 객체를 표시합니다. + [ 단순 SVG 파이 차트](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetSimplePie-js&template=customWidgets/customWidgetSimplePie-js.yaml¶m_DoCreateExampleDashboard=Yes) – 그래픽 SVG 기반 위젯의 예입니다. ------ #### [ Python ] **Python 샘플 사용자 지정 위젯** + [ Echo](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetEcho-py&template=customWidgets/customWidgetEcho-py.yaml¶m_DoCreateExampleDashboard=Yes) - 새 위젯을 작성할 필요 없이 HTML이 사용자 지정 위젯에 어떻게 표시되는지 테스트하는 데 사용할 수 있는 기본 Echo 샘플입니다. + [ Hello world](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetHelloWorld-py&template=customWidgets/customWidgetHelloWorld-py.yaml¶m_DoCreateExampleDashboard=Yes) – 매우 기본적인 시작 위젯입니다. + [ 사용자 위젯 디버거](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetDebugger-py&template=customWidgets/customWidgetDebugger-py.yaml¶m_DoCreateExampleDashboard=Yes) – Lambda 런타임 환경에 관한 유용한 정보를 표시하는 디버거 위젯입니다. + [AWS API 호출](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetAwsCall-py&template=customWidgets/customWidgetAwsCall-py.yaml¶m_DoCreateExampleDashboard=Yes) – 읽기 전용 AWS API를 호출하고 결과를 JSON 형식으로 표시합니다. + [ 빠른 CloudWatch 비트맵 그래프](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCloudWatchBitmapGraph-py&template=customWidgets/customWidgetCloudWatchBitmapGraph-py.yaml¶m_DoCreateExampleDashboard=Yes) – 빠른 표시를 위해 서버 측에서 사용하는 CloudWatch 그래프를 렌더링합니다. + [ 이메일로 대시보드 스냅샷 전송](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetEmailDashboardSnapshot-py&template=customWidgets/customWidgetEmailDashboardSnapshot-py.yaml¶m_DoCreateExampleDashboard=Yes) – 현재 대시보드의 스냅샷을 생성하여 이메일 수신자에게 전송합니다. + [ Amazon S3에 대시보드 스냅샷 전송](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetSnapshotDashboardToS3-py&template=customWidgets/customWidgetSnapshotDashboardToS3-py.yaml¶m_DoCreateExampleDashboard=Yes) – 현재 대시보드의 스냅샷을 생성하여 Amazon S3에 저장합니다. + [ CloudWatch 대시보드의 텍스트 위젯](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetIncludeTextWidget-py&template=customWidgets/customWidgetIncludeTextWidget-py.yaml¶m_DoCreateExampleDashboard=Yes) – 지정된 CloudWatch 대시보드의 첫 번째 텍스트 위젯을 표시합니다. + [ 외부 URL의 내용 표시](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetFetchURL-py&template=customWidgets/customWidgetFetchURL-py.yaml¶m_DoCreateExampleDashboard=Yes) – 외부에서 액세스할 수 있는 URL의 내용을 표시합니다. + [ RSS 리더](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetRssReader-py&template=customWidgets/customWidgetRssReader-py.yaml¶m_DoCreateExampleDashboard=Yes) - RSS 피드를 표시합니다. + [ Amazon S3 객체 표시](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetS3GetObject-py&template=customWidgets/customWidgetS3GetObject-py.yaml¶m_DoCreateExampleDashboard=Yes) – 계정의 Amazon S3 버킷에 있는 객체를 표시합니다. + [ 단순 SVG 파이 차트](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetSimplePie-py&template=customWidgets/customWidgetSimplePie-py.yaml¶m_DoCreateExampleDashboard=Yes) – 그래픽 SVG 기반 위젯의 예입니다. ------ **JavaScript Echo 위젯** 다음은 JavaScript Echo 샘플 위젯입니다. ``` const DOCS = ` ## Echo A basic echo script. Anything passed in the \`\`\`echo\`\`\` parameter is returned as the content of the custom widget. ### Widget parameters Param | Description ---|--- **echo** | The content to echo back ### Example parameters \`\`\` yaml echo:

Hello world

\`\`\` `; exports.handler = async (event) => { if (event.describe) { return DOCS; } let widgetContext = JSON.stringify(event.widgetContext, null, 4); widgetContext = widgetContext.replace(//g, '>'); return `${event.echo || ''}
${widgetContext}
`; }; ``` **Python Echo 위젯** 다음은 Python Echo 샘플 위젯입니다. ``` import json DOCS = """ ## Echo A basic echo script. Anything passed in the ```echo``` parameter is returned as the content of the custom widget. ### Widget parameters Param | Description ---|--- **echo** | The content to echo back ### Example parameters ``` yaml echo:

Hello world

```""" def lambda_handler(event, context): if 'describe' in event: return DOCS echo = event.get('echo', '') widgetContext = event.get('widgetContext') widgetContext = json.dumps(widgetContext, indent=4) widgetContext = widgetContext.replace('<', '<') widgetContext = widgetContext.replace('>', '>') return f'{echo}
{widgetContext}
' ``` **Java Echo 위젯** 다음은 Java Echo 샘플 위젯입니다. ``` package example; import com.amazonaws.services.lambda.runtime.Context; import com.amazonaws.services.lambda.runtime.RequestHandler; import com.google.gson.Gson; import com.google.gson.GsonBuilder; public class Handler implements RequestHandler{ static String DOCS = "" + "## Echo\n" + "A basic echo script. Anything passed in the ```echo``` parameter is returned as the content of the custom widget.\n" + "### Widget parameters\n" + "Param | Description\n" + "---|---\n" + "**echo** | The content to echo back\n\n" + "### Example parameters\n" + "```yaml\n" + "echo:

Hello world

\n" + "```\n"; Gson gson = new GsonBuilder().setPrettyPrinting().create(); @Override public String handleRequest(Event event, Context context) { if (event.describe) { return DOCS; } return (event.echo != null ? event.echo : "") + "
" + gson.toJson(event.widgetContext) + "
"; } } class Event { public boolean describe; public String echo; public Object widgetContext; public Event() {} public Event(String echo, boolean describe, Object widgetContext) { this.describe = describe; this.echo = echo; this.widgetContext = widgetContext; } } ```