Ports-Tab: TCP/UDP mit gleicher Port-Nummer in eine Zeile mergen #32

Closed
opened 2026-06-01 22:11:17 +00:00 by chinux · 1 comment
Owner

Ziel

Gescannte Ports mit gleicher Nummer, aber unterschiedlichem Protokoll (TCP/UDP), in einer Zeile zusammenfassen und das Protokoll entsprechend darstellen (z. B. 53 — tcp/udp).

Ist-Zustand

frontend/src/lib/components/admin-vm-modal/tabs/PortsTab.svelte rendert {#each ports as p} (Z. 259) — eine Zeile pro scan_data-Eintrag, also je (port, protocol). Port 53 tcp und 53 udp ergeben zwei Zeilen. ports = r.snapshot?.scan_data (Liste {port, protocol, state, service, …}, ggf. zusätzlich process/exposure aus #16).

Fix (Frontend, Display-Merge)

Eine abgeleitete Liste mergedPorts einführen, gruppiert nach port:

const mergedPorts = $derived.by(() => {
  const m = new Map<number, { port: number; protocols: Set<string>; states: Set<string>; service: string }>();
  for (const p of ports) {
    const e = m.get(p.port) ?? { port: p.port, protocols: new Set(), states: new Set(), service: p.service || "" };
    if (p.protocol) e.protocols.add(String(p.protocol).toLowerCase());
    if (p.state)    e.states.add(String(p.state));
    if (!e.service && p.service) e.service = p.service;
    m.set(p.port, e);
  }
  return [...m.values()]
    .sort((a, b) => a.port - b.port)
    .map(e => ({
      port:     e.port,
      protocol: [...e.protocols].sort().join("/"),   // "tcp" | "udp" | "tcp/udp"
      state:    [...e.states].join(", ") || "-",
      service:  e.service || "-",
    }));
});

Im {#each} mergedPorts statt ports verwenden; Protokoll-Spalte zeigt tcp/udp. tunnelForPort(p.port) bleibt (per Port). Falls #16-Spalten process/exposure angezeigt werden: Werte unionen (Prozess i. d. R. identisch; Exposure = höchste, public vor local).

Nebeneffekt (relevant für #35)

Die Gruppierung nach port kollabiert zugleich Doppel-Einträge desselben (port, protocol) aus IPv4-/IPv6-Binds (z. B. 0.0.0.0:22 + [::]:22) — das adressiert das „doppelt"-Problem aus #35 im Display.

Gleiches Muster

Wenn der Node-Ports-Panel (NodePortsPanel.svelte) bzw. eine Security-Ansicht ebenfalls gescannte Ports je Protokoll-Zeile listet, dort denselben Merge anwenden.

Akzeptanz

  • Ein Port mit tcp und udp erscheint als eine Zeile mit tcp/udp.
  • Reine tcp- oder udp-Ports unverändert.
  • Tunnel-Zuordnung pro Port funktioniert weiter.

Branch

feat/ports-merge-protocols

## Ziel Gescannte Ports mit gleicher Nummer, aber unterschiedlichem Protokoll (TCP/UDP), in **einer** Zeile zusammenfassen und das Protokoll entsprechend darstellen (z. B. `53 — tcp/udp`). ## Ist-Zustand `frontend/src/lib/components/admin-vm-modal/tabs/PortsTab.svelte` rendert `{#each ports as p}` (Z. 259) — eine Zeile **pro `scan_data`-Eintrag**, also je `(port, protocol)`. Port 53 tcp und 53 udp ergeben zwei Zeilen. `ports` = `r.snapshot?.scan_data` (Liste `{port, protocol, state, service, …}`, ggf. zusätzlich `process`/`exposure` aus #16). ## Fix (Frontend, Display-Merge) Eine abgeleitete Liste `mergedPorts` einführen, gruppiert nach `port`: ```ts const mergedPorts = $derived.by(() => { const m = new Map<number, { port: number; protocols: Set<string>; states: Set<string>; service: string }>(); for (const p of ports) { const e = m.get(p.port) ?? { port: p.port, protocols: new Set(), states: new Set(), service: p.service || "" }; if (p.protocol) e.protocols.add(String(p.protocol).toLowerCase()); if (p.state) e.states.add(String(p.state)); if (!e.service && p.service) e.service = p.service; m.set(p.port, e); } return [...m.values()] .sort((a, b) => a.port - b.port) .map(e => ({ port: e.port, protocol: [...e.protocols].sort().join("/"), // "tcp" | "udp" | "tcp/udp" state: [...e.states].join(", ") || "-", service: e.service || "-", })); }); ``` Im `{#each}` `mergedPorts` statt `ports` verwenden; Protokoll-Spalte zeigt `tcp/udp`. `tunnelForPort(p.port)` bleibt (per Port). Falls #16-Spalten `process`/`exposure` angezeigt werden: Werte unionen (Prozess i. d. R. identisch; Exposure = höchste, `public` vor `local`). ## Nebeneffekt (relevant für #35) Die Gruppierung nach `port` kollabiert zugleich Doppel-Einträge desselben `(port, protocol)` aus IPv4-/IPv6-Binds (z. B. `0.0.0.0:22` + `[::]:22`) — das adressiert das „doppelt"-Problem aus #35 im Display. ## Gleiches Muster Wenn der Node-Ports-Panel (`NodePortsPanel.svelte`) bzw. eine Security-Ansicht ebenfalls gescannte Ports je Protokoll-Zeile listet, dort denselben Merge anwenden. ## Akzeptanz - Ein Port mit tcp **und** udp erscheint als eine Zeile mit `tcp/udp`. - Reine tcp- oder udp-Ports unverändert. - Tunnel-Zuordnung pro Port funktioniert weiter. ## Branch `feat/ports-merge-protocols`
Author
Owner

Services werden nicht angezeigt, werden die vom Agent übergeben ?
Wenn nicht einbauen.

Services werden nicht angezeigt, werden die vom Agent übergeben ? Wenn nicht einbauen.
chinux changed title from Port im Tab Ports mergen to Ports-Tab: TCP/UDP mit gleicher Port-Nummer in eine Zeile mergen 2026-06-01 22:23:16 +00:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
chinux/theProx#32
No description provided.