CloudWatch のカスタムウィジェットの詳細 - Amazon CloudWatch
デフォルトの CSS スタイル設定describe パラメータを使用する

CloudWatch のカスタムウィジェットの詳細

カスタムウィジェットでは次のようなことができます。

  1. CloudWatch ダッシュボードは、ウィジェットコードを含む Lambda 関数を呼び出します。これは、ウィジェットで定義された任意のカスタムパラメータを渡します。

  2. Lambda 関数は、HTML、JSON、または Markdown の文字列を返します。Markdown は、次の形式で JSON として返されます。

    {"markdown":"markdown content"}

  3. ダッシュボードに、返された HTML または JSON が表示されます。

関数が HTML を返す場合、ほとんどの HTML タグがサポートされます。カスケードスタイルシート (CSS) スタイルとスケーラブルベクターグラフィックス (SVG) を使用すれば、洗練されたビューを構築できます。

リンクやテーブルなどの HTML 要素のデフォルトのスタイルは、CloudWatch ダッシュボードのスタイルに従います。<style> タグを使用してインラインスタイルを使用することで、このスタイルをカスタマイズできます。また、cwdb-no-default-styles のクラスで単一の HTML 要素を含めることで、デフォルトのスタイルを無効化することができます。次の <div class="cwdb-no-default-styles"></div> の例では、デフォルトのスタイルを無効化します。

カスタムウィジェットから Lambda へのすべての呼び出しには、以下の内容の widgetContext 要素が含まれ、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
  }
}

デフォルトの CSS スタイル設定

カスタムウィジェットには、次のデフォルトの CSS スタイルの要素が用意されています。

  • CSS クラスの btn を使用してボタンを追加します。これは、次の例のように、アンカー (<a>) をボタンに変えます。

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

  • CSS クラスの btn btn-primary を使用して、主ボタンを追加できます。

  • デフォルトでは、テーブル、選択、ヘッダー (h1、h2、h3)、書式付きテキスト (前)、インプット およびテキスト領域の要素にスタイルが設定されます。

describe パラメータを使用する

空の文字列を返すだけの場合でも、関数の describe パラメータをサポートすることを強くお勧めします。サポートされていない状態でカスタムウィジェットで呼び出されると、ウィジェットの内容がドキュメントのような形式で表示されます。

describe パラメータを含めると、Lambda 関数はドキュメントを Markdown 形式で返し、他には何も実行しません。

コンソールでカスタムウィジェットを作成する場合、Lambda 関数を選択すると、[Get documentation] (ドキュメントを取得) ボタンが表示されます。このボタンをクリックすると、describe パラメータを使用して関数が呼び出され、関数のドキュメントが返されます。ドキュメントが Markdown 形式で適切にフォーマットされている場合、CloudWatch は YAML の 3 つの単一のバックティック文字 (```) で囲まれたドキュメントの最初のエントリを解析します。その後、パラメータ内のドキュメントが自動的に入力されます。以下は、そのように適切にフォーマットされたドキュメントの例です。

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