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.

| Attribute | Type | Default | Description | | --------- | ------ | -------- | ------- | | heading | String | Docker | The table Header | | columns | array | ['name', 'username', 'status', 'architecture'] | The columns that are shown. Possible values: name, username, status, architecture| | initialPage | number | 0 | The first page that is shown | | pageSize | number | 5 | The default page size | | pageSizeOptions | array | [5, 10, 25] | Possible page sizes. Must include pageSize | | showCountInHeading | boolean | true | If true, it shows the count of the total amount of Docker images in the heading. |

By default, the table looks like this.

By disabling some columns, you can make it fit in smaller areas

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.