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 HTMLJSON, o Markdown. Markdown viene restituito JSON nel seguente formato:

   {"markdown":"markdown content"}

3. Il pannello di controllo mostra l'HTMLo JSON restituito.

Se la funzione viene restituitaHTML, la maggior parte dei HTML tag è supportata. È possibile utilizzare gli stili Cascading Style Sheets (CSS) e Scalable Vector Graphics (SVG) per creare viste sofisticate.

Lo stile predefinito di HTML elementi come link e tabelle segue lo stile dei dashboard. CloudWatch Puoi personalizzare questo stile utilizzando gli stili in linea, utilizzando il tag <style>. Puoi anche disattivare gli stili predefiniti includendo un singolo HTML elemento nella 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 predefinito CSS

I widget personalizzati forniscono i seguenti elementi di CSS stile predefiniti:

• Puoi usare la CSS classe 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>

• È possibile utilizzare la CSS classe btn btn-primary per aggiungere un pulsante principale.

• 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 (```). YAML Quindi, popola automaticamente la documentazione nei parametri. Di seguito è riportato un esempio di documentazione ben formattata.

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