gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-10-23 12:15:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(recovery): tighten inventory row density

Browse Source
This commit is contained in:
rcourtman
2026-03-27 23:35:00 +00:00
parent 78c025ff00
commit 319fe1d4fa
3 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/release-control/v6/internal/subsystems/storage-recovery.md
+4
View File
@@ -662,6 +662,10 @@ scan pattern in its first column. Protected-item rows should lead with a clear
status cue, the primary item name, and compact badge-backed item/platform
context instead of relying on recovery-only rails or plain-text metadata lines
that make the table read like a report instead of an operational grid.
That same row contract should avoid duplicating context that already has a
dedicated column. When `Item Type` and `Platform` columns are visible, the
primary item cell should not restate those same badges on desktop; duplicate
context belongs only as a small-screen fallback when those columns collapse.
That same inventory surface should use structural grouping to surface posture,
not just local row styling. When the protected-item page mixes healthy and
problematic coverage, the table body should section attention items ahead of
frontend-modern/src/components/Recovery/RecoveryProtectedInventorySection.tsx
+9 -9
View File
@@ -513,10 +513,10 @@ export const RecoveryProtectedInventorySection: Component<
onClick={() => props.onSelectRollup(rollup.rollupId)}
>
<TableCell
class="max-w-[420px] px-3 py-2 text-base-content"
class="max-w-[420px] px-3 py-1.5 text-base-content"
title={label}
>
<div class="flex min-w-0 flex-col gap-1.5">
<div class="flex min-w-0 flex-col gap-1">
<div class="flex min-w-0 items-center gap-2">
<StatusDot
variant={outcomeVariant}
@@ -525,7 +525,7 @@ export const RecoveryProtectedInventorySection: Component<
title={getRecoveryOutcomeLabel(outcome)}
ariaLabel={getRecoveryOutcomeLabel(outcome)}
/>
<span class="truncate text-sm font-medium">{label}</span>
<span class="truncate text-[13px] font-medium">{label}</span>
<Show when={neverSucceeded}>
<span class={getRecoveryRollupStatusPillClass('never-succeeded')}>
{getRecoveryRollupStatusPillLabel('never-succeeded')}
@@ -537,7 +537,7 @@ export const RecoveryProtectedInventorySection: Component<
</span>
</Show>
</div>
<div class="flex flex-wrap items-center gap-1.5 text-[10px]">
<div class="flex flex-wrap items-center gap-1.5 text-[10px] md:hidden">
<Show when={itemTypePresentation?.label}>
<span class={itemTypePresentation?.badgeClasses || 'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-base-content'}>
{itemTypePresentation?.label}
@@ -548,7 +548,7 @@ export const RecoveryProtectedInventorySection: Component<
{(platform) => {
const badge = getSourcePlatformBadge(platform);
return (
<span class={badge?.classes || ''}>
<span class={`${badge?.classes || ''} lg:hidden`}>
{badge?.label || getSourcePlatformLabel(platform)}
</span>
);
@@ -559,7 +559,7 @@ export const RecoveryProtectedInventorySection: Component<
</div>
</TableCell>
<TableCell class="hidden md:table-cell whitespace-nowrap px-3 py-2">
<TableCell class="hidden md:table-cell whitespace-nowrap px-3 py-1.5">
<Show
when={itemTypePresentation}
fallback={<span class="text-muted">—</span>}
@@ -570,7 +570,7 @@ export const RecoveryProtectedInventorySection: Component<
</Show>
</TableCell>
<TableCell class="hidden lg:table-cell whitespace-nowrap px-3 py-2">
<TableCell class="hidden lg:table-cell whitespace-nowrap px-3 py-1.5">
<div class="flex flex-wrap gap-1.5">
<For each={platforms}>
{(platform) => {
@@ -586,7 +586,7 @@ export const RecoveryProtectedInventorySection: Component<
</TableCell>
<TableCell
class={`whitespace-nowrap px-3 py-2 ${getRecoveryRollupAgeTextClass(
class={`whitespace-nowrap px-3 py-1.5 ${getRecoveryRollupAgeTextClass(
rollup,
nowMs,
)}`}
@@ -607,7 +607,7 @@ export const RecoveryProtectedInventorySection: Component<
)}
</TableCell>
<TableCell class="whitespace-nowrap px-3 py-2">
<TableCell class="whitespace-nowrap px-3 py-1.5">
<span
class={`inline-flex rounded px-1.5 py-0.5 text-[10px] font-medium ${getRecoveryOutcomeBadgeClass(
outcome,
frontend-modern/src/components/Recovery/__tests__/Recovery.test.tsx
+1
View File
@@ -226,6 +226,7 @@ describe('Recovery', () => {
expect(vmRow).not.toBeNull();
expect(within(vmRow!).getByLabelText('Healthy')).toBeInTheDocument();
expect(within(vmRow!).getAllByText('PVE').length).toBeGreaterThan(0);
expect(within(vmRow!).getAllByText('VM').length).toBeGreaterThan(0);
expect(screen.queryByText('Backups By Date')).not.toBeInTheDocument();
fireEvent.click(await screen.findByText('VM 123'));