diff --git a/frontend-modern/src/components/Workloads/StackedMemoryBar.tsx b/frontend-modern/src/components/Workloads/StackedMemoryBar.tsx
index 0d72eeabbb..5dd79e218d 100644
--- a/frontend-modern/src/components/Workloads/StackedMemoryBar.tsx
+++ b/frontend-modern/src/components/Workloads/StackedMemoryBar.tsx
@@ -1,4 +1,4 @@
-import { Show, For } from 'solid-js';
+import { Show, For, createUniqueId } from 'solid-js';
import { AnimatedNumber } from '@/components/shared/AnimatedNumber';
import { TooltipPortal } from '@/components/shared/TooltipPortal';
import { formatPercent } from '@/utils/format';
@@ -8,6 +8,7 @@ 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)));
@@ -28,6 +29,19 @@ 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) => (
<>
@@ -41,6 +55,18 @@ 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');
diff --git a/frontend-modern/src/components/Workloads/stackedMemoryBarModel.ts b/frontend-modern/src/components/Workloads/stackedMemoryBarModel.ts
index 06e1970118..6ee8997510 100644
--- a/frontend-modern/src/components/Workloads/stackedMemoryBarModel.ts
+++ b/frontend-modern/src/components/Workloads/stackedMemoryBarModel.ts
@@ -29,6 +29,8 @@ 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 {
@@ -129,6 +131,7 @@ function getSegments(
label: 'Reclaimable',
leftPercent: usedPercent,
widthPercent: cachePercent,
+ striped: true,
});
}