Backstage OpenDORA Plugin

OpenDORA brings the four DORA metrics into your Backstage portal. It uses Apache DevLake to collect data from tools like GitHub, GitLab, Jira, and Jenkins. The plugin calls the OpenDORA API and renders clear charts inside Backstage. You see delivery performance where engineers already work.DORA is a well known way to track software delivery. The four metrics are deployment frequency, lead time for changes, change failure rate, and time to restore service. OpenDORA supports all four so teams get a balanced view of speed and stability.

The plugin focuses on teams and groups. You can review trends over time for the services in your catalog. You can compare groups to spot bottlenecks. You can use the views in retros to ground conversations in data. This helps product owners and managers see progress without switching tools.OpenDORA is open source. It fits a self hosted Backstage setup and avoids a vendor lock in. If you already run DevLake or plan to, the plugin gives you a simple path to surface those insights. For engineers, the value is quick feedback on delivery health. For platform teams, the value is one place to share metrics with the org.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Install the frontend plugin

Run this from the Backstage root

Copy

yarn --cwd packages/app add @devoteam-nl/open-dora-backstage-plugin

Configure the OpenDORA API

Set the API base URL in your app config

Copy

# app-config.yaml
open-dora:
  apiBaseUrl: http://localhost:10666

You need a running OpenDORA backend. Deploy it first using the OpenDORA deployment guide

https://github.com/DevoteamNL/opendora/blob/main/devlake-go/DEPLOYMENT.md

Use the URL of that service in apiBaseUrl

Add the route to the app

Edit packages/app/src/App.tsx

Copy

import React from 'react';
import { Route } from 'react-router-dom';
import { FlatRoutes } from '@backstage/core-app-api';
import { OpenDoraPluginPage } from '@devoteam-nl/open-dora-backstage-plugin';

export const App = () => (
  <FlatRoutes>
    {/* other routes */}
    <Route path="/open-dora" element={<OpenDoraPluginPage />} />
  </FlatRoutes>
);

Edit packages/app/src/components/Root/Root.tsx

Copy

import React, { PropsWithChildren } from 'react';
import {
  SidebarPage,
  Sidebar,
  SidebarGroup,
  SidebarItem,
} from '@backstage/core-components';
import ExtensionIcon from '@mui/icons-material/Extension';
import MenuIcon from '@mui/icons-material/Menu';

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      {/* other sidebar groups */}
      <SidebarGroup label="Menu" icon={<MenuIcon />}>
        {/* other sidebar items */}
        <SidebarItem icon={ExtensionIcon} to="open-dora" text="OpenDORA" />
      </SidebarGroup>
      {/* other sidebar groups */}
    </Sidebar>
    {children}
  </SidebarPage>
);

Changelog

The OpenDORA plugin has not seen any significant changes since a year ago.

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

Get a demo

Installation Instructions

Install the frontend plugin

Configure the OpenDORA API

Add the route to the app

Add a sidebar item

Changelog

Set up Backstage in minutes with Roadie