Set up a spend-by-service dashboard

What you'll build

You'll create a CloudWatch dashboard named CloudPeek-Spend with two widgets. The first is a bar chart of the five services you've spent most on so far this month, found automatically, with your account's total. The second is that month-to-date total with a sparkline of the past week. In CloudPeek they look like this:

It takes about 15 minutes in the AWS console, or one deploy with CloudFormation or Terraform. Pick your tool on the tabs in each step.

Before you start

• An AWS account, and a sign-in that can change billing preferences and create CloudWatch dashboards and IAM users and policies, such as an administrator. If your accounts are in AWS Organizations, use the management account to see the whole organisation's spend.
• CloudPeek on your iPhone or iPad.

1. Turn on billing metrics

AWS only sends your estimated charges to CloudWatch after you opt in. You do this once per account, in the console: CloudFormation, Terraform and the AWS CLI can't change this setting.

1. Sign in to the AWS console and open Billing and Cost Management › Billing preferences.
2. Under Alert preferences, choose Edit.
3. Select Receive CloudWatch billing alerts and save the change.

Until the first data arrives, the dashboard you'll create next says No data available. To check whether billing metrics have started, open CloudWatch in us-east-1 and choose Metrics › All metrics: a Billing namespace appears once they have. Metrics Explorer doesn't list billing metrics, so look under All metrics.

2. Create the dashboard

aws cloudwatch put-dashboard \
  --region us-east-1 \
  --dashboard-name CloudPeek-Spend \
  --dashboard-body file://spend-by-service.json

  Dashboard:
    Type: AWS::CloudWatch::Dashboard
    Properties:
      DashboardName: !Ref DashboardName
      DashboardBody: !Sub |
          {
            "start": "-P7D",
            "widgets": [
              {
                "type": "metric",
                "x": 0,
                "y": 0,
                "width": 12,
                "height": 8,
                "properties": {
                  "title": "Top ${TopServices} services by spend",
                  "view": "bar",
                  "region": "us-east-1",
                  "start": "-P1D",
                  "stat": "Maximum",
                  "period": 21600,
                  "metrics": [
                    [ "AWS/Billing", "EstimatedCharges", "Currency", "${Currency}", { "label": "Total" } ],
                    [ { "expression": "SORT(SEARCH('{AWS/Billing,Currency,ServiceName} MetricName=\"EstimatedCharges\" Currency=\"${Currency}\"', 'Maximum', 21600), MAX, DESC, ${TopServices})", "label": "${!PROP('Dim.ServiceName')}", "id": "top" } ]
                  ]
                }
              },
              {
                "type": "metric",
                "x": 12,
                "y": 0,
                "width": 6,
                "height": 8,
                "properties": {
                  "title": "Month-to-date spend",
                  "view": "singleValue",
                  "region": "us-east-1",
                  "stat": "Maximum",
                  "period": 21600,
                  "sparkline": true,
                  "metrics": [
                    [ "AWS/Billing", "EstimatedCharges", "Currency", "${Currency}", { "label": "Total" } ]
                  ]
                }
              }
            ]
          }

aws cloudformation deploy \
  --region us-east-1 \
  --stack-name CloudPeek \
  --template-file cloudpeek-setup.yaml \
  --capabilities CAPABILITY_NAMED_IAM

resource "aws_cloudwatch_dashboard" "spend" {
  dashboard_name = var.dashboard_name
  dashboard_body = jsonencode({
    start = "-P7D"
    widgets = [
      {
        type   = "metric"
        x      = 0
        y      = 0
        width  = 12
        height = 8
        properties = {
          title  = "Top ${var.top_services} services by spend"
          view   = "bar"
          region = "us-east-1"
          start  = "-P1D"
          stat   = "Maximum"
          period = 21600
          metrics = [
            ["AWS/Billing", "EstimatedCharges", "Currency", var.currency, { label = "Total" }],
            [{
              expression = "SORT(SEARCH('{AWS/Billing,Currency,ServiceName} MetricName=\"EstimatedCharges\" Currency=\"${var.currency}\"', 'Maximum', 21600), MAX, DESC, ${var.top_services})"
              label      = "$${PROP('Dim.ServiceName')}"
              id         = "top"
            }],
          ]
        }
      },
      {
        type   = "metric"
        x      = 12
        y      = 0
        width  = 6
        height = 8
        properties = {
          title     = "Month-to-date spend"
          view      = "singleValue"
          region    = "us-east-1"
          stat      = "Maximum"
          period    = 21600
          sparkline = true
          metrics = [
            ["AWS/Billing", "EstimatedCharges", "Currency", var.currency, { label = "Total" }],
          ]
        }
      },
    ]
  })
}

terraform init
terraform apply

The dashboard, explained

Whichever tool you use, this is the dashboard you end up with:

{
  "start": "-P7D",
  "widgets": [
    {
      "type": "metric",
      "x": 0,
      "y": 0,
      "width": 12,
      "height": 8,
      "properties": {
        "title": "Top 5 services by spend",
        "view": "bar",
        "region": "us-east-1",
        "start": "-P1D",
        "stat": "Maximum",
        "period": 21600,
        "metrics": [
          [ "AWS/Billing", "EstimatedCharges", "Currency", "USD", { "label": "Total" } ],
          [ { "expression": "SORT(SEARCH('{AWS/Billing,Currency,ServiceName} MetricName=\"EstimatedCharges\" Currency=\"USD\"', 'Maximum', 21600), MAX, DESC, 5)", "label": "${PROP('Dim.ServiceName')}", "id": "top" } ]
        ]
      }
    },
    {
      "type": "metric",
      "x": 12,
      "y": 0,
      "width": 6,
      "height": 8,
      "properties": {
        "title": "Month-to-date spend",
        "view": "singleValue",
        "region": "us-east-1",
        "stat": "Maximum",
        "period": 21600,
        "sparkline": true,
        "metrics": [
          [ "AWS/Billing", "EstimatedCharges", "Currency", "USD", { "label": "Total" } ]
        ]
      }
    }
  ]
}

• The expression row finds your top services for you. SEARCH finds every service's estimated charges, and SORT(…, MAX, DESC, 5) keeps the five biggest. Services you start using appear on their own. To show more or fewer, change the 5 at the end of the expression (or the TopServices parameter, or the top_services variable).
• The label ${PROP('Dim.ServiceName')} names each bar after its service, such as AmazonEC2 or AWSLambda. CloudPeek shows the short name (EC2, Lambda), lists them biggest first, and adds up any that don't fit into Other.
• The row with only a Currency dimension is your whole account's charges so far this month. CloudPeek shows it as the widget's Total rather than as a bar, so services outside the top five still count. In the CloudWatch console it appears as one more bar.
• Charges count from the start of the month, so the bar chart looks at just the last day ("start": "-P1D"). That way the ranking follows this month's charges rather than last month's. The month-to-date total uses the dashboard's week for its sparkline.
• If your bill isn't in US dollars, change USD in both rows and in the expression to your currency code.
• For a donut of each service's share, change "view": "bar" to "view": "pie". CloudPeek puts the Total in the middle and shows everything outside the top five as an Other slice.

To see every service's charges, open CloudWatch in us-east-1 and choose All metrics › Billing › By Service.

3. Give CloudPeek read-only access

aws iam create-access-key --user-name cloudpeek

aws iam create-access-key --user-name cloudpeek

4. Sign in and pin your widgets

1. Open CloudPeek and add your account on the Accounts tab with the access key or IAM Identity Center (see signing in). Choose us-east-1 as the default region.
2. On Home, open the CloudPeek-Spend dashboard and tap Pin on Top 5 services by spend and Month-to-date spend.
3. Touch and hold an empty area of your Home Screen until the apps jiggle. Tap Edit, then Add Widget. Find CloudPeek, pick a size and tap Add Widget. Medium suits the bar chart; small suits the total.
4. New widgets show your first pinned widget. To choose another, touch and hold the widget and tap Edit Widget.

The total also works well on the Lock Screen, where widgets show the latest value.

Removing it

aws cloudwatch delete-dashboards --region us-east-1 --dashboard-names CloudPeek-Spend

aws iam list-access-keys --user-name cloudpeek
aws iam delete-access-key --user-name cloudpeek --access-key-id <access-key-id>
aws cloudformation delete-stack --region us-east-1 --stack-name CloudPeek

aws iam list-access-keys --user-name cloudpeek
aws iam delete-access-key --user-name cloudpeek --access-key-id <access-key-id>
terraform destroy

Troubleshooting

The widgets are empty, or the dashboard says “No data available”

Billing metrics aren't reaching CloudWatch yet. Check that they're turned on (step 1) and give them a few hours. Then look for the Billing namespace under All metrics in us-east-1 (Metrics Explorer doesn't list billing metrics). In AWS Organizations, set this up in the management account, which sees the whole organisation's charges.

A service is missing

It isn't one of your five biggest this month. To chart more, raise the number at the end of the SORT expression (see how it works). Its charges are already included in the Total.

The Total is bigger than the bars added up

That's expected. The Total is your whole bill so far this month, including services outside your top five.

Something else

See Troubleshooting, or email support@cloudpeek.app. Never send us your secret access key.