@janus-idp/backstage-plugin-argocd

Argo CD plugin for Backstage

Getting started

Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running yarn start in the root directory, and then navigating to /argocd/deployment-lifecycle.

You can also serve the plugin in isolation by running yarn start in the plugin directory. This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads. It is only meant for local development, and the setup for it can be found inside the /dev directory.

For Administrators

Installation and configuration

Prerequisites

• Install @roadiehq/backstage-plugin-argo-cd-backend plugin using the following command from the root directory

yarn workspace app add @roadiehq/backstage-plugin-argo-cd-backend

• Create plugin file for Argo CD backend in your packages/backend/src/plugins/ directory.

// packages/backend/src/plugins/argocd.ts

import { createRouter } from '@roadiehq/backstage-plugin-argo-cd-backend';

import { PluginEnvironment } from '../types';

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

• Modify your backend router to expose the APIs for Argo CD backend

// packages/backend/src/index.ts

import {legacyPlugin} from '@backstage/backend-common';
...

backend.add(legacyPlugin('argocd', import('./plugins/argocd')));

• add argocd instance information in app.config.yaml

argocd:
  appLocatorMethods:
    - type: 'config'
      instances:
        - name: argoInstance1
          url: https://argoInstance1.com
          username: ${ARGOCD_USERNAME}
          password: ${ARGOCD_PASSWORD}
        - name: argoInstance2
          url: https://argoInstance2.com
          username: ${ARGOCD_USERNAME}
          password: ${ARGOCD_PASSWORD}

How to add argocd frontend plugin to Backstage app

1. Install the Argocd plugin using the following command:

yarn workspace app add @janus-idp/backstage-plugin-argocd

1. Add deployment summary and deployment lifecycle compoennt to the entityPage.tsx source file:

// packages/app/src/components/catalog/EntityPage.tsx
import {
  ArgocdDeploymentSummary,
  ArgocdDeploymentLifecycle,
  isArgocdConfigured,
} from '@janus-idp/backstage-plugin-argocd';

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    ...
    <EntitySwitch>
      <EntitySwitch.Case if={e => Boolean(isArgocdConfigured(e))}>
        <Grid item sm={12}>
          <ArgocdDeploymentSummary />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
    ...
  </Grid>
);


const cicdcontent = (
    <EntitySwitch>
        {/* ... */}
        {/* highlight-add-start */}
        ...
          <EntitySwitch.Case if={e => Boolean(isArgocdConfigured(e))}>
            <Grid item sm={12}>
              <ArgocdDeploymentLifecycle />
            </Grid>
          </EntitySwitch.Case>
        {/* highlight-add-end */}
    </EntitySwitch>
);

• The following annotation is added to the entity's catalog-info.yaml file to enable Argo CD features in the backstage instance:

  annotations:
    ...
  
    argocd/app-selector: 'rht-gitops.com/janus-argocd=quarkus-app'
  
  

• To switch between argocd instances, you can use the following annotation

 annotations:
   ...
    argocd/instance-name: 'argoInstance2'

Note: If this annotation is not set, the plugin will default to the first Argo CD instance configured in the app.config.yaml

Loading as Dynamic Plugin

To install this plugin into Red Hat Developer Hub or Janus IDP via Helm use this configuration:

global:
  dynamic:
    includes:
      - dynamic-plugins.default.yaml
    plugins:
      - package: ./dynamic-plugins/dist/roadiehq-backstage-plugin-argo-cd-backend-dynamic
        disabled: false
      - package: ./dynamic-plugins/dist/janus-idp-backstage-plugin-argocd
        disabled: false

This plugin can be loaded in backstage showcase application as a dynamic plugin.

Follow the below steps -

• Export dynamic plugin assets. This will build and create the static assets for the plugin and put it inside dist-scalprum folder.

yarn install

yarn tsc

yarn build

yarn export-dynamic

• Package and copy dist-scalprum folder assets to dynamic-plugins-root folder in showcase application.

pkg=../plugins/argocd
archive=$(npm pack $pkg)
tar -xzf "$archive" && rm "$archive"
mv package $(echo $archive | sed -e 's:\.tgz$::')

• Add the extension point inside the app-config.yaml or app-config.local.yaml file.

dynamicPlugins:
  frontend:
    janus-idp.backstage-plugin-argocd:
      mountPoints:
        - mountPoint: entity.page.overview/cards
          importName: ArgocdDeploymentSummary
          config:
            layout:
              gridColumnEnd:
                lg: 'span 8'
                xs: 'span 12'
            if:
              allOf:
                - isArgocdAvailable
        - mountPoint: entity.page.cd/cards
          importName: ArgocdDeploymentLifecycle
          config:
            layout:
              gridColumn: '1 / -1'
            if:
              allOf:
                - isArgocdConfigured

For more detailed explanation on dynamic plugins follow this doc.