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
commit 59a81372aafa081cd838fe880c5fc44e3804a94b Author: Wu Sheng <[email protected]> AuthorDate: Tue May 12 21:13:44 2026 +0800 layer: drop duplicate service name, bolder picker-row highlight The Service view header showed the selected service name as a big mono title — same name already appears on the Switch button in the layer header above. Drop it; the dash-head now only renders the 'refreshing / OAP unreachable' state pill when there's something to say. Picker active row: stronger visual emphasis so the selected service is unmistakable when scanning the list. Inset 3px accent left border, bolder accent-tinted name, pulse-dot gets a soft halo, border-bottom shifts to accent-line so the row reads as one block. Cleans 'e2e-service-provider' duplication on the Service page; the Switch button stays the canonical place to see / change selection. --- apps/ui/src/views/layer/LayerDashboardsView.vue | 22 ++++------------------ apps/ui/src/views/layer/LayerServiceSelector.vue | 10 +++++++++- 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/apps/ui/src/views/layer/LayerDashboardsView.vue b/apps/ui/src/views/layer/LayerDashboardsView.vue index b55c5b1..e707286 100644 --- a/apps/ui/src/views/layer/LayerDashboardsView.vue +++ b/apps/ui/src/views/layer/LayerDashboardsView.vue @@ -81,7 +81,6 @@ const resultsById = computed(() => { }); const reachable = computed(() => data.value?.reachable !== false); const errorText = computed(() => data.value?.error ?? (error.value ? String(error.value) : null)); -const headerTitle = computed(() => serviceName.value ?? data.value?.service ?? 'Pick a service'); /** Map a widget's grid footprint into the new 12-col flow grid. Honors * `span` / `rowSpan` first; falls back to legacy `w` / `h` (24-col @@ -130,12 +129,9 @@ function isVisible( <template> <div class="dash-tab"> - <header class="dash-head"> - <h2 class="svc-title">{{ headerTitle }}</h2> - <div class="state"> - <span v-if="isFetching" class="badge fetch">refreshing</span> - <span v-else-if="!reachable" class="badge err">OAP unreachable</span> - </div> + <header v-if="isFetching || !reachable" class="dash-head"> + <span v-if="isFetching" class="badge fetch">refreshing</span> + <span v-else-if="!reachable" class="badge err">OAP unreachable</span> </header> <div v-if="!reachable" class="banner err"> @@ -195,19 +191,9 @@ function isVisible( .dash-head { display: flex; align-items: center; + justify-content: flex-end; gap: 12px; } -.svc-title { - margin: 0; - font-size: 14px; - font-weight: 600; - color: var(--sw-fg-0); - font-family: var(--sw-mono); - letter-spacing: -0.01em; -} -.state { - margin-left: auto; -} .badge { font-size: 10px; padding: 3px 8px; diff --git a/apps/ui/src/views/layer/LayerServiceSelector.vue b/apps/ui/src/views/layer/LayerServiceSelector.vue index c819beb..a1f1106 100644 --- a/apps/ui/src/views/layer/LayerServiceSelector.vue +++ b/apps/ui/src/views/layer/LayerServiceSelector.vue @@ -202,10 +202,18 @@ function colorForStatus(s: 'ok' | 'warn' | 'err'): string { } .picker-table tr.row.active { background: var(--sw-accent-soft); + box-shadow: inset 3px 0 0 var(--sw-accent); +} +.picker-table tr.row.active td { + /* Lift the inner border so the highlight reads as one block. */ + border-bottom-color: var(--sw-accent-line); } .picker-table tr.row.active .name-text { color: var(--sw-accent-2); - font-weight: 600; + font-weight: 700; +} +.picker-table tr.row.active .pulse { + box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18); } .picker-table .empty { text-align: center;
