A simple live dashboard for CloudWatch metrics

by Vue.js Examples

Vue CloudWatch Dashboard

This project facilitates live monitoring CloudWatch metrics. All desired metrics are specified in JSON format.

PWA functionality allows the app to be cached on a mobile device after it's been served via npm run serve command.

A major problem with accessing CloudWatch metrics data is that metrics are often only reported when an event occurs. This results in data with many missing datapoints. The server-side Lambda function included in the project pads data with zero values whenever it is found to be missing.

The period, backfill time, and refresh interval are all configurable. They have been set with reasonable values of five minutes, five minutes, and two hours, respectively. Please note that AWS promises that CloudWatch metrics will be populated with a latency of at most ten minutes.

The charting capabilities of this project are limited in favor of a simple means of interacting with CloudWatch metrics data. More charting functionality may be added at a later date.

Commands

First, clone the repo. Run npm install to install dependencies. Ensure the rest of the setup is complete. The steps to setup are as follows.

  • Create a metrics.json file appropriate to the metrics you'd like to pull from CloudWatch.
  • Create .env.{NODE_ENV} file(s) appropriate to the way(s) in which you intend to build the web application. A .env.development file and .env.production file are recommended.
  • The lambda function uploaded to AWS. You can simply use the included archive.
  • An API properly set up using API Gateway. See the Lambda Function section for more details.

To build for development including hot reload, run the following.

# build for development
npm run dev

To fully optimize the web application, run the following. This bundles the application into a dist directory. The production build also includes PWA support, which allows the web application to be cahced on a mobile device. Once the application is being served, access it on a mobile device and save it to your homescreen. The server can now be taken down as the application is cached and fully functional on your device.

# build for production
npm run build

# serve the bundled dist folder in production mode
npm run serve

Credentials

The app expects there to be a .env.{NODE_ENV} file in the following format:

API_ENDPOINT={YOUR_API_ENDPOINT}
API_KEY={YOUR_API_KEY}

Replace NODE_ENV with development, test, or production. These will be loaded when built for the respective environments and used to interact with your API. See the next section for setting up an endpoint using AWS Gateway and Lambda.

GitHub