# Amostra de widgets personalizados para um painel do CloudWatch
AWSA fornece exemplos de widgets personalizados em JavaScript e Python. É possível criar esses widgets de exemplo usando o link para cada widget desta lista. Se preferir, você pode criar e personalizar um widget usando o console do CloudWatch. Os links desta lista abrem um console do AWS CloudFormation e usam um link de criação rápida do CloudFormation para criar o widget personalizado.
Também é possível acessar as exemplos de widget personalizados no [GitHub](https://github.com/aws-samples/cloudwatch-custom-widgets-samples).
Seguindo esta lista, os exemplos completos do widget Echo são exibidos para cada idioma.
------
#### [ JavaScript ]
**Widgets personalizados de exemplo em 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): um ecoador básico que você pode usar para testar como HTML aparece em um widget personalizado, sem precisar gravar um novo widget.
+ [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): um widget iniciante muito básico.
+ [ Custom widget debugger](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) (Depurador do widget personalizado): um widget depurador que exibe informações úteis sobre o ambiente do runtime do Lambda.
+ [Query 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) (Consultar o CloudWatch Logs Insights): execute e edite consultas do CloudWatch Logs Insights.
+ [Run Amazon Athena queries](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) (Executar consultas do Amazon Athena): executa e edita consultas do Athena.
+ [Chamar API da AWS](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): chama qualquer API somente leitura da AWS e exibe os resultados no formato JSON.
+ [ Fast CloudWatch bitmap graph](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) (Grafo de bitmap rápido do CloudWatch): renderize gráficos do CloudWatch usando no lado do servidor, para exibição rápida.
+ [ Text widget from CloudWatch dashboard](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) (Widget de texto do painel do CloudWatch): exibe o primeiro widget de texto do painel do CloudWatch especificado.
+ [ CloudWatch metric data as a table](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) (Dados de métrica do CloudWatch como uma tabela): exibe dados métricos brutos do CloudWatch em uma tabela.
+ [ Amazon EC2 table](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) (Tabela do Amazon EC2): exibe as principais instâncias do EC2 por utilização da CPU. Este widget também inclui um botão Reboot (Reiniciar), que é desabilitado por padrão.
+ [Implantações do 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): exibe implantações do CodeDeploy.
+ [Relatório do 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): exibe um relatório sobre o custo de cada serviço da AWS no intervalo de tempo selecionado.
+ [ Display content of external 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) (Exibir conteúdo de URL externa): exibe o conteúdo de uma URL acessível externamente.
+ [ Display an Amazon S3 object](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) (Exibir um objeto do Amazon S3): exibe um objeto em um bucket do Amazon S3 em sua conta.
+ [ Simple SVG pie chart](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) (Gráfico de pizza SVG simples) exemplo de um widget gráfico baseado em SVG.
------
#### [ Python ]
**Widgets personalizados de exemplo em 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): um ecoador básico que pode ser usado para testar como HTML aparece em um widget personalizado, sem precisar gravar um novo widget.
+ [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): um widget iniciante muito básico.
+ [ Custom widget debugger](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) (Depurador do widget personalizado): um widget depurador que exibe informações úteis sobre o ambiente do runtime do Lambda.
+ [Chamar API da AWS](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): chama qualquer API somente leitura da AWS e exibe os resultados no formato JSON.
+ [ Fast CloudWatch bitmap graph](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) (Grafo de bitmap rápido do CloudWatch): renderize gráficos do CloudWatch usando no lado do servidor, para exibição rápida.
+ [ Send dashboard snapshot by email](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) (Enviar snapshot do painel por e-mail): faça um snapshot do painel atual e envie-o aos destinatários do email.
+ [ Send dashboard snapshot to 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) (Enviar snapshot do paiel ao Amazon S3): faça um snapshot do painel atual e armazene-o no Amazon S3.
+ [ Text widget from CloudWatch dashboard](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) (Widget de texto do painel do CloudWatch): exibe o primeiro widget de texto do painel do CloudWatch especificado.
+ [ Display content of external 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) (Exibir conteúdo de URL externa): exibe o conteúdo de uma URL acessível externamente.
+ [RSS reader](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): exibe feeds RSS.
+ [ Display an Amazon S3 object](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) (Exibir um objeto do Amazon S3): exibe um objeto em um bucket do Amazon S3 em sua conta.
+ [ Simple SVG pie chart](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) (Gráfico de pizza SVG simples) exemplo de um widget gráfico baseado em SVG.
------
**Widget Echo em JavaScript**
A seguir está o widget de exemplo Echo em JavaScript.
```
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}`;
};
```
**Widget Echo em Python**
A seguir está o widget de exemplo Echo em Python.
```
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}'
```
**Widget Echo em Java**
A seguir está o widget de exemplo Echo em Java.
```
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;
}
}
```