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 0d2c5bce3ce43d3c0692ec085080cb6e14b7c8fb Author: Wu Sheng <[email protected]> AuthorDate: Fri Jun 26 23:58:39 2026 +0800 refactor(admin): start LayerDashboardsAdmin decomposition — extract grid geometry Move the canvas grid constants (CANVAS/SUBGRID/DRAWER) and the pure widget span/grid-style helpers into a sibling layer-dashboards.geometry.ts, shared by the grid-style template helpers and the drag/resize handlers. First of a staged decomposition; the large wins (a MetricDefinitionRow component for the ~14 repeated metric-edit blocks, plus sync/topology composables) follow. --- .../admin/layer-templates/LayerDashboardsAdmin.vue | 31 +++++--------- .../layer-templates/layer-dashboards.geometry.ts | 47 ++++++++++++++++++++++ 2 files changed, 58 insertions(+), 20 deletions(-) diff --git a/apps/ui/src/features/admin/layer-templates/LayerDashboardsAdmin.vue b/apps/ui/src/features/admin/layer-templates/LayerDashboardsAdmin.vue index 9c54a47..f45fbe1 100644 --- a/apps/ui/src/features/admin/layer-templates/LayerDashboardsAdmin.vue +++ b/apps/ui/src/features/admin/layer-templates/LayerDashboardsAdmin.vue @@ -46,6 +46,17 @@ import type { TopologyMetricDef, } from '@skywalking-horizon-ui/api-client'; import { collectWidgetIds } from '@skywalking-horizon-ui/api-client'; +import { + CANVAS_COLS, + CANVAS_ROW_PX, + CANVAS_GAP_PX, + SUBGRID_ROW_PX, + SUBGRID_GAP_PX, + DRAWER_COL, + widgetSpan, + widgetRowSpan, + widgetGridStyle, +} from '@/features/admin/layer-templates/layer-dashboards.geometry'; /** Admin-only scopes that aren't dashboard-widget scopes. `networkProfiling` * is the process-topology edge editor; `deployment` is the @@ -614,7 +625,6 @@ function onWinResizeScope(): void { updateScopeScroll(); } // viewport below the topbar. const drawerEl = ref<HTMLElement | null>(null); const editorCardEl = ref<HTMLElement | null>(null); -const DRAWER_COL = 360; function positionDrawer(): void { const el = drawerEl.value; const card = editorCardEl.value; @@ -867,23 +877,6 @@ const resize = reactive<{ cellH: 1, }); -const CANVAS_COLS = 12; -const CANVAS_ROW_PX = 120; -const CANVAS_GAP_PX = 8; - -function widgetSpan(w: DashboardWidget): number { - return Math.min(CANVAS_COLS, Math.max(1, w.span ?? 4)); -} -function widgetRowSpan(w: DashboardWidget): number { - return Math.max(1, w.rowSpan ?? 2); -} -function widgetGridStyle(w: DashboardWidget): Record<string, string> { - return { - gridColumn: `span ${widgetSpan(w)}`, - gridRow: `span ${widgetRowSpan(w)}`, - }; -} - function onResizeStart(e: MouseEvent, i: number): void { e.preventDefault(); e.stopPropagation(); @@ -907,8 +900,6 @@ function onResizeStart(e: MouseEvent, i: number): void { window.addEventListener('mousemove', onResizeMove); window.addEventListener('mouseup', onResizeEnd); } -const SUBGRID_ROW_PX = 84; -const SUBGRID_GAP_PX = 6; /** Resize a widget INSIDE a tab — same drag as the top level, but snapped to * the tab's own 12-col sub-grid pitch (measured from the .cw-subgrid). */ function onSubResizeStart(e: MouseEvent, widgetId: string, tabIdx: number, subIdx: number): void { diff --git a/apps/ui/src/features/admin/layer-templates/layer-dashboards.geometry.ts b/apps/ui/src/features/admin/layer-templates/layer-dashboards.geometry.ts new file mode 100644 index 0000000..647fe75 --- /dev/null +++ b/apps/ui/src/features/admin/layer-templates/layer-dashboards.geometry.ts @@ -0,0 +1,47 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Grid geometry for the layer-dashboard admin canvas — shared by the + * widget grid-style helpers and the drag/resize handlers in + * `LayerDashboardsAdmin.vue`. + */ + +import type { DashboardWidget } from '@skywalking-horizon-ui/api-client'; + +/** Top-level canvas grid: 12 columns, fixed row height + gap (px). */ +export const CANVAS_COLS = 12; +export const CANVAS_ROW_PX = 120; +export const CANVAS_GAP_PX = 8; +/** Nested tab-widget sub-grid (same column count, tighter rows). */ +export const SUBGRID_ROW_PX = 84; +export const SUBGRID_GAP_PX = 6; +/** Width (px) of the floating widget-edit drawer, anchored to the canvas. */ +export const DRAWER_COL = 360; + +export function widgetSpan(w: DashboardWidget): number { + return Math.min(CANVAS_COLS, Math.max(1, w.span ?? 4)); +} +export function widgetRowSpan(w: DashboardWidget): number { + return Math.max(1, w.rowSpan ?? 2); +} +export function widgetGridStyle(w: DashboardWidget): Record<string, string> { + return { + gridColumn: `span ${widgetSpan(w)}`, + gridRow: `span ${widgetRowSpan(w)}`, + }; +}
