Detalles sobre los widgets personalizados en CloudWatch - Amazon CloudWatch
Estilo CSS predeterminadoUso del parámetro de descripción

Detalles sobre los widgets personalizados en CloudWatch

Los widgets personalizados funcionan de la siguiente manera:

  1. El panel de CloudWatch llama a la función Lambda que contiene el código del widget. Se especifica en cualquier parámetro personalizado que se defina en el widget.

  2. La función Lambda muestra una cadena de HTML, JSON o de Markdown. Markdown se muestra como JSON en el siguiente formato:

    {"markdown":"markdown content"}

  3. El panel muestra el HTML o JSON devuelto.

Si la función devuelve el HTML, la mayoría de las etiquetas HTML serán compatibles. Utilice estilos de Cascading Style Sheets (CSS) y Gráficos vectoriales escalables (SVG) para crear vistas sofisticadas.

El estilo predeterminado de los elementos HTML, como los enlaces y las tablas, siguen el estilo de los paneles de CloudWatch. Personalice este estilo con los estilos integrados mediante la etiqueta <style>. También puede desactivar los estilos predeterminados si incluye un único elemento HTML con la clase de cwdb-no-default-styles. En el siguiente ejemplo se desactivan los estilos predeterminados: <div class="cwdb-no-default-styles"></div>.

Cada llamada por un widget personalizado a Lambda incluye un elemento widgetContext con los siguientes contenidos, para proporcionar al desarrollador de funciones Lambda información de contexto útil.


{
  "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 predeterminado

Los widgets personalizados proporcionan los siguientes elementos de estilo CSS predeterminados:

  • Utilice la clase CSS btn para agregar un botón. Un botón se convierte en ancla (<a>) como en el siguiente ejemplo:

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

  • Utilice la clase CSS btn btn-primary para agregar un botón principal.

  • Los siguientes elementos tienen un estilo de forma predeterminada: table (tabla),select (seleccionar), headers (H1, H2 y H3) (cabeceras), preformatted text (pre) (texto preformateado [pre]), input (entrada) y text area (área de texto).

Uso del parámetro de descripción

Se recomienda que utilice el parámetro describe (describir) en las funciones, incluso si solo muestra una cadena vacía. Si no lo admite, y se llama en el widget personalizado, muestra el contenido del widget como si fuera documentación.

Si incluye el parámetro describe (describir), la función Lambda devuelve la documentación en formato Markdown y no realiza nada más.

Cuando se crea un widget personalizado en la consola, después de seleccionar la función Lambda, aparecerá un botón Get documentation (Obtener documentación). Si elige este botón, la función se invoca con el parámetro describe (describir) y se muestra la documentación de la función. Si la documentación está bien formateada en markdown, CloudWatch analiza la primera entrada de la documentación que está rodeada de tres comillas (```) en YAML. A continuación, rellena automáticamente la documentación en los parámetros. A continuación, se muestra un ejemplo de esta documentación bien formateada. 

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