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 6a775e1 admin(layer-templates): move display/sync controls to the top
toolbar
6a775e1 is described below
commit 6a775e107be13ab6b6451077ce775858021c24a4
Author: Wu Sheng <[email protected]>
AuthorDate: Thu May 21 21:11:35 2026 +0800
admin(layer-templates): move display/sync controls to the top toolbar
The "Diverged only" filter + "Showing: Local/Remote" toggle + "Sync all
to OAP" sat in the Layers sidebar head; move them to a page-level
toolbar directly under the sync banner so the edit-mode controls are at
the top (filter left, display/sync right).
---
.../admin/layer-templates/LayerDashboardsAdmin.vue | 23 +++++++++++++++-------
1 file changed, 16 insertions(+), 7 deletions(-)
diff --git
a/apps/ui/src/features/admin/layer-templates/LayerDashboardsAdmin.vue
b/apps/ui/src/features/admin/layer-templates/LayerDashboardsAdmin.vue
index 20bf99f..9e2d24a 100644
--- a/apps/ui/src/features/admin/layer-templates/LayerDashboardsAdmin.vue
+++ b/apps/ui/src/features/admin/layer-templates/LayerDashboardsAdmin.vue
@@ -922,6 +922,14 @@ const namingTest = computed<NamingTestResult>(() => {
<SyncStatusBanner :banner="sync.banner.value" />
+ <div class="top-actions">
+ <label class="diverged-filter" :class="{ on: divergedOnly }"
:title="divergedCount === 0 ? 'No layers differ from OAP' : `${divergedCount}
layer(s) differ from OAP`">
+ <input v-model="divergedOnly" type="checkbox" :disabled="divergedCount
=== 0" />
+ Diverged only<span v-if="divergedCount" class="diverged-count">{{
divergedCount }}</span>
+ </label>
+ <SyncAllButton kind="layer" />
+ </div>
+
<div v-if="error" class="banner err">{{ error }}</div>
<div v-if="isLoading" class="empty">Loading templates…</div>
<div v-else-if="templates.length === 0" class="empty">No layer templates
loaded.</div>
@@ -955,13 +963,6 @@ const namingTest = computed<NamingTestResult>(() => {
spellcheck="false"
/>
</div>
- <div class="list-actions">
- <label class="diverged-filter" :class="{ on: divergedOnly }"
:title="divergedCount === 0 ? 'No layers differ from OAP' : `${divergedCount}
layer(s) differ from OAP`">
- <input v-model="divergedOnly" type="checkbox"
:disabled="divergedCount === 0" />
- Diverged only<span v-if="divergedCount"
class="diverged-count">{{ divergedCount }}</span>
- </label>
- <SyncAllButton kind="layer" />
- </div>
<button
v-for="t in filteredTemplates"
:key="t.key"
@@ -2149,6 +2150,14 @@ const namingTest = computed<NamingTestResult>(() => {
gap: 8px;
padding: 0 10px 8px;
}
+/* Page-level display/sync controls, directly under the sync banner. */
+.top-actions {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin: 8px 0 4px;
+}
+.top-actions .diverged-filter { margin-right: auto; }
.diverged-filter {
display: inline-flex;
align-items: center;
