diff --git a/frontend-modern/src/components/Workloads/StackedMemoryBar.test.tsx b/frontend-modern/src/components/Workloads/StackedMemoryBar.test.tsx index ee538c819b..cd343702a1 100644 --- a/frontend-modern/src/components/Workloads/StackedMemoryBar.test.tsx +++ b/frontend-modern/src/components/Workloads/StackedMemoryBar.test.tsx @@ -93,6 +93,17 @@ describe('StackedMemoryBar', () => { expect(segments[0]).toHaveAttribute('x', '0'); }); + it('renders reclaimable cache as a solid segment so the value label stays legible', () => { + const { container } = render(() => ( + + )); + + const segments = getSegments(container); + expect(segments).toHaveLength(2); + expect(segments[1].getAttribute('fill')).toContain('251, 191, 36'); + expect(container.querySelector('pattern')).not.toBeInTheDocument(); + }); + it('renders balloon segment when active ballooning is in effect', () => { // used=2GB, total=8GB, balloon=4GB — active ballooning const { container } = render(() => ( diff --git a/frontend-modern/src/components/Workloads/StackedMemoryBar.tsx b/frontend-modern/src/components/Workloads/StackedMemoryBar.tsx index 5dd79e218d..0d72eeabbb 100644 --- a/frontend-modern/src/components/Workloads/StackedMemoryBar.tsx +++ b/frontend-modern/src/components/Workloads/StackedMemoryBar.tsx @@ -1,4 +1,4 @@ -import { Show, For, createUniqueId } from 'solid-js'; +import { Show, For } from 'solid-js'; import { AnimatedNumber } from '@/components/shared/AnimatedNumber'; import { TooltipPortal } from '@/components/shared/TooltipPortal'; import { formatPercent } from '@/utils/format'; @@ -8,7 +8,6 @@ import { useStackedMemoryBarState } from './useStackedMemoryBarState'; export function StackedMemoryBar(props: StackedMemoryBarProps) { const state = useStackedMemoryBarState(props); const presentation = state.presentation; - const stripePatternId = createUniqueId(); const swapBarWidth = () => String(Math.max(0, Math.min(presentation().swapBarPercent, 100))); const segmentEdge = (leftPercent: number, widthPercent: number) => String(Math.max(0, Math.min(leftPercent + widthPercent, 100))); @@ -29,19 +28,6 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) { viewBox="0 0 100 100" preserveAspectRatio="none" > - {/* Vertical stripes only: the non-uniform viewBox scaling would - shear any diagonal texture. Keeps the reclaimable-cache segment - distinguishable from a warning-yellow used segment. */} - - - - - {(segment, idx) => ( <> @@ -55,18 +41,6 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) { rx="3" fill={segment.color} /> - - - { ]); expect(presentation.segments[1].leftPercent).toBeCloseTo(25); expect(presentation.segments[1].widthPercent).toBeCloseTo(37.5); - // Cache is textured so it never blends into a warning-yellow used segment. - expect(presentation.segments[1].striped).toBe(true); - expect(presentation.segments[0].striped).toBeUndefined(); const rows = Object.fromEntries(presentation.tooltipRows.map((row) => [row.label, row.value])); expect(rows['Used']).toBe('4.00 GB'); @@ -88,10 +85,7 @@ describe('buildStackedMemoryBarPresentation', () => { }); it('matches the pre-cache layout when no cache is reported', () => { - const presentation = buildStackedMemoryBarPresentation( - { used: 4 * GiB, total: 16 * GiB }, - 400, - ); + const presentation = buildStackedMemoryBarPresentation({ used: 4 * GiB, total: 16 * GiB }, 400); expect(presentation.segments.map((segment) => segment.label)).toEqual(['Active']); const labels = presentation.tooltipRows.map((row) => row.label); diff --git a/frontend-modern/src/components/Workloads/stackedMemoryBarModel.ts b/frontend-modern/src/components/Workloads/stackedMemoryBarModel.ts index 6ee8997510..06e1970118 100644 --- a/frontend-modern/src/components/Workloads/stackedMemoryBarModel.ts +++ b/frontend-modern/src/components/Workloads/stackedMemoryBarModel.ts @@ -29,8 +29,6 @@ export interface StackedMemorySegment { label: string; leftPercent: number; widthPercent: number; - /** Diagonal-stripe texture so reclaimable cache stays distinguishable from a warning-yellow used segment. */ - striped?: boolean; } export interface StackedMemoryTooltipRow { @@ -131,7 +129,6 @@ function getSegments( label: 'Reclaimable', leftPercent: usedPercent, widthPercent: cachePercent, - striped: true, }); }