IBGC-architecture

Arquitetura de TI · IBGC

Um único lugar para ver como os sistemas do IBGC se conectam — sem depender de PDFs que envelhecem. Um app web que mapeia a TI no modelo C4 e ainda lê o ambiente Microsoft ao vivo.

A tela inicial mostra só os grandes sistemas — a visão de contexto, pensada para a liderança. Cada bloco é clicável e dá zoom: a "câmera" entra no sistema e revela a infraestrutura interna (containers, bancos, APIs, fluxos, recursos de nuvem), do panorama ao detalhe.

Hoje o projeto cobre o cenário atual (as-built) — mapeado à mão e enriquecido com dados ao vivo. A arquitetura-alvo (estado futuro) está no roadmap.

Visão de Contexto — a tela inicial (C4 · Nível 1)

Por que existe

A TI do IBGC cresceu em sistemas, integrações e nuvem, mas sem um mapa comum que sirva de referência. Este projeto é a base da arquitetura de TI de referência (Meta 1 do OKR de TI): mapear o cenário atual, dar uma linguagem visual única para decisões técnicas e manter tudo atualizado — porque parte do diagrama é lida direto das plataformas, não digitada à mão.

Destaques

🗺️ Modelo C4 navegável — contexto → contêineres → componentes, cada nível é uma URL real, com breadcrumb para subir e descer.
⚡ (somente leitura, via login da própria conta) — Azure, Power Platform e Microsoft 365 são lidos em tempo real.

Por dentro: as telas ao vivo

Além do diagrama estático, a app conversa com o ambiente Microsoft do IBGC em tempo real (somente leitura):

Camada	Rota	O que mostra (ao vivo)
Azure	`/microsoft/azure`	Inventário de recursos (ARM) — diagrama por grupo/tipo e lista — + explorador de blobs (containers → pastas → arquivos). Alterna entre os 2 tenants.
Dataverse	`/microsoft/power-platform/dataverse`	Todas as tabelas do ambiente + colunas + relacionamentos + esquema visual
Power Automate	`…/power-automate/monitor`	Catálogo de fluxos, status e execuções, com varredura em streaming
Microsoft 365	`/microsoft/m365`	Caixas de correio (Outlook) e sites do SharePoint, via Microsoft Graph
Web Services (legado)	`/webservices`	14 operações do `Usuariowebservice.asmx` (SOAP), mapeadas do WSDL

⚡ nas rotas = exige login Microsoft (e a permissão certa em cada plano).

Infraestrutura Azure

Os dois diretórios (tenants), as VMs, rede, Key Vault, Log Analytics, backup — e até as VMs em retenção, para inventário completo.

Mapa de infraestrutura

Ecossistema Microsoft

O hub Microsoft e suas plataformas: Microsoft 365, Dynamics 365, Power Platform e Azure — além dos SaaS de terceiros (Senior).

Ecossistema Microsoft (C4 · Nível 2)

Stack

Como rodar

npm install
Copy-Item .env.local.example .env.local   # defaults já apontam pro IBGC
npm run dev

Abra http://localhost:3000. O diagrama abre sem login; as telas ao vivo (⚡) pedem login Microsoft.

Scripts disponíveis

Script	O que faz
`npm run dev`	Servidor de desenvolvimento (localhost)
`npm run dev:fast`	Igual, com Turbopack (mais rápido)
`npm run dev:lan`	Expõe na rede local — o Next imprime a URL `Network:` com o IP da máquina (ex.: `http://192.168.0.x:3000`) para colegas acessarem
`npm run build` / `npm start`	Build e execução de produção
`npm run lint`	ESLint
`npm run inspect-wsdl`

Acesso pela rede corporativa: rode npm run dev:lan e compartilhe a URL Network que aparece no terminal. Quem estiver na mesma rede acessa. As integrações ao vivo continuam exigindo o login Microsoft de cada um.

Navegação como sistema de arquivos

A interface usa rotas reais — cada nível do diagrama é uma URL. Clique num bloco com seta → e a URL avança; o breadcrumb no topo mostra a trilha e volta a qualquer nível com um clique.

/                                                  Home — visão de contexto (C4 Nível 1)
├── /portal-web                                    Canais Digitais — sites públicos (Cloudflare)
├── /ead                                           Plataforma EAD (Canvas + IBGC OnDemand)
├── /erp                                           Senior — Gestão Empresarial (ERP · HCM · Wiipo)
├── /identidade                                    Identidade & SSO (Microsoft Entra ID)
├── /dados                                         Plataforma de Dados (ADLS · Synapse · Power BI)
├── /webservices                                   Web Services Legados (ASMX · SOAP · 14 operações)
├── /infra                                         Infraestrutura Azure (2 tenants)
└── /microsoft                                     Ecossistema Microsoft (C4 Nível 2)
    ├── /microsoft/azure                            ⚡ Recursos + explorador de blobs (ao vivo)
    ├── /microsoft/m365                             Microsoft 365
    │   ├── /microsoft/m365/outlook                  ⚡ Caixas de correio (Graph)
    │   └── /microsoft/m365/sharepoint               ⚡ Sites do SharePoint (Graph)
    └── /microsoft/power-platform                   Power Platform — containers
        ├── /microsoft/power-platform/dataverse      ⚡ Tabelas do ambiente (ao vivo)
        ├── /microsoft/power-platform/credenciamento Fluxo de credenciamento
        └── /microsoft/power-platform/power-automate Fluxos por categoria
            └── .../power-automate/monitor           ⚡ Monitor de execuções (ao vivo)

⚡ = integração ao vivo (requer login Microsoft).

Estrutura de pastas

app/
  page.tsx                          rota / (home)
  [...slug]/page.tsx                catch-all — qualquer profundidade do diagrama
  layout.tsx · globals.css
  microsoft/azure/                  página + layout (MSAL) do inventário Azure + blobs
  microsoft/m365/                   outlook · sharepoint (Microsoft Graph)
  microsoft/power-platform/
    dataverse/                      lista de tabelas + [entity] (detalhe)
    power-automate/monitor/         monitor de fluxos
  api/
    azure/subscriptions · resources       ARM (control plane)
    azure/storage/containers · blobs       Blob Storage (data plane)
    dataverse/env-url · tables · entity   Dataverse Web API
    power-automate/flows · scan           Flow Admin API (scan = NDJSON streaming)
    graph/users · sites                   Microsoft Graph (Outlook · SharePoint)
    webservice/usuario/[operation]        proxy JSON ↔ SOAP do ASMX
components/
  ArchitectureShell.tsx             wrapper: header + breadcrumb + canvas
  ArchitectureFlow.tsx              canvas React Flow + navegação por router
  nodes/                            System · Component · Hub · Group · Person · Junction
  edges/                            FloatingEdge · FloatingStepEdge (linhas quadradas animadas)
  ui/                               Breadcrumb · C4Legend
  azure/                            AzureResources · ResourceMap · StorageBrowser
  dataverse/                        Tables · EntityDetail · SchemaView · ConceptualModel · ...
  microsoft365/                     Mailboxes · Sites
  power-automate/                   Monitor · MsalProvider · SignIn
lib/
  architecture.json                 ← ÚNICA FONTE EDITÁVEL do diagrama (formato `views`)
  architecture.ts                   loader + resolveChildPath + tipos de nó/aresta
  floatingEdgeUtils.ts              cálculo do ponto de borda das linhas dinâmicas
  azure/resourceMeta.ts             mapeia tipo ARM → label/ícone/cor
  azure/blob.ts                     parser do XML de containers/blobs
  dataverse/classify.ts             classifica tabela por prefixo (IBGC, D365, etc.)
  dataverse/dagreLayout.ts          layout LR automático pros diagramas
  power-automate/                   msal · flow-api · cache · config (2 tenants Azure)
  webservices/                      config · soap · usuario · README.md
scripts/
  inspect-wsdl.mjs                  descobre operações de um .asmx
  analyze-flows.mjs                 categoriza flows_cache.json
docs/
  power-platform.md                 inventário do ambiente Dynamics/Power Platform
  screenshots/                      capturas usadas neste README

Editando a arquitetura — só mexa no JSON

Toda a estrutura do diagrama vem de lib/architecture.json. É um mapa de views indexadas por path:

Adicionar um sistema na home

Em views[""].nodes:

{
  "id"

category controla a cor: , , , , , .

Adicionar um sub-nível (drill-down)

Ponha hasDetail: true no nó e crie a view filha com path pai/id. Para um componente técnico (ComponentNode/HubNode/GroupNode), também declare o segmento filho em drillIns:

"microsoft": 
  ...
   
         ...

Linhas (edges)

As arestas usam linhas quadradas animadas com rótulo C4:

{ "from": "a", "to": "b", "label": "Cloud", "type": "floatingStep",

floatingStep — canto 90°, "gruda" dinamicamente no lado mais próximo de cada card ao arrastar (snap dinâmico).
floating — versão de linha reta com o mesmo snap.
label — o verbo/relação C4 (ex.: "expõe via", "integra contábil").

Tipos válidos

Integrações ao vivo (Microsoft)

Todas fazem somente leitura com a conta Microsoft de quem está usando (login OAuth via MSAL no navegador). Nenhum segredo fica no código — o token é obtido na hora e usado direto contra a API REST.

Os 2 diretórios (tenants)

O IBGC tem dois diretórios Entra ID, e a página do Azure alterna entre eles:

Tenant	Papel	App Registration
IBGC · ibgc.org.br	M365 + Power Platform + Azure	`1efbcfec-…` (`CLI-PowerAutomate-Reader`)
Default Directory	Só Azure (assinatura IBGC-PATROCINIO)	`cb63fedb-…`

O Default Directory é só de Azure — não tem Power Automate/Flow; pedir um token de Flow lá retorna AADSTS650052, e isso é esperado.

App Registration (configurar uma vez)

No portal Entra ID, cada App Registration precisa de:

Permissões de acesso (RBAC ≠ admin do M365)

⚠️ Ser Global Admin do Microsoft 365 não dá acesso aos recursos do Azure nem necessariamente ao environment. Cada plano tem seu controle:

Integração	Permissão necessária
Power Automate / Dataverse	System Administrator ou Environment Maker no environment
Azure (recursos)	Role Reader (ou superior) na subscription (Subscription → IAM)
Azure (blobs)	Role de dados `Storage Blob Data Reader` na storage account — Owner do ARM não basta
Microsoft 365	Graph `User.Read.All` / `Sites.Read.All` com admin consent

Azure — recursos + blobs

Acesse em /microsoft/azure. Lê todos os recursos provisionados via Azure Resource Manager (centenas de recursos, ~41 grupos, nos 2 tenants):

Diagrama (mapa por grupo de recursos ou por tipo) ou lista, com botões de categoria, busca e stats (recursos, tipos, grupos, regiões).
Explorador de blobs (data plane): nos Storage Accounts, o botão Navegar blobs abre containers → pastas → arquivos, respeitando o RBAC de dados (Storage Blob Data Reader).

Dataverse

Acesse em /microsoft/power-platform/dataverse. A app descobre a URL da organização automaticamente (via Flow Admin API, com fallback para a env DATAVERSE_INSTANCE_URL) e lista todas as tabelas do ambiente (sistema + customizadas), com:

Busca por nome, nome lógico ou OTC (Object Type Code).
Classificação automática por prefixo (IBGC, Dynamics 365, Marketing, Omnichannel, Power Pages, Sistema CRM…), usada nos filtros.
Clique numa linha → página de detalhe com Colunas, Relacionamentos e Esquema (diagrama estilo dbdiagram, pensado para tabelas com dezenas/centenas de relacionamentos).

Power Automate Monitor

Acesse em …/power-automate/monitor. Clique em Entrar com Microsoft e depois em Varredura.

API routes server-side (/api/power-automate/scan, /flows) chamam a Flow Admin API com o token recebido; o front consome streaming NDJSON.
Cache em disco em .cache/flows-<envId>.json (gitignored). A primeira varredura baixa o catálogo (alguns minutos); as próximas usam o cache.

O ambiente tem 7.863 fluxos catalogados (883 ativos). Detalhes em docs/power-platform.md.

Microsoft 365 (Graph)

/microsoft/m365/outlook lista as caixas de correio e /microsoft/m365/sharepoint os sites do SharePoint, via Microsoft Graph (/api/graph/users e /api/graph/sites). Requer as permissões Graph com admin consent (acima).

Web Services Legados (ASMX)

O sistema Web Services Legados aparece no diagrama em /webservices. A camada que consome o Usuariowebservice.asmx está em lib/webservices/ — veja o README de lá para:

As 14 operações reais (Auth, CRUD, Listas, Cripto, Auditoria).
Descobrir/atualizar operações via npm run inspect-wsdl.
Chamar do front via fetch("/api/webservice/usuario/<Operacao>", …).

O endpoint corporativo só responde de dentro da rede do IBGC.

Segurança e notas

Tenant ID, Client ID e Environment ID não são segredos (aparecem em URLs OAuth), mas ficam em variáveis NEXT_PUBLIC_* no .env.local (gitignored). Nunca coloque client secrets no .env.local.

Roadmap

A arquitetura-as-built (mapeamento do cenário atual) está bem coberta. Os próximos passos miram a arquitetura-alvo e a adoção (Meta 1):

📊 Há também um deck de apresentação do projeto em IBGC-Arquitetura-TI.pptx.