@rsc-labs/backstage-highlights-plugin-backend NPM

@rsc-labs/backstage-highlights-plugin-backend

Backstage Highlights Plugin is configurable and customizable plugin for viewing the most important information about your entity.

Why?

We have a lot information from different plugins and also in Overview tab, but sometimes:

we want to see some short summary from couple of plugins
we do not want to jump to every card to get such information

The "Highlights" shall provide you possibility to create such small, useful view.

Getting started

If you haven't already, check out the Backstage docs and create a Backstage application with

npx @backstage/create-app

Then, you will need to install and configure the highlights plugins for the frontend and the backend. Frontend plugin installation can be found here: Frontend plugin

Backend plugin

Install:

cd packages/backend
yarn add @rsc-labs/backstage-highlights-plugin-backend

Create a file packages/backend/src/plugins/highlights.ts:

import {
    createRouter,
  } from '@rsc-labs/backstage-highlights-plugin-backend';
  import { Router } from 'express';
  import { PluginEnvironment } from '../types';
  
  export default async function createPlugin(
    env: PluginEnvironment,
  ): Promise<Router> {
    return await createRouter({
      discovery: env.discovery,
      tokenManager: env.tokenManager,
      logger: env.logger,
      config: env.config
    });
  }

Add the plugin to packages/backend/src/index.ts:

// import:
import highlights from './plugins/highlights';
...

async function main() {
  ...
  // add env
  const highlightsEnv = useHotMemoize(module, () => createEnv('highlights'));
  ...
  // add to router
  apiRouter.use('/highlights', await highlights(highlightsEnv));
  ...
}

Catalog-info.yaml

Backend plugin supports two providers - Github and Gitlab. They are providing information for built-in fields mentioned in Frontend plugin. Plugin uses following annotations from catalog-info.yaml:

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: example-website
  annotations:
    github.com/project-slug: rsc-labs/backstage-changelog-plugin
    gitlab.com/project-slug: owner/project

Both annotations are supported (so your component can be in github or gitlab). In theory case if you have both annotations, github takes precedence.

App-config

To have properly working Github or Gitlab, you need also provide information about token and potentially about base url. You have two options how to provide it 1) Custom highlights configuration 2) Integration configuration

Below you can find implemented both options:

highlights:
  gitlab:
    token: ${GITLAB_TOKEN}
    apiBaseUrl: https://gitlab.com/api/v4
  github:
    token: ${GITHUB_TOKEN}

integrations:
  gitlab:
      - token: ${GITLAB_TOKEN}
  github:
      - token: ${GITHUB_TOKEN}

If provided, "highlights" configuration takes precendece over "integrations". Note: "highlights" configuration requires providing "apiBaseUrl", while it is not needed in "integrations" (if you are using default one)

Multiple Gitlab instances

We start supporting also multiple Gitlab instances for both highlights and integrations in app-config. Below you can find instruction and example of configuration.

1) If you would like to use "highlights" configuration, then you need to change it to a list instead of one object. Additionally, we need to be able to figure out which instance is used for which entity, so host annotation is needed (see example below). For backward compatibility, we still support single object. 2) Similarly with integrations. We already support a list, but to use multiple Gitlab instances, you need to also provide host and apiBaseUrl (see example below)

Example of both options in one configuration:

highlights:
  gitlab:
    - host: gitlab.com
      token: ${GITLAB_TOKEN}
      apiBaseUrl: https://gitlab.com/api/v4
    - host: gitlab1.com
      token: ${GITLAB2_TOKEN}
      apiBaseUrl: https://gitlab1.com/api/v4
  github:
    token: ${GITHUB_TOKEN}

integrations:
  gitlab:
    - host: gitlab.com
      token: ${GITLAB_TOKEN}
    - host: gitlab1.com
      token: ${GITLAB2_TOKEN}
      apiBaseUrl: https://gitlab1.com/api/v4
  github:
    - host: github.com
      token: ${GITHUB_TOKEN}

At the same time, your entity shall have proper annotations, for example:

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: example-website
  annotations:
    github.com/project-slug: rsc-labs/backstage-changelog-plugin
    gitlab.com/project-slug: owner/project
    gitlab.com/instance: gitlab1.com

Taking above example - component example-website will use gitlab1.com, which maps to values: