7dfdf5bc43
Promote OpenPanel to a full-width featured panel with VM123 health metrics, add hero chip, and document Infra console UI layout in Spec 033 with cross-ref from Spec 028. Co-authored-by: Cursor <cursoragent@cursor.com>
134 lines
4.7 KiB
Markdown
134 lines
4.7 KiB
Markdown
# 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
|