Fit TrueNAS protection table to overview width

- Remove the redundant Signal column from the TrueNAS protection ledger
- Keep replication state visible in target detail and outcome badge
- Add a guardrail for the fitted protection table width
This commit is contained in:
rcourtman
2026-05-21 16:38:53 +01:00
parent 946ebfde1d
commit 64a3fbc07e
2 changed files with 6 additions and 25 deletions
@@ -175,6 +175,8 @@ describe('platform overview layout guardrails', () => {
expect(truenasPageSurfaceSource).not.toContain('<StorageSurface');
expect(truenasPageSurfaceSource).not.toContain('<WorkloadsSurface');
expect(truenasPageSurfaceSource).not.toContain('<TrueNASDisksTable');
expect(truenasProtectionTableSource).not.toContain('Signal');
expect(truenasProtectionTableSource).toContain('md:min-w-[960px]');
expect(vmwarePageSurfaceSource).toContain('<VsphereHostsTable');
expect(vmwarePageSurfaceSource).toContain('<WorkloadsSurface');
expect(vmwarePageSurfaceSource).toContain('<StorageSurface');
@@ -157,14 +157,6 @@ const targetSecondaryLabel = (point: RecoveryPoint): string => {
return [direction, state].filter(Boolean).join(' / ');
};
const signalLabel = (point: RecoveryPoint): string => {
const lastError = detailString(point, 'lastError');
if (lastError) return lastError;
const state = detailString(point, 'lastState');
if (state) return state;
return getRecoveryOutcomeLabel(normalizeRecoveryOutcome(point.outcome));
};
const formatPointTime = (point: RecoveryPoint): string => {
const raw = asTrimmedString(point.completedAt) || asTrimmedString(point.startedAt);
if (!raw) return '-';
@@ -288,17 +280,17 @@ export const TrueNASProtectionTable: Component<{
</span>
}
/>
<Table class="min-w-full table-fixed text-xs md:min-w-[1180px]">
<Table class="min-w-full table-fixed text-xs md:min-w-[960px]">
<TableHeader>
<TableRow class={PLATFORM_TABLE_HEADER_ROW_CLASS}>
<TableHead class={`${getPlatformTableHeadClassForKind('name')} md:w-[21%]`}>
<TableHead class={`${getPlatformTableHeadClassForKind('name')} md:w-[22%]`}>
Dataset
</TableHead>
<TableHead class={`${getPlatformTableHeadClassForKind('text')} md:w-[24%]`}>
<TableHead class={`${getPlatformTableHeadClassForKind('text')} md:w-[25%]`}>
Artifact
</TableHead>
<TableHead
class={`${getPlatformTableHeadClassForKind('text')} hidden md:table-cell md:w-[17%]`}
class={`${getPlatformTableHeadClassForKind('text')} hidden md:table-cell md:w-[23%]`}
>
Target
</TableHead>
@@ -312,11 +304,6 @@ export const TrueNASProtectionTable: Component<{
>
Size
</TableHead>
<TableHead
class={`${getPlatformTableHeadClassForKind('text')} hidden xl:table-cell md:w-[9%]`}
>
Signal
</TableHead>
<TableHead class={`${getPlatformTableHeadClassForKind('badge')} md:w-[9%]`}>
Outcome
</TableHead>
@@ -330,7 +317,6 @@ export const TrueNASProtectionTable: Component<{
const artifactSecondary = () => artifactSecondaryLabel(point);
const target = () => targetLabel(point);
const targetSecondary = () => targetSecondaryLabel(point);
const signal = () => signalLabel(point);
return (
<TableRow
class="text-[11px] sm:text-xs"
@@ -379,13 +365,6 @@ export const TrueNASProtectionTable: Component<{
>
{sizeLabel(point)}
</TableCell>
<TableCell
class={`${getPlatformTableCellClassForKind('text')} hidden xl:table-cell`}
>
<span class="block truncate text-muted" title={signal()}>
{signal()}
</span>
</TableCell>
<TableCell class={getPlatformTableCellClassForKind('badge')}>
<span class={getRecoveryOutcomeBadgeClass(outcome())}>
{getRecoveryOutcomeLabel(outcome())}