diff --git a/docs/DESIGN.md b/docs/DESIGN.md index 16c1305..4a1d578 100644 --- a/docs/DESIGN.md +++ b/docs/DESIGN.md @@ -195,10 +195,16 @@ against the dark background: ```tsx
- Device inventory + Device inventory
``` +**Only real screenshots of the running application.** No JSX mockups or +drawn imitations of the UI. They come from an anonymized demo copy of a real +installation and are taken with `scripts/screenshots/capture.py` (see +`scripts/demo/README.md`), published as WebP in `public/screenshots/`. +`Screenshot` in `src/pages/Home.tsx` is the frame. + Optionally add a browser chrome header above the image: ```tsx @@ -206,7 +212,7 @@ Optionally add a browser chrome header above the image: - netork.local + netork / devices ``` diff --git a/docs/PAGES.md b/docs/PAGES.md index 9f69854..ab04f3d 100644 --- a/docs/PAGES.md +++ b/docs/PAGES.md @@ -124,45 +124,21 @@ Each badge uses the `Driver / Integration Badge` component from DESIGN.md. ### Section 5 — Screenshot Walkthrough (alternating) -**Purpose:** Show the UI concretely. Three alternating image + text rows. +**Purpose:** Show the UI concretely. Six alternating image + text rows, each a +real screenshot from `scripts/screenshots/shots.py`. Copy lives in +`home.screenshot1`–`screenshot6` in `src/i18n/translations.ts`. -**Row 1 — Left text, right screenshot** -- Heading: `Device detail at a glance` -- Copy: `Hostname, IP, vendor, OS version, last poll time, and active - warnings on one card. Tabbed detail view for interfaces, LLDP neighbors, - ARP table, VLAN membership, packages, services, and scheduled jobs.` -- Screenshot: DeviceDetailPage +| Row | Heading | Screenshot | +|---|---|---| +| 1 | Device detail at a glance | `device-detail` — an access point, Networking → Interfaces | +| 2 | Intent-based VLAN and SSID management | `vlans` — VLAN list by site | +| 3 | A security assessment for every device | `device-security` — a server, Security → Assessment | +| 4 | One triage queue, decisions that hold | `vulnerabilities` — the triage queue | +| 5 | Dashboards you actually build | `dashboard` — the home dashboard | +| 6 | Service checks every minute | `service-checks` — Network → Service Checks | -**Row 2 — Right text, left screenshot** -- Heading: `Intent-based VLAN and SSID management` -- Copy: `Define VLAN names and SSID settings once. netOrk compares them - against every polled device and pushes corrections automatically via - UCI (OpenWRT) or the device's native API.` -- Screenshot: VlansPage or WirelessPage - -**Row 3 — Left text, right screenshot** -- Heading: `Security visibility per device` -- Copy: `Wazuh agent status, CVE counts by severity, and recent alerts - — all linked to the device record. One-click agent install if the - agent is missing. Graylog syslog forwarding status with auto-fix.` -- Screenshot: SecurityTab inside DeviceDetailPage - -**Row 4 — Right text, left screenshot** -- Heading: `Configuration backup and versioning` -- Copy: `Every poll captures a config snapshot into a local Git - repository. The Config tab shows the full snapshot history, a - side-by-side diff between any two points in time, and — for - OPNsense — a Restore button. Unauthorized changes show up as a - device warning.` -- Screenshot: ConfigTab inside DeviceDetailPage - -**Row 5 — Left text, right screenshot** -- Heading: `Dashboards you actually build` -- Copy: `Pick from 13 widgets and arrange them on a WYSIWYG grid — no - more fixed layout. Share a dashboard with a colleague, let them - subscribe to your live version or clone it into their own, and pin - favorites to the main menu.` -- Screenshot: DashboardDetailPage (edit mode) +Text sits left on odd rows and right on even rows; on mobile the text always +comes first. --- @@ -170,7 +146,7 @@ Each badge uses the `Driver / Integration Badge` component from DESIGN.md. **Purpose:** Hook for organizations evaluating netOrk in a NIS2 context. -**Layout:** Left column — label + Art. 21 mapping list. Right column — mock compliance overview UI. +**Layout:** Left column — label + Art. 21 mapping list. Right column — screenshot of the audit log (`audit-log`), the evidence the list refers to. **Label (eyebrow):** `NIS2 · Art. 21` (sky-500, uppercase, tracking-widest) diff --git a/public/screenshots/audit-log.webp b/public/screenshots/audit-log.webp new file mode 100644 index 0000000..b6cd991 Binary files /dev/null and b/public/screenshots/audit-log.webp differ diff --git a/public/screenshots/dashboard.webp b/public/screenshots/dashboard.webp new file mode 100644 index 0000000..3656a7f Binary files /dev/null and b/public/screenshots/dashboard.webp differ diff --git a/public/screenshots/device-detail.webp b/public/screenshots/device-detail.webp new file mode 100644 index 0000000..076b843 Binary files /dev/null and b/public/screenshots/device-detail.webp differ diff --git a/public/screenshots/device-security.webp b/public/screenshots/device-security.webp new file mode 100644 index 0000000..f9d956c Binary files /dev/null and b/public/screenshots/device-security.webp differ diff --git a/public/screenshots/devices.webp b/public/screenshots/devices.webp new file mode 100644 index 0000000..f625b57 Binary files /dev/null and b/public/screenshots/devices.webp differ diff --git a/public/screenshots/service-checks.webp b/public/screenshots/service-checks.webp new file mode 100644 index 0000000..ab5f1e2 Binary files /dev/null and b/public/screenshots/service-checks.webp differ diff --git a/public/screenshots/vlans.webp b/public/screenshots/vlans.webp new file mode 100644 index 0000000..4846320 Binary files /dev/null and b/public/screenshots/vlans.webp differ diff --git a/public/screenshots/vulnerabilities.webp b/public/screenshots/vulnerabilities.webp new file mode 100644 index 0000000..51e8575 Binary files /dev/null and b/public/screenshots/vulnerabilities.webp differ diff --git a/scripts/demo/anonymize.py b/scripts/demo/anonymize.py index c04fa96..ba85cc0 100755 --- a/scripts/demo/anonymize.py +++ b/scripts/demo/anonymize.py @@ -50,6 +50,11 @@ SKIP_TABLES = { } TEXT_TYPES = {"text", "character varying", "jsonb", "json", "inet", "cidr", "macaddr", "ARRAY"} +# Only these count as internal addresses to move; Python's is_private also +# covers 0.0.0.0/8 and friends, which in practice are version numbers. +PRIVATE_NETS = [ipaddress.IPv4Network(n) for n in + ("10.0.0.0/8", "172.16.0.0/12", "192.168.0.0/16", "100.64.0.0/10")] + # Well-known public resolvers stay as they are; they say nothing about anyone. KEEP_PUBLIC = {"1.1.1.1", "1.0.0.1", "8.8.8.8", "8.8.4.4", "9.9.9.9", "149.112.112.112"} @@ -57,6 +62,8 @@ IPV4 = re.compile(r"(?> 16)}.{(n >> 8) & 255}.{n & 255}" + probe += 1 + self.public_used.add(fake) + self.public[ip] = fake return self.public[ip] def mac(self, m: str) -> str: @@ -148,8 +174,19 @@ class Mapper: return e return f"user-{h(e.lower(), 6)}@{DEMO_DOMAIN}" + def reverse(self, m: re.Match) -> str: + octets = m.group(1).rstrip(".").split(".")[::-1] # forward order + if len(octets) < 2 or any(int(o) > 255 for o in octets): + return m.group(0) + padded = octets + ["0"] * (4 - len(octets)) + mapped = self.ipv4(".".join(padded)).split(".")[:len(octets)] + return ".".join(mapped[::-1]) + ".in-addr.arpa" + # -- whole strings ------------------------------------------------------- def text(self, s: str) -> str: + s = SECRET_JSON.sub(lambda m: m.group(0) if m.group(1) in SECRET_JSON_KEEP + else f'"{m.group(1)}"{m.group(2)}""', s) + s = REVERSE.sub(self.reverse, s) s = EMAIL.sub(self.email, s) if self.domain_re: s = self.domain_re.sub(lambda m: m.group(1) + self.domains[m.group(2).lower()], s) @@ -159,20 +196,29 @@ class Mapper: s = IPV4.sub(lambda m: self.ipv4(m.group(1)), s) if self.names_re: s = self.names_re.sub(lambda m: self.names[m.group(1)], s) + for old, new in self.substrings.items(): + s = s.replace(old, new) return s # Cheap server-side prefilter: only rows that could contain something to map. def prefilter(cfg: dict) -> str: parts = [r"\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}", r"[0-9A-Fa-f]{2}[:-][0-9A-Fa-f]{2}[:-]", - r"[0-9A-Fa-f]{4}\.[0-9A-Fa-f]{4}\.", r"[0-9A-Fa-f]{1,4}::?[0-9A-Fa-f]{1,4}:", "@"] - for k in [*cfg.get("domains", []), *cfg.get("hostnames", {}), *cfg.get("terms", {})]: + r"[0-9A-Fa-f]{4}\.[0-9A-Fa-f]{4}\.", r"[0-9A-Fa-f]{1,4}::?[0-9A-Fa-f]{1,4}:", "@", + r"in-addr\.arpa", r"(key|psk|passphrase|password|secret|token)\"\s*:"] + for k in [*cfg.get("domains", []), *cfg.get("hostnames", {}), *cfg.get("terms", {}), + *cfg.get("substrings", {})]: parts.append(re.escape(k)) return "|".join(parts) # Columns emptied wherever they occur, found by name so a new table is covered. -SECRET_COLUMN = re.compile(r"(password|secret|private_key|api_key|apikey|token)", re.I) +SECRET_COLUMN = re.compile(r"(password|secret|private_key|api_key|apikey|token|passphrase|psk|ft_key|wpa_key)", re.I) +# The same inside JSON and text: device snapshots carry Wi-Fi keys and the like. +SECRET_JSON = re.compile( + r'"((?:[A-Za-z0-9_]*_)?(?:key|psk|passphrase|password|passwd|secret|token|private_key|ft_key|sae_password))"' + r'(\s*:\s*)"(?:[^"\\]|\\.)*"') +SECRET_JSON_KEEP = {"public_key", "entry_key", "key_type", "is_secret", "ssh_key_id"} SECRET_KEEP = {"hashed_password", "token_version", "title_tokens", "disable_password_auth"} # Whole tables that only hold secrets or personal delivery data. @@ -313,6 +359,8 @@ async def reset_users(con, cfg: dict, dry: bool) -> None: "UPDATE users SET username = $2, email = $3, hashed_password = $4, " "totp_secret = NULL, totp_enabled = false, is_active = false WHERE id = $1", u["id"], f"operator{n}", f"operator{n}@{DEMO_DOMAIN}", hash_password(os.urandom(16).hex())) + # TOTP secrets are gone, so a role that demands MFA would lock everyone out. + await con.execute("UPDATE roles SET require_mfa = false") role = await con.fetchval("SELECT id FROM roles WHERE lower(name) IN ('administrator', 'admin') LIMIT 1") if role: await con.execute("UPDATE users SET role_id = $1, is_superuser = true WHERE username = 'netork'", role) @@ -320,18 +368,26 @@ async def reset_users(con, cfg: dict, dry: bool) -> None: async def leak_report(con, cfg: dict, originals: list[str]) -> int: - needles = [n for n in originals if len(n) >= 4] - if not needles: + # Names are matched as written (FAMILY is a VLAN, "family" a JSON key); + # leak_terms and domains in any case. + names = [n for n in [*cfg.get("hostnames", {}), *cfg.get("terms", {}), *cfg.get("substrings", {})] + if len(n) >= 4] + loose = [n for n in [*cfg.get("domains", {}), *cfg.get("leak_terms", [])] if len(n) >= 4] + # Postgres has no inline (?i:...), so spell case-insensitivity out: [mM][aA]... + def anycase(t: str) -> str: + return "".join(f"[{c.lower()}{c.upper()}]" if c.isalpha() else re.escape(c) for c in t) + parts = [re.escape(n) for n in names] + [anycase(n) for n in loose] + if not parts: return 0 - pat = "|".join(re.escape(n) for n in needles) + pat = "|".join(parts) found = 0 for t, c, _ in await columns(con): - n = await con.fetchval(f'SELECT count(*) FROM "{t}" WHERE "{c}"::text ~* $1', pat) + n = await con.fetchval(f'SELECT count(*) FROM "{t}" WHERE "{c}"::text ~ $1', pat) if n: found += n sample = await con.fetchval( - f'SELECT substring("{c}"::text from $1) FROM "{t}" WHERE "{c}"::text ~* $1 LIMIT 1', - f"(?i)(.{{0,30}}(?:{pat}).{{0,30}})") + f'SELECT substring("{c}"::text from $2) FROM "{t}" WHERE "{c}"::text ~ $1 LIMIT 1', + pat, f"(.{{0,30}}(?:{pat}).{{0,30}})") print(f" LEAK {t}.{c}: {n} rows, e.g. …{sample}…") return found diff --git a/scripts/demo/up.sh b/scripts/demo/up.sh index af8a3e7..59bf0a5 100755 --- a/scripts/demo/up.sh +++ b/scripts/demo/up.sh @@ -47,8 +47,24 @@ case "${1:-}" in got=$(docker exec "$DB" psql -U netork -tA -c "SELECT version_num FROM alembic_version") want=$(cd "$SRC" && PATH="$VENV/bin:$PATH" alembic heads 2>/dev/null | awk '{print $1}') echo "dump schema: $got $VERSION head: $want" - [ "$got" = "$want" ] || echo "WARNING: schema differs from $VERSION; screens may not match the release." + # Anonymize first: it empties every secret, so a downgrade that would + # have to decrypt something (with a key we do not have) finds nothing. "$VENV/bin/python" "$HERE/anonymize.py" + if [ "$got" != "$want" ]; then + # The production instance runs a newer build. Walk the copy back to the + # release with the newer code's own downgrade migrations. + NEWER="${NETORK_NEWER_REF:-origin/main}" + echo "migrating the copy from $got back to $want with $NEWER's migrations" + rm -rf "$DEMO/src-newer"; mkdir -p "$DEMO/src-newer" + git -C "$NETORK_REPO" archive "$NEWER" | tar -x -C "$DEMO/src-newer" + # Rows the older schema cannot hold: CrowdSec blocklist alerts whose scope + # is a list name, longer than the column they go back into. + docker exec "$DB" psql -U netork -q -c \ + "DELETE FROM crowdsec_alerts WHERE length(source_scope) > 32" 2>/dev/null || true + (cd "$DEMO/src-newer" && PATH="$VENV/bin:$PATH" \ + DATABASE_URL="postgresql+asyncpg://netork:demo@127.0.0.1:$PORT/netork" alembic downgrade "$want") + "$VENV/bin/python" "$HERE/anonymize.py" --report-only + fi ;; start) ensure_src; ensure_db diff --git a/scripts/screenshots/capture.py b/scripts/screenshots/capture.py index 8e109e2..977f524 100644 --- a/scripts/screenshots/capture.py +++ b/scripts/screenshots/capture.py @@ -17,6 +17,7 @@ taking screenshots cannot change anything on the instance. """ import argparse +import io import json import os import re @@ -26,6 +27,7 @@ import urllib.parse import urllib.request from pathlib import Path +from PIL import Image from playwright.sync_api import Page, sync_playwright from shots import SHOTS @@ -80,7 +82,10 @@ def token() -> str: body = urllib.parse.urlencode({"username": USER, "password": PASSWORD}).encode() try: with urllib.request.urlopen(f"{BASE}/api/v1/auth/token", body) as res: - return json.load(res)["access_token"] + tok = json.load(res).get("access_token") + if not tok: + sys.exit(f"Login as {USER} needs MFA; the demo copy should have none (anonymize.py)") + return tok except urllib.error.URLError as e: sys.exit(f"Login as {USER} at {BASE} failed: {e} (is scripts/demo/up.sh start running?)") state = json.loads(STATE.read_text()) @@ -118,6 +123,15 @@ def settle(page: Page) -> None: page.wait_for_timeout(800) +def publish(png: bytes, path: Path, width: int) -> None: + """Scale the 2x capture down to its published width and store it as WebP.""" + img = Image.open(io.BytesIO(png)).convert("RGB") + if img.width > width: + img = img.resize((width, round(img.height * width / img.width)), Image.LANCZOS) + img.save(path, "WEBP", quality=85, method=6) + print(f" -> {path.name} {img.width}x{img.height}, {path.stat().st_size // 1024} KB") + + def capture(variables: dict[str, str], only: set[str], mask: bool) -> None: OUT.mkdir(parents=True, exist_ok=True) terms = mask_terms() @@ -160,6 +174,9 @@ def capture(variables: dict[str, str], only: set[str], mask: bool) -> None: if got_it.is_visible(): got_it.click() page.wait_for_timeout(300) + for sel in shot.clicks: + page.locator(sel).first.click() + settle(page) masks = [page.locator(s) for s in shot.mask] if mask: masks += [page.get_by_text(PUBLIC_IPV4), page.get_by_text(EMAIL)] @@ -167,8 +184,9 @@ def capture(variables: dict[str, str], only: set[str], mask: bool) -> None: clip = None if shot.height: clip = {"x": 0, "y": 0, "width": VIEWPORT["width"], "height": shot.height} - page.screenshot(path=OUT / f"{shot.name}.png", full_page=shot.full_page, - clip=clip, mask=masks, mask_color="#334155", animations="disabled") + png = page.screenshot(full_page=shot.full_page, clip=clip, mask=masks, + mask_color="#334155", animations="disabled") + publish(png, OUT / f"{shot.name}.webp", shot.width) browser.close() if blocked: print("Blocked non-GET requests (nothing was sent):") diff --git a/scripts/screenshots/shots.py b/scripts/screenshots/shots.py index 736c0e6..d31ef45 100644 --- a/scripts/screenshots/shots.py +++ b/scripts/screenshots/shots.py @@ -23,15 +23,26 @@ class Shot: full_page: bool = False # Crop height in CSS pixels; None keeps the viewport height. height: int | None = None + # Width of the published WebP in pixels (the capture is 3200 wide). + width: int = 1600 + # Selectors clicked in order before the shot, first match each. Only for + # controls that change the view (filters, tabs); the API guard in + # capture.py aborts anything that would write. + clicks: list[str] = field(default_factory=list) SHOTS: list[Shot] = [ - Shot("devices", "/devices"), + Shot("devices", "/devices", width=2400), Shot("device-detail", "/devices/{ap}#networking/interfaces"), Shot("vlans", "/vlans"), Shot("device-security", "/devices/{server}#security/assessment"), Shot("vulnerabilities", "/vulnerabilities"), Shot("dashboard", "/"), - Shot("audit-log", "/audit-log"), + # Background polls drown out what people did: filter the scheduler out, + # the way a reader would (click a source badge, then flip it to exclude). + Shot("audit-log", "/audit-log", clicks=[ + "tbody td >> text=scheduler", + "button[title='Click to toggle include/exclude']", + ]), Shot("service-checks", "/monitoring/checks"), ] diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts index 0a801a0..108be48 100644 --- a/src/i18n/translations.ts +++ b/src/i18n/translations.ts @@ -68,26 +68,40 @@ const en = { }, screenshot2: { heading: 'Intent-based VLAN and SSID management', - body: "Define VLAN names and SSID settings once. netOrk compares them against every polled device and pushes corrections automatically via UCI (OpenWRT) or the device's native API.", + body: "Define VLAN names and SSID settings once. netOrk compares them against every polled device, shows each difference, and corrects it via UCI (OpenWrt) or the device's native API — automatically only where you switched that on.", }, screenshot3: { - heading: 'Security visibility per device', - body: 'Wazuh agent status, CVE counts by severity, and recent alerts — all linked to the device record. One-click agent install if the agent is missing. Graylog syslog forwarding status with auto-fix.', + heading: 'A security assessment for every device', + body: 'TLS and SSH graded A to F, installed software and container images matched against known vulnerabilities, hardening benchmarks and network exposure — rated by what each finding means on this device, with no agent to install.', }, screenshot4: { - heading: 'Configuration backup and versioning', - body: 'Every poll captures a config snapshot into a local Git repository. The Config tab shows the full snapshot history, a side-by-side diff between any two points in time, and — for OPNsense — a Restore button. Unauthorized changes show up as a device warning.', + heading: 'One triage queue, decisions that hold', + body: 'Every vulnerability across every device in one list, most urgent first, each row saying why. Mark it not applicable, accept or defer it until a date, or fixed — always with a reason. Deferrals come back on their own, and fixes are verified by the next assessments.', }, screenshot5: { heading: 'Dashboards you actually build', - body: 'Pick from 13 widgets and arrange them on a WYSIWYG grid — no more fixed layout. Share a dashboard with a colleague, let them subscribe to your live version or clone it into their own, and pin favorites to the main menu.', + body: 'Pick from 18 widgets and arrange them on a WYSIWYG grid — no more fixed layout. Share a dashboard with a colleague, let them subscribe to your live version or clone it into their own, and pin favorites to the main menu.', + }, + screenshot6: { + heading: 'Service checks every minute', + body: 'DNS, time servers, VPN tunnels, core daemons and gateways are checked about once a minute — derived from what netOrk already knows, with nothing to set up. A check reports after three failures in a row, and a whole site going down is one message, not fifty.', + }, + shotAlt: { + devices: 'netOrk device inventory with hostnames, vendors, device types, sites and status', + deviceDetail: 'Interfaces of an access point in netOrk, with VLANs, neighbors and link status', + vlans: 'VLAN list in netOrk, grouped by site with device counts', + deviceSecurity: 'Security tab of a server in netOrk: warnings, configuration grade and vulnerability counts', + vulnerabilities: 'Vulnerability triage queue in netOrk with severity, reason and affected devices', + dashboard: 'netOrk dashboard with device statistics, warnings, certificate expiry and scheduled actions', + serviceChecks: 'Service checks in netOrk: DNS, gateways and other checks with state and latency', + auditLog: 'netOrk audit log with user actions and background task results, exportable as CSV and PDF', }, nis2Label: 'NIS2 · Art. 21', nis2Heading: 'Evidence, not paperwork.', nis2Body: "NIS2 Art. 21 mandates asset inventory, patch management, access control, and audit trails as baseline technical measures. netOrk doesn't bolt on a compliance layer — these are its day-to-day outputs.", nis2Link: 'Full Art. 21 mapping →', nis2Items: [ - { art: 'Art. 21 (2e)', label: 'Patch & vulnerability management', detail: 'Per-device update status, Wazuh CVE counts by severity' }, + { art: 'Art. 21 (2e)', label: 'Patch & vulnerability management', detail: 'Per-device update status, vulnerability triage with reasoned, audited decisions' }, { art: 'Art. 21 (2h)', label: 'Asset management & access control', detail: 'Full device inventory, RBAC with four roles, complete audit log' }, { art: 'Art. 21 (2a)', label: 'Risk analysis baseline', detail: 'Config drift detection, SNMP health metrics, security agent coverage' }, { art: 'Art. 21 (2b)', label: 'Incident detection', detail: 'Wazuh alert history, CrowdSec decisions, Graylog syslog per device' }, @@ -96,7 +110,7 @@ const en = { pluginsBody: 'Integrations (Wazuh, Graylog, CrowdSec, apt-cacher-ng, EOL Tracking) are plugins that register into the plugin system — they can be enabled or disabled per deployment without code changes. Adding a new integration follows a documented pattern with a hook bus, typed metadata, and a plugin registry.', pluginsLink: 'Plugin system docs →', deployHeading: 'Self-hosted. One command.', - deployBody: 'netOrk runs in Docker Compose. Five containers: API, two worker pools, a Beat scheduler, and an nginx UI server. No external dependencies beyond Redis and PostgreSQL.', + deployBody: 'netOrk runs in Docker Compose: the API, three worker pools, a Beat scheduler and an nginx UI server, alongside Flower, a local image registry, an APT cache and a Signal gateway for notifications. Redis and PostgreSQL are all it needs besides — bundled, or your own database.', ctaHeading: 'Interested?', ctaBody: 'Deployment options and hosted plans are coming. Get in touch for early access.', ctaButton: 'Get in touch →', @@ -563,26 +577,40 @@ const de: Translations = { }, screenshot2: { heading: 'Intent-basiertes VLAN- und SSID-Management', - body: 'VLAN-Namen und SSID-Einstellungen einmal definieren. netOrk vergleicht sie bei jeder Abfrage mit jedem Gerät und korrigiert Abweichungen automatisch via UCI (OpenWRT) oder der nativen Geräte-API.', + body: 'VLAN-Namen und SSID-Einstellungen einmal definieren. netOrk vergleicht sie bei jeder Abfrage mit jedem Gerät, zeigt jede Abweichung und korrigiert sie via UCI (OpenWrt) oder der nativen Geräte-API — automatisch nur dort, wo du das eingeschaltet hast.', }, screenshot3: { - heading: 'Sicherheitssichtbarkeit pro Gerät', - body: 'Wazuh-Agent-Status, CVE-Anzahl nach Schweregrad und aktuelle Alerts — alle mit dem Gerätedatensatz verknüpft. Ein-Klick-Agent-Installation falls der Agent fehlt. Graylog-Syslog-Weiterleitungsstatus mit Auto-Fix.', + heading: 'Eine Sicherheitsbewertung für jedes Gerät', + body: 'TLS und SSH mit Note A bis F, installierte Software und Container-Images gegen bekannte Schwachstellen abgeglichen, Härtungs-Benchmarks und Netz-Exposition — bewertet danach, was ein Befund auf genau diesem Gerät bedeutet, ohne Agent.', }, screenshot4: { - heading: 'Konfigurationsbackup und -versionierung', - body: 'Bei jedem Poll wird ein Konfigurationssnapshot in einem lokalen Git-Repository gespeichert. Der Config-Tab zeigt die vollständige Snapshot-Historie, einen Side-by-Side-Diff zwischen beliebigen Zeitpunkten und — für OPNsense — einen Restore-Button. Nicht autorisierte Änderungen erscheinen als Gerätewarnung.', + heading: 'Eine Triage-Queue, Entscheidungen, die halten', + body: 'Jede Schwachstelle über alle Geräte in einer Liste, das Dringendste zuerst, jede Zeile mit Begründung. Als nicht zutreffend markieren, bis zu einem Datum akzeptieren oder zurückstellen, oder als behoben — immer mit Begründung. Zurückgestelltes kommt von selbst zurück, Behebungen verifizieren die nächsten Bewertungen.', }, screenshot5: { heading: 'Dashboards, die du wirklich selbst baust', - body: 'Aus 13 Widgets wählen und auf einem WYSIWYG-Grid anordnen — kein festes Layout mehr. Ein Dashboard mit einem Kollegen teilen, der es abonnieren oder in eine eigene Kopie klonen kann, und Favoriten im Hauptmenü anpinnen.', + body: 'Aus 18 Widgets wählen und auf einem WYSIWYG-Grid anordnen — kein festes Layout mehr. Ein Dashboard mit einem Kollegen teilen, der es abonnieren oder in eine eigene Kopie klonen kann, und Favoriten im Hauptmenü anpinnen.', + }, + screenshot6: { + heading: 'Service-Checks jede Minute', + body: 'DNS, Zeitserver, VPN-Tunnel, Kerndienste und Gateways werden etwa einmal pro Minute geprüft — abgeleitet aus dem, was netOrk ohnehin weiß, ohne Einrichtung. Ein Check meldet sich nach drei Fehlschlägen in Folge, und ein ganzer Standort, der ausfällt, ist eine Nachricht statt fünfzig.', + }, + shotAlt: { + devices: 'Geräteinventar in netOrk mit Hostnamen, Herstellern, Gerätetypen, Standorten und Status', + deviceDetail: 'Schnittstellen eines Access Points in netOrk, mit VLANs, Nachbarn und Link-Status', + vlans: 'VLAN-Liste in netOrk, nach Standort gruppiert mit Geräteanzahl', + deviceSecurity: 'Security-Tab eines Servers in netOrk: Warnungen, Konfigurationsnote und Schwachstellenanzahl', + vulnerabilities: 'Schwachstellen-Triage-Queue in netOrk mit Schweregrad, Begründung und betroffenen Geräten', + dashboard: 'netOrk-Dashboard mit Gerätestatistik, Warnungen, Zertifikatsablauf und geplanten Aktionen', + serviceChecks: 'Service-Checks in netOrk: DNS, Gateways und weitere Checks mit Zustand und Latenz', + auditLog: 'Audit-Log in netOrk mit Benutzeraktionen und Ergebnissen von Hintergrundaufgaben, exportierbar als CSV und PDF', }, nis2Label: 'NIS2 · Art. 21', nis2Heading: 'Nachweise, keine Papierwüste.', nis2Body: 'NIS2 Art. 21 schreibt Geräteinventar, Patch-Management, Zugangskontrolle und Audit-Trails als technische Basismaßnahmen vor. netOrk fügt keine Compliance-Schicht auf — das sind seine normalen Tagesausgaben.', nis2Link: 'Vollständiges Art. 21-Mapping →', nis2Items: [ - { art: 'Art. 21 (2e)', label: 'Patch- & Schwachstellen-Management', detail: 'Update-Status pro Gerät, Wazuh-CVE-Anzahl nach Schweregrad' }, + { art: 'Art. 21 (2e)', label: 'Patch- & Schwachstellen-Management', detail: 'Update-Status pro Gerät, Schwachstellen-Triage mit begründeten, protokollierten Entscheidungen' }, { art: 'Art. 21 (2h)', label: 'Asset-Management & Zugangskontrolle', detail: 'Vollständiges Geräteinventar, RBAC mit vier Rollen, vollständiges Audit-Log' }, { art: 'Art. 21 (2a)', label: 'Risikoanalyse-Baseline', detail: 'Konfigurationsdrift-Erkennung, SNMP-Gesundheitsmetriken, Security-Agent-Abdeckung' }, { art: 'Art. 21 (2b)', label: 'Incident-Erkennung', detail: 'Wazuh-Alert-Historie, CrowdSec-Entscheidungen, Graylog-Syslog pro Gerät' }, @@ -591,7 +619,7 @@ const de: Translations = { pluginsBody: 'Integrationen (Wazuh, Graylog, CrowdSec, apt-cacher-ng, EOL-Tracking) sind Plugins, die im Plugin-System registriert werden — sie lassen sich pro Deployment ohne Code-Änderungen aktivieren oder deaktivieren. Eine neue Integration folgt einem dokumentierten Muster mit Hook-Bus, typisiertem Metadatum und Plugin-Registry.', pluginsLink: 'Plugin-System-Dokumentation →', deployHeading: 'Self-hosted. Ein Befehl.', - deployBody: 'netOrk läuft in Docker Compose. Fünf Container: API, zwei Worker-Pools, ein Beat-Scheduler und ein nginx-UI-Server. Keine externen Abhängigkeiten außer Redis und PostgreSQL.', + deployBody: 'netOrk läuft in Docker Compose: die API, drei Worker-Pools, ein Beat-Scheduler und ein nginx-UI-Server, daneben Flower, eine lokale Image-Registry, ein APT-Cache und ein Signal-Gateway für Benachrichtigungen. Sonst braucht es nur Redis und PostgreSQL — mitgeliefert oder die eigene Datenbank.', ctaHeading: 'Interesse?', ctaBody: 'Deployment-Optionen und gehostete Pläne folgen. Jetzt Kontakt aufnehmen für Early Access.', ctaButton: 'Kontakt aufnehmen →', diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index d24bb5a..f953694 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -15,7 +15,7 @@ const DRIVERS = [ 'TP-Link JetStream', 'Yealink', 'Zyxel VMG', ] -function BrowserFrame({ label, children }: { label: string; children: React.ReactNode }) { +function Screenshot({ src, label, alt }: { src: string; label: string; alt: string }) { return (
@@ -24,282 +24,7 @@ function BrowserFrame({ label, children }: { label: string; children: React.Reac {label}
- {children} -
- ) -} - -function StatusBadge({ status }: { status: 'active' | 'warning' | 'offline' }) { - const cls = - status === 'active' ? 'bg-green-500/20 text-green-400' : - status === 'warning' ? 'bg-yellow-500/20 text-yellow-400' : - 'bg-red-500/20 text-red-400' - return ( - - {status} - - ) -} - -function MockDeviceList() { - const rows = [ - { name: 'fw-001.lan', ip: '10.0.0.1', driver: 'OPNsense', status: 'active' as const }, - { name: 'sw-core.lan', ip: '10.0.0.2', driver: 'HP ProCurve', status: 'warning' as const }, - { name: 'ap-001.lan', ip: '10.0.0.10', driver: 'OpenWRT', status: 'active' as const }, - { name: 'ap-002.lan', ip: '10.0.0.11', driver: 'OpenWRT', status: 'warning' as const }, - { name: 'pve-01.lan', ip: '10.0.0.20', driver: 'Proxmox VE', status: 'active' as const }, - { name: 'nas-01.lan', ip: '10.0.0.30', driver: 'OpenMediaVault', status: 'active' as const }, - ] - - return ( -
-
- Devices - Discovery -
-
- - - - - - - - - - - {rows.map((r) => ( - - - - - - - ))} - -
HostnameIPDriverStatus
{r.name}{r.ip}{r.driver}
-
-
- ) -} - -function MockDeviceDetail() { - return ( -
-
-
-
-

ap-001.lan

-

10.0.0.10

-
- -
-
-
Vendor

GL.iNet

-
OS

OpenWRT 23.05

-
Driver

openwrt

-
Last poll

2 min ago

-
-
-
- {['Interfaces', 'LLDP', 'ARP', 'VLANs', 'Services'].map((t) => ( - {t} - ))} -
-
- - - - - - - - {[['br-lan', '10.0.0.10/24', 'up'], ['wlan0', '—', 'up'], ['eth0', '—', 'up']].map(([iface, ip, state]) => ( - - - - - - ))} - -
InterfaceIPState
{iface}{ip}{state}
-
-
- ) -} - -function MockVlans() { - return ( -
-
- VLANs - + Add VLAN -
-
- {[ - { id: 10, name: 'management', devices: 6, drift: false }, - { id: 20, name: 'iot', devices: 4, drift: true }, - { id: 30, name: 'servers', devices: 3, drift: false }, - { id: 40, name: 'guest', devices: 2, drift: false }, - ].map((v) => ( -
-
- #{v.id} - {v.name} -
-
- {v.devices} devices - {v.drift - ? drift - : clean - } -
-
- ))} -
-
-

Drift detected — VLAN 20 (iot)

-

ap-002.lan: VLAN name mismatch. Expected "iot", got "IoT-devices".

- -
-
- ) -} - -function MockConfigDiff() { - const snapshots = [ - { id: 'a3f9c1', when: '2 min ago', label: 'current' }, - { id: '7e2b04', when: '1 h ago' }, - { id: 'd819e6', when: '6 h ago' }, - ] - return ( -
-
- Config — fw-001.lan - -
-
- {snapshots.map((s) => ( - - {s.id} · {s.when} - - ))} -
-
-
7e2b04 → a3f9c1
-
- set firewall.rule_42.destination_port='22'
-
+ set firewall.rule_42.destination_port='2222'
-
commit
-
-
-

Unauthorized change detected — fw-001.lan

-

Configuration changed outside netOrk between the last two polls.

-
-
- ) -} - -function MockDashboard() { - const widgets = [ - { label: 'Stats', span: 'col-span-2' }, - { label: 'Device Warnings', span: 'col-span-1' }, - { label: 'Network Topology', span: 'col-span-2' }, - { label: 'EOL Status', span: 'col-span-1' }, - ] - return ( -
-
- My Dashboard -
- shared - + Add Widget -
-
-
- {widgets.map((w) => ( -
- {w.label} -
- ))} -
-
- ) -} - -function MockCompliance() { - const checks = [ - { label: 'Asset inventory', detail: '18 / 18 devices tracked', ok: true }, - { label: 'Patch status', detail: 'All devices polled < 60 min', ok: true }, - { label: 'Wazuh agents', detail: '15 / 18 agents active', ok: false }, - { label: 'Syslog forwarding', detail: '14 / 18 forwarding to Graylog', ok: false }, - { label: 'Config drift', detail: '0 drifted devices', ok: true }, - { label: 'Audit log', detail: '23 actions logged (24 h)', ok: true }, - ] - return ( -
-
- Compliance overview — HQ - Art. 21 NIS2 -
-
- {checks.map((c) => ( -
-
- - {c.ok ? '✓' : '⚠'} - - {c.label} -
- {c.detail} -
- ))} -
-
- ) -} - -function MockSecurity() { - return ( -
-
- Security — ap-001.lan -
-
-
-
- Wazuh Agent - -
-
-
-

2

-

Critical

-
-
-

7

-

High

-
-
-

14

-

Medium

-
-
-
-
-
- Graylog syslog - forwarding -
-

10.0.0.50:514 (UDP)

-
-
-
- CrowdSec - active -
-

3 decisions · 0 bans (24 h)

-
-
+ {alt}
) } @@ -336,9 +61,7 @@ export default function Home() {
- - - +
@@ -414,45 +137,42 @@ export default function Home() {

{h.screenshot1.heading}

{linkify(h.screenshot1.body)}

- - - +
- - - -
+

{h.screenshot2.heading}

{linkify(h.screenshot2.body)}

+

{h.screenshot3.heading}

{linkify(h.screenshot3.body)}

- - - +
- - - -
+

{h.screenshot4.heading}

{linkify(h.screenshot4.body)}

+

{h.screenshot5.heading}

{linkify(h.screenshot5.body)}

- - - + +
+
+
+

{h.screenshot6.heading}

+

{linkify(h.screenshot6.body)}

+
+
@@ -485,9 +205,7 @@ export default function Home() { ))}
- - - +