Dettagli sui widget personalizzati in CloudWatch - Amazon CloudWatch
Stile CSS predefinitoUtilizzo del parametro describe

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à.

Dettagli sui widget personalizzati in CloudWatch

I widget personalizzati funzionano nel seguente modo:

  1. La CloudWatch dashboard richiama la funzione Lambda contenente il codice del widget. Passa in tutti i parametri personalizzati definiti nel widget.

  2. La funzione Lambda restituisce una stringa di HTML, JSON o Markdown. Il markdown viene restituito come JSON nel formato seguente:

    {"markdown":"markdown content"}

  3. Il pannello di controllo visualizza l'HTML o JSON restituito.

Se la funzione restituisce HTML, la maggior parte dei tag HTML sono supportati. Puoi utilizzare gli stili CSS (Cascading Style Sheets) e SVG (Scalable Vector Graphics) per creare viste complesse.

Lo stile predefinito degli elementi HTML come link e tabelle segue lo stile dei CloudWatch dashboard. Puoi personalizzare questo stile utilizzando gli stili in linea, utilizzando il tag <style>. Puoi anche disattivare gli stili predefiniti includendo un singolo elemento HTML con la classe di cwdb-no-default-styles. Nell'esempio seguente vengono disattivati gli stili predefiniti: <div class="cwdb-no-default-styles"></div>.

Ogni chiamata da un widget personalizzato a Lambda include un elemento widgetContext con i seguenti contenuti, per fornire informazioni utili sul contesto allo sviluppatore della funzione Lambda.


{
  "widgetContext": {
    "dashboardName": "Name-of-current-dashboard",
    "widgetId": "widget-16",
    "accountId": "012345678901",
    "locale": "en",
    "timezone": {
      "label": "UTC",
      "offsetISO": "+00:00",
      "offsetInMinutes": 0
    },
    "period": 300,
    "isAutoPeriod": true,
    "timeRange": {
      "mode": "relative",
      "start": 1627236199729,
      "end": 1627322599729,
      "relativeStart": 86400012,
      "zoom": {
        "start": 1627276030434,
        "end": 1627282956521
      }
    },
    "theme": "light",
    "linkCharts": true,
    "title": "Tweets for Amazon website problem",
    "forms": {
      "all": {}
    },
    "params": {
      "original": "param-to-widget"
    },
    "width": 588,
    "height": 369
  }
}

Stile CSS predefinito

I widget personalizzati forniscono i seguenti elementi stilistici CSS predefiniti:

  • È possibile utilizzare la classe CSS btn per aggiungere un pulsante. Trasforma un'ancora (<a>) in un pulsante come nell'esempio seguente:

    <a class="btn" href=https://amazon.com”>Open Amazon</a>

  • Puoi utilizzare la classe CSS btn btn-primary per aggiungere un pulsante primario.

  • Per impostazione predefinita, i seguenti elementi hanno lo stile: table (tabella), select (selezione), headers (h1, h2, and h3) (intestazioni (h1, h2 e h3)), preformatted text (pre) testo preformattato (pre)), input (inserimento) e text area (area di testo).

Utilizzo del parametro describe

Al termine, ti consigliamo di supportare il parametro describe nelle tue funzioni, anche se restituisce solo una stringa vuota. Se non lo supporti e viene chiamato nel widget personalizzato, visualizza il contenuto del widget come se fosse documentazione.

Se includi l'opzione describe, la funzione Lambda restituisce la documentazione in formato Markdown e non fa altro.

Quando crei un widget personalizzato nella console, dopo aver selezionato la funzione Lambda viene visualizzato un pulsante Get documentation (Ottieni documentazione). Se scegli questo pulsante, la funzione viene richiamata con il parametro describe e viene restituita la documentazione della funzione. Se la documentazione è ben formattata in markdown, CloudWatch analizza la prima voce della documentazione circondata da tre caratteri singoli (```) in YAML. Quindi, popola automaticamente la documentazione nei parametri. Di seguito è riportato un esempio di documentazione ben formattata. 

``` yaml
echo: <h1>Hello world</h1>
```