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,
});
}