Backstage Cost Insights Plugin

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

Skip the manual plugin installation with no-code 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.

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.

Prefer a no-code Backstage setup?

Request a Roadie demo

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.