From bccc39b18508b5088fbe1ec65501784b4b818f8b Mon Sep 17 00:00:00 2001 From: Ivo Oskamp Date: Tue, 28 Apr 2026 10:20:59 +0200 Subject: [PATCH] Plan: add AlertHub-style sidebar layout to frontend refactor Co-Authored-By: Claude Opus 4.7 --- docs/plan-mailbox-scanning.md | 76 +++++++++++++++++++++++++++++------ 1 file changed, 63 insertions(+), 13 deletions(-) diff --git a/docs/plan-mailbox-scanning.md b/docs/plan-mailbox-scanning.md index faac4cc..d6360d7 100644 --- a/docs/plan-mailbox-scanning.md +++ b/docs/plan-mailbox-scanning.md @@ -21,25 +21,74 @@ Microsoft Graph dekt dit slechts gedeeltelijk (vooral folder-permissies). De vol ## 2. Layout-wijzigingen frontend -Huidige website is volledig op SharePoint gemodelleerd (één scanflow, één resultaattabel). Voorstel: +Huidige website is volledig op SharePoint gemodelleerd (één scanflow, één resultaattabel) en bestaat uit één lange single-page met alle panels (Tenants, Start New Scan, Scan Jobs, Job Details) onder elkaar. Voorstel: opsplitsen in pagina's met een **vaste linker zijbalk** zoals AlertHub gebruikt. -**a. Scan-type keuze in "Start New Scan"** -- Tabs of segmented control bovenaan: **SharePoint Sites** / **Mailboxes** -- Bij Mailboxes verandert het invoerveld: één UPN/email per regel (geen "skip default sites") -- CSV-import: extra accept-formaat (kolom `UserPrincipalName` / `Email` / `Mailbox`) +**a. Sidebar-layout (geïnspireerd op AlertHub)** -**b. Jobs-tabel** +Vaste zijbalk links (~200px, donkere achtergrond, logo bovenaan, account-blok onderaan): + +``` +┌────────────┬──────────────────────────────────┐ +│ Clearview │ │ +│ ───────── │ (page content) │ +│ Dashboard │ │ +│ Scan Jobs │ │ +│ ───────── │ │ +│ SharePoint │ │ +│ New Scan │ │ +│ Mailboxes │ │ +│ New Scan │ │ +│ ───────── │ │ +│ Tenants │ │ +│ Settings │ │ +│ ───────── │ │ +│ Manual │ │ +│ Changelog │ │ +│ ───────── │ │ +│ [account] │ │ +└────────────┴──────────────────────────────────┘ +``` + +Items: +- **Dashboard** — hero/KPI's (Tenants, Jobs, Active Jobs) — huidige `hero` sectie +- **Scan Jobs** — gecombineerde lijst van alle jobs (filter op type/tenant) + Job Details als detail-view (klik op job → toont onder lijst óf als aparte route) +- **SharePoint → New Scan** — formulier alleen voor SharePoint-scans (URLs / CSV) +- **Mailboxes → New Scan** — formulier alleen voor mailbox-scans (UPNs / CSV) +- **Tenants** — huidige tenants-panel +- **Settings** — placeholder voor toekomstige instellingen (timeouts, env-overrides als die exposed worden) +- **Manual** / **Changelog** — statische docs als die online beschikbaar moeten komen +- Account-blok onderaan: huidige sessie / build-versie + +Implementatie blijft **vanilla HTML/JS/CSS** (geen React-introductie — dat zou een grote scope-uitbreiding zijn). Concreet: +- `index.html` houdt alle secties als `
`, default verborgen +- Hash-based routing in `app.js` (`#/jobs`, `#/scan/sharepoint`, `#/scan/mailbox`, `#/tenants`, …) +- `styles.css` krijgt grid-layout met sidebar + content area +- Geen page reloads; navigatie wisselt zichtbaarheid van secties en update active-state in de sidebar + +Voordelen tegenover de huidige single-scroll: +- Scan-typen visueel gescheiden — voorkomt verwarring tussen SharePoint- en Mailbox-formulieren +- Schaalt naar meer scan-types (OneDrive, Teams) zonder dat de pagina nóg langer wordt +- Visuele consistentie met AlertHub binnen jouw productenfamilie + +**b. Scan-formulier per type (gescheiden pagina's)** +- SharePoint-pagina: huidige URLs/CSV-formulier, ongewijzigd qua velden +- Mailbox-pagina: invoerveld voor UPN/email (één per regel), géén "skip default sites" +- CSV-import per pagina, met geschikte kolomdetectie (`URL`/`Site URL` versus `UserPrincipalName`/`Email`/`Mailbox`) + +**c. Jobs-pagina** +- Gecombineerde tabel met alle jobs ongeacht type - Nieuwe kolom **Type** (SharePoint / Mailbox) - Tenant-filter blijft, extra filter op type +- Klik op een job opent de detail-view (sectie eronder of dedicated route `#/jobs/{id}`) -**c. Job Details panel** +**d. Job Details (binnen Jobs-pagina)** - Sectie heading wordt dynamisch: "Targets" blijft, maar URL-kolom wordt "Mailbox" voor mailbox-jobs - Permission Deviations tabel krijgt voor mailbox-jobs andere kolommen: - Mailbox · Folder (leeg voor mailbox-level) · Permission Type (FullAccess/SendAs/SendOnBehalf/Folder) · Principal · Access Rights - SharingLinks-blok wordt verborgen voor mailbox-jobs - Site-filter wordt mailbox-filter -**d. Tenants-panel** +**e. Tenants-pagina** - In de onboarding-instructies een extra stap erbij: API permission `Office 365 Exchange Online → Exchange.ManageAsApp` + role `Exchange Administrator` toekennen aan de service principal. Voor de geautomatiseerde flow betekent dit een extra Graph-call (rol-toekenning kan niet altijd, dus mogelijk handmatige stap). - Statuskolom `Auth` toont al cert/secret; voorstel: extra capability-badge per tenant (`SP`, `EXO`) zodat zichtbaar is welke scans mogelijk zijn. @@ -104,11 +153,12 @@ Nieuwe response-velden in `ScanJobDetail`: `scan_type`, en deviations krijgen `p 1. Backend refactor: scanner-module opsplitsen, geen functionele wijziging (groen test) 2. Datamodel: `scan_type` + `permission_type` toevoegen, default `'sharepoint'` -3. Mailbox-scanner: PS-scripts + Python-wrapper + dispatcher; alleen via API testbaar -4. API: scan-job creatie uitbreiden met `scan_type`/`mailboxes` -5. Frontend: scan-type segment in formulier + dynamische kolommen in details -6. Onboarding-tekst en build (Dockerfile voor `pwsh`) -7. Documentatie: TECHNICAL.md + changelog-develop.md +3. Frontend layout-refactor: sidebar + hash-routing introduceren, bestaande functionaliteit (alleen SharePoint) verdelen over pagina's. Nog géén mailbox-UI. +4. Mailbox-scanner: PS-scripts + Python-wrapper + dispatcher; alleen via API testbaar +5. API: scan-job creatie uitbreiden met `scan_type`/`mailboxes` +6. Frontend: Mailboxes-pagina toevoegen + dynamische kolommen in Job Details +7. Onboarding-tekst en build (Dockerfile voor `pwsh`) +8. Documentatie: TECHNICAL.md + changelog-develop.md ## Open vragen