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 f72161d ui dashboards: instance + endpoint pickers key off
serviceHandle, not the post-landing name
f72161d is described below
commit f72161d663e67abf9e8228ae15ef7d3e064068c2
Author: Wu Sheng <[email protected]>
AuthorDate: Sun May 17 17:33:11 2026 +0800
ui dashboards: instance + endpoint pickers key off serviceHandle, not the
post-landing name
The picker's empty-state gate said \`v-if="!serviceName"\` — that's
null on a hard refresh until the landing query returns. Meanwhile
the underlying instance/endpoint query has already fired against
\`serviceHandle\` (which falls back to the URL service id), so the
list IS in flight (or loaded) but the picker shows "Pick a service
in the picker above" instead.
Both pickers now gate on \`serviceHandle\` (id-or-name, same handle
the query uses) and the "for X" header shows the resolved name
when available, falling back to the URL id otherwise. Empty/loading
states still distinguish via \`instancesLoading\` /
\`endpointsLoading\`.
The actual auto-pick + selection logic is unchanged — this is a
display-only fix to align the picker's render conditions with the
query that's actually feeding it.
---
.../render/layer-dashboard/LayerDashboardsView.vue | 26 ++++++++++++++++------
1 file changed, 19 insertions(+), 7 deletions(-)
diff --git a/apps/ui/src/render/layer-dashboard/LayerDashboardsView.vue
b/apps/ui/src/render/layer-dashboard/LayerDashboardsView.vue
index 4ef9eca..ecfa7ed 100644
--- a/apps/ui/src/render/layer-dashboard/LayerDashboardsView.vue
+++ b/apps/ui/src/render/layer-dashboard/LayerDashboardsView.vue
@@ -373,17 +373,24 @@ function isVisible(
<section v-if="scope === 'instance'" class="instance-bar sw-card">
<header class="ib-head">
<span class="kicker">Instance</span>
- <span v-if="serviceName" class="for-svc">
- for <b>{{ serviceName }}</b>
+ <span v-if="serviceHandle" class="for-svc">
+ for <b>{{ serviceName ?? serviceHandle }}</b>
<span v-if="instanceList.length > 0" class="count">{{
instanceList.length }}</span>
</span>
<span v-if="instancesLoading" class="hint">loading…</span>
</header>
- <div v-if="!serviceName" class="empty inline">
+ <!-- Empty-state gate keys off `serviceHandle` (URL pick OR
+ resolved name) not just `serviceName`. On a hard refresh,
+ landing hasn't returned yet so `serviceName` is null, but
+ `serviceHandle` already has the URL service id and the
+ instance query has already fired against it — so we
+ render the list right away instead of flashing "Pick a
+ service" while the list IS in fact loading. -->
+ <div v-if="!serviceHandle" class="empty inline">
Pick a service in the picker above to list its instances.
</div>
<div v-else-if="!instancesLoading && instanceList.length === 0"
class="empty inline">
- No active instances reported for {{ serviceName }} in the last 15
minutes.
+ No active instances reported for {{ serviceName ?? serviceHandle }} in
the last 15 minutes.
</div>
<ul v-else class="ib-list">
<li
@@ -427,13 +434,18 @@ function isVisible(
<section v-if="scope === 'endpoint'" class="instance-bar sw-card">
<header class="ib-head">
<span class="kicker">Endpoint</span>
- <span v-if="serviceName" class="for-svc">
- for <b>{{ serviceName }}</b>
+ <span v-if="serviceHandle" class="for-svc">
+ for <b>{{ serviceName ?? serviceHandle }}</b>
<span v-if="endpointList.length > 0" class="count">{{
endpointList.length }}</span>
</span>
<span v-if="endpointsLoading" class="hint">loading…</span>
</header>
- <div v-if="!serviceName" class="empty inline">
+ <!-- Same fix as the instance picker above: gate on the URL
+ service handle (id or name), not the post-landing
+ resolved name, so a hard refresh doesn't flash a "Pick a
+ service" empty state while the endpoint query is already
+ in flight against the URL id. -->
+ <div v-if="!serviceHandle" class="empty inline">
Pick a service in the picker above to search its endpoints.
</div>
<template v-else>
