Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
# Exemples de widgets personnalisés pour un CloudWatch tableau de bord
AWS fournit des exemples de widgets personnalisés à la fois en Python JavaScript et en Python. Vous pouvez créer ces exemples de widgets en utilisant le lien correspondant à chaque widget de cette liste. Vous pouvez également créer et personnaliser un widget à l'aide de la CloudWatch console. Les liens de cette liste ouvrent une AWS CloudFormation console et utilisent un lien de CloudFormation création rapide pour créer le widget personnalisé.
Vous pouvez également accéder aux exemples de widgets personnalisés sur [GitHub](https://github.com/aws-samples/cloudwatch-custom-widgets-samples).
Après cette liste, des exemples complets du widget Echo sont affichés pour chaque langue.
------
#### [ JavaScript ]
**Exemples de widgets personnalisés dans 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) — Dispositif d'écho de base que vous pouvez utiliser pour tester la manière dont le code HTML apparaît dans un widget personnalisé, sans avoir à écrire un nouveau 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) — Widget de démarrage très basique.
+ [ Débogueur de widgets personnalisés](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) — Widget débogueur qui affiche des informations utiles sur l'environnement d'exécution 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) — Exécutez et modifiez CloudWatch les requêtes Logs Insights.
+ [ Exécution de requêtes 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) — Exécutez et modifiez les requêtes Athena.
+ [AWS API d'appel](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) — Appelez n'importe quelle AWS API en lecture seule et affichez les résultats au format JSON.
+ [Graphe CloudWatch bitmap rapide](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) — Effectuez le rendu CloudWatch des graphiques à l'aide du serveur, pour un affichage rapide.
+ [Widget de texte depuis le CloudWatch tableau de bord](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) — Affiche le premier widget de texte du tableau de CloudWatch bord spécifié.
+ [ CloudWatch données métriques sous forme de tableau](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) : affiche les données CloudWatch métriques brutes dans un tableau.
+ [ Tableau 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)— Affiche les instances EC2 supérieures par utilisation du CPU. Ce widget comprend également un bouton de redémarrage, désactivé par défaut.
+ [AWS CodeDeploy déploiements](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) : affiche les CodeDeploy déploiements.
+ [AWS Cost Explorer rapport](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) — Affiche un rapport sur le coût de chaque AWS service pour une période sélectionnée.
+ [ Affichage du contenu de l'URL externe](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) — Affiche le contenu d'une URL accessible en externe.
+ [ Affichage d'un objet 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) — Affiche un objet dans un compartiment Amazon S3 dans votre compte.
+ [ Graphique circulaire SVG simple](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) — Exemple d'un widget graphique basé sur SVG.
------
#### [ Python ]
**Exemples de widgets personnalisés en 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) — Dispositif d'écho de base que vous pouvez utiliser pour tester la manière dont le code HTML apparaît dans un widget personnalisé, sans avoir à écrire un nouveau 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) — Widget de démarrage très basique.
+ [ Débogueur de widgets personnalisés](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) — Widget débogueur qui affiche des informations utiles sur l'environnement d'exécution Lambda.
+ [AWS API d'appel](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) — Appelez n'importe quelle AWS API en lecture seule et affichez les résultats au format JSON.
+ [Graphe CloudWatch bitmap rapide](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) — Effectuez le rendu CloudWatch des graphiques à l'aide du serveur, pour un affichage rapide.
+ [ Envoi d'un instantané de tableau de bord par e-mail](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) — Permet d'effectuer un instantané du tableau de bord actuel et de l'envoyer aux destinataires d'e-mail.
+ [ Envoi d'un instantané de tableau de bord 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) — Créez un instantané du tableau de bord actuel et stockez-le dans Amazon S3.
+ [Widget de texte depuis le CloudWatch tableau de bord](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) — Affiche le premier widget de texte du tableau de CloudWatch bord spécifié.
+ [ Affichage du contenu de l'URL externe](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) — Affiche le contenu d'une URL accessible en externe.
+ [ Lecteur 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) — Affiche les flux RSS.
+ [ Affichage d'un objet 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) — Affiche un objet dans un compartiment Amazon S3 dans votre compte.
+ [ Graphique circulaire SVG simple](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) — Exemple d'un widget graphique basé sur SVG.
------
**Widget Echo dans JavaScript**
Voici l'exemple de widget Echo dans 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 en Python**
Voici un exemple de widget Echo en 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 en Java**
Voici un exemple de widget Echo en 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;
}
}
```