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 64f7dd69a2693f4f856ab8e58a89d2b60d6430c6 Author: Logic <[email protected]> AuthorDate: Sun May 31 08:54:09 2026 +0800 fix(web-next): dedupe topology header scope summary --- web-next/app/topology/page.test.tsx | 3 +++ web-next/app/topology/topology-page.tsx | 2 ++ web-next/packages/hertzbeat-ui/src/index.test.tsx | 20 ++++++++++++++++++++ web-next/packages/hertzbeat-ui/src/index.tsx | 11 ++++++++++- 4 files changed, 35 insertions(+), 1 deletion(-) diff --git a/web-next/app/topology/page.test.tsx b/web-next/app/topology/page.test.tsx index c15758cea4..559e979481 100644 --- a/web-next/app/topology/page.test.tsx +++ b/web-next/app/topology/page.test.tsx @@ -537,6 +537,9 @@ describe('topology page', () => { expect(html).toContain('data-hz-topology-primitive="scope-bar"'); expect(html).toContain('data-hz-topology-scope-bar-boundary="none"'); expect(html).toContain('data-hz-topology-scope-bar-boundary-owner="hertzbeat-ui-scope-bar-boundary"'); + expect(html).toContain('data-hz-topology-scope-summary-visibility="assistive"'); + expect(html).toContain('data-hz-topology-scope-summary-deduped-by="topology-toolbar"'); + expect(html).toContain('data-hz-topology-scope-item-visibility="assistive"'); expect(html).toContain('data-hz-topology-scope-item="environment"'); expect(html).toContain('data-hz-topology-scope-item-owner="hertzbeat-ui-scope-item"'); expect(html).toContain('data-hz-topology-scope-item-value-owner="hertzbeat-ui-scope-item-value"'); diff --git a/web-next/app/topology/topology-page.tsx b/web-next/app/topology/topology-page.tsx index 62209c2af4..c17a439823 100644 --- a/web-next/app/topology/topology-page.tsx +++ b/web-next/app/topology/topology-page.tsx @@ -1360,6 +1360,8 @@ export default function TopologyPage({ data-topology-scope-bar-boundary-owner="hertzbeat-ui-scope-bar-boundary" data-topology-refresh-action="refresh" boundary="none" + summaryVisibility="assistive" + summaryDedupedBy="topology-toolbar" items={[ { id: 'environment', diff --git a/web-next/packages/hertzbeat-ui/src/index.test.tsx b/web-next/packages/hertzbeat-ui/src/index.test.tsx index f75ebf9007..1613acd63f 100644 --- a/web-next/packages/hertzbeat-ui/src/index.test.tsx +++ b/web-next/packages/hertzbeat-ui/src/index.test.tsx @@ -5618,6 +5618,26 @@ describe('@hertzbeat/ui', () => { expect(html).not.toContain('rounded-[16px]'); expect(html).not.toContain('rounded-[14px]'); expect(html).not.toContain('rounded-[12px]'); + + const actionOnlyHtml = renderToStaticMarkup( + <HzTopologyScopeBar + summaryVisibility="assistive" + summaryDedupedBy="topology-toolbar" + items={[ + { id: 'environment', label: 'Environment', value: 'prod' }, + { id: 'time-range', label: 'Time range', value: 'last 1 hour' } + ]} + actions={[ + { id: 'refresh', label: 'Refresh topology', emphasis: 'neutral' } + ]} + /> + ); + + expect(actionOnlyHtml).toContain('data-hz-topology-scope-summary-visibility="assistive"'); + expect(actionOnlyHtml).toContain('data-hz-topology-scope-summary-deduped-by="topology-toolbar"'); + expect(actionOnlyHtml).toContain('data-hz-topology-scope-item-visibility="assistive"'); + expect(actionOnlyHtml).toContain('class="sr-only"'); + expect(actionOnlyHtml).toContain('data-hz-topology-scope-action="refresh"'); }); it('renders a compact topology focus trail for focused graph context and filters', () => { diff --git a/web-next/packages/hertzbeat-ui/src/index.tsx b/web-next/packages/hertzbeat-ui/src/index.tsx index 91225227d0..68ccfb32f6 100644 --- a/web-next/packages/hertzbeat-ui/src/index.tsx +++ b/web-next/packages/hertzbeat-ui/src/index.tsx @@ -10838,6 +10838,8 @@ export type HzTopologyScopeBarProps = React.HTMLAttributes<HTMLElement> & { items: HzTopologyScopeBarItem[]; actions?: HzTopologyScopeBarAction[]; boundary?: HzTopologyScopeBarBoundary; + summaryVisibility?: 'visible' | 'assistive'; + summaryDedupedBy?: string; }; export type HzTopologyNodeProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> & { @@ -12304,6 +12306,8 @@ export function HzTopologyScopeBar({ items, actions = [], boundary = 'none', + summaryVisibility = 'visible', + summaryDedupedBy, className, ...props }: HzTopologyScopeBarProps) { @@ -12320,6 +12324,8 @@ export function HzTopologyScopeBar({ data-hz-topology-scope-bar-density="compact" data-hz-topology-scope-bar-boundary={boundary} data-hz-topology-scope-bar-boundary-owner="hertzbeat-ui-scope-bar-boundary" + data-hz-topology-scope-summary-visibility={summaryVisibility} + data-hz-topology-scope-summary-deduped-by={summaryDedupedBy} > {items.map(item => { const { id, label, value, className: itemClassName, ...itemProps } = item; @@ -12328,11 +12334,14 @@ export function HzTopologyScopeBar({ key={id} {...itemProps} className={cn( - 'inline-flex h-7 min-w-0 items-center gap-1 rounded-[3px] border border-[#252832] bg-[#151821] px-2 text-[#9ca3b4]', + summaryVisibility === 'assistive' + ? 'sr-only' + : 'inline-flex h-7 min-w-0 items-center gap-1 rounded-[3px] border border-[#252832] bg-[#151821] px-2 text-[#9ca3b4]', itemClassName )} data-hz-topology-scope-item={id} data-hz-topology-scope-item-owner="hertzbeat-ui-scope-item" + data-hz-topology-scope-item-visibility={summaryVisibility} > {label ? ( <span className="truncate text-[#727b8c]" data-hz-topology-scope-item-label-owner="hertzbeat-ui-scope-item-label"> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
