wu-sheng opened a new pull request, #57: URL: https://github.com/apache/skywalking-horizon-ui/pull/57
## Why A single layer can host services in distinct OAP **service groups** (the `<group>::` prefix — `agent`, `team-a`, `skywalking-showcase`, …). Operators on multi-app / multi-tenant layers want each group as its own navigable menu entry, scoped to just that group's services, instead of one combined "General Service" entry holding everything. ## What **1. Split a layer's menu by service group (opt-in).** A new per-layer **Split menu by service group** toggle in the Layer dashboards admin (right after **Alias**; default **off**, persists on the template via the normal push-to-OAP flow). When on, the layer fans out into one **level-0 sidebar entry per OAP `Service.group`**: - Display name leads with the group — **`agent · General Service`** — so it reads on the sidebar, the page header, and the landing KPI tile, and the distinguishing part survives narrow-sidebar truncation. - Each entry is scoped to its group: the service header + its picker, the topology map + its in-box selector, the dashboards, and the service roster all show only that group's services. - A layer's group entries stay **contiguous** in the sidebar (base-layer priority, then group). Off ⇒ one combined entry (today's behavior). **2. Per-layer service picker shows the group.** On layers without a topology-cluster naming rule (e.g. GENERAL), the service-list rows now surface the OAP `<group>::` prefix as a chip — previously cluster-only, so blank there. **3. Resizable navigation sidebar.** Drag the divider between the sidebar and the page to resize it (double-click to reset; clamped 160–480px); the width persists per browser. Helps when long entries — like the group-split names — would otherwise truncate. ### How it's wired (for reviewers) - The shared `ServiceLayerCatalog` fan-out now selects `Service.group`; `menu.ts` enumerates distinct groups per opted-in layer and emits one `LayerDef` per group with a composite **`<layer>~<group>`** key + `serviceGroup`. - The **UI api-client `request()`** splits that composite key on the first `~` into the real layer + a `?group=` query — so the 18 layer-view components that read `route.params.layerKey` stay **untouched**; only the service-scoped BFF endpoints (`services`, `landing`, `topology` seed, `dashboard` auto-pick) filter the roster by `Service.group` (BFF-side, since OAP has no `listServices(layer, group)`). - **No new i18n**: the group is OAP-supplied data, shown verbatim. **Bundled templates unchanged** — the flag is optional, default off. - Sidebar width is a `--sw-side-w` CSS var driven by `useSidebar`. ## Validation - type-check (UI + BFF) ✓ · build (UI + BFF) ✓ · `lint` ✓ · `test:unit` (116 UI + 116 BFF) ✓ · `license:check` 0 invalid ✓ · all 8 i18n catalogs **complete** (no new keys). - **Live demo OAP**: `listServices(GENERAL)` returns `group=agent`; with the toggle on, `/api/menu` returns the split entry `key=general~agent`, `name="agent · General Service"`; the `?group=` filter scopes `services` / `landing` (5 / 5) / `topology` (9 nodes) and returns empty for an unknown group; `/api/menu` un-split (default off) is unchanged. ## Screenshots <!-- @wu-sheng: drag-and-drop the screenshots into the boxes below. --> **Sidebar with a split layer** (`agent · General Service`) + the per-layer service picker showing `GROUP · agent`: _‹screenshot placeholder — split sidebar + service list›_ **Layer dashboards admin — the "Split menu by service group" toggle** (after Alias): _‹screenshot placeholder — admin toggle›_ **Resizable sidebar** (optional — the wider sidebar): _‹screenshot placeholder — resized sidebar›_ -- 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]
