ligbox/ligbox-ops-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ligbox-ops-platform/specs/033-desk-infra-console-ui/spec.md
Ligbox Spec Hub 3ee63b3018 Add full stack health cards for VMs 112-130 and rename INFRA COD. 
New /api/v1/infra/stack/status probes all stack apps/APIs/SW; Infra UI groups proc-cards by VM; wire vm123 router; menu INFRA COD and Serviços IaaS · Infra as Code labels.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-19 22:41:53 +00:00

3.5 KiB
Raw Blame History

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 INFRA COD (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
INFRA COD view-infra renderInfra() em frontend/assets/app.js

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

Catálogo de process cards (Infra)

Endpoint agregado: GET /api/v1/infra/stack/status — probes paralelos de todos os serviços do stack (apps, APIs, SW) nas VMs 112, 114, 122, 123, 130.

Implementação: api/app/stack_health.py + infra_stack_routes.py.

VM Serviços monitorados
112 Onboard API, Wizard UI, Carbonio, Domain Admin API
114 Traefik API, Router Desk WAN, Router API Ops WAN
122 Desk API, Desk UI, Redis, Webhook SOC, Purge Auth API
123 FOSSBilling, Odoo, OpenPanel, OpenAdmin, Bridge :18087, Ops Console, phpMyAdmin, Ollama
130 Forgejo, Spec Portal, Spec Hub WAN

UI: secções por VM + proc-card uniforme · modal para detalhes/formulários.

Menu: INFRA COD · subtítulo Serviços IaaS · Infra as Code · nav Serviços IaaS (overview-home).

Modais

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

Critérios de aceitação

  1. INFRA COD exibe cards de todas as VMs 112/114/122/123/130.
  2. Cada card: ícone, spec/kind, título, status, 2 linhas de detalhe.
  3. Purge / inputs apenas no modal.
  4. Summary N/M online no topo.

Conclusão

Spec 033 = layout INFRA COD + stack health. Funcionalidades: OpenPanel 028, purge 032, webhook 001.