Backstage Cost Insights Plugin

Visualize, understand and optimize your cloud costs.

Created by Spotify

Get SaaS Backstage

Don't want to spend your time installing and upgrading Backstage plugins? Get managed Backstage from Roadie.

Self-hosted Backstage installation steps

Install the plugin into your Backstage instance.

yarn add @backstage/plugin-cost-insights

Create a CostInsights client which implements the CostInsightsApi interface.

Cost Insights currently does not provide a CostInsightsApi client out of the box, but there are templates and examples in the Backstage repo. Here's an exploration into Cost Insights for AWS.

// path/to/CostInsightsClient.ts
import { CostInsightsApi } from '@backstage/plugin-cost-insights';

export class CostInsightsClient implements CostInsightsApi { ... }

Import the client and the CostInsights plugin API to your Backstage instance.

// packages/app/src/api.ts
import { createApiFactory } from '@backstage/core';
import { costInsightsApiRef } from '@backstage/plugin-cost-insights';
import { CostInsightsClient } from './path/to/file';

export const apis = [
  createApiFactory({
    api: costInsightsApiRef,
    deps: {},
    factory: () => new CostInsightsClient(),
  }),
];

Add the CostInsightsPage extension to your App.tsx file.

// packages/app/App.tsx
import { CostInsightsPage } from '@backstage/plugin-cost-insights';

<FlatRoutes>
  ...
  <Route path="/cost-insights" element={<CostInsightsPage />} />
  ...
</FlatRoutes>

Add plugin to your sidebar.

// packages/app/src/sidebar.tsx
export const AppSidebar = () => (
  <Sidebar> 
    <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
  </Sidebar>
)

Found a mistake? Update these instructions.

How it looks

Charts showing cloud costs over time and compared to other services.

Things to know

To learn more about the Cost Insights plugin and how it is used inside Spotify, check out this RedMonk interview with Cost Insights product manager Janisa Anandamohan and her engineering colleague Tim Hansen. We also have brief notes from the video in this edition of our newsletter.

Become a Backstage expert

To get the latest news, deep dives into Backstage features, and a roundup of recent open-source action, sign up for Roadie's Backstage Weekly. See recent editions.