ligbox-ops-platform/specs/033-desk-infra-console-ui/spec.md

Spec 033 — Desk Infra Console UI (ws-panel aqua/teal)

Criado: 2026-06-19
Solicitado por: Roger
Prioridade: P2 (UX operacional)
Status: ✅ Implementado (Desk VM122 frontend)
Sistema: Desk VM122 · menu Infraestrutura (view-infra)
Relacionado: Spec 028 (OpenPanel API) · Spec 032 (códigos purge) · Spec 002 (Wazuh) · módulo infra (015)

---

Resumo

Redesenho da página Infraestrutura do Desk: layout tipo wizard (ws-panel + gradientes teal/aqua/orange), chips de status no topo e painéis por integração — substituindo cards genéricos pouco legíveis.

Motivo: cards antigos (class="card") eram visualmente pobres e o painel OpenPanel (Spec 028) ficou pouco visível após o primeiro redesign.

---

Onde na UI

Menu Desk	View ID	Render
Infraestrutura	view-infra	renderInfra() em frontend/assets/app.js

Não cobre Infra 2 / SOC visual (view-infra2 → renderInfra2()).

---

Layout

1. Hero — chips de status (infra-hero)

Quatro chips com dot + badge:

Chip	Fonte API
SOC integração	GET /api/v1/integrations/health
VM112 Portal	idem + GET /api/v1/infra/vm112/status
VM104 Wazuh	GET /api/v1/infra/wazuh/status
OpenPanel VM123	GET /api/v1/vm123/health → openpanel

2. Grid — painéis ws-panel (infra-grid)

Painel	Cabeçalho CSS	Largura	Spec / função
SOC VM112	ws-panel-head--teal	wide	Webhook + alertas
OpenPanel API	ws-panel-head--orange	wide + featured	028 — teste multidomínio
Códigos purge	ws-panel-head--rose	normal	032 — geração códigos
VM112 Onboard	teal	normal	HTTP / service
VM104 Wazuh	ws-panel-head--slate	normal	API SOC
Integrações JSON	ws-panel-head--violet	wide	dump /integrations

3. OpenPanel (Spec 028) — conteúdo obrigatório

Painel largura total, classe infra-panel--featured:

• Título: OpenPanel API — Re-engenharia Ligbox · Spec 028
• Métricas: OpenPanel OK, Bridge API, Bridge URL, VM123 health
• Botões: Testar multidomínio (POST /api/v1/vm123/openpanel/test-confirm) · link OpenPanel UI
• Hint: suite openpanel-multidomain-api-confirm + script CLI

Modal de resultado: reutiliza #soc-test-modal (showOpenPanelTestResult).

4. Purge auth (Spec 032)

Sub-render: renderPurgeAuthInfraPanel() → #purge-auth-infra-panel

---

APIs consumidas

Endpoint	Uso na página
GET /api/v1/infra/vm112/status	Chip + painel VM112
GET /api/v1/infra/wazuh/status	Chip + painel Wazuh
GET /api/v1/integrations	JSON painel violet
GET /api/v1/integrations/health	Chip SOC + alertas
GET /api/v1/vm123/health	Chip + painel OpenPanel
GET /api/v1/infra/purge-auth-domains	Spec 032 panel
GET/POST /api/v1/infra/purge-auth-codes	Spec 032 panel
POST /api/v1/vm123/openpanel/test-confirm	Botão teste OpenPanel

---

CSS (frontend/assets/styles.css)

Classes principais:

• .infra-page, .infra-hero, .infra-hero-chip, .infra-hero-dot
• .infra-grid, .infra-panel, .infra-panel--wide, .infra-panel--featured
• .infra-kv — métricas em grid
• .infra-actions, .infra-hint, .infra-alert-list
• Reutiliza .ws-panel, .ws-panel-head--{teal|orange|rose|slate|violet} (wizard/SOC)

---

Ficheiros

Ficheiro	Função
frontend/assets/app.js	renderInfra(), renderPurgeAuthInfraPanel(), infraKvHtml()
frontend/assets/styles.css	Estilos Infra + purge auth form
frontend/index.html	#infra-content em #view-infra

Commits: 41c0c2d (layout inicial) · follow-up OpenPanel featured panel.

---

Critérios de aceitação

1. Infra mostra 4 chips no topo (incl. OpenPanel VM123).
2. Painel OpenPanel é largura total, título Spec 028, métricas bridge e botão teste.
3. Botão «Testar multidomínio» abre modal com passos da suite 028.
4. Painel purge Spec 032 mantém formulário e tabela de códigos activos.
5. Layout responsivo: 1 coluna em mobile (max-width: 900px).

---

Fora de escopo

• Redesign Infra 2 / SOC dark (renderInfra2)
• Dashboard widgets duplicando Infra
• Edição de integrações na UI

---

Conclusão

A Spec 033 documenta apenas a construção visual e layout da página Infra. Funcionalidades específicas:

• OpenPanel teste → Spec 028 (+ CONFIRMACAO-TESTE-API.md)
• Códigos purge → Spec 032
• Webhook SOC → Spec 001 / health integrations