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 50085b7d94 Fix stack status 500 (VM112_IP) and rename INFRA COD to INFRA CODE. 
Define missing VM112_IP in stack_health probes; update menu and page titles to Infrastructure as Code branding.

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

3.5 KiB
Raw Permalink 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 CODE (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 CODE 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 CODE · 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 CODE 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 CODE + stack health. Funcionalidades: OpenPanel 028, purge 032, webhook 001.