This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-horizon-ui.git
The following commit(s) were added to refs/heads/main by this push:
new b22827b ui: revert keepNarrower — instance must drop on service-id
change
b22827b is described below
commit b22827b9ad1ee3bd8ed4b1ade4c82f3c74b01db8
Author: Wu Sheng <[email protected]>
AuthorDate: Sun May 17 11:03:57 2026 +0800
ui: revert keepNarrower — instance must drop on service-id change
The previous commit's `keepNarrower: true` on the auto-repair path
preserved `?instance=` across service-id rewrites. That breaks every
platform layer (so11y_java_agent / so11y_go_agent / etc): when the URL
service id no longer exists in the sampled subset, the shell repaired
service to the first sampled row but kept the OLD service's instance,
and the BFF then refused to auto-pick (because `?instance=` was set)
even though the instance doesn't belong to the new service. Result —
dashboards went blank.
Instance / endpoint are derived from the service. Whenever the URL's
service id changes (whether the operator clicked a different row or
the shell repaired a stale id), the narrower picks have to go so the
auto-pick chain (instance-list watch + BFF first-instance fallback)
can rebind to the new service.
Reverts setSelected back to the unconditional drop. LayerShell +
LayerDashboardsView watches go back to the plain `setSelected(...)`
call.
---
apps/ui/src/layer/LayerShell.vue | 12 +++++-------
apps/ui/src/layer/useSelectedService.ts | 22 ++++++----------------
.../render/layer-dashboard/LayerDashboardsView.vue | 6 +-----
3 files changed, 12 insertions(+), 28 deletions(-)
diff --git a/apps/ui/src/layer/LayerShell.vue b/apps/ui/src/layer/LayerShell.vue
index 9854d32..f568b00 100644
--- a/apps/ui/src/layer/LayerShell.vue
+++ b/apps/ui/src/layer/LayerShell.vue
@@ -151,12 +151,10 @@ const selectedName = computed(() => {
// say) can flip the same meta flag without touching this file.
const viewOwnsServiceSelector = computed(() =>
Boolean(route.meta?.ownsServiceSelector));
-// Seed `?service=` on first visit and repair a stale URL pick (a
-// bookmark / cross-layer link whose service no longer exists). The
-// repair call passes `keepNarrower: true` so the auto-rewrite during
-// a periodic refetch can't silently drop a still-valid `?instance=` /
-// `?endpoint=` — that drop is reserved for the user explicitly picking
-// a different service in the dropdown (pickService).
+// Keep the URL-backed service selection honest for every page that
+// uses the shell picker. A stale `?service=` can survive navigation or
+// manual URL entry; the switch label used to fall back visually to the
+// first row while the metric query still waited for a valid service.
watch(
[sampledServices, selectedId, viewOwnsServiceSelector],
([rows, id, ownsSelector]) => {
@@ -164,7 +162,7 @@ watch(
const first = rows[0];
if (!first) return;
if (!id || !rows.some((s) => s.serviceId === id)) {
- setSelected(first.serviceId, { keepNarrower: Boolean(id) });
+ setSelected(first.serviceId);
}
},
{ immediate: true },
diff --git a/apps/ui/src/layer/useSelectedService.ts
b/apps/ui/src/layer/useSelectedService.ts
index 4f0c277..a8d84b5 100644
--- a/apps/ui/src/layer/useSelectedService.ts
+++ b/apps/ui/src/layer/useSelectedService.ts
@@ -36,27 +36,17 @@ export function useSelectedService() {
return null;
});
- /**
- * Update the URL-backed service selection.
- *
- * `opts.keepNarrower` controls whether sibling `?instance=` /
- * `?endpoint=` params survive. Default `false` matches the user
- * clicking a different service in the picker — those narrower picks
- * belong to the OLD service and have to go. Auto-repair callers (the
- * shell's "URL points at a service no longer in the sampled subset"
- * watch) pass `true` so the URL's existing instance/endpoint isn't
- * blown away as a side-effect of a service-side refresh.
- */
- function setSelected(id: string | null, opts: { keepNarrower?: boolean } =
{}): void {
+ function setSelected(id: string | null): void {
const next = { ...route.query };
const current = typeof route.query.service === 'string' ?
route.query.service : null;
if (id === current) return;
if (id) next.service = id;
else delete next.service;
- if (!opts.keepNarrower) {
- delete next.instance;
- delete next.endpoint;
- }
+ // Instance / endpoint choices are derived from the selected service.
+ // When the service changes, drop the narrower entity so each
+ // dashboard can auto-pick from the new service's own list.
+ delete next.instance;
+ delete next.endpoint;
// `replace` instead of `push` — switching services shouldn't bloat
// the browser back stack with N entries.
void router.replace({ path: route.path, query: next });
diff --git a/apps/ui/src/render/layer-dashboard/LayerDashboardsView.vue
b/apps/ui/src/render/layer-dashboard/LayerDashboardsView.vue
index d5c55c9..800ab83 100644
--- a/apps/ui/src/render/layer-dashboard/LayerDashboardsView.vue
+++ b/apps/ui/src/render/layer-dashboard/LayerDashboardsView.vue
@@ -140,12 +140,8 @@ const landingRows = computed(() =>
landing.data.value?.sampledRows ?? landing.ro
watch(landingRows, (rows) => {
const first = rows[0];
if (!first) return;
- // `keepNarrower: true` when repairing an existing URL pick so a
- // periodic landing refetch can't silently drop the operator's
- // `?instance=` / `?endpoint=` — only a fresh seed (no `?service=`
- // yet) is allowed to start from a clean slate.
if (!selectedId.value || !rows.some((r) => r.serviceId ===
selectedId.value)) {
- setSelectedService(first.serviceId, { keepNarrower:
Boolean(selectedId.value) });
+ setSelectedService(first.serviceId);
}
}, { immediate: true });
// Drop the stale instance whenever the service changes — the new
