Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.
# Beispiel für benutzerdefinierte Widgets für ein CloudWatch Dashboard
AWS bietet Beispiele für benutzerdefinierte Widgets sowohl in Python als JavaScript auch in Python. Sie können diese Beispiel-Widgets erstellen, indem Sie den Link für jedes Widget in dieser Liste verwenden. Alternativ können Sie ein Widget mithilfe der CloudWatch Konsole erstellen und anpassen. Die Links in dieser Liste öffnen eine AWS CloudFormation Konsole und verwenden einen CloudFormation Schnellerstellungslink, um das benutzerdefinierte Widget zu erstellen.
Sie können auf die Beispiele für benutzerdefinierte Widgets auch unter zugreifen. [GitHub](https://github.com/aws-samples/cloudwatch-custom-widgets-samples)
Im Anschluss an diese Liste werden für jede Sprache vollständige Beispiele des Echo-Widgets angezeigt.
------
#### [ JavaScript ]
**Beispiele für benutzerdefinierte Widgets finden Sie in 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) – Ein einfaches Echo, mit dem Sie testen können, wie HTML in einem benutzerdefinierten Widget angezeigt wird, ohne ein neues Widget schreiben zu müssen.
+ [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) – Ein sehr einfaches Starter-Widget.
+ [Debugger für benutzerdefinierte Widgets](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) – Ein Debugger-Widget, das nützliche Informationen zur Lambda-Laufzeitumgebung anzeigt.
+ [ CloudWatch Logs Insights abfragen](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-Abfragen ausführen und bearbeiten.
+ [Ausführen von Amazon-Athena-Abfragen](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) – Ausführen und Bearbeiten von Athena-Abfragen.
+ [AWS API aufrufen](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) — Rufen Sie eine beliebige schreibgeschützte AWS API auf und zeigen Sie die Ergebnisse im JSON-Format an.
+ [Schnelles CloudWatch Bitmap-Diagramm](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) — Rendern Sie CloudWatch Diagramme serverseitig für eine schnelle Anzeige.
+ [Text-Widget aus dem 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) — Zeigt das erste Text-Widget aus dem angegebenen CloudWatch Dashboard an.
+ [ CloudWatch Metrikdaten als Tabelle](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) — Zeigt CloudWatch metrische Rohdaten in einer Tabelle an.
+ [Amazon-EC2-Tabelle](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) – Zeigt die wichtigsten EC2-Instances nach CPU-Auslastung an. Dieses Widget enthält auch eine Schaltfläche „Neustart“, die standardmäßig deaktiviert ist.
+ [AWS CodeDeploy Bereitstellungen](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) — Zeigt CodeDeploy Bereitstellungen an.
+ [AWS Cost Explorer Bericht](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) — Zeigt einen Bericht über die Kosten der einzelnen AWS Dienste für einen ausgewählten Zeitraum an.
+ [Inhalt der externen URL anzeigen](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) – Zeigt den Inhalt einer extern zugänglichen URL an.
+ [Anzeigen eines Amazon-S3-Objekts](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) – Zeigt ein Objekt in einem Amazon-S3-Bucket in Ihrem Konto an.
+ [Einfaches SVG-Kreisdiagramm](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) – Beispiel für ein grafisches SVG-basiertes Widget.
------
#### [ Python ]
**Beispiel für benutzerdefinierte Widgets in 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) – Ein einfaches Echo, mit dem Sie testen können, wie HTML in einem benutzerdefinierten Widget angezeigt wird, ohne ein neues Widget schreiben zu müssen.
+ [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) – Ein sehr einfaches Starter-Widget.
+ [Debugger für benutzerdefinierte Widgets](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) – Ein Debugger-Widget, das nützliche Informationen zur Lambda-Laufzeitumgebung anzeigt.
+ [AWS API aufrufen](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) — Rufen Sie eine beliebige schreibgeschützte AWS API auf und zeigen Sie die Ergebnisse im JSON-Format an.
+ [Schnelles CloudWatch Bitmap-Diagramm](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) — Rendern Sie CloudWatch Diagramme serverseitig für eine schnelle Anzeige.
+ [Dashboard-Snapshot per E-Mail senden](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) – Erstellen Sie einen Snapshot des aktuellen Dashboards und senden Sie es an E-Mail-Empfänger.
+ [Senden Sie ein Dashboard-Snapshot an 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) – Erstellen Sie einen Snapshot des aktuellen Dashboards und speichern Sie ihn in Amazon S3.
+ [Text-Widget aus dem 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) — Zeigt das erste Text-Widget aus dem angegebenen CloudWatch Dashboard an.
+ [Inhalt der externen URL anzeigen](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) – Zeigt den Inhalt einer extern zugänglichen URL an.
+ [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) – Zeigt RSS-Feeds an.
+ [Anzeigen eines Amazon-S3-Objekts](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) – Zeigt ein Objekt in einem Amazon-S3-Bucket in Ihrem Konto an.
+ [Einfaches SVG-Kreisdiagramm](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) – Beispiel für ein grafisches SVG-basiertes Widget.
------
**Echo-Widget in JavaScript**
Im Folgenden finden Sie das Echo-Beispiel-Widget in 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}`;
};
```
**Echo-Widget in Python**
Im Folgenden finden Sie das Echo-Beispiel-Widget in 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}'
```
**Echo-Widget in Java**
Im Folgenden finden Sie das Echo-Beispiel-Widget in 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;
}
}
```