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 1230152 sidebar: yellow warning icon on layers with unpublished local
changes
1230152 is described below
commit 1230152ea8b313be6b1bc8a32bf2dbdcda364728
Author: Wu Sheng <[email protected]>
AuthorDate: Thu May 21 21:15:00 2026 +0800
sidebar: yellow warning icon on layers with unpublished local changes
Each per-layer sidebar row (Kubernetes, Redis, …) now shows a yellow
alert icon when that layer's template is diverged — local edits not yet
published to OAP — not just the "Layer dashboards" admin row.
---
apps/ui/src/shell/AppSidebar.vue | 31 +++++++++++++++++++++++++++++++
1 file changed, 31 insertions(+)
diff --git a/apps/ui/src/shell/AppSidebar.vue b/apps/ui/src/shell/AppSidebar.vue
index b30df55..030c117 100644
--- a/apps/ui/src/shell/AppSidebar.vue
+++ b/apps/ui/src/shell/AppSidebar.vue
@@ -274,6 +274,15 @@ function divergedCount(kind: 'layer' | 'overview'): number
{
const badges = bundle.value?.syncStatus?.badges ?? [];
return badges.filter((b) => b.kind === kind && b.status ===
'diverged').length;
}
+/** True when this layer's template has local edits not yet published to
+ * OAP (diverged) — drives the yellow warning on its sidebar row. */
+function isLayerDiverged(key: string): boolean {
+ const badges = bundle.value?.syncStatus?.badges ?? [];
+ return badges.some(
+ (b) => b.kind === 'layer' && b.status === 'diverged' &&
b.key.toUpperCase() === key.toUpperCase(),
+ );
+}
+
/** Per-route warn badge for the template-admin rows. */
function syncBadgeFor(to: string): NavRow['badge'] | undefined {
const kind = to === '/admin/layer-dashboards' ? 'layer' : to ===
'/admin/overview-templates' ? 'overview' : null;
@@ -404,6 +413,11 @@ watch(
>
<Icon :name="layerIcon(L)" />
<span class="layer-name">{{ L.name }}</span>
+ <span
+ v-if="isLayerDiverged(L.key)"
+ class="layer-warn"
+ title="Local changes not published to OAP"
+ ><Icon name="alert" :size="11" /></span>
</RouterLink>
<div
v-else
@@ -416,6 +430,11 @@ watch(
>
<Icon :name="layerIcon(L)" />
<span class="layer-name">{{ L.name }}</span>
+ <span
+ v-if="isLayerDiverged(L.key)"
+ class="layer-warn"
+ title="Local changes not published to OAP"
+ ><Icon name="alert" :size="11" /></span>
<span class="caret" :class="{ open: expandedLayer === L.key }">
<Icon name="caret" :size="10" />
</span>
@@ -924,6 +943,18 @@ watch(
text-overflow: ellipsis;
white-space: nowrap;
}
+.layer-warn {
+ display: inline-flex;
+ align-items: center;
+ flex: 0 0 auto;
+ margin: 0 2px 0 4px;
+}
+.layer-row .layer-warn :deep(svg) {
+ width: 12px;
+ height: 12px;
+ flex: 0 0 12px;
+ color: #facc15;
+}
.layer-row.direct {
text-decoration: none;
}
