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 806a133 ui layer-shell: don't flash 'Layer not found' during
post-login redirect
806a133 is described below
commit 806a13397ef348740f8c3b9388d336f181ec24c3
Author: Wu Sheng <[email protected]>
AuthorDate: Sun May 17 17:25:53 2026 +0800
ui layer-shell: don't flash 'Layer not found' during post-login redirect
The fallback `<div v-if="!layer">` rendered the moment the menu
fetch hadn't returned yet — exactly the window operators hit when
they log in and the auth guard redirects them to a deep layer URL
(layers.value is still []). The "not found" copy is misleading
there; the layer might be perfectly fine, just not yet known to
the SPA.
Split the guard:
- `menuStillLoading` (menu in flight, no result yet) → "Loading
layers…" placeholder with the same card chrome.
- `layerMissing` (menu settled with a non-empty result and
the key still isn't present) → the real "Layer not found"
error.
LayerView body still gates on `layer` being resolved, so this is
display-only — no extra renders, no race rewrites.
---
apps/ui/src/layer/LayerShell.vue | 30 ++++++++++++++++++++++++++++--
1 file changed, 28 insertions(+), 2 deletions(-)
diff --git a/apps/ui/src/layer/LayerShell.vue b/apps/ui/src/layer/LayerShell.vue
index f568b00..8475e6c 100644
--- a/apps/ui/src/layer/LayerShell.vue
+++ b/apps/ui/src/layer/LayerShell.vue
@@ -44,11 +44,22 @@ import { parseServiceName } from '@/utils/serviceName';
const route = useRoute();
const router = useRouter();
const layerKey = computed(() => String(route.params.layerKey ?? ''));
-const { layers } = useLayers();
+const { layers, isLoading: layersLoading } = useLayers();
const layer = computed<LayerDef | null>(() => {
const found = layers.value.find((l) => l.key === layerKey.value);
return found ?? null;
});
+// Distinguishes "still loading" from "truly absent" so the "Layer
+// not found" card doesn't flash during a login → layer-URL redirect
+// (the menu fetch is in-flight and `layers.value` is briefly []).
+// We treat the layer as missing only after the menu request has
+// settled AND the layer key still isn't in the result.
+const layerMissing = computed<boolean>(
+ () => !layersLoading.value && layers.value.length > 0 && layer.value ===
null,
+);
+const menuStillLoading = computed<boolean>(
+ () => !layer.value && (layersLoading.value || layers.value.length === 0),
+);
// Auto-redirect when the URL targets a sub-route the layer doesn't
// support — e.g. `/layer/mesh_dp/service` on a layer with
@@ -363,7 +374,22 @@ const serviceKpis = computed<HeaderKpi[]>(() => {
@select="pickService"
/>
- <div v-if="!layer" class="missing">
+ <!-- Loading state for the menu fetch — appears in the login →
+ layer-URL redirect window where the menu is still in flight
+ and we can't yet tell whether the layer exists. -->
+ <div v-if="menuStillLoading" class="missing">
+ <div class="sw-card missing-card">
+ <Icon name="event" :size="18" />
+ <div>
+ <h2>Loading layers…</h2>
+ <p>Resolving <code>{{ layerKey }}</code> against the OAP layer
registry.</p>
+ </div>
+ </div>
+ </div>
+ <!-- Truly not in the registry. Only shown once the menu fetch
+ has settled with a non-empty result; avoids the post-login
+ "Layer not found" flash. -->
+ <div v-else-if="layerMissing" class="missing">
<div class="sw-card missing-card">
<Icon name="alert" :size="18" />
<div>
