AWS の利用料金をチャート化するボットを Next generation Slack platform で作ってみた

{
  "imports": {
    ...
    "@aws-sdk/client-cost-explorer": "https://esm.sh/@aws-sdk/client-cost-explorer@3.436.0",
    "std/": "https://deno.land/std@0.205.0/"
  }
}

import { DefineType, Schema } from "deno-slack-sdk/mod.ts";

export type CostAndUsageAccount = string;

export type CostAndUsageMetric = {
  date: number;
  values: number[];
};

export type CostAndUsage = {
  accounts: CostAndUsageAccount[];
  metrics: CostAndUsageMetric[];
};

export const CostAndUsageMetricType = DefineType({
  name: "CostAndUsageMetric",
  type: Schema.types.object,
  properties: {
    date: {
      type: Schema.types.integer,
      description: "料金の発生日時 (UNIX時刻のミリ秒表現)",
    },
    values: {
      type: Schema.types.array,
      description: "AWSアカウントごとの料金 (ドル)",
      items: {
        type: Schema.types.number,
      },
    },
  },
  required: [
    "date",
    "values",
  ],
});

export const CostAndUsageType = DefineType({
  name: "CostAndUsage",
  type: Schema.types.object,
  description: "料金データ",
  properties: {
    accounts: {
      type: Schema.types.array,
      description: "AWSアカウント名",
      items: {
        type: Schema.types.string,
      },
    },
    metrics: {
      type: Schema.types.array,
      description: "料金メトリクス",
      items: {
        // NOTE: 1つの型定義の中で object -> array -> object とネストさせると以下のエラーが発生するので、独立した型を定義するようにした。
        //       "Unexpected schema encountered for `object` type: failed to match exactly one allowed schema for `properties/metrics` - {"type":"one_of"} (failed_constraint)"
        type: CostAndUsageMetricType,
      },
    },
  },
  required: [
    "accounts",
    "metrics",
  ],
});

import { DefineType, Schema } from "deno-slack-sdk/mod.ts";

const fetchScope = [
  "1-week",
  "6-months",
] as const;

export type FetchScope = typeof fetchScope[number];

export const FetchScopeType = DefineType({
  name: "FetchScope",
  type: Schema.types.string,
  description: "取得範囲",
  enum: fetchScope,
});

{
  ...
  "fmt": {
    "include": [
      ...
      "./models/"
    ]
  },
  ...
  "lint": {
    "include": [
      ...
      "./models/"
    ]
  },
  ...
}

import { Scope1week } from "./scope/1week.ts";
import { Scope6months } from "./scope/6months.ts";

import type { Granularity } from "@aws-sdk/client-cost-explorer";
import type { FetchScope } from "../types/fetch_scope.ts";

export type YearMonthDay = [number, number, number];

export interface Scope {
  //
  // "TimePeriod"パラメータを返す。
  //
  timePeriod(
    now: Date,
  ): {
    start: YearMonthDay;
    end: YearMonthDay;
  };

  //
  // "Granularity"パラメータを返す。
  //
  granularity(): Granularity;
}

//
// Scopeインスタンスを生成する。
//
export const createScope = (scope: FetchScope) => {
  switch (scope) {
    case "1-week":
      return new Scope1week();
    case "6-months":
      return new Scope6months();
    default:
      throw new Error(`不正なスコープです: ${scope}`);
  }
};

import type { Granularity } from "@aws-sdk/client-cost-explorer";
import type { Scope, YearMonthDay } from "../scope.ts";

//
// 短スパン (直近1週間)
//
export class Scope1week implements Scope {
  timePeriod(now: Date) {
    return {
      start: [
        now.getFullYear(),
        now.getMonth(),
        now.getDate() - 8,
      ] as YearMonthDay,
      end: [
        now.getFullYear(),
        now.getMonth(),
        now.getDate() - 1,
      ] as YearMonthDay,
    };
  }

  granularity(): Granularity {
    return "DAILY";
  }
}

import type { Granularity } from "@aws-sdk/client-cost-explorer";
import type { Scope, YearMonthDay } from "../scope.ts";

//
// 長スパン (直近半年)
//
export class Scope6months implements Scope {
  timePeriod(now: Date) {
    return {
      start: [
        now.getFullYear(),
        now.getMonth() - 6,
        1,
      ] as YearMonthDay,
      end: [
        now.getFullYear(),
        now.getMonth(),
        1,
      ] as YearMonthDay,
    };
  }

  granularity(): Granularity {
    return "MONTHLY";
  }
}

import {
  CostExplorerClient,
  GetCostAndUsageCommand,
} from "@aws-sdk/client-cost-explorer";
import { DefineFunction, Schema, SlackFunction } from "deno-slack-sdk/mod.ts";
import { format } from "std/datetime/mod.ts";
import { createScope } from "../models/scope.ts";
import { CostAndUsageType } from "../types/cost_and_usage.ts";
import { FetchScopeType } from "../types/fetch_scope.ts";

import type {
  DimensionValuesWithAttributes,
  GetCostAndUsageCommandOutput,
  ResultByTime,
} from "@aws-sdk/client-cost-explorer";
import type { YearMonthDay } from "../models/scope.ts";
import type {
  CostAndUsage,
  CostAndUsageAccount,
  CostAndUsageMetric,
} from "../types/cost_and_usage.ts";
import type { FetchScope } from "../types/fetch_scope.ts";

export const FetchCostDataFunctionDefinition = DefineFunction({
  callback_id: "fetch_cost_data_function",
  title: "Fetch cost data function",
  description: "AWS の料金データを取得する。",
  source_file: "./functions/fetch_cost_data_function.ts",
  input_parameters: {
    properties: {
      scope: {
        type: FetchScopeType,
        description: "取得範囲",
      },
      accountIds: {
        type: Schema.types.string,
        description: "AWSアカウントID (カンマ区切り)",
      },
    },
    required: [
      "scope",
      "accountIds",
    ],
  },
  output_parameters: {
    properties: {
      data: {
        type: CostAndUsageType,
        description: "料金データ",
      },
    },
    required: [],
  },
});

export default SlackFunction(
  FetchCostDataFunctionDefinition,
  async ({ inputs, env }) => {
    const accountIds = splitCSV(inputs.accountIds);

    try {
      const response = await getCostAndUsage(
        env.AWS_REGION,
        env.AWS_ACCESS_KEY_ID,
        env.AWS_SECRET_ACCESS_KEY,
        accountIds,
        inputs.scope as FetchScope,
      );

      const data = alignCostData(response, accountIds);

      return {
        outputs: {
          data: data,
        },
      };
    } catch (e) {
      console.log(e);

      return {
        error: "料金データの取得に失敗しました。",
        outputs: {},
      };
    }
  },
);

//
// カンマ区切りの文字列を配列に分解する。
//
const splitCSV = (str: string) => {
  return str.split(",").map((x) => x.trim());
};

//
// CostExplorer GetCostAndUsage API を叩く。
//
const getCostAndUsage = async (
  region: string,
  accessKeyId: string,
  secretAccessKey: string,
  accountIds: string[],
  scope: FetchScope,
) => {
  const costExplorerClient = new CostExplorerClient({
    region: region,
    credentials: {
      accessKeyId: accessKeyId,
      secretAccessKey: secretAccessKey,
    },
  });

  return await costExplorerClient.send(
    new GetCostAndUsageCommand({
      ...timeQuery(scope),
      ...{
        Metrics: [
          "AmortizedCost",
        ],
        Filter: {
          And: [
            {
              Not: {
                Dimensions: {
                  Key: "RECORD_TYPE",
                  Values: [
                    "Credit",
                    "Refund",
                    "Upfront",
                    "Tax",
                  ],
                },
              },
            },
            {
              Dimensions: {
                Key: "LINKED_ACCOUNT",
                Values: accountIds,
              },
            },
          ],
        },
        GroupBy: [
          {
            Type: "DIMENSION",
            Key: "LINKED_ACCOUNT",
          },
        ],
      },
    }),
  );
};

//
// 料金データを取得する日時範囲を返す。
//
const timeQuery = (scope: FetchScope) => {
  const formatTimePeriod = (times: YearMonthDay) => {
    return format(new Date(Date.UTC(...times)), "yyyy-MM-dd");
  };

  const now = new Date();

  const scoper = createScope(scope);

  const { start, end } = scoper.timePeriod(now);

  return {
    TimePeriod: {
      Start: formatTimePeriod(start),
      End: formatTimePeriod(end),
    },
    Granularity: scoper.granularity(),
  };
};

//
// 料金データをグラフ化しやすい形式に再配列する。
//
const alignCostData = (
  response: GetCostAndUsageCommandOutput,
  accountIds: string[],
): CostAndUsage => {
  const resultsByTime = response.ResultsByTime;

  if (!resultsByTime) {
    return {
      accounts: [],
      metrics: [],
    };
  }

  return {
    accounts: alignAccounts(response.DimensionValueAttributes, accountIds),
    metrics: alignValues(resultsByTime, accountIds),
  };
};

//
// AWSアカウントID を整列する。
//
const alignAccounts = (
  dimensionValuesWithAttributes: DimensionValuesWithAttributes[] | undefined,
  accountIds: string[],
): CostAndUsageAccount[] => {
  return accountIds.map((accountId) => {
    const dimensionValuesWithAttribute = dimensionValuesWithAttributes?.find(
      (dimensionValuesWithAttribute) => {
        return accountId === dimensionValuesWithAttribute.Value;
      },
    );

    return dimensionValuesWithAttribute?.Attributes?.description ?? accountId;
  });
};

//
// 利用料金を整列する。
//
const alignValues = (
  resultsByTimes: ResultByTime[],
  accountIds: string[],
) => {
  return resultsByTimes.map((result) => {
    const time = result.TimePeriod?.Start;

    if (!time) {
      return null;
    }

    const values = accountIds.map((accountId) => {
      const group = result.Groups?.find((group) => {
        return accountId === group.Keys?.at(0);
      });

      return Number(
        group?.Metrics?.AmortizedCost?.Amount ?? "-1",
      );
    });

    return {
      date: new Date(time).getTime(),
      values: values,
    };
  }).filter((x): x is CostAndUsageMetric => x !== null);
};

{
  "imports": {
    ...
    "d3": "https://esm.sh/d3@7.8.5",
    "linkedom": "https://esm.sh/linkedom@0.16.1",
    "svg2png-wasm": "https://esm.sh/svg2png-wasm@1.4.1"
  }
}

import { decodeBase64 } from "std/encoding/base64.ts";

//
// Noto Sans JP のフォント・データを返す。
//
export const notoSansJPLight = () => {
  const blob = new Blob([decodeBase64(notoSansJPLightData)]);

  const reader = blob.stream().pipeThrough(
    new DecompressionStream("gzip"),
  ).getReader();

  return read(reader, new Uint8Array(0));
};

//
// Stream からデータを読み込む。
//
const read = async (
  reader: ReadableStreamDefaultReader<Uint8Array>,
  base: Uint8Array,
): Promise<Uint8Array> => {
  const { done, value } = await reader.read();

  if (done) {
    return base;
  } else {
    return read(reader, mergeData(base, value));
  }
};

//
// 2つの Uint8Array を連結する。
//
const mergeData = (arr1: Uint8Array, arr2: Uint8Array) => {
  const merged = new Uint8Array(arr1.length + arr2.length);

  merged.set(arr1);
  merged.set(arr2, arr1.length);

  return merged;
};

// NOTE: フォント・ファイルを gzip + Base64 した文字列。
//       `$ cat ./NotoSansJP-Light.ttf | gzip -9 -c | base64 -b 500`
const notoSansJPLightData =
  `H4sICDs3ZWUCA2EA3H0HfBR...tQHEXMIR+tsqg
.......................................
........(500文字/行で 8,700行ほど)........
.......................................`;

...
import type { CountableTimeInterval } from "d3";

export type AxisFormat = [CountableTimeInterval, string];

export interface Scope {
  ...
  //
  // X軸目盛りの日時フォーマット (@D3.js) を返す。
  //
  axisXFormat(): AxisFormat;
}
...

...
import { utcDay } from "d3";

import type { AxisFormat } from "../scope.ts";

export class Scope1week implements Scope {
  ...
  axisXFormat(): AxisFormat {
    return [utcDay, "%Y-%m-%d"];
  }
}

...
import { utcMonth } from "d3";

import type { AxisFormat } from "../scope.ts";

export class Scope6months implements Scope {
  ...
  axisXFormat(): AxisFormat {
    return [utcMonth, "%Y-%m"];
  }
}

/// <reference lib="dom" />

import * as d3 from "d3";
import { DefineFunction, Schema, SlackFunction } from "deno-slack-sdk/mod.ts";
import { DOMParser } from "linkedom";
import { encodeBase64 } from "std/encoding/base64.ts";
import * as svg2png from "svg2png-wasm";
import { notoSansJPLight } from "../models/font.ts";
import { createScope } from "../models/scope.ts";
import { CostAndUsageType } from "../types/cost_and_usage.ts";
import { FetchScopeType } from "../types/fetch_scope.ts";

import type {
  CostAndUsage,
  CostAndUsageMetric,
} from "../types/cost_and_usage.ts";
import type { FetchScope } from "../types/fetch_scope.ts";

type SVG = d3.Selection<SVGSVGElement, unknown, null, undefined>;

type AxisX = d3.ScaleTime<number, number, never>;
type AxisY = d3.ScaleLinear<number, number, never>;

type Colors = d3.ScaleOrdinal<string, string, never>;

export const DrawChartFunctionDefinition = DefineFunction({
  callback_id: "draw_chart_function",
  title: "Draw chart function",
  description: "チャートを描画して PNG画像として出力する。",
  source_file: "./functions/draw_chart_function.ts",
  input_parameters: {
    properties: {
      scope: {
        type: FetchScopeType,
        description: "取得範囲",
      },
      data: {
        type: CostAndUsageType,
        description: "料金データ",
      },
    },
    required: [
      "scope",
      "data",
    ],
  },
  output_parameters: {
    properties: {
      image: {
        type: Schema.types.string,
        description: "PNGデータ (Base64)",
      },
    },
    required: [],
  },
});

//
// チャートのスタイル
//
const style = {
  size: {
    canvas: {
      width: 800,
      height: 600,
      padding: {
        top: 20,
        right: 40,
        bottom: 40,
        left: 40,
      },
    },
    axis: {
      marginRatio: {
        top: 1.1,
      },
    },
    grid: {
      offset: {
        right: 6,
        left: -6,
      },
    },
    label: {
      y: {
        position: {
          top: 16,
          left: -32,
        },
      },
    },
    line: {
      width: 1.5,
    },
    legend: {
      area: {
        position: {
          top: 20,
          left: 680,
        },
      },
      rect: {
        size: 12,
        margin: 3,
      },
      font: {
        size: 10,
      },
    },
  },
  color: {
    text: "#262626",
    background: "#ffffff",
    grid: {
      opacity: 0.1,
    },
    line: {
      spectral: {
        ratio: 0.8,
        offset: 0.1,
      },
    },
  },
};

export default SlackFunction(
  DrawChartFunctionDefinition,
  async ({ inputs }) => {
    try {
      const svg = createSvg();

      const axisX = drawAxisX(inputs.data, svg, inputs.scope as FetchScope);
      const axisY = drawAxisY(inputs.data, svg);

      const colors = createColors(inputs.data);

      drawLines(inputs.data, svg, axisX, axisY, colors);

      addLegend(inputs.data, svg, colors);

      const png = await dumpImage(svg);

      return {
        outputs: {
          image: encodeBase64(png),
        },
      };
    } catch (e) {
      console.log(e);

      return {
        error: "チャートの生成に失敗しました。",
        outputs: {},
      };
    }
  },
);

//
// SVG領域を確保する。
//
const createSvg = () => {
  const document = new DOMParser().parseFromString(
    "<!DOCTYPE html><html><body></body></html>",
    "text/html",
  );

  const svg = d3.select(document.body)
    .append("svg")
    .attr("xmlns", "http://www.w3.org/2000/svg")
    .attr("width", style.size.canvas.width)
    .attr("height", style.size.canvas.height)
    .attr("viewBox", [0, 0, style.size.canvas.width, style.size.canvas.height])
    .attr("color", style.color.text);

  svg.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", style.size.canvas.width)
    .attr("height", style.size.canvas.height)
    .attr("fill", style.color.background);

  return svg;
};

//
// X軸を描画する。
//
const drawAxisX = (data: CostAndUsage, svg: SVG, scope: FetchScope) => {
  const [start, end] = d3.extent(data.metrics, (d) => new Date(d.date));

  const axis = d3.scaleUtc()
    .domain([
      start ?? new Date(0),
      end ?? new Date(0),
    ])
    .range([
      style.size.canvas.padding.left,
      style.size.canvas.width - style.size.canvas.padding.right,
    ]);

  svg.append("g")
    .attr(
      "transform",
      `translate(0, ${
        style.size.canvas.height - style.size.canvas.padding.bottom
      })`,
    )
    .call(
      d3.axisBottom(axis).ticks(
        ...(
          createScope(scope).axisXFormat()
        ),
      ),
    );

  return axis;
};

//
// Y軸を描画する。
//
const drawAxisY = (data: CostAndUsage, svg: SVG) => {
  const end = d3.max(data.metrics.map((d) => d.values).flat());

  const axis = d3.scaleLinear()
    .domain([
      0,
      (end ?? 0) * style.size.axis.marginRatio.top,
    ])
    .range([
      style.size.canvas.height - style.size.canvas.padding.bottom,
      style.size.canvas.padding.top,
    ]);

  // Ref: https://observablehq.com/@d3/line-chart/2?intent=fork
  svg.append("g")
    .attr("transform", `translate(${style.size.canvas.padding.left}, 0)`)
    .call(d3.axisLeft(axis))
    .call((g) => {
      g.select(".domain").remove();
    })
    .call((g) => {
      const lines = g.selectAll(".tick line");

      lines.attr("x1", style.size.grid.offset.left)
        .attr(
          "x2",
          style.size.canvas.width - style.size.canvas.padding.left -
            style.size.canvas.padding.right + style.size.grid.offset.right,
        );

      lines.filter((_, i) => i !== 0)
        .attr("stroke-opacity", style.color.grid.opacity);
    })
    .call((g) => {
      g.append("text")
        .attr("x", style.size.label.y.position.left)
        .attr("y", style.size.label.y.position.top)
        .attr("fill", "currentColor")
        .attr("text-anchor", "start")
        .text("Cost ($)");
    });

  return axis;
};

//
// 折れ線グラフで使用する色を定義する。
//
const createColors = (data: CostAndUsage) => {
  return d3.scaleOrdinal<string, string>()
    .domain(data.accounts)
    .range(
      d3.quantize(
        (t) =>
          d3.interpolateSpectral(
            t * style.color.line.spectral.ratio +
              style.color.line.spectral.offset,
          ),
        data.accounts.length,
      ).reverse(),
    );
};

//
// 折れ線を描画する。
//
const drawLines = (
  data: CostAndUsage,
  svg: SVG,
  axisX: AxisX,
  axisY: AxisY,
  colors: Colors,
) => {
  data.accounts.forEach((v, i) => {
    const line = d3.line<CostAndUsageMetric>()
      .x((d) => axisX(new Date(d.date)))
      .y((d) => axisY(d.values[i]));

    svg.append("path")
      .attr("fill", "none")
      .attr("stroke", colors(v))
      .attr("stroke-width", style.size.line.width)
      .attr("d", line(data.metrics));
  });
};

//
// 凡例を掲出する。
//
const addLegend = (data: CostAndUsage, svg: SVG, colors: Colors) => {
  svg.append("g")
    .attr(
      "transform",
      `translate(${style.size.legend.area.position.left}, ${style.size.legend.area.position.top})`,
    )
    .attr("font-size", style.size.legend.font.size)
    .attr("font-family", "sans-serif")
    .call((g) => {
      const rectSise = style.size.legend.rect.size +
        style.size.legend.rect.margin * 2;

      data.accounts.forEach((v, i) => {
        g.append("g")
          .attr(
            "transform",
            `translate(0, ${rectSise * i})`,
          )
          .call((legendItem) => {
            legendItem.append("rect")
              .attr("x", style.size.legend.rect.margin)
              .attr("y", style.size.legend.rect.margin)
              .attr("width", style.size.legend.rect.size)
              .attr("height", style.size.legend.rect.size)
              .attr("fill", colors(v));

            legendItem.append("text")
              .attr("x", rectSise)
              .attr("y", (rectSise + style.size.legend.font.size) * 0.5 - 1)
              .attr("fill", "currentColor")
              .text(v);
          });
      });
    });
};

//
// PNG画像として出力する。
//
const dumpImage = async (svg: SVG) => {
  try {
    await svg2png.initialize(
      fetch("https://unpkg.com/svg2png-wasm/svg2png_wasm_bg.wasm"),
    );
  } catch (_) {
    //  NOTE: ランタイムの生存期間が長く、複数回のワークフロー実行にわたってプロセスが維持されることがあるようだ。
    //        その場合、何度も initialize() が走ることになるが、すでに初期化されている場合はエラーが投げられる。
    //        Ref: https://github.com/ssssota/svg2png-wasm/blob/svg2png-wasm%401.4.1/lib/index.ts#L17-L21
  }

  return await svg2png.svg2png(
    svg.node()!.outerHTML,
    {
      fonts: [
        await notoSansJPLight(),
      ],
      defaultFontFamily: {
        sansSerifFamily: "Noto Sans JP",
      },
    },
  );
};

...
export interface Scope {
  ...
  //
  // スパンの日本語表現を返す。
  //
  text(): string;

  //
  // 表への列挙時の日時フォーマット (@Deno std/datetime) を返す。
  // Ref: https://deno.land/std/datetime/mod.ts
  //
  tableHeadFormat(): string;
}
...

...
export class Scope1week implements Scope {
  ...
  text() {
    return "1週間";
  }

  tableHeadFormat() {
    return "yyyy-MM-dd";
  }
}

...
export class Scope6months implements Scope {
  ...
  text() {
    return "6か月間";
  }

  tableHeadFormat() {
    return "yyyy-MM";
  }
}

{
  "imports": {
    ...
    "ascii_table/": "https://deno.land/x/ascii_table@v0.1.0/"
  }
}

import AsciiTable from "ascii_table/mod.ts";
import { DefineFunction, Schema, SlackFunction } from "deno-slack-sdk/mod.ts";
import { zip } from "std/collections/mod.ts";
import { format } from "std/datetime/mod.ts";
import { createScope } from "../models/scope.ts";
import { CostAndUsageType } from "../types/cost_and_usage.ts";
import { FetchScopeType } from "../types/fetch_scope.ts";

import type {
  CostAndUsage,
  CostAndUsageAccount,
} from "../types/cost_and_usage.ts";
import type { FetchScope } from "../types/fetch_scope.ts";

export const BuildChatMessageFunctionDefinition = DefineFunction({
  callback_id: "build_chat_message_function",
  title: "Build chat message function",
  description: "投稿メッセージを組み立てる。",
  source_file: "./functions/build_chat_message_function.ts",
  input_parameters: {
    properties: {
      scope: {
        type: FetchScopeType,
        description: "取得範囲",
      },
      accountIds: {
        type: Schema.types.string,
        description: "AWSアカウントID (カンマ区切り)",
      },
      data: {
        type: CostAndUsageType,
        description: "料金データ",
      },
    },
    required: [
      "scope",
      "accountIds",
      "data",
    ],
  },
  output_parameters: {
    properties: {
      message: {
        type: Schema.types.string,
        description: "投稿メッセージ",
      },
    },
    required: [],
  },
});

export default SlackFunction(
  BuildChatMessageFunctionDefinition,
  ({ inputs }) => {
    const scoper = createScope(inputs.scope as FetchScope);

    try {
      return {
        outputs: {
          message: [
            "直近の AWS料金の推移をお伝えします。",
            "",
            `* アカウント: ${
              accounts(inputs.accountIds, inputs.data.accounts).join(", ")
            }`,
            `* 期間: ${scoper.text()}`,
            "",
            "```",
            tabulate(inputs.data, scoper.tableHeadFormat()),
            "```",
          ].join("\n"),
        },
      };
    } catch (e) {
      console.log(e);

      return {
        error: "投稿メッセージの生成に失敗しました。",
        outputs: {},
      };
    }
  },
);

//
// アカウント名を列挙する。
//
const accounts = (
  accountIds: string,
  accountNames: CostAndUsageAccount[],
) => {
  const splitCSV = (str: string) => {
    return str.split(",").map((x) => x.trim());
  };

  return zip(
    splitCSV(accountIds),
    accountNames,
  ).map((x) => {
    return `${x[1]}(${x[0]})`;
  });
};

//
// 料金データを表形式で出力する。
//
const tabulate = (data: CostAndUsage, timeFormat: string) => {
  const table = new AsciiTable();

  table.setHeading(
    "Account",
    ...(
      data.metrics.map((x) => format(new Date(x.date), timeFormat))
    ),
  );

  const rows = data.accounts.map((account, i) => {
    const values = data.metrics.map((x) => {
      return x.values[i];
    });

    return [account, values].flat();
  });

  table.addRowMatrix(rows)
    .removeBorder();

  // @ts-expect-error:
  //   `removeBorder()` は見出し行下のセパレータまでクリアしてしまう。
  //   他に副作用を与えず当該セパレータだけセットするメソッドは用意されていないので、
  //   privateフィールドに直接セットする。
  //
  //   Ref: https://github.com/eeve/ascii_table/blob/v0.1.0/mod.ts#L220
  table.__fill = "-";

  return table.toString();
};

import { DefineFunction, Schema, SlackFunction } from "deno-slack-sdk/mod.ts";
import { decodeBase64 } from "std/encoding/base64.ts";

export const PostChartFunctionDefinition = DefineFunction({
  callback_id: "post_chart_function",
  title: "Post chart function",
  description: "チャートを投稿する。",
  source_file: "./functions/post_chart_function.ts",
  input_parameters: {
    properties: {
      channel: {
        type: Schema.slack.types.channel_id,
        description: "投稿先のチャネル",
      },
      image: {
        type: Schema.types.string,
        description: "PNGデータ (Base64)",
      },
      message: {
        type: Schema.types.string,
        description: "投稿メッセージ",
      },
    },
    required: [
      "channel",
      "image",
      "message",
    ],
  },
  output_parameters: {
    properties: {},
    required: [],
  },
});

export default SlackFunction(
  PostChartFunctionDefinition,
  // NOTE: `client` (deno-slack-api) 経由では "multipart/form-data" で送ることができないため、生の HTTP を叩くようにした。
  async ({ inputs, token }) => {
    const formData = new FormData();

    formData.append("channels", inputs.channel);
    formData.append("initial_comment", inputs.message);
    formData.append(
      "file",
      new Blob([decodeBase64(inputs.image)], { type: "image/png" }),
      "aws-cost.png",
    );

    const response = await fetch("https://slack.com/api/files.upload", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${token}`,
      },
      body: formData,
    });

    const body = await response.json();

    if (!response.ok) {
      console.log(body);

      return {
        error: "画像のアップロードに失敗しました。",
        outputs: {},
      };
    }

    return {
      outputs: {},
    };
  },
);

import { DefineWorkflow, Schema } from "deno-slack-sdk/mod.ts";
import { BuildChatMessageFunctionDefinition } from "../functions/build_chat_message_function.ts";
import { DrawChartFunctionDefinition } from "../functions/draw_chart_function.ts";
import { FetchCostDataFunctionDefinition } from "../functions/fetch_cost_data_function.ts";
import { PostChartFunctionDefinition } from "../functions/post_chart_function.ts";

const CostChartWorkflow = DefineWorkflow({
  callback_id: "cost_chart_workflow",
  title: "Cost chart workflow",
  description: "直近の使用料金をチャート化して表示する。",
  input_parameters: {
    // NOTE: 入力値として Arrayなどは許可されていないようだ。
    //       それらを指定した場合、以下のエラーが発生する。
    //       "Shortcut trigger parameters cannot be objects, arrays or timestamps (invalid_interactive_trigger_inputs)"
    properties: {
      channel: {
        type: Schema.slack.types.channel_id,
      },
      scope: {
        type: Schema.types.string,
        description: "取得範囲",
      },
      accountIds: {
        type: Schema.types.string,
        description: "AWSアカウントID (カンマ区切り)",
      },
    },
    required: [
      "channel",
      "scope",
      "accountIds",
    ],
  },
});

const fetchCostData = CostChartWorkflow.addStep(
  FetchCostDataFunctionDefinition,
  {
    scope: CostChartWorkflow.inputs.scope,
    accountIds: CostChartWorkflow.inputs.accountIds,
  },
);

const drawChart = CostChartWorkflow.addStep(
  DrawChartFunctionDefinition,
  {
    scope: CostChartWorkflow.inputs.scope,
    data: fetchCostData.outputs.data,
  },
);

const buildChatMessage = CostChartWorkflow.addStep(
  BuildChatMessageFunctionDefinition,
  {
    scope: CostChartWorkflow.inputs.scope,
    accountIds: CostChartWorkflow.inputs.accountIds,
    data: fetchCostData.outputs.data,
  },
);

CostChartWorkflow.addStep(
  PostChartFunctionDefinition,
  {
    channel: CostChartWorkflow.inputs.channel,
    image: drawChart.outputs.image,
    message: buildChatMessage.outputs.message,
  },
);

export default CostChartWorkflow;

import { TriggerTypes } from "deno-slack-api/mod.ts";
import { Trigger } from "deno-slack-sdk/types.ts";
import CostChartWorkflow from "../workflows/cost_chart_workflow.ts";

const CostChart1weekScheduledTrigger: Trigger<
  typeof CostChartWorkflow.definition
> = {
  type: TriggerTypes.Scheduled,
  name: "Cost chart 1-week trigger",
  description: "[Scheduled] 直近1週間のチャートを表示する。",
  workflow: `#/workflows/${CostChartWorkflow.definition.callback_id}`,
  schedule: {
    start_time: "2023-09-25T10:30:00+09:00",
    frequency: {
      type: "weekly",
    },
  },
  inputs: {
    channel: {
      value: "<SlackチャネルID>",
    },
    scope: {
      value: "1-week",
    },
    accountIds: {
      value: [
        "<ID@アカウント1>",
        "<ID@アカウント2>",
        ...
      ].join(","),
    },
  },
};

export default CostChart1weekScheduledTrigger;

import { TriggerTypes } from "deno-slack-api/mod.ts";
import { Trigger } from "deno-slack-sdk/types.ts";
import CostChartWorkflow from "../workflows/cost_chart_workflow.ts";

const CostChart6monthsScheduledTrigger: Trigger<
  typeof CostChartWorkflow.definition
> = {
  type: TriggerTypes.Scheduled,
  name: "Cost chart 6-months trigger",
  description: "[Scheduled] 直近6か月間のチャートを表示する。",
  workflow: `#/workflows/${CostChartWorkflow.definition.callback_id}`,
  schedule: {
    start_time: "2023-10-03T10:00:00+09:00",
    frequency: {
      type: "monthly",
    },
  },
  inputs: {
    channel: {
      value: "<SlackチャネルID>",
    },
    scope: {
      value: "6-months",
    },
    accountIds: {
      value: [
        "<ID@アカウント1>",
        "<ID@アカウント2>",
        ...
      ].join(","),
    },
  },
};

export default CostChart6monthsScheduledTrigger;

import { Manifest } from "deno-slack-sdk/mod.ts";
import { BuildChatMessageFunctionDefinition } from "./functions/build_chat_message_function.ts";
import { DrawChartFunctionDefinition } from "./functions/draw_chart_function.ts";
import { FetchCostDataFunctionDefinition } from "./functions/fetch_cost_data_function.ts";
import { PostChartFunctionDefinition } from "./functions/post_chart_function.ts";
import {
  CostAndUsageMetricType,
  CostAndUsageType,
} from "./types/cost_and_usage.ts";
import { FetchScopeType } from "./types/fetch_scope.ts";
import CostChartWorkflow from "./workflows/cost_chart_workflow.ts";

export default Manifest({
  name: "aws-cost",
  description: "AWS の使用料金を通知する。",
  icon: "./assets/app_icon.png",
  types: [
    CostAndUsageMetricType,
    CostAndUsageType,
    FetchScopeType,
  ],
  functions: [
    BuildChatMessageFunctionDefinition,
    DrawChartFunctionDefinition,
    FetchCostDataFunctionDefinition,
    PostChartFunctionDefinition,
  ],
  workflows: [
    CostChartWorkflow,
  ],
  outgoingDomains: [
    "ce.us-east-1.amazonaws.com",
    "esm.sh",
    "unpkg.com",
  ],
  botScopes: [
    "files:write",
  ],
});