@workm8/backstage-docker-tags v1.0.5

Workm8 Docker plugin

Installation

Install the @workm8/backstage-docker-tags package in your frontend app package:

# From your Backstage root directory
yarn add --cwd packages/app @workm8/backstage-docker-tags

Set the proxy

In your app-config.yaml located in the root directory we'll need to add a proxy to hub.docker.com. Under proxy, add the following:

proxy:
  endpoints:
    '/docker':
      target: 'https://hub.docker.com'
      changeOrigin: true

Usage

Update your EntityPage

In your EntityPage.tsx file located in packages\app\src\components\catalog we'll need to make a few changes to get the Docker

First we need to add the following imports:

import { DockerTagsTableWidget } from '@workm8/backstage-docker-tags';

You can display the Widget by adding the following code (for example, the overviewContent):

+ const dockerTagsContent = (
+    <DockerTagsTableWidget 
+       heading="Docker" 
+       columns={['name', 'username', 'status']} />
+ );

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    {entityWarningContent}
    <Grid item md={4}>
      <EntityAboutCard variant="gridItem" />
    </Grid>
    <Grid item md={4} xs={12}>
      <EntityCatalogGraphCard variant="gridItem" height={400} />
    </Grid>
+    <Grid item md={4} xs={12}>
+      {dockerTagsContent}
+    </Grid>
    <Grid item md={4} xs={12}>
      <EntityLinksCard />
    </Grid>
    <Grid item md={8} xs={12}>
      <EntityHasSubcomponentsCard variant="gridItem" />
    </Grid>
  </Grid>
);

Annotate your components

By adding the docker.com/repository annotation to your component, the DockerRepositoriesWidget will fetch all the versions from hub.docker.com.

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: Grafana
  annotations:
+    docker.com/repository: 'grafana/grafana'

Configuration

You can override the default header, columns and pagination.

Private repositories

For private repositories, you need to create a Personal Access Token on Docker Hub. This Personal Access Token needs to be added in the proxy.

  endpoints:
    '/docker':
      target: 'https://hub.docker.com'
      changeOrigin: true
+      headers:
+        Authorization: {PERSONAL_ACCESS_TOKEN}

Issues

If you come across any issues, please don't hesitate to open a GitHub issue.