wu-sheng opened a new pull request, #56: URL: https://github.com/apache/skywalking-horizon-ui/pull/56
## Why A dense service map mixes the services you actually run with the conjectured peers OAP infers from client-side exit spans (databases, queues, and bare \`host:port\` peers like \`rcmd:80\`). Operators asked for a way to drop that noise (see apache/skywalking#13914 — "too many undefined nodes"), and to read the map more quickly. This adds three operator-visible capabilities to the service map. All three live on the single \`LayerServiceMapView\` component, so the **per-layer Topology tab** and the **embedded overview topology widget** both inherit them with no extra wiring. ## What **1. Technology component icons in the node hexes.** Each node renders the icon for its detected component (the same icon set the trace waterfall already uses), so a PostgreSQL node looks like PostgreSQL and a Go service shows the Go mark. Falls back to the generic service / external / user glyph when a component ships no icon or can't be resolved. **2. Layer-based "Show nodes" filter** (top-left of the map). A standalone **User** toggle plus one auto-derived row per layer — each carrying the layer's own menu icon and its **localized** display name (`LayerDef.name`, reusing the existing template i18n) — and an **Others** bucket for nodes OAP couldn't resolve (`UNDEFINED`, e.g. `rcmd:80`). Unchecking a row hides those nodes and their now-dangling edges; rows self-populate from the live graph and re-derive on refresh / depth / time change. Client-side, defaults to showing everything. Your real databases / queues / caches stay on the map, separated by their own `VIRTUAL_*` layer rows. **3. Grouped "All services" selector.** The service picker now groups its list by the service's own group (OAP `Service.group`, the `<group>::` prefix), under a value-first `<name> [GROUP]` header. The header marker **batch-selects / unselects** the whole group (tri-state: all / some / none). This is a per-service attribute, so it works on every layer with no per-layer naming-rule setup; services with no group stay in a single header-less section. ### Notes for reviewers - **i18n:** layer names ride entirely on the existing BFF template translation (template `alias` + `*.i18n.<lang>.json` overlay → `LayerDef.name`), so they're translated automatically wherever the menu is. The only inline-English strings are the generic filter chrome (`Filter`, `Show nodes`, `User`, `Others`), consistent with the rest of this component. **No new i18n catalog entries.** - **Selection markers** are CSS-drawn circles (not font glyphs) so the group dot and the service dots are pixel-identical regardless of font fallback. - The **component facet** considered earlier was dropped in favor of the layer facet — you can still hide all databases / queues by their `VIRTUAL_*` layer row. ## Validation - `pnpm -r run type-check` (UI vue-tsc + BFF tsc) ✓ · `build` UI + BFF ✓ · `pnpm -r run lint` ✓ · `pnpm -r run test:unit` (116 UI + BFF) ✓ · `license:check` 0 invalid ✓. - i18n catalogs report **complete** for all 8 locales (no new keys added). - **Live OAP:** validated against the public Apache demo OAP — confirmed the `getServicesTopology` node payloads (`type` / `isReal` / `layers`), the layer facet resolving to localized names (General Service / Java Agent / Virtual Database / Others), and the grouped selector (`agent` group). Both surfaces render-checked (see screenshots). ## Screenshots <!-- @wu-sheng: drag-and-drop the two screenshots into the boxes below. --> **Per-layer Topology tab** — filter panel open, component icons in the hexes, grouped `agent [GROUP]` selector: _‹screenshot placeholder — layer Topology tab›_ **Overview "Topology & active alarms" widget** — same filter + icons, embedded mode: _‹screenshot placeholder — overview topology widget›_ -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
