Skip to main content

Plugins No Backstage

Backstage Plugins List

No Backstage, plugins são componentes modulares que estendem as funcionalidades da plataforma. Eles fornecem recursos específicos e podem ser personalizados para atender às necessidades de diferentes equipes e projetos.

Tipos de Plugins​

  • Plugins de Core: Vêm com a instalação padrão, como o Catalog, TechDocs, e Scaffolder.

  • Plugins de Terceiros: Criados por comunidades e empresas. Exemplos incluem integrações com GitHub, Jira e Kubernetes. Temos os plugins community no repositório do backstage e outros fora daqui.

  • Plugins Customizados: Desenvolvidos internamente para atender necessidades específicas, como integração com sistemas internos.

Os plugins são na maioria das vezes de interface do usuário que você pode usar para alterar a visualização. Pode usar usado para inserir novas abas, novos cards.

Os plugins também podem possuir duas partes, frontend e backend, mas depende bastante do plugin.

Se observarmos aqui no plugin do github actions possui o frontend (app) e o backend. Essa nomemclatura não é padronizada, nem sempre chama pp ou backend.

alt text

A maioria dos plugins precisam de alguma annotation como foi o caso que tivemos com o techdos-ref anteriormente. Somente foi habilitado quando colocamos essa annotation.

Quando na visualização de alguma entidade queremos ativar o plugin passamos a annotation.

Para ilustrar, vamos instalar o plugin do github actions.

O melhor lugar para buscar informações sobre um plugin é no próprio readme do plugin.

Para esse plugin precisamos de instalar o pacotes tanto no app quanto no backend.

yarn --cwd packages/app add @backstage-community/plugin-github-actions
yarn --cwd packages/backend add @backstage/plugin-auth-backend-module-github-provider

E adicionar no packages/backend/src/index.ts

//Como já criei um auth customizado não que utiliza esses provider não precisamos dele.
backend.add(import('@backstage/plugin-auth-backend-module-github-provider'));

Em packages/app/src/components/catalog/EntityPage.tsx , vamos adicionar algum código.

// O importe necessário
import {
  EntityGithubActionsContent,
  isGithubActionsAvailable,
} from '@backstage-community/plugin-github-actions';

// Na parte de cicd podemos adicionar o gitlab action
const cicdContent = (
  // This is an example of how you can implement your company's logic in entity page.
  // You can for example enforce that all components of type 'service' should use GitHubActions
  <EntitySwitch>

      <EntitySwitch.Case if={isGithubActionsAvailable}>
        <EntityGithubActionsContent />
      </EntitySwitch.Case>

    <EntitySwitch.Case>
      <EmptyState
        title="No CI/CD available for this entity"
        missing="info"
        description="You need to add an annotation to your component if you want to enable CI/CD for it. You can read more about annotations in Backstage by clicking the button below."
        action={
          <Button
            variant="contained"
            color="primary"
            href="https://backstage.io/docs/features/software-catalog/well-known-annotations"
          >
            Read more
          </Button>
        }
      />
    </EntitySwitch.Case>
  </EntitySwitch>
);

Crie uma action lá no github no repositório.

Olhando uma entidade que já temos podemos ver que a aba não apareceu.

alt text

Para habilitar é necessário colocar a annotation no componente.

apiVersion: backstage.io/v1alpha1
kind: Component # Nosso tipo
metadata:
  name: artist-web # Neste caso precisa ser um ÚNICO.
  description: The place to be, for great artists
  labels:
    example.com/custom: custom_label_value
  annotations:
    example.com/service-discovery: artistweb
    circleci.com/project-slug: github/example-org/artist-website
    backstage.io/techdocs-ref: dir:.
    github.com/project-slug: 'davidpuziol/backstage-things-1' ## De qual projeto estamos buscando a action, no caso o mesmo projeto.

E vamos que na parte de cicd já temos alguma coisa.

alt text

Em outro componenete ou entidade não irá ter nada sobre github action se não utilizar a annotation. É necessário que em todos os projetos todos usem essa label.

Observe que em vários plugins temos uma variável parecida com essa. isGithubActionsAvailable. Isso funciona para saber se a annotation foi ou não encontrada no arquivo yaml. Se for encontrada então o if será true <EntitySwitch.Case if={isGithubActionsAvailable}> e o plugin utilizado.

Funcionalidades Comuns de Plugins​

Podemos deixar vários plugins instalados que só serão utilizados caso sejam avisados pelas annotations.

Existem alguns plugins que já vem pronto para uso e já mensionamos anteriormente.

  • Catalog: Gere e visualize serviços, componentes e APIs.
  • TechDocs: Documentação baseada em Markdown integrada ao Backstage.
  • Scaffolder: Automatiza a criação de novos projetos e componentes.
  • Kubernetes: Monitora o status de serviços no Kubernetes.

Claro que o uso de plugins depende muito do portal que queremos montar e qual a steck de tecnologia estamos usando. Não adiantar ter um plugin para o Dynatrace se não usarmos.

Plugins Gerais​

Alguns plugins valem a pena ser mensionados pois trazem melhorias na parte de interface.

Announcements​

É um plugin interessante mostrar anúncios. Pode ser usado para avisar sobre novas integrações, novas releases, novos membro das equipe, mudanças gerais, etc.

É necessário ser instalado no front e backend.

yarn --cwd packages/backend add @procore-oss/backstage-plugin-announcements-backend
yarn --cwd packages/app add @procore-oss/backstage-plugin-announcements

EOF

Para configurar no backend é necessário a chamdad no plugin no packages/backend/src/index.ts antes do backend.start()

 backend.add(import('@procore-oss/backstage-plugin-announcements-backend'));

Em no app vamos adicionar no packages/app/src/App.tsx

import { AnnouncementsPage } from '@procore-oss/backstage-plugin-announcements';

// Adicione em FlatRoutes que provavelmente já existe
const routes = (
  <FlatRoutes>
    // ...
    <Route path="/announcements" element={<AnnouncementsPage />} />
    // ...
  </FlatRoutes>
);

Até ai criamos uma rota. Para fixar no sidebar adicionamos esta rota em packages/app/src/components/Root/Root.tsx


export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      ...
      <SidebarGroup label="Menu" icon={<MenuIcon />}>
        ...
        <SidebarItem icon={AnnouncementIcon} to="announcements" text="Announcements" />
        ...
      </SidebarGroup>
    </Sidebar>
  </SidebarPage>

Outra situacao​

Aqui neste ponto podemos ver que temos o Installed Actions.

alt text

E podemos ver o que temos por padrão.

alt text

Adicionando um plugin podemos extender essas ações.

Vamos fazer um exercício com um plugin simples. Criar um template para executar ações no github. Esse template envia os valores para criar um manifesto e fazer o push para o github. Como é uma tarefa comum vamos aproveitar e usar um plugin disponível.

Precisamos puxar o pacote do plugin que queremos.

yarn --cwd packages/backend add @backstage/plugin-scaffolder-backend-module-github
yarn --cwd packages/backend add @backstage/plugin-catalog-backend-module-github

E avisar que esse plugin deve ser carregado. Se somente instalarmos o pacote e não importar não adianta nada.

Para isso precisamos editar o arquivo packages/backend/src/index.ts e adicionar antes de backend.start(); Para importar esses módulos.

alt text

Parando e rodando novamente com yarn dev vamos analisar as novas actions que temos. Veja que o scroll já cresceu.

alt text

Podemos observar que as actions são realizadas através de plugins. Toda action precisa dos inputs, mas nem todas geram outputs.

Plugins para ficar de olho​

Segurança​

Scaffolder​

Esse plugins criam novas actions

Qualidade e Monitoramento​

CICD​

Auth​

Outros​