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 🙏

© 2024 – Pkg Stats / Ryan Hefner

@get-dx/backstage-plugin

v0.6.0

Published

Backstage plugin for DX! https://getdx.com

Downloads

897

Readme

DX Backstage Frontend Plugin

DX Backstage frontend plugin to display DX data in your Backstage app.

Setup

  1. Ensure your backstage services are annotated with the github.com/project-slug annotation.

  2. Ensure DX backend plugin is installed and working @get-dx/backstage-backend-plugin.

  3. Install this plugin in your backstage frontend —

yarn --cwd packages/app add @get-dx/backstage-plugin
  1. We provide an "all-in-one" DX dashboard component. Install that by adding a route to your service entity page —
// packages/app/src/components/catalog/EntityPage.tsx
import { EntityDXDashboardContent } from '@get-dx/backstage-plugin';

const serviceEntityPage = (
  <EntityLayout>
    <EntityLayout.Route path="/dx" title="DX">
      <EntityDXDashboardContent />
    </EntityLayout.Route>
  </EntityLayout>
)

See the Components section below for other components offered.

Components

We export a few Dashboard pages, as well as the individual components that make up the dashboards so you can render them wherever you like.

They can be rendered on both Component and Group entity pages.

| Component | Description | | ----------------------------------- | --------------------------------------------------------------------- | | <EntityDXDashboardContent /> | Dashboard with all available DX Charts. | | <EntityDORAMetricsContent /> | Dashboard with all the DORA metric charts. | | <EntityChangeFailureRateCard /> | Line chart showing Change Failure Rate for the service. | | <EntityDeploymentFrequencyCard /> | Line chart showing Deployment Frequency for the service. | | <EntityOpenToDeployCard /> | Line chart showing Open to Deploy time for the service. | | <EntityTimeToRecoveryCard /> | Line chart showing Time to Recovery for the service. | | <EntityTopContributorsTable /> | Table showing top contributors by pull request count for the service. |

Configuration

Application Id

This plugin respects the same appId configuration as the backend plugin to distinguish multiple instances of backstage within DX. Can be any string as long as it's unique within your DX account.

# app-config.yaml
dx:
  appId: staging

Development

yarn install and yarn start will start a local dev server showing the UI of this component. See dev/index.tsx for setup.

To see real data, link to a local backstage instance and use yalc.