This is an automated email from the ASF dual-hosted git repository. zqr10159 pushed a commit to branch 2.0.0 in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
commit 81c4bd6576d785ff61ebf49c7408cecb9d0472f4 Author: Logic <[email protected]> AuthorDate: Fri May 29 21:46:12 2026 +0800 fix(web-next): remove hand-drawn topology legend marks --- web-next/packages/hertzbeat-ui/src/index.test.tsx | 11 +++++-- web-next/packages/hertzbeat-ui/src/index.tsx | 36 ++++++++++------------- 2 files changed, 23 insertions(+), 24 deletions(-) diff --git a/web-next/packages/hertzbeat-ui/src/index.test.tsx b/web-next/packages/hertzbeat-ui/src/index.test.tsx index 9b0d514fb5..a36e11afc9 100644 --- a/web-next/packages/hertzbeat-ui/src/index.test.tsx +++ b/web-next/packages/hertzbeat-ui/src/index.test.tsx @@ -5179,7 +5179,8 @@ describe('@hertzbeat/ui', () => { expect(html).toContain('data-hz-topology-legend-section="confidence"'); expect(html).toContain('data-hz-topology-legend-item="stale"'); expect(html).toContain('data-hz-topology-legend-item-owner="hertzbeat-ui-legend-item"'); - expect(html).toContain('data-hz-topology-legend-swatch-owner="hertzbeat-ui-legend-swatch"'); + expect(html).toContain('data-hz-topology-legend-visual-mode="source-backed-text"'); + expect(html).toContain('data-hz-topology-legend-source-label="edge token"'); expect(html).toContain('data-hz-topology-legend-item-label-owner="hertzbeat-ui-legend-item-label"'); expect(html).toContain('data-hz-topology-legend-item-value-owner="hertzbeat-ui-legend-item-value"'); expect(html).toContain('data-hz-topology-legend-tone="warning"'); @@ -5226,12 +5227,16 @@ describe('@hertzbeat/ui', () => { expect(html).toContain('data-hz-topology-legend-summary-visibility="hidden"'); expect(html).toContain('data-hz-topology-legend-section="status"'); expect(html).toContain('data-hz-topology-legend-section="interaction"'); - expect(html).toContain('data-hz-topology-legend-swatch-shape="line"'); + expect(html).toContain('data-hz-topology-legend-visual-mode="source-backed-text"'); expect(html).toContain('data-hz-topology-legend-visual-source="hertzbeat-status-token"'); expect(html).toContain('data-hz-topology-legend-visual-source="hertzbeat-interaction-token"'); expect(html).toContain('data-hz-topology-legend-visual-source="hertzbeat-edge-token"'); + expect(html).toContain('data-hz-topology-legend-source-label="status token"'); + expect(html).toContain('data-hz-topology-legend-source-label="interaction token"'); + expect(html).toContain('data-hz-topology-legend-source-label="edge token"'); expect(html).toContain('data-hz-topology-legend-no-handdrawn-icon="true"'); - expect(html).toContain('data-hz-topology-legend-swatch-no-handdrawn-icon="true"'); + expect(html).not.toContain('data-hz-topology-legend-swatch-owner='); + expect(html).not.toContain('data-hz-topology-legend-swatch-shape='); expect(html).not.toContain('data-hz-topology-legend-swatch-shape="node-ring"'); expect(html).not.toContain('data-hz-topology-legend-swatch-shape="selected-ring"'); expect(html).toContain('data-hz-topology-legend-color="#22c55e"'); diff --git a/web-next/packages/hertzbeat-ui/src/index.tsx b/web-next/packages/hertzbeat-ui/src/index.tsx index e61dfd77b4..b3f3fd412a 100644 --- a/web-next/packages/hertzbeat-ui/src/index.tsx +++ b/web-next/packages/hertzbeat-ui/src/index.tsx @@ -10520,6 +10520,12 @@ const topologyLegendBoundaryClassName: Record<HzTopologyLegendBoundary, string> flush: 'border-y border-[var(--hz-ui-line-soft)] border-x-0' }; +const topologyLegendVisualSourceLabel: Record<NonNullable<HzTopologyLegendItem['visualSource']>, string> = { + 'hertzbeat-status-token': 'status token', + 'hertzbeat-interaction-token': 'interaction token', + 'hertzbeat-edge-token': 'edge token' +}; + export type HzTopologyHoverTooltipKind = 'node' | 'edge'; export type HzTopologyHoverTooltipVisibility = 'preview' | 'hover'; export type HzTopologyHoverTooltipTrigger = 'preview' | 'live-edge-hover'; @@ -11270,16 +11276,20 @@ export function HzTopologyLegend({ const pattern = item.pattern ?? 'solid'; const color = item.color ?? chartToneColor[tone].stroke; const fill = item.fill ?? chartToneColor[tone].soft; - const swatch = item.swatch ?? 'line'; const visualSource = item.visualSource ?? - (item.id.includes('edge') ? 'hertzbeat-edge-token' : item.id.includes('selected') ? 'hertzbeat-interaction-token' : 'hertzbeat-status-token'); + (item.id.includes('edge') || pattern !== 'solid' + ? 'hertzbeat-edge-token' + : item.id.includes('selected') + ? 'hertzbeat-interaction-token' + : 'hertzbeat-status-token'); + const sourceLabel = topologyLegendVisualSourceLabel[visualSource]; return ( <div key={item.id} className={cn( 'grid min-w-0 items-center text-[11px]', - isCanvasDock ? 'min-h-4 grid-cols-[18px_auto] gap-1' : 'min-h-5 grid-cols-[32px_minmax(0,1fr)_auto] gap-2' + isCanvasDock ? 'min-h-4 grid-cols-[auto] gap-1' : 'min-h-5 grid-cols-[minmax(0,1fr)_auto] gap-2' )} data-hz-topology-legend-item={item.id} data-hz-topology-legend-item-owner="hertzbeat-ui-legend-item" @@ -11287,27 +11297,11 @@ export function HzTopologyLegend({ data-hz-topology-legend-pattern={pattern} data-hz-topology-legend-color={color} data-hz-topology-legend-fill={fill} - data-hz-topology-legend-swatch-shape={swatch} data-hz-topology-legend-visual-source={visualSource} + data-hz-topology-legend-visual-mode="source-backed-text" + data-hz-topology-legend-source-label={sourceLabel} data-hz-topology-legend-no-handdrawn-icon="true" > - <span - className={cn( - 'shrink-0', - 'h-px', - isCanvasDock ? 'w-4' : 'w-7' - )} - style={{ - borderTop: pattern === 'dashed' ? `1px dashed ${color}` : undefined, - backgroundColor: pattern === 'dashed' ? 'transparent' : color, - opacity: pattern === 'muted' ? 0.45 : 1 - }} - aria-hidden="true" - data-hz-topology-legend-swatch-owner="hertzbeat-ui-legend-swatch" - data-hz-topology-legend-swatch-shape={swatch} - data-hz-topology-legend-swatch-source={visualSource} - data-hz-topology-legend-swatch-no-handdrawn-icon="true" - /> <span className="min-w-0 truncate text-[#cbd3df]" data-hz-topology-legend-item-label-owner="hertzbeat-ui-legend-item-label" --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
