From 7dfdf5bc43dc0ef04e12c39f5781b897cba7fa8e Mon Sep 17 00:00:00 2001 From: Ligbox Spec Hub Date: Fri, 19 Jun 2026 22:29:29 +0000 Subject: [PATCH] Restore prominent OpenPanel panel on Infra and add Spec 033. 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 --- projects/ops-desk/frontend/assets/app.js | 42 ++++-- projects/ops-desk/frontend/assets/styles.css | 6 +- .../CONFIRMACAO-TESTE-API.md | 4 +- specs/033-desk-infra-console-ui/spec.md | 134 ++++++++++++++++++ 4 files changed, 174 insertions(+), 12 deletions(-) create mode 100644 specs/033-desk-infra-console-ui/spec.md diff --git a/projects/ops-desk/frontend/assets/app.js b/projects/ops-desk/frontend/assets/app.js index 1ad8c52..313aec7 100644 --- a/projects/ops-desk/frontend/assets/app.js +++ b/projects/ops-desk/frontend/assets/app.js @@ -3829,17 +3829,21 @@ async function renderInfra() { const el = document.getElementById('infra-content'); el.innerHTML = '

Verificando…

'; try { - const [vm112, wazuh, integrations, health] = await Promise.all([ + const [vm112, wazuh, integrations, health, vm123Health] = await Promise.all([ api('/v1/infra/vm112/status'), api('/v1/infra/wazuh/status'), api('/v1/integrations'), api('/v1/integrations/health'), + api('/v1/vm123/health').catch(() => null), ]); const onboard = health.vm112_onboard || {}; const last = onboard.last_webhook; const gap = onboard.gap_minutes != null ? `${Math.round(onboard.gap_minutes)} min` : '—'; const vmOk = onboard.vm112_api?.reachable; const wazuhOk = wazuh.http_status === 200; + const op = vm123Health?.openpanel || {}; + const opOk = Boolean(op.ok); + const bridgeOk = Boolean(op.bridge); const statusCls = health.status === 'ok' ? 'ok' : health.status === 'critical' ? 'escalated' : 'assisting'; const heroHealthDot = health.status === 'ok' ? '' : health.status === 'critical' ? 'infra-hero-dot--bad' : 'infra-hero-dot--warn'; const alerts = (health.alerts || []).map((a) => @@ -3872,6 +3876,14 @@ async function renderInfra() { ${wazuhOk ? 'online' : 'check'} +
+ +
+ OpenPanel VM123 + Bridge ${bridgeOk ? 'OK' : 'check'} · ${esc(op.bridge_url || '10.10.10.123:18087')} +
+ ${opOk ? 'online' : 'check'} +
@@ -3891,19 +3903,29 @@ async function renderInfra() {

Alerta se gap > ${health.webhook_gap_alert_minutes || 15} min sem eventos VM112.

+
+
OpenPanel API — Re-engenharia Ligbox · Spec 028
+
+

VM123 · bridge FOSS :18087 · multidomínio · conta temporária com cleanup automático.

+ ${vm123Health + ? infraKvHtml([ + ['OpenPanel', opOk ? 'OK' : esc(op.error || 'offline')], + ['Bridge API', bridgeOk ? 'OK' : 'offline'], + ['Bridge URL', esc(op.bridge_url || '—')], + ['VM123', vm123Health.ok ? 'OK' : esc(vm123Health.error || 'check')], + ]) + : '

Status VM123 indisponível — verifique API /vm123/health.

'} +
+ + OpenPanel UI +
+

Suite openpanel-multidomain-api-confirm · CLI scripts/test-openpanel-multidomain-api.sh

+
+
Códigos purge · Spec 032

A carregar…

-
-
OpenPanel API
-
-

Spec 028 · VM123 bridge :18087 · multidomínio · conta temporária com cleanup.

-
- -
-
-
VM112 — Onboard
diff --git a/projects/ops-desk/frontend/assets/styles.css b/projects/ops-desk/frontend/assets/styles.css index ed9ab49..70f9bf3 100644 --- a/projects/ops-desk/frontend/assets/styles.css +++ b/projects/ops-desk/frontend/assets/styles.css @@ -3918,10 +3918,14 @@ button.health-card { background: linear-gradient(135deg, #f0fdfa 0%, #fff 55%); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } -.infra-hero-chip--alert { +.infra-hero-chip--openpanel { background: linear-gradient(135deg, #fff7ed 0%, #fff 55%); border-color: #fed7aa; } +.infra-panel--featured { + border-color: #fdba74; + box-shadow: 0 4px 14px rgba(234, 88, 12, 0.12); +} .infra-hero-dot { width: 10px; height: 10px; diff --git a/specs/028-openpanel-ce-ligbox-reengineering/CONFIRMACAO-TESTE-API.md b/specs/028-openpanel-ce-ligbox-reengineering/CONFIRMACAO-TESTE-API.md index 977b186..c01d0dc 100644 --- a/specs/028-openpanel-ce-ligbox-reengineering/CONFIRMACAO-TESTE-API.md +++ b/specs/028-openpanel-ce-ligbox-reengineering/CONFIRMACAO-TESTE-API.md @@ -29,9 +29,11 @@ Permitir validar **quantas vezes quiser** que a re-engenharia OpenPanel Ligbox e ## Menu Infra (Desk VM122) +**Layout UI:** Spec **033** (`specs/033-desk-infra-console-ui/spec.md`) — painel largo `OpenPanel API — Re-engenharia Ligbox · Spec 028` na grid Infra. + 1. Login em https://desk.ligbox.com.br 2. Menu lateral → **Infraestrutura** -3. Card **OpenPanel API — Re-engenharia Ligbox** +3. Painel **OpenPanel API — Re-engenharia Ligbox** (chip VM123 no topo + painel orange largura total) 4. Botão **Testar multidomínio** 5. Modal com passo-a-passo e resultado (OK/FAIL por step) diff --git a/specs/033-desk-infra-console-ui/spec.md b/specs/033-desk-infra-console-ui/spec.md new file mode 100644 index 0000000..5246a6f --- /dev/null +++ b/specs/033-desk-infra-console-ui/spec.md @@ -0,0 +1,134 @@ +# 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