3ee63b3018
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>
93 lines
3.5 KiB
Markdown
93 lines
3.5 KiB
Markdown
# 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**.
|
||
|