本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
# 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 在自訂小工具中的顯示方式，而不必撰寫新的小工具。
+ [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 的內容。
+ [顯示 Simple Storage Service (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) – 在您帳戶中顯示 Simple Storage Service (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 在自訂小工具中的顯示方式，而不必撰寫新的小工具。
+ [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) — 擷取目前儀表板的快照，然後將其傳送給電子郵件收件人。
+ [將儀表板快照傳送至 Simple Storage Service (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) — 擷取目前儀表板的快照，並將其存放在 Simple Storage Service (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 摘要。
+ [顯示 Simple Storage Service (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) – 在您帳戶中顯示 Simple Storage Service (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;
}
}
```