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

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

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

  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>
```