Skip to main content

Criando plugin no backstage

Plugin az-secrets​

O plugin az-secrets tem como objetivo da visibilidade as secrets criada no Azure AD ajudando no gerenciamento e renovação. Ele consome uma API local escrita em Python e apresenta os dados em uma tabela interativa dentro do portal Backstage. A solução foi proposta para da visibilidade aos times que não precisa ter acesso a Azure mas é prejudicado quando uma secret expira.

request caminho

Criando o plugin​

Para criar o plugin use o comando abaixo e escolha a opção frontend-plugin.

yarn new

#SAINDA PARA VOCE ESCOLHER O TIPO DE PLUGIN

# ? What do you want to create? (Use arrow keys)
# ❯ frontend-plugin - A new frontend plugin 
#   backend-plugin - A new backend plugin 
#   backend-plugin-module - A new backend module that extends an existing backend plugin 
#   plugin-web-library - A new web library plugin package 
#   plugin-node-library - A new Node.js library plugin package 
#   plugin-common-library - A new isomorphic common plugin package 
#   web-library - A library package, exporting shared functionality for web environments 
# (Move up and down to reveal more choices)

Essa opção foi escolhida porque vai ser consomido uma API externa (sem autenticação complexa) e não precisa armazenar, transformar ou proteger dados no backend.

O plugin será criado dentro da pasta backstage/Name/plugins com essa arquitetura.

request caminho

Principais componentes criado

  • SecretsTableComponent.tsx: componente React que consome a API e renderiza os dados.
  • AzSecretsPage.tsx: página principal do plugin, que encapsula o componente em layout padrão do Backstage.
  • index.ts: usado para exportar os componentes e permitir importações limpas no app principal.

Integração com API​

Escolhi chamar a API diretamente via fetch no frontend, sem usar o estrutura backend, proxy.

fetch('http://localhost:5001/api/mocked')

Configuração Backstage​

O Backstage precisa saber que existe uma nova página acessível em /secret. Isso é feito no arquivo:

# path packages/app/src/App.tsx

import { AzSecretsPage } from '@backstage/plugin-az-secrets';
<Route path="/secret" element={<AzSecretsPage />} />

Isso garante que ao acessar http://localhost:3000/secret, o Backstage renderize a página do plugin.

Para que o app consiga importar AzSecretsPage, o plugin precisa exportá-lo corretamente.

# plugins/az-secrets/src/components/index.ts
export { AzSecretsPage } from './AzSecretsPage';
#plugins/az-secrets/src/index.ts
export { AzSecretsPage } from './components';

Essa cadeia de exportações permite que o app use:

import { AzSecretsPage } from '@backstage/plugin-az-secrets';

Para facilitar o acesso ao plugin, adicionei um item no menu lateral:

#packages/app/src/components/Root.tsx

import VpnKeyIcon from '@material-ui/icons/VpnKey';
<SidebarItem icon={VpnKeyIcon} to="/secret" text="AZ Secrets" />

O ícone e o texto são personalizáveis. O to="/secret" deve bater com a rota registrada.