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

Spec 033 — Desk Infra Console UI (process cards)

Criado: 2026-06-19
Actualizado: 2026-06-19 (padronização proc-card)
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

Página Infraestrutura do Desk com process cards uniformes (proc-card): mesmo tamanho, tipografia, ícone, badge de status e acções no rodapé. Conteúdo rico (métricas, formulários, JSON) abre em modal largo (#infra-process-modal).

Motivo: painéis ws-panel de alturas variadas quebravam o alinhamento visual; inputs inline (purge) inflavam cards.

---

Referência de design (pesquisa)

Padrões adoptados de boas práticas de UI card (Material UI equal-height, UX Collective, CSS Grid auto-fill):

Regra	Valor Desk
Grid	repeat(auto-fill, minmax(220px, 1fr)) · gap 16px (sistema 8pt)
Altura mínima card	168px · flex-column + justify implícito via footer
Padding card	16px
Título	0.88rem · weight 600
Spec label	0.62rem uppercase · letter-spacing 0.05em
Descrição	0.75rem · 2 linhas (line-clamp: 2)
Ícone	32×32px · fundo pastel por accent
Badge status	canto superior direito · classes badge existentes
Inputs / tabelas / JSON	modal modal-panel-lg — nunca no card
Testes (webhook, OpenPanel)	botão rápido no card ou no modal · resultado em #soc-test-modal

Alinhamento igual altura: grid align-items: stretch + min-height fixo no card (não aspect-ratio — conteúdo operacional, não media).

---

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()).

---

Catálogo de process cards (Infra)

ID	Ícone	Título	Spec label	Accent	Status	Acções card
soc	📡	SOC VM112	Webhook	teal	health.status	Detalhes · Testar
openpanel	🎛️	OpenPanel API	Spec 028	orange	online/check	Detalhes · Testar
purge	🔐	Códigos purge	Spec 032	rose	N domínios	Gerir códigos → modal
vm112	🌐	VM112 Onboard	Portal	aqua	online/check	Ver status
wazuh	🛡️	Wazuh SOC	Spec 002	slate	online/check	Ver status
integrations	🔗	Integrações	JSON	violet	activas	Ver JSON

Mapa de ícones: constante PROC_CARD_ICONS em app.js.

---

Modais

Modal	Uso
#infra-process-modal	Detalhes, formulário purge, JSON integrações
#soc-test-modal	Resultado testes webhook / OpenPanel multidomínio

Funções: openInfraProcessModal(), openInfraProcessDetail(procId), closeInfraProcessModal(), bindInfraProcessModal().

Snapshot API: state.infraSnapshot (reutilizado ao abrir detalhe sem re-fetch).

---

APIs consumidas

Endpoint	Uso
GET /api/v1/infra/vm112/status	Card VM112 + modal
GET /api/v1/infra/wazuh/status	Card Wazuh + modal
GET /api/v1/integrations	Card + modal JSON
GET /api/v1/integrations/health	Card SOC + modal
GET /api/v1/vm123/health	Card OpenPanel + modal
GET /api/v1/infra/purge-auth-domains	Card purge + modal
GET/POST /api/v1/infra/purge-auth-codes	Modal purge (Spec 032)
POST /api/v1/vm123/openpanel/test-confirm	Teste OpenPanel

---

CSS (frontend/assets/styles.css)

Classes proc-card (padrão reutilizável em outras páginas):

• .proc-grid, .proc-card, .proc-card--{teal|orange|rose|slate|violet|aqua}
• .proc-card-head, .proc-card-icon, .proc-card-spec, .proc-card-badge
• .proc-card-title, .proc-card-desc, .proc-card-foot

Helpers Infra (modais): .infra-kv, .infra-actions, .infra-hint, .purge-auth-form

Helper JS: procCardHtml(opts) — gera HTML uniforme.

---

Ficheiros

Ficheiro	Função
frontend/assets/app.js	renderInfra(), procCardHtml(), modais Infra
frontend/assets/styles.css	.proc-card + Infra
frontend/index.html	#infra-content, #infra-process-modal

---

Critérios de aceitação

1. Grid com 6 cards de mesma altura mínima e alinhamento visual.
2. Cada card: ícone + spec label + título + descrição (2 linhas) + badge + acções.
3. Purge: formulário e tabela só no modal «Gerir códigos».
4. OpenPanel / SOC: teste rápido no card; detalhes no modal.
5. Responsivo: 1 coluna em mobile (max-width: 480px).

---

Extensão futura

O sistema proc-card pode ser adoptado em Serviços (substituir servicos-tile gradualmente) e Dashboard — manter o mesmo catálogo de accents e ícones.

---

Conclusão

Spec 033 = layout e padronização visual da Infra. Funcionalidades:

• OpenPanel → Spec 028
• Códigos purge → Spec 032
• Webhook SOC → health integrations / Spec 001