@janus-idp/backstage-plugin-argocd

Argocd plugin for Backstage

Welcome to the argocd plugin!

This plugin was created through the Backstage CLI

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 ArgoCD 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 ArgoCD backend

// packages/backend/src/index.ts

import argocd from './plugins/argocd';
...

const argocdEnv = useHotMemoize(module, () => createEnv('argocd'));
...
apiRouter.use('/argocd', await argocd(argocdEnv));

• 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

2. 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 argocd 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 defaultto the first argocd 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
        pluginConfig:
          argocd:
            username: "${ARGOCD_USERNAME}"
            password: "${ARGOCD_PASSWORD}"
            appLocatorMethods:
              - type: 'config'
                instances:
                  - name: argoInstance1
                    url: "${ARGOCD_INSTANCE1_URL}"
                    token: "${ARGOCD_AUTH_TOKEN}"
        - package: ./dynamic-plugins/dist/janus-idp-backstage-plugin-argocd
          disabled: false
          pluginConfig:
            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

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.