This is an automated email from the ASF dual-hosted git repository. wu-sheng pushed a commit to branch refactor/decompose-large-files in repository https://gitbox.apache.org/repos/asf/skywalking-horizon-ui.git
commit 9173d02ec549d4c7a545b47713c28fcd07b0cac0 Author: Wu Sheng <[email protected]> AuthorDate: Sat Jun 27 01:52:04 2026 +0800 fix(ui): close verified gap-review findings - Logs: reset page to 1 on service switch (stale pagination) - Browser Errors: clear the selected source map on service switch (don't resolve B's errors against A's map) - NewEBPFTaskModal: full form reset on reopen (was leaving targetType/monitorTime stale) - DensityHistogram: labelCase prop so Browser Errors' tooltip matches its uppercase legend - LayerDashboardsAdmin: correct the stale save-path note + record the staged decomposition --- .../src/features/admin/layer-templates/LayerDashboardsAdmin.vue | 9 ++++++--- apps/ui/src/layer/_shared/DensityHistogram.vue | 4 +++- apps/ui/src/layer/browser-errors/LayerBrowserErrorsView.vue | 3 ++- apps/ui/src/layer/logs/LayerLogsView.vue | 1 + apps/ui/src/layer/profiling/NewEBPFTaskModal.vue | 9 ++++++++- 5 files changed, 20 insertions(+), 6 deletions(-) diff --git a/apps/ui/src/features/admin/layer-templates/LayerDashboardsAdmin.vue b/apps/ui/src/features/admin/layer-templates/LayerDashboardsAdmin.vue index 7f91e99..5cfb2bd 100644 --- a/apps/ui/src/features/admin/layer-templates/LayerDashboardsAdmin.vue +++ b/apps/ui/src/features/admin/layer-templates/LayerDashboardsAdmin.vue @@ -16,15 +16,18 @@ --> <!-- Admin / Layer dashboards. List every loaded layer template, pick one - on the left, edit its per-scope widget set on the right. Saves write - the JSON file back via POST /api/admin/layer-templates/:key so the - BFF refreshes its in-memory cache. + on the left, edit its per-scope widget set on the right. Saves go + through the template-sync store (bff.templateSync.save) which persists + to OAP and refreshes the BFF's in-memory cache. Widget editor presents the new span-based fields (12-col flow layout): operator picks a column span, optional row span, MQE expressions, type, title, unit, and an optional visibility predicate. Legacy x/y/w/h are NOT shown — they're kept on the wire for back-compat with older JSONs but operators don't edit them. + + XL file; decomposition is staged — geometry helpers are extracted + (layer-dashboards.geometry.ts); MetricDefinitionRow + composables pending. --> <script setup lang="ts"> import { computed, reactive, ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'; diff --git a/apps/ui/src/layer/_shared/DensityHistogram.vue b/apps/ui/src/layer/_shared/DensityHistogram.vue index 9b06f45..68e6df1 100644 --- a/apps/ui/src/layer/_shared/DensityHistogram.vue +++ b/apps/ui/src/layer/_shared/DensityHistogram.vue @@ -34,6 +34,7 @@ const props = defineProps<{ data: DensityBins<K>; keys: readonly K[]; colors: Record<K, string>; + labelCase?: 'capitalize' | 'uppercase'; }>(); const hoveredBin = ref<number | null>(null); @@ -97,7 +98,7 @@ function fmtAxisTime(ts: number): string { <div class="lg-density-tip-rows"> <span v-for="k in keys" :key="k" v-show="data.bins[hoveredBin][k] > 0" class="lg-density-tip-row"> <span class="lvl-dot" :style="{ background: colors[k] }" /> - <span class="lg-density-tip-name">{{ k }}</span> + <span class="lg-density-tip-name" :class="{ upper: props.labelCase === 'uppercase' }">{{ k }}</span> <span class="lg-density-tip-val mono">{{ data.bins[hoveredBin][k] }}</span> </span> </div> @@ -161,6 +162,7 @@ function fmtAxisTime(ts: number): string { .lg-density-tip-row { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; } .lg-density-tip-row .lvl-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; } .lg-density-tip-name { color: var(--sw-fg-2); flex: 1; text-transform: capitalize; } +.lg-density-tip-name.upper { text-transform: uppercase; letter-spacing: 0.04em; } .lg-density-tip-val { color: var(--sw-fg-0); font-weight: 600; font-variant-numeric: tabular-nums; } .lg-density-axis { display: flex; diff --git a/apps/ui/src/layer/browser-errors/LayerBrowserErrorsView.vue b/apps/ui/src/layer/browser-errors/LayerBrowserErrorsView.vue index b0ff693..91b72f2 100644 --- a/apps/ui/src/layer/browser-errors/LayerBrowserErrorsView.vue +++ b/apps/ui/src/layer/browser-errors/LayerBrowserErrorsView.vue @@ -257,6 +257,7 @@ const { toggleRow, resolveRow, } = useSourceMapResolution(t); +watch(serviceName, () => { selectedMapId.value = ''; }); // idx is part of the key so rows stay uniquely keyed even when the demo // reports several errors at the identical timestamp+page+version (a @@ -364,7 +365,7 @@ function loc(row: BrowserErrorRow): string { <span class="lg-legend-sample">{{ t('{count} in window', { count: logs.length }) }}</span> </div> - <DensityHistogram :data="histogram" :keys="CATEGORY_ORDER" :colors="CATEGORY_COLOR"> + <DensityHistogram :data="histogram" :keys="CATEGORY_ORDER" :colors="CATEGORY_COLOR" :label-case="'uppercase'"> <template #tipTotal="{ total }">{{ t('{count} logs', { count: total }) }}</template> </DensityHistogram> diff --git a/apps/ui/src/layer/logs/LayerLogsView.vue b/apps/ui/src/layer/logs/LayerLogsView.vue index 2e64e06..3308f01 100644 --- a/apps/ui/src/layer/logs/LayerLogsView.vue +++ b/apps/ui/src/layer/logs/LayerLogsView.vue @@ -236,6 +236,7 @@ watch(serviceName, () => { hasQueried.value = false; selectedLevel.value = null; customTags.value = []; + page.value = 1; applyConditions(); }); const aService = computed(() => applied.value.service); diff --git a/apps/ui/src/layer/profiling/NewEBPFTaskModal.vue b/apps/ui/src/layer/profiling/NewEBPFTaskModal.vue index 63dd9b2..deef0b5 100644 --- a/apps/ui/src/layer/profiling/NewEBPFTaskModal.vue +++ b/apps/ui/src/layer/profiling/NewEBPFTaskModal.vue @@ -50,10 +50,17 @@ const newTask = reactive({ monitorMinutes: 10, }); +function resetForm(): void { + newTask.labels = []; + newTask.targetType = 'ON_CPU'; + newTask.monitorTime = 'now'; + newTask.monitorTimeAt = new Date(); + newTask.monitorMinutes = 10; +} watch( () => props.show, (open) => { - if (open) newTask.labels = []; + if (open) resetForm(); }, );
