

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

# Esempi di widget personalizzati per una dashboard CloudWatch
<a name="add_custom_widget_samples"></a>

AWS fornisce esempi di widget personalizzati sia in Python che JavaScript in Python. Puoi creare questi widget di esempio utilizzando il link per ciascun widget in questo elenco. In alternativa, puoi creare e personalizzare un widget utilizzando la CloudWatch console. I collegamenti in questo elenco aprono una AWS CloudFormation console e utilizzano un collegamento di CloudFormation creazione rapida per creare il widget personalizzato.

Puoi anche accedere agli esempi di widget personalizzati su. [GitHub](https://github.com/aws-samples/cloudwatch-custom-widgets-samples)

Dopo questo elenco, vengono mostrati esempi completi del widget Echo per ogni lingua.

------
#### [ JavaScript ]

**Esempi di widget personalizzati 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&param_DoCreateExampleDashboard=Yes): un eco di base che puoi utilizzare per verificare come viene visualizzato HTML in un widget personalizzato, senza dover scrivere un nuovo 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&param_DoCreateExampleDashboard=Yes): un widget di avvio molto semplice.
+ [ 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&param_DoCreateExampleDashboard=Yes) (Debugger del widget personalizzato): un widget di debug che visualizza informazioni utili sull'ambiente runtime 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&param_DoCreateExampleDashboard=Yes): esegue e modifica le query di 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&param_DoCreateExampleDashboard=Yes) (Esegui query di Amazon Athena): consente di eseguire e modificare le query Athena.
+ [Call AWS API](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetAwsCall-js&template=customWidgets/customWidgetAwsCall-js.yaml&param_DoCreateExampleDashboard=Yes): richiama qualsiasi API di sola lettura e visualizza i AWS risultati in formato JSON.
+ [Grafico CloudWatch bitmap veloce](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCloudWatchBitmapGraph-js&template=customWidgets/customWidgetCloudWatchBitmapGraph-js.yaml&param_DoCreateExampleDashboard=Yes): esegui il rendering CloudWatch dei grafici sul lato server, per una visualizzazione rapida.
+ [Widget di testo dal CloudWatch pannello di controllo](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetIncludeTextWidget-js&template=customWidgets/customWidgetIncludeTextWidget-js.yaml&param_DoCreateExampleDashboard=Yes): visualizza il primo widget di testo dal pannello di controllo specificato CloudWatch .
+ [ CloudWatch dati metrici come tabella](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCloudWatchMetricDataTable-js&template=customWidgets/customWidgetCloudWatchMetricDataTable-js.yaml&param_DoCreateExampleDashboard=Yes): visualizza i dati CloudWatch metrici non elaborati in una tabella.
+ [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&param_DoCreateExampleDashboard=Yes) (Tabella Amazon EC2): visualizza le principali istanze EC2 in base all'utilizzo della CPU. Questo widget include anche un pulsante Reebot (Riavvia), che è disabilitato per impostazione predefinita.
+ [AWS CodeDeploy distribuzioni: visualizza le distribuzioni.](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCodeDeploy-js&template=customWidgets/customWidgetCodeDeploy-js.yaml&param_DoCreateExampleDashboard=Yes) CodeDeploy 
+ [AWS Cost Explorer rapporto](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCostExplorerReport-js&template=customWidgets/customWidgetCostExplorerReport-js.yaml&param_DoCreateExampleDashboard=Yes): visualizza un rapporto sul costo di ogni AWS servizio per un intervallo di tempo selezionato.
+ [ 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&param_DoCreateExampleDashboard=Yes) (Visualizza il contenuto dell'URL esterno): visualizza il contenuto di un URL accessibile esternamente.
+ [ 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&param_DoCreateExampleDashboard=Yes) (Visualizza un oggetto Amazon S3): visualizza un oggetto in un bucket Amazon S3 nel tuo account.
+ [ 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&param_DoCreateExampleDashboard=Yes) (Semplice grafico a torta SVG): esempio di widget grafico basato su SVG.

------
#### [ Python ]

**Esempio di widget personalizzati 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&param_DoCreateExampleDashboard=Yes): un eco di base che puoi utilizzare per verificare come viene visualizzato HTML in un widget personalizzato, senza dover scrivere un nuovo 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&param_DoCreateExampleDashboard=Yes): un widget di avvio molto semplice.
+ [ 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&param_DoCreateExampleDashboard=Yes) (Debugger del widget personalizzato): un widget di debug che visualizza informazioni utili sull'ambiente runtime Lambda.
+ [Call AWS API](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetAwsCall-py&template=customWidgets/customWidgetAwsCall-py.yaml&param_DoCreateExampleDashboard=Yes): richiama qualsiasi AWS API di sola lettura e visualizza i risultati in formato JSON.
+  [Grafico CloudWatch bitmap veloce](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetCloudWatchBitmapGraph-py&template=customWidgets/customWidgetCloudWatchBitmapGraph-py.yaml&param_DoCreateExampleDashboard=Yes): esegui il rendering CloudWatch dei grafici sul lato server, per una visualizzazione rapida.
+  [ 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&param_DoCreateExampleDashboard=Yes) (Invia snapshot del pannello di controllo tramite e-mail): scatta uno snapshot del pannello di controllo corrente e invialo ai destinatari dell'e-mail.
+  [ 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&param_DoCreateExampleDashboard=Yes) (Invia snapshot del pannello di controllo ad Amazon S3): scatta uno snapshot del pannello di controllo corrente e archivialo in Amazon S3.
+ [Widget di testo dal CloudWatch pannello di controllo](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetIncludeTextWidget-py&template=customWidgets/customWidgetIncludeTextWidget-py.yaml&param_DoCreateExampleDashboard=Yes): visualizza il primo widget di testo dal pannello di controllo specificato CloudWatch .
+ [ 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&param_DoCreateExampleDashboard=Yes) (Visualizza il contenuto dell'URL esterno): visualizza il contenuto di un URL accessibile esternamente.
+ [ RSS reader](https://console.aws.amazon.com/cloudwatch/cfn.js?region=us-east-1&action=create&stackName=customWidgetRssReader-py&template=customWidgets/customWidgetRssReader-py.yaml&param_DoCreateExampleDashboard=Yes) (Lettore RSS): visualizza i feed 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&param_DoCreateExampleDashboard=Yes) (Visualizza un oggetto Amazon S3): visualizza un oggetto in un bucket Amazon S3 nel tuo account.
+ [ 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&param_DoCreateExampleDashboard=Yes) (Semplice grafico a torta SVG): esempio di widget grafico basato su SVG.

------

**Widget Echo in JavaScript**

Di seguito è riportato il widget di esempio di Echo 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: <h1>Hello world</h1>
\`\`\`
`;
 
exports.handler = async (event) => {
    if (event.describe) {
        return DOCS;   
    }
    
    let widgetContext = JSON.stringify(event.widgetContext, null, 4);
    widgetContext = widgetContext.replace(/</g, '&lt;');
    widgetContext = widgetContext.replace(/>/g, '&gt;');
    
    return `${event.echo || ''}<pre>${widgetContext}</pre>`;
};
```

**Widget Echo in Python**

Di seguito è riportato il widget di esempio Echo 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: <h1>Hello world</h1>
```"""
 
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('<', '&lt;')
    widgetContext = widgetContext.replace('>', '&gt;')
        
    return f'{echo}<pre>{widgetContext}</pre>'
```

**Widget Echo in Java**

Di seguito è riportato il widget di esempio Echo 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<Event, String>{
 
  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: <h1>Hello world</h1>\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 : "") + "<pre>" + gson.toJson(event.widgetContext) + "</pre>";
  }
}
     
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;
    }
}
```