npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@matheusdaluz/backstage-plugin-kubecost

v0.0.4

Published

Kubecost is a plugin to help engineers get information about cost usage/prediction of their deployment.

Downloads

17

Readme

Kubecost

Introduction

Kubecost is a plugin to help engineers get information about cost usage/prediction of their deployment.

Setup

Kubecost Installation:

In order to use this Backstage Plugin you have to install Kubecost

Optional: For Network Cost gathering you will need to Network Traffic Cost Allocation network transfer to pods.

Plugin Installation:

Add the plugin to your frontend app:

# From your Backstage root directory
yarn add --cwd packages/app @suxess-it/backstage-plugin-kubecost

Configure Backstage

Adapt app-config.yaml:

Kubecost requires configuration field: kubecost with valid baseUrl to kubecost API.

Optional Settings:

  • sharedNamespaces // add shared namespaces, from which cost will be shared across client namespaces
  • queryframes // add Duration of time over which to query. Accepts words like today, week, month, yesterday, lastweek, lastmonth; durations like 30m, 12h, 7d ... {more details from official API Reference}(https://docs.kubecost.com/apis/apis-overview/allocation)
  • unitprefix // add Currency. Accepts $, €, ...
  • fractionDigits // number of fraction digits to show in costs and average values, default is 4.
  • annotationDeploymentName // annotation name of the entity's metadata that refers to the Kubernetes label to identify the deployment related to the entity, default is ' kubecost.com/deployment-name'.
  • shareTenancyCosts // include shared tenancy costs in the cost calculation, true or false. Default is false.
  • aggregate // aggregate costs by controller, true or false. Default is false.
  • showDashboardLink // show a message with the direct link to the Kubecost website configured in baseUrl option, true or false . Default is false.
## ./app-config.yaml
kubecost:
  baseUrl: https://<base URL to Kubecost> 
  sharedNamespaces: <comma-separated list of namespaces>
  queryframes: <comma-separated list of queries>(e.g. week,yesterday,month,today,lastweek)
  unitprefix: '<unit>' (e.g. $, €(=default) )
  annotationDeploymentName: 'backstage.io/kubernetes-id'
  shareTenancyCosts: true
  aggregate: true
  showDashboardLink: true

Import Plugin and embed in the entities page:

// packages/app/src/components/catalog/EntityPage.tsx

import { 
  BackstagePluginKubecostPage,
  isKubecostAvailable
} from '@suxess-it/backstage-plugin-kubecost';

// ...

// add this section to the place where the serviceEntityPage gets defined
// const serviceEntityPage = (
// ...
    <EntityLayout.Route if={isKubecostAvailable} path="/kubecost" title="Kubecost">
      <BackstagePluginKubecostPage/>
    </EntityLayout.Route>

Display cost information on a component page

Adding the EntityKubecostCard component to an entity's page will display usage to cost of last week.

// packages/app/src/components/catalog/EntityPage.tsx

import { 
  EntityKubecostCard,
  isKubecostAvailable
} from '@suxess-it/backstage-plugin-kubecost';

// ...

// add this section to the place where the overviewContent gets defined
// const overviewContent = (
// ... 
    <EntitySwitch>
      <EntitySwitch.Case if={isKubecostAvailable}>
        <EntityKubecostCard />
      </EntitySwitch.Case>
    </EntitySwitch>

Configuration

Kubecost Plugin are correlated to Backstage entities using an annotation added in the entity's catalog-info.yaml file:

annotations:
  <annotationDeploymentName>: my-kubernetes-deployment-name

Please add Label <annotationDeploymentName>:<my-kubernetes-deployment-name> to deployment, then this annotation accepts any valid deploymentname on your k8s Clusters. If the deployment is deployed in multiple kubernetes clusters, the plugin will show the costs of the deployment in every cluster.

Screenshot Multi-Cluster

TODO

Still a lot of work to be done:

  • add additional annotation for namespaces ...