Plugins ArgoCD

Este plugin apenas mostra um card em um component com o status da aplicação no ArgoCD.

Antes de começar crie uma role no ArgoCD chamada backstage ou qualquer outro nome que quiser. Para estudo dê todas as permissões para esse role e gere um token. Se estiver usando o lab já foi feito isso dentro do values.yaml que usamos para subir o argocd. Inclusive demos permissões RBAC lá dentro.

O token precisa estar exportado nas variaveis de ambiente pois vamos referênciá-la. É necessário estar neste formato abaixo.

ARGOCD_AUTH_TOKEN_BACKSTAGE='argocd.token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

yarn --cwd packages/app add @roadiehq/backstage-plugin-argo-cd

O app-config.yaml precisa receber a configuração para o argo.

proxy:
  '/argocd/api':
    target: http://argo.localhost/api/v1/
    changeOrigin: true
    # only if your argocd api has self-signed cert
    secure: false
    headers:
      Cookie:
        $env: ARGOCD_AUTH_TOKEN_BACKSTAGE

Para mais instâncias do ArgoCD consulte a documentação do plugin.

Agora vamos adicionar o argo no catalog na pagina das entidades.

import {
  EntityArgoCDOverviewCard,
  isArgocdAvailable
} from '@roadiehq/backstage-plugin-argo-cd';

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    {entityWarningContent}
    <Grid item md={6}>
      <EntityAboutCard variant="gridItem" />
    </Grid>
    <EntitySwitch>
      <EntitySwitch.Case if={e => Boolean(isArgocdAvailable(e))}>
        <Grid item sm={6}>
          <EntityArgoCDOverviewCard />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
    <Grid item md={6} xs={12}>
      <EntityCatalogGraphCard variant="gridItem" height={400} />
    </Grid>
    <Grid item md={4} xs={12}>
      <EntityLinksCard />
    </Grid>
    <Grid item md={8} xs={12}>
      <EntityHasSubcomponentsCard variant="gridItem" />
    </Grid>
  </Grid>
);

Criei um repositório com uma aplicação frontend e backend em node chamado backestage-argocd-app.

Explicando a estrutura. A ideia é simular um monorepo no Backstage que é o pior caso.

Como o Backstage está varrendo o repositório em busca de catalog-info.yaml teremos ele em várias partes do código.

# Esse primeiro catalog define um system, pois um system é um conjunto de components.
tree -L 2
.
├── LICENSE
├── README.md
├── catalog-info.yaml # Define um system no backestage
└── project # pasta que contém os vários projetos.
    ├── backend
    ├── docker-compose.yaml
    └── frontend

Dentro de project temos o frontend e o backend que são dois components, cada um tem a sua pasta de docs e seu catalog, inclusive mesmo estando no mesmo repositório pertencem a times (groups) diferentes. Esses components possuem uma chave que define qual é o nome do application no ArgoCD.

#...
  annotations:
    backstage.io/techdocs-ref: dir:.
    github.com/project-slug: davidpuziol/backstage-argocd-app
    # Este é o mesmo nome que daremos ao application mais adiante.
    argocd/app-name: node-frontend
#...

Ambos os projetos são components e pertecem ao system definido no projeto chamado software-example.

No caso do backend ele também tem um api que foi referenciada dentro do components.

Em cada projeto temos duas pastas:

• kubernetes: possui o helm chart que cria a aplicação no kubernetes. Este será aplicado pelo argocd.
• argocd: possui o manifesto application que define uma aplicação argocd. O mesmo nome que daremos a ele será o mesmo nome da annotation.

Quando instalamos o ArgoCD já demos a ele as credenciais para as contas do GitHub e GitLab então é só aplicar os manifestos

#Exemplo applications.yaml
apiVersion: argoproj.io/v1alpha1
kind: Application
metadata:
  name: node-frontend # O nome da annotation
  namespace: argocd
spec:
  project: default
  source:
    repoURL: 'https://github.com/davidpuziol/backstage-argocd-app'
    targetRevision: HEAD
    # onde está o helm chart dentro do repositório
    path: project/frontend/kubernetes/node-frontend
  destination:
    server: 'https://kubernetes.default.svc'
    namespace: applications
  syncPolicy:
    automated:
      prune: true
      selfHeal: true
    syncOptions:
      - Validate=false
      - CreateNamespace=true
---
apiVersion: argoproj.io/v1alpha1
kind: Application
metadata:
  name: node-backend # O nome da annotation
  namespace: argocd
spec:
  project: default
  source:
    repoURL: 'https://github.com/davidpuziol/backstage-argocd-app'
    targetRevision: HEAD
    # onde está o helm chart dentro do repositório
    path: project/backend/kubernetes/node-backend
  destination:
    server: 'https://kubernetes.default.svc'
    namespace: applications
  syncPolicy:
    automated:
      prune: true
      selfHeal: true
    syncOptions:
      - Validate=false
      - CreateNamespace=true

kubectl apply -f applications.yaml

E temos isso no argocd.

E no Backstage temos o card do ArgoCD.