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 000d7e4 ui dashboards: widget batch fires only after entity is
verified in list
000d7e4 is described below
commit 000d7e46685c9538e8e3494010aae2ae8fcc87b0
Author: Wu Sheng <[email protected]>
AuthorDate: Sun May 17 19:52:57 2026 +0800
ui dashboards: widget batch fires only after entity is verified in list
Per operator clarification: the widget query must only fire once
the current entity has complete + verified info. No optimistic
fire with the URL value before the instance/endpoint list has
arrived — that's exactly the wrong-id round-trip we want to avoid.
effectiveInstance / effectiveEndpoint computed:
- URL pick matches a real entry in the loaded list ⇒ use it,
widget batch fires.
- URL pick doesn't match (list arrived, no match) ⇒ null;
the auto-pick / fallback watch above swaps selectedInstance
to list[0], this computed flips to the new value, batch fires.
- List not loaded yet (length 0) ⇒ null;
widget batch stays gated.
Net: one dashboard fire per (verified) selection. The wrong-id
case stops costing two BFF round-trips.
---
.../render/layer-dashboard/LayerDashboardsView.vue | 21 ++++++++++++++++++++-
1 file changed, 20 insertions(+), 1 deletion(-)
diff --git a/apps/ui/src/render/layer-dashboard/LayerDashboardsView.vue
b/apps/ui/src/render/layer-dashboard/LayerDashboardsView.vue
index 0a1727c..15dfd23 100644
--- a/apps/ui/src/render/layer-dashboard/LayerDashboardsView.vue
+++ b/apps/ui/src/render/layer-dashboard/LayerDashboardsView.vue
@@ -284,12 +284,31 @@ watch(serviceName, (next, prev) => {
// `watchEffect` above so the service → endpoint sequence is
// deterministic; no separate watch needed here.
+// Resolved entity, fed to the widget batch. Only non-null AFTER
+// the list has arrived AND the selection is verified to exist in
+// it — covers both:
+// - URL pick matches a real list entry ⇒ use it
+// - URL pick doesn't match ⇒ stay null while the
+// auto-pick/fallback watch above swaps selectedInstance to
+// list[0], which then flips this computed to the new value
+// While the list is loading (length 0) the entity is null too, so
+// the dashboard stays gated. No wasted "wrong-id then fixed" round-trip.
+const effectiveInstance = computed<string | null>(() => {
+ const v = selectedInstance.value;
+ if (!v) return null;
+ return instanceList.value.some((i) => i.name === v) ? v : null;
+});
+const effectiveEndpoint = computed<string | null>(() => {
+ const v = selectedEndpoint.value;
+ if (!v) return null;
+ return endpointList.value.some((e) => e.name === v) ? v : null;
+});
const { data, isFetching, error } = useLayerDashboard(
layerKey,
serviceName,
scope,
mockTop,
- { instance: selectedInstance, endpoint: selectedEndpoint },
+ { instance: effectiveInstance, endpoint: effectiveEndpoint },
rangeRef,
);
