Backstage Harbor plugin

Welcome to the harbor plugin! This plugin will show you information about your docker images within harbor

Getting started

Enabling frontend

cd package/app
yarn add @bestsellerit/backstage-plugin-harbor

// packages/app/src/plugins.ts
export { plugin as harbor } from '@bestsellerit/backstage-plugin-harbor';

// packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityHarborContent,
  EntityHarborWidgetCard,
  isHarborAvailable,
} from '@bestsellerit/backstage-plugin-harbor';

const serviceEntityPage = (
  <EntityPageLayout>
    // ...
    <EntityLayout.Route path="/harbor" title="Harbor">
      <EntityHarborContent />
    </EntityLayout.Route>
  </EntityPageLayout>
)

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

const overviewContent = (
  <Grid container spacing={6} alignItems="stretch">
   // ...
    <EntitySwitch>
      <EntitySwitch.Case if={isHarborAvailable}>
        <Grid item>
         <EntityHarborWidgetCard/>
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
    ...
  </Grid>
);

Enabling backend

cd packages/backend
yarn add @bestsellerit/backstage-plugin-harbor-backend

Create a new file named packages/backend/src/plugins/harbor.ts, and add the following to it

import { createRouter } from '@bestsellerit/backstage-plugin-harbor-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';

export default async function createPlugin({
  logger,
  config,
}: PluginEnvironment): Promise<Router> {
  return await createRouter({ logger, config });
}

And finally, wire this into the overall backend router. Edit packages/backend/src/index.ts

import harbor from './plugins/harbor';
// ...
async function main() {
  // ...
  const harborEnv = useHotMemoize(module, () => createEnv('harbor'));
  apiRouter.use('/harbor', await harbor(harborEnv));

Configuration

The plugin requires configuration in the Backstage app-config.yaml to connect to harbors API.

harbor:
  baseUrl: https://harbor.yourdomain.com
  username: 
    $env: HARBOR_USERNAME
  password:
    $env: HARBOR_PASSWORD

Adding annotations and values to your component file.

apiVersion: backstage.io/v1alpha1
kind: System
metadata:
  name: sample-system
  description: "A sample system"
  annotations:
    goharbor.io/repository-slug: project/repository

Contributing

Everyone is welcome to contribute to this repository. Feel free to raise issues or to submit Pull Requests.