Detalhes sobre os widgets personalizados no CloudWatch - Amazon CloudWatch
Estilo CSS padrãoUsar o parâmetro describe

Detalhes sobre os widgets personalizados no CloudWatch

Os widgets personalizados funcionam desta maneira:

  1. O painel do CloudWatch chama a função Lambda que contém o código do widget. Ele aprova parâmetros personalizados que são definidos no widget.

  2. A função Lambda retorna uma string de HTML, JSON ou Markdown. O Markdown é retornado como JSON no seguinte formato:

    {"markdown":"markdown content"}

  3. O painel exibe o HTML ou JSON retornado.

Se a função retornar HTML, a maioria das etiquetas HTML será compatível. Você pode usar estilos Cascading Style Sheets (CSS) e gráficos vetoriais escaláveis (SVG) para criar exibições sofisticadas.

O estilo padrão de elementos HTML, como links e tabelas, segue o estilo dos painéis do CloudWatch. Você pode personalizar esse estilo com estilos em linha, usando a etiqueta <style>. Também é possível desativar os estilos padrão, incluindo um único elemento HTML com a classe de cwdb-no-default-styles. O exemplo a seguir desativa os estilos padrão: <div class="cwdb-no-default-styles"></div>.

Cada chamada feita por um widget personalizado para o Lambda inclui um elemento widgetContext com o seguinte conteúdo, para fornecer informações de contexto úteis ao desenvolvedor da função 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
  }
}

Estilo CSS padrão

Os widgets personalizados fornecem os seguintes elementos de estilo CSS padrão:

  • Você pode usar a classe de CSS btn para adicionar um botão. Ele gira uma âncora (<a>) em um botão como no exemplo a seguir:

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

  • É possível usar a classe de CSS btn btn-primary para adicionar um botão primário.

  • Os seguintes elementos são estilizados por padrão: table,select, cabeçalhos (h1, h2 e h3), texto pré-formatado (pre), input eárea de texto.

Usar o parâmetro describe

É altamente recomendável oferecer suporte ao describe em suas funções, mesmo que ele retorne apenas uma string vazia. Caso você não oferecça suporte, e ele for chamado no widget personalizado, ele exibirá o conteúdo do widget como se fosse documentação.

Se incluir o parâmetro describe, a função Lambda retornará a documentação no formato Markdown e não fará mais nada.

Quando você cria um widget personalizado no console, depois de selecionar a função Lambda, um botão Get documentation (Obter documentação) é exibido. Se você escolher este botão, a função será invocada com o parâmetro describe, e a documentação da função será retornada. Se a documentação estiver bem formatada em markdown, o CloudWatch analisará a primeira entrada na documentação que está rodeada por três caracteres de crase simples (```) no YAML. Em seguida, preencherá automaticamente a documentação nos parâmetros. Veja a seguir um exemplo dessa documentação bem formatada. 

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