- Updates applied through Pulse, with rollback to the backup taken before each one.
+ Updates applied through Pulse, with version rollback using a retained backup.
@@ -187,14 +188,30 @@ export const UpdateHistorySection: Component = () => {
-
- This restores the binary, configuration, and data from the backup taken before the
- update to {formatVersionLabel(entry().version_to)} on{' '}
- {formatTimestamp(entry().timestamp)}.
+
+ Running now: Pulse {formatVersionLabel(updateStore.versionInfo()?.version || '')}.
- Settings and alert changes made since that backup will be reverted, and Pulse will
- restart to complete the rollback.
+ This requests an installation rollback using the backup taken before the update to{' '}
+ {formatVersionLabel(entry().version_to)} on {formatTimestamp(entry().timestamp)}.
+ Pulse will restart if the rollback succeeds.
+
+
+ Restore scope is not reported for this backup. A scope-aware server keeps active
+ runtime data in place and restores only the binary and independent installation
+ files. Older recovery can also replace install-local data and configuration,
+ reverting later changes.
+
+
+ Do not assume this will undo settings or alerts. Full-state recovery requires
+ Pulse to be stopped and a consistent backup of every active store.{' '}
+
+ Read the recovery instructions
+
+ .
diff --git a/frontend-modern/src/components/Settings/__tests__/UpdateHistorySection.test.tsx b/frontend-modern/src/components/Settings/__tests__/UpdateHistorySection.test.tsx
index 4f6ab77192..20a5b255e5 100644
--- a/frontend-modern/src/components/Settings/__tests__/UpdateHistorySection.test.tsx
+++ b/frontend-modern/src/components/Settings/__tests__/UpdateHistorySection.test.tsx
@@ -4,6 +4,7 @@ import type { UpdateHistoryEntry } from '@/api/updates';
const mockListUpdateHistory = vi.fn();
const mockStoreRollbackUpdate = vi.fn();
+let runningVersion: string | undefined = '6.0.5';
vi.mock('@/api/updates', () => ({
UpdatesAPI: {
@@ -13,7 +14,7 @@ vi.mock('@/api/updates', () => ({
vi.mock('@/stores/updates', () => ({
updateStore: {
- versionInfo: () => ({ version: '6.0.5' }),
+ versionInfo: () => (runningVersion ? { version: runningVersion } : null),
rollbackUpdate: (...args: unknown[]) => mockStoreRollbackUpdate(...args),
},
}));
@@ -39,6 +40,7 @@ describe('UpdateHistorySection', () => {
beforeEach(() => {
mockListUpdateHistory.mockReset();
mockStoreRollbackUpdate.mockReset();
+ runningVersion = '6.0.5';
});
afterEach(() => {
@@ -102,6 +104,24 @@ describe('UpdateHistorySection', () => {
fireEvent.click(await screen.findByRole('button', { name: 'Roll back' }));
expect(await screen.findByText('Roll back to Pulse v6.0.4?')).toBeInTheDocument();
+ expect(screen.getByText('Running now: Pulse v6.0.5.')).toBeInTheDocument();
+ expect(screen.getByText(/Restore scope is not reported for this backup/)).toHaveTextContent(
+ 'A scope-aware server keeps active runtime data in place',
+ );
+ expect(screen.getByText(/Older recovery can also/)).toHaveTextContent(
+ 'reverting later changes',
+ );
+ expect(screen.getByText(/Do not assume this will undo settings or alerts/)).toHaveTextContent(
+ 'Full-state recovery requires Pulse to be stopped',
+ );
+ expect(screen.getByRole('link', { name: 'Read the recovery instructions' })).toHaveAttribute(
+ 'href',
+ '/docs/AUTO_UPDATE#manual-rollback',
+ );
+ expect(
+ screen.queryByText(/Settings and alert changes made since that backup will be reverted/),
+ ).not.toBeInTheDocument();
+ expect(mockStoreRollbackUpdate).not.toHaveBeenCalled();
fireEvent.click(screen.getByRole('button', { name: 'Roll back to v6.0.4' }));
@@ -116,4 +136,62 @@ describe('UpdateHistorySection', () => {
expect(screen.queryByText('Roll back to Pulse v6.0.4?')).not.toBeInTheDocument(),
);
});
+
+ it('distinguishes the running version from an older history entry without guessing restore scope', async () => {
+ runningVersion = 'v6.6.0-rc.1';
+ mockListUpdateHistory.mockResolvedValue([{ ...baseEntry, notes: 'restore everything' }]);
+ render(() =>
);
+ fireEvent.click(await screen.findByRole('button', { name: 'Roll back' }));
+ expect(screen.getByText('Running now: Pulse v6.6.0-rc.1.')).toBeInTheDocument();
+ expect(screen.getByText(/This requests an installation rollback/)).toHaveTextContent(
+ 'before the update to v6.0.5',
+ );
+ expect(screen.getByText(/Restore scope is not reported/)).toBeInTheDocument();
+ expect(screen.queryByText('restore everything')).not.toBeInTheDocument();
+ expect(screen.queryByText(baseEntry.backup_path!)).not.toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+ expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+ expect(mockStoreRollbackUpdate).not.toHaveBeenCalled();
+ });
+
+ it('does not infer the running version from the selected update when version information is missing', async () => {
+ runningVersion = undefined;
+ mockListUpdateHistory.mockResolvedValue([baseEntry]);
+ render(() =>
);
+ fireEvent.click(await screen.findByRole('button', { name: 'Roll back' }));
+ expect(screen.getByText('Running now: Pulse unknown.')).toBeInTheDocument();
+ expect(screen.getByText(/Restore scope is not reported/)).toBeInTheDocument();
+ });
+
+ it('retains the consent and refreshes history after a rejected rollback', async () => {
+ mockListUpdateHistory.mockResolvedValue([baseEntry]);
+ mockStoreRollbackUpdate.mockResolvedValue(false);
+ render(() =>
);
+ fireEvent.click(await screen.findByRole('button', { name: 'Roll back' }));
+ fireEvent.click(screen.getByRole('button', { name: 'Roll back to v6.0.4' }));
+ await waitFor(() => expect(mockListUpdateHistory).toHaveBeenCalledTimes(2));
+ expect(screen.getByRole('dialog')).toHaveTextContent('Restore scope is not reported');
+ expect(screen.getByRole('button', { name: 'Roll back to v6.0.4' })).not.toBeDisabled();
+ });
+
+ it('prevents duplicate requests and cancellation while the rollback request is pending', async () => {
+ mockListUpdateHistory.mockResolvedValue([baseEntry]);
+ let finish!: (accepted: boolean) => void;
+ mockStoreRollbackUpdate.mockReturnValue(
+ new Promise
((resolve) => {
+ finish = resolve;
+ }),
+ );
+ render(() => );
+ fireEvent.click(await screen.findByRole('button', { name: 'Roll back' }));
+ fireEvent.click(screen.getByRole('button', { name: 'Roll back to v6.0.4' }));
+ expect(screen.getByRole('button', { name: 'Starting rollback...' })).toBeDisabled();
+ expect(screen.getByRole('button', { name: 'Cancel' })).toBeDisabled();
+ fireEvent.click(screen.getByRole('button', { name: 'Starting rollback...' }));
+ fireEvent.keyDown(document, { key: 'Escape' });
+ expect(mockStoreRollbackUpdate).toHaveBeenCalledTimes(1);
+ expect(screen.getByRole('dialog')).toBeInTheDocument();
+ finish(true);
+ await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+ });
});
diff --git a/frontend-modern/src/components/Storage/DiskDetail.tsx b/frontend-modern/src/components/Storage/DiskDetail.tsx
index 71c6cedb3a..3588836cc0 100644
--- a/frontend-modern/src/components/Storage/DiskDetail.tsx
+++ b/frontend-modern/src/components/Storage/DiskDetail.tsx
@@ -11,6 +11,10 @@ import {
resolveHistoryRangeWithinLimit,
} from '@/components/Storage/historyRangeAccess';
import {
+ DISK_DETAIL_HEADER_STACK_CLASS,
+ DISK_DETAIL_HEALTH_LABEL_CLASS,
+ DISK_DETAIL_HEALTH_ROW_CLASS,
+ DISK_DETAIL_HEALTH_SUMMARY_CLASS,
DISK_DETAIL_HISTORY_RANGE_OPTIONS,
DISK_DETAIL_LIVE_CHARTS,
getDiskAttributeValueTextClass,
@@ -55,6 +59,7 @@ export const DiskDetail: Component = (props) => {
historyResourceId,
attributeCards,
historyCharts,
+ healthPresentation,
metricResourceId,
collectionMessages,
liveIOAvailable,
@@ -91,19 +96,32 @@ export const DiskDetail: Component = (props) => {
return (
diff --git a/frontend-modern/src/features/alerts/__tests__/DestinationsTab.recoveryediting.test.tsx b/frontend-modern/src/features/alerts/__tests__/DestinationsTab.recoveryediting.test.tsx
index 2c07536cad..2d3589247e 100644
--- a/frontend-modern/src/features/alerts/__tests__/DestinationsTab.recoveryediting.test.tsx
+++ b/frontend-modern/src/features/alerts/__tests__/DestinationsTab.recoveryediting.test.tsx
@@ -259,7 +259,7 @@ describe('DestinationsTab recovery while editing SMTP', () => {
).toBeInTheDocument();
expect(
await screen.findByText(
- 'Pulse could not read the delivery log, so recent delivery activity cannot be shown.',
+ 'Pulse could not read the delivery log. Refresh to check delivery attempts.',
),
).toBeInTheDocument();
expect(screen.queryByText('SMTP fixture rejected')).not.toBeInTheDocument();
diff --git a/frontend-modern/src/features/alerts/__tests__/useAlertDestinationsTabState.test.tsx b/frontend-modern/src/features/alerts/__tests__/useAlertDestinationsTabState.test.tsx
index b01d8e43b0..2515c6f393 100644
--- a/frontend-modern/src/features/alerts/__tests__/useAlertDestinationsTabState.test.tsx
+++ b/frontend-modern/src/features/alerts/__tests__/useAlertDestinationsTabState.test.tsx
@@ -156,6 +156,17 @@ describe('useAlertDestinationsTabState', () => {
await Promise.resolve();
expect(result.deliveryLog()).toEqual(current);
expect(result.deliveryLogUnavailable()).toBe(false);
+ expect(result.heldEventsUnavailable()).toBe(false);
+ expect(result.refreshingHeldEvents()).toBe(false);
+ vi.mocked(AlertsAPI.getEvents).mockRejectedValueOnce(new Error('held events denied'));
+ vi.mocked(NotificationsAPI.getDeliveryLog).mockResolvedValueOnce(current);
+ await result.loadDeliveryLog();
+ expect(result.heldEvents()).toEqual([]);
+ expect(result.heldEventsUnavailable()).toBe(true);
+ expect(result.refreshingHeldEvents()).toBe(false);
+ expect(result.deliveryLogUnavailable()).toBe(false);
+ expect(result.deliveryLog()).toEqual(current);
+
expect(result.refreshingDeliveryLog()).toBe(false);
} finally {
cleanup();
diff --git a/frontend-modern/src/features/alerts/__tests__/useNotificationDeliveryLog.test.tsx b/frontend-modern/src/features/alerts/__tests__/useNotificationDeliveryLog.test.tsx
index e4398987af..ad497217a0 100644
--- a/frontend-modern/src/features/alerts/__tests__/useNotificationDeliveryLog.test.tsx
+++ b/frontend-modern/src/features/alerts/__tests__/useNotificationDeliveryLog.test.tsx
@@ -107,6 +107,8 @@ describe('useNotificationDeliveryLog', () => {
expect(state.deliveryLog()).toEqual(emptyLog);
expect(state.refreshingDeliveryLog()).toBe(false);
expect(state.heldEvents()).toEqual([]);
+ expect(state.refreshingHeldEvents()).toBe(true);
+ expect(state.heldEventsUnavailable()).toBe(false);
} finally {
held.resolve([]);
dispose();
@@ -132,6 +134,8 @@ describe('useNotificationDeliveryLog', () => {
expect(state.heldEvents()).toHaveLength(1);
await state.loadDeliveryLog();
expect(state.heldEvents()).toEqual([]);
+ expect(state.heldEventsUnavailable()).toBe(true);
+ expect(state.refreshingHeldEvents()).toBe(false);
expect(state.deliveryLog()).toEqual(emptyLog);
expect(state.deliveryLogUnavailable()).toBe(false);
expect(state.refreshingDeliveryLog()).toBe(false);
@@ -222,6 +226,8 @@ describe('useNotificationDeliveryLog', () => {
else older.reject(new Error('stale held read'));
await Promise.resolve();
expect(state.heldEvents()).toEqual(current);
+ expect(state.heldEventsUnavailable()).toBe(false);
+ expect(state.refreshingHeldEvents()).toBe(false);
} finally {
dispose();
}
@@ -264,4 +270,56 @@ describe('useNotificationDeliveryLog', () => {
expect(AlertsAPI.getEvents).toHaveBeenCalledTimes(1);
}),
);
+ it('retains the held-read warning during retry until that read succeeds', () =>
+ createRoot(async (dispose) => {
+ const recovery = deferred
>>();
+ vi.mocked(NotificationsAPI.getDeliveryLog).mockResolvedValue(emptyLog);
+ vi.mocked(AlertsAPI.getEvents)
+ .mockRejectedValueOnce(new Error('permission denied'))
+ .mockReturnValueOnce(recovery.promise);
+ const state = useNotificationDeliveryLog();
+ try {
+ await state.loadDeliveryLog();
+ expect(state.heldEventsUnavailable()).toBe(true);
+ await state.loadDeliveryLog();
+ expect(state.heldEventsUnavailable()).toBe(true);
+ expect(state.refreshingHeldEvents()).toBe(true);
+ expect(state.refreshingDeliveryLog()).toBe(false);
+ recovery.resolve([]);
+ await recovery.promise;
+ expect(state.heldEventsUnavailable()).toBe(false);
+ expect(state.refreshingHeldEvents()).toBe(false);
+ } finally {
+ dispose();
+ }
+ }));
+
+ it.each(['success', 'failure'])(
+ 'keeps the newest held read pending after an older %s',
+ (outcome) =>
+ createRoot(async (dispose) => {
+ const older = deferred>>();
+ const newer = deferred>>();
+ vi.mocked(NotificationsAPI.getDeliveryLog).mockResolvedValue(emptyLog);
+ vi.mocked(AlertsAPI.getEvents)
+ .mockReturnValueOnce(older.promise)
+ .mockReturnValueOnce(newer.promise);
+ const state = useNotificationDeliveryLog();
+ try {
+ await state.loadDeliveryLog();
+ await state.loadDeliveryLog();
+ if (outcome === 'success') older.resolve([]);
+ else older.reject(new Error('stale denied request'));
+ await Promise.resolve();
+ expect(state.refreshingHeldEvents()).toBe(true);
+ expect(state.heldEventsUnavailable()).toBe(false);
+ newer.resolve([]);
+ await newer.promise;
+ expect(state.refreshingHeldEvents()).toBe(false);
+ expect(state.heldEventsUnavailable()).toBe(false);
+ } finally {
+ dispose();
+ }
+ }),
+ );
});
diff --git a/frontend-modern/src/features/alerts/tabs/DestinationsTab.tsx b/frontend-modern/src/features/alerts/tabs/DestinationsTab.tsx
index 3f2e0f7718..d6462cefe9 100644
--- a/frontend-modern/src/features/alerts/tabs/DestinationsTab.tsx
+++ b/frontend-modern/src/features/alerts/tabs/DestinationsTab.tsx
@@ -102,6 +102,8 @@ export function DestinationsTab(props: DestinationsTabProps) {
onRefresh={() => void state.loadDeliveryLog()}
webhooks={state.webhooks()}
heldEvents={state.heldEvents()}
+ heldEventsUnavailable={state.heldEventsUnavailable()}
+ refreshingHeldEvents={state.refreshingHeldEvents()}
/>
diff --git a/frontend-modern/src/features/alerts/useAlertDestinationsTabState.ts b/frontend-modern/src/features/alerts/useAlertDestinationsTabState.ts
index 26d815d52c..86c90f37f1 100644
--- a/frontend-modern/src/features/alerts/useAlertDestinationsTabState.ts
+++ b/frontend-modern/src/features/alerts/useAlertDestinationsTabState.ts
@@ -53,6 +53,8 @@ export function useAlertDestinationsTabState(props: AlertDestinationsTabStatePro
deliveryLogUnavailable,
refreshingDeliveryLog,
heldEvents,
+ heldEventsUnavailable,
+ refreshingHeldEvents,
loadDeliveryLog,
} = useNotificationDeliveryLog();
const webhookState = useAlertWebhookDestinationsState({
@@ -173,6 +175,8 @@ export function useAlertDestinationsTabState(props: AlertDestinationsTabStatePro
deliveryLogUnavailable,
deliveryNeedsAttention,
heldEvents,
+ heldEventsUnavailable,
+ refreshingHeldEvents,
dismissTerminalFailures,
dismissingTerminalFailures,
handleRetry,
diff --git a/frontend-modern/src/features/alerts/useNotificationDeliveryLog.ts b/frontend-modern/src/features/alerts/useNotificationDeliveryLog.ts
index 1ddceb830f..e36c6036df 100644
--- a/frontend-modern/src/features/alerts/useNotificationDeliveryLog.ts
+++ b/frontend-modern/src/features/alerts/useNotificationDeliveryLog.ts
@@ -19,12 +19,15 @@ const DELIVERY_LOG_LIMIT = 200;
// Held events are the third half of that story: notifications that were
// deliberately not attempted, with the mechanism that held them. They come
// from the alert event log and degrade independently — a failed events read
-// hides the held rows without marking delivery attempts unavailable.
+// withdraws the held rows and reports that gap without hiding readable attempts.
export function useNotificationDeliveryLog() {
const [deliveryLog, setDeliveryLog] = createSignal(null);
const [deliveryLogUnavailable, setDeliveryLogUnavailable] = createSignal(false);
const [refreshingDeliveryLog, setRefreshingDeliveryLog] = createSignal(false);
const [heldEvents, setHeldEvents] = createSignal([]);
+ const [heldEventsUnavailable, setHeldEventsUnavailable] = createSignal(false);
+ // Before the first read, an empty array means unknown, not no held alerts.
+ const [refreshingHeldEvents, setRefreshingHeldEvents] = createSignal(true);
// Both reads belong to the same refresh, but held events never block the log.
let latestRequest = 0;
@@ -35,6 +38,7 @@ export function useNotificationDeliveryLog() {
const ownsRequest = (request: number) => !disposed && request === latestRequest;
const loadHeldEvents = async (request: number) => {
+ setRefreshingHeldEvents(true);
try {
const since = new Date(
Date.now() - HELD_EVENT_WINDOW_DAYS * 24 * 60 * 60 * 1000,
@@ -44,11 +48,16 @@ export function useNotificationDeliveryLog() {
since,
limit: HELD_EVENT_LIMIT,
});
- if (ownsRequest(request)) setHeldEvents(events);
+ if (!ownsRequest(request)) return;
+ setHeldEvents(events);
+ setHeldEventsUnavailable(false);
} catch (error) {
if (!ownsRequest(request)) return;
logger.error('Failed to load held alert notification events', error);
setHeldEvents([]);
+ setHeldEventsUnavailable(true);
+ } finally {
+ if (ownsRequest(request)) setRefreshingHeldEvents(false);
}
};
@@ -82,6 +91,8 @@ export function useNotificationDeliveryLog() {
deliveryLogUnavailable,
refreshingDeliveryLog,
heldEvents,
+ heldEventsUnavailable,
+ refreshingHeldEvents,
loadDeliveryLog,
};
}
diff --git a/frontend-modern/src/features/docker/DockerImagesTable.tsx b/frontend-modern/src/features/docker/DockerImagesTable.tsx
index 88345be440..744bc18b71 100644
--- a/frontend-modern/src/features/docker/DockerImagesTable.tsx
+++ b/frontend-modern/src/features/docker/DockerImagesTable.tsx
@@ -152,7 +152,7 @@ export const DockerImagesTable: Component<
kind="text"
sort={sort}
sortKey="host"
- class="platform-table-mobile-w-15 md:w-[18%]"
+ class="platform-table-phone-hidden md:w-[18%]"
>
Host
@@ -160,7 +160,7 @@ export const DockerImagesTable: Component<
kind="text"
sort={sort}
sortKey="usedBy"
- class="platform-table-mobile-w-15 md:w-[24%]"
+ class="platform-table-phone-hidden md:w-[24%]"
>
Used by
@@ -168,7 +168,7 @@ export const DockerImagesTable: Component<
kind="numeric-value"
sort={sort}
sortKey="size"
- class="platform-table-mobile-w-15 md:w-[12%]"
+ class="platform-table-mobile-w-20 md:w-[12%]"
>
Size
@@ -176,7 +176,7 @@ export const DockerImagesTable: Component<
kind="badge"
sort={sort}
sortKey="update"
- class="platform-table-mobile-w-15 md:w-[16%]"
+ class="platform-table-mobile-w-25 md:w-[16%]"
>
@@ -211,13 +211,15 @@ export const DockerImagesTable: Component<
/>
}
/>
+ {/* Host and consumers fit the row expansion on a phone; the
+ row keeps the image, its size and the update verdict. */}
{dockerHostName(resource)}
c.toUpperCase())
+ : 'Updating';
const title = [state, message, completedAt].filter(Boolean).join(' | ') || label;
return { label, title };
};
@@ -256,7 +262,7 @@ export const DockerServicesTable: Component<{
sortKey="running"
class="platform-table-mobile-w-10 w-[10%] md:w-[8%]"
>
- Running
+
{update().label}
diff --git a/frontend-modern/src/features/docker/DockerTasksTable.tsx b/frontend-modern/src/features/docker/DockerTasksTable.tsx
index d5f01c409a..50a7e7e929 100644
--- a/frontend-modern/src/features/docker/DockerTasksTable.tsx
+++ b/frontend-modern/src/features/docker/DockerTasksTable.tsx
@@ -12,6 +12,7 @@ import {
createPlatformTableSortState,
getPlatformTableCellClassForKind,
getPlatformTableDateTimeSortValue,
+ PlatformTableRelativeTimeValue,
PlatformTableShell,
type PlatformTableSortValue,
withPlatformStatusCounts,
@@ -255,11 +256,10 @@ export const DockerTasksTable: Component = (props) => {
-
- {dockerTextValue(resource.docker?.startedAt)}
+ {/* Swarm reports a raw RFC3339 stamp with microseconds; an age
+ reads at a glance and the stamp stays in the title. */}
+
+
diff --git a/frontend-modern/src/features/docker/__tests__/DockerNativeTables.test.tsx b/frontend-modern/src/features/docker/__tests__/DockerNativeTables.test.tsx
index 1695ae6c76..0e34de84ec 100644
--- a/frontend-modern/src/features/docker/__tests__/DockerNativeTables.test.tsx
+++ b/frontend-modern/src/features/docker/__tests__/DockerNativeTables.test.tsx
@@ -1505,6 +1505,8 @@ describe('Docker native tables', () => {
));
expect(screen.getByText('Update')).toBeInTheDocument();
+ expect(screen.getByText('Run')).toHaveClass('platform-table-label-compact');
+ expect(screen.getByText('Running')).toHaveClass('platform-table-label-full');
expect(screen.getByText('Stack')).toBeInTheDocument();
expect(screen.getByText('shop')).toBeInTheDocument();
expect(screen.getByText('checkout-api')).toBeInTheDocument();
@@ -1512,7 +1514,12 @@ describe('Docker native tables', () => {
expect(screen.getByText('replicated')).toBeInTheDocument();
expect(screen.getByText('4')).toBeInTheDocument();
expect(screen.getByText('2')).toBeInTheDocument();
- expect(screen.getByText('rollback_started')).toBeInTheDocument();
+ // The snake_case rollout token reads as words; the raw token stays in the title.
+ expect(screen.getByText('Rollback started')).toBeInTheDocument();
+ expect(screen.getByText('Rollback started')).toHaveClass('whitespace-normal', 'break-words');
+ expect(
+ screen.getByText('Rollback started').closest('[title]')?.getAttribute('title'),
+ ).toContain('rollback_started');
expect(screen.getByText('18080:8080/tcp')).toBeInTheDocument();
expect(screen.getByText('manager-1')).toBeInTheDocument();
expect(document.querySelector('[data-docker-service-row="service-1"]')).not.toBeNull();
@@ -1651,7 +1658,10 @@ describe('Docker native tables', () => {
expect(screen.getByText('web.2')).toBeInTheDocument();
expect(screen.getByText('web')).toBeInTheDocument();
expect(screen.getByText('running 2 minutes')).toBeInTheDocument();
- expect(screen.getByText('2026-05-24T13:05:00Z')).toBeInTheDocument();
+ // The raw RFC3339 stamp moves to the title; the cell shows an age.
+ const started = screen.getByTitle('2026-05-24T13:05:00Z');
+ expect(started).toBeInTheDocument();
+ expect(started.textContent).toMatch(/ago$/);
});
it('renders Docker Swarm secret API metadata without secret data', () => {
diff --git a/frontend-modern/src/features/docker/__tests__/dockerContainerTableModel.test.ts b/frontend-modern/src/features/docker/__tests__/dockerContainerTableModel.test.ts
index f8a8fc36f4..41f10a0869 100644
--- a/frontend-modern/src/features/docker/__tests__/dockerContainerTableModel.test.ts
+++ b/frontend-modern/src/features/docker/__tests__/dockerContainerTableModel.test.ts
@@ -30,7 +30,9 @@ describe('dockerContainerTableModel', () => {
const columns = getDockerContainerVisibleColumnsForLayout('phone', true, true, true);
const ids = columns.map((column) => column.id);
- expect(ids).toEqual(['container', 'state', 'cpu', 'memory', 'restarts', 'updates']);
+ // Restarts waits for mobile width: a phone row could not fit its header
+ // beside the Update control, and the count stays in the row expansion.
+ expect(ids).toEqual(['container', 'state', 'cpu', 'memory', 'updates']);
expect(getDockerContainerColumnWidthStyle('container', 'phone', ids)).toEqual({
width: '30%',
});
diff --git a/frontend-modern/src/features/docker/dockerContainerTableModel.ts b/frontend-modern/src/features/docker/dockerContainerTableModel.ts
index b573f3aba2..2961092c89 100644
--- a/frontend-modern/src/features/docker/dockerContainerTableModel.ts
+++ b/frontend-modern/src/features/docker/dockerContainerTableModel.ts
@@ -70,7 +70,9 @@ const DOCKER_CONTAINER_COLUMN_MIN_LAYOUT: Record<
state: 'narrow',
cpu: 'narrow',
memory: 'narrow',
- restarts: 'phone',
+ // A phone row cannot fit the Restarts header beside the Update control;
+ // the count stays in the row expansion there and returns at mobile width.
+ restarts: 'mobile',
updates: 'narrow',
actions: 'mobile',
host: 'tablet',
@@ -126,11 +128,10 @@ const DOCKER_CONTAINER_RESPONSIVE_WIDTHS: Record<
},
phone: {
container: 32,
- state: 13,
- cpu: 15,
- memory: 17,
- restarts: 10,
- updates: 13,
+ state: 14,
+ cpu: 14,
+ memory: 14,
+ updates: 16,
},
mobile: {
container: 30,
@@ -151,17 +152,20 @@ const DOCKER_CONTAINER_RESPONSIVE_WIDTHS: Record<
updates: 9,
actions: 6,
},
+ // Compact is what a 1280-1536px laptop window gets. Host, Engine and the
+ // Update control are short values that were clipped ("docker 2…") while the
+ // percentage-only CPU and memory bars had room to spare.
compact: {
container: 18,
- host: 10,
- runtime: 8,
- image: 18,
+ host: 12,
+ runtime: 9.5,
+ image: 16.5,
state: 7,
- cpu: 11,
- memory: 12,
- restarts: 9,
+ cpu: 9.5,
+ memory: 10,
+ restarts: 8.5,
ports: 12,
- updates: 9,
+ updates: 10,
actions: 8,
},
};
diff --git a/frontend-modern/src/features/kubernetes/KubernetesControllersTable.tsx b/frontend-modern/src/features/kubernetes/KubernetesControllersTable.tsx
index 8d7c18e9d3..3b64504700 100644
--- a/frontend-modern/src/features/kubernetes/KubernetesControllersTable.tsx
+++ b/frontend-modern/src/features/kubernetes/KubernetesControllersTable.tsx
@@ -16,6 +16,7 @@ import {
formatPlatformTableDateTimeValue,
formatPlatformTableRelativeTimeValue,
formatPlatformTableTextValue,
+ getPlatformResourceCountNoun,
getPlatformTableCellClassForKind,
PlatformTableShell,
type PlatformTableSortValue,
@@ -43,15 +44,20 @@ const controllerName = (resource: Resource): string =>
const controllerKind = (resource: Resource): string =>
resource.kubernetes?.resourceKind || getResourceTypeLabel(resource.type) || resource.type;
+const countedTarget = (count: number | undefined, noun: string): string => {
+ const value = count ?? 0;
+ return `${value} ${getPlatformResourceCountNoun(noun, value)}`;
+};
+
const targetValue = (resource: Resource): string => {
switch (resource.type) {
case 'k8s-replicaset':
case 'k8s-statefulset':
- return `${resource.kubernetes?.desiredReplicas ?? 0} pods`;
+ return countedTarget(resource.kubernetes?.desiredReplicas, 'pods');
case 'k8s-daemonset':
- return `${resource.kubernetes?.desiredNumberScheduled ?? 0} nodes`;
+ return countedTarget(resource.kubernetes?.desiredNumberScheduled, 'nodes');
case 'k8s-job':
- return `${resource.kubernetes?.desiredReplicas ?? 0} completions`;
+ return countedTarget(resource.kubernetes?.desiredReplicas, 'completions');
case 'k8s-cronjob':
return formatPlatformTableTextValue(resource.kubernetes?.schedule);
default:
@@ -317,7 +323,7 @@ export const KubernetesControllersTable: Component<{
kind="text"
sort={sort}
sortKey="kind"
- class="platform-table-mobile-w-15 md:w-[8%]"
+ class="platform-table-mobile-w-25 md:w-[8%]"
>
Kind
@@ -329,11 +335,16 @@ export const KubernetesControllersTable: Component<{
>
Scope
+ {/* The phone row keeps controller, kind, ready and issues. A
+ 15% kind track clipped "DaemonSet" and "StatefulSet" and the
+ target track clipped "1 completions", so target moves to the
+ row expansion, which also carries the schedule and job
+ timestamps the narrower layouts drop. */}
Target
@@ -365,7 +376,7 @@ export const KubernetesControllersTable: Component<{
kind="text"
sort={sort}
sortKey="exceptions"
- class="platform-table-mobile-w-20 md:w-[11%]"
+ class="platform-table-mobile-w-30 md:w-[11%]"
>
@@ -431,7 +442,7 @@ export const KubernetesControllersTable: Component<{
{target()}
diff --git a/frontend-modern/src/features/kubernetes/__tests__/KubernetesControllersTable.test.tsx b/frontend-modern/src/features/kubernetes/__tests__/KubernetesControllersTable.test.tsx
index cf201f66f5..1823b37427 100644
--- a/frontend-modern/src/features/kubernetes/__tests__/KubernetesControllersTable.test.tsx
+++ b/frontend-modern/src/features/kubernetes/__tests__/KubernetesControllersTable.test.tsx
@@ -1,6 +1,16 @@
-import { cleanup, render, screen } from '@solidjs/testing-library';
+import { cleanup, fireEvent, render, screen, within } from '@solidjs/testing-library';
import { afterEach, describe, expect, it, vi } from 'vitest';
+vi.mock('@/api/resources', () => ({
+ ResourceAPI: {
+ getFacetBundle: vi.fn().mockResolvedValue({
+ capabilities: [],
+ relationships: [],
+ recentChanges: [],
+ }),
+ },
+}));
+
import { formatPlatformTableDateTimeValue } from '@/features/platformPage/sharedPlatformPage';
import type { Resource } from '@/types/resource';
import { KubernetesControllersTable } from '../KubernetesControllersTable';
@@ -160,6 +170,117 @@ describe('KubernetesControllersTable', () => {
expect(screen.queryByText(/2026-05-24T1[23]/)).not.toBeInTheDocument();
});
+ it('keeps controller, kind, ready and issues on the phone row and moves target to the expansion', () => {
+ render(() => (
+ }
+ emptyTitle="No controllers"
+ emptyDescription="No controllers"
+ showToolbar={false}
+ />
+ ));
+
+ // "DaemonSet" and "StatefulSet" clipped in a 15% kind track at 390px, and
+ // "1 completions" clipped in the target track, so the phone row widens kind
+ // and issues and demotes target to the row expansion.
+ expect(screen.getByText('Kind').closest('th')).toHaveClass('platform-table-mobile-w-25');
+ expect(screen.getByText('Target').closest('th')).toHaveClass('platform-table-phone-hidden');
+ expect(screen.getByText('6 nodes').closest('td')).toHaveClass('platform-table-phone-hidden');
+ expect(screen.getByText('Exceptions').closest('th')).toHaveClass('platform-table-mobile-w-30');
+ expect(screen.getByText('Controller').closest('th')).toHaveClass('platform-table-mobile-w-30');
+ expect(screen.getByText('Ready/Done').closest('th')).toHaveClass('platform-table-mobile-w-15');
+ expect(screen.getByText('Kind').closest('th')).not.toHaveClass('platform-table-phone-hidden');
+ });
+
+ it('shows the absolute Job and CronJob times in the row expansion', () => {
+ vi.useFakeTimers();
+ vi.setSystemTime(new Date('2026-05-24T13:31:00Z'));
+
+ render(() => (
+ }
+ emptyTitle="No controllers"
+ emptyDescription="No controllers"
+ showToolbar={false}
+ />
+ ));
+
+ // Tapping the row opens the expansion; the Detail column is hidden below a
+ // large container, so this is where a phone or half-width pane reads the
+ // completion time.
+ fireEvent.click(screen.getByText('nightly-import'));
+ const job = screen.getByTestId('resource-kubernetes-controller-section');
+ expect(within(job).getByText('Started')).toBeInTheDocument();
+ expect(
+ within(job).getByText(`${absoluteTime('2026-05-24T12:55:00Z')} (36m ago)`),
+ ).toBeInTheDocument();
+ expect(within(job).getByText('Completed')).toBeInTheDocument();
+ expect(
+ within(job).getByText(`${absoluteTime('2026-05-24T13:00:00Z')} (31m ago)`),
+ ).toBeInTheDocument();
+ expect(within(job).getByText('Duration')).toBeInTheDocument();
+ expect(within(job).getByText('5m')).toBeInTheDocument();
+ expect(within(job).getByText('Target')).toBeInTheDocument();
+ expect(within(job).getByText('10 completions')).toBeInTheDocument();
+ expect(within(job).getByText('Failed').closest('tr')).toHaveTextContent('2');
+
+ fireEvent.click(screen.getByText('billing-rollup'));
+ const cron = screen.getByTestId('resource-kubernetes-controller-section');
+ expect(within(cron).getByText('Schedule')).toBeInTheDocument();
+ expect(within(cron).getByText('*/5 * * * *')).toBeInTheDocument();
+ expect(within(cron).getByText('Last run')).toBeInTheDocument();
+ expect(
+ within(cron).getByText(`${absoluteTime('2026-05-24T13:25:00Z')} (6m ago)`),
+ ).toBeInTheDocument();
+ expect(within(cron).getByText('Last success')).toBeInTheDocument();
+ expect(
+ within(cron).getByText(`${absoluteTime('2026-05-24T12:55:00Z')} (36m ago)`),
+ ).toBeInTheDocument();
+ expect(within(cron).getByText('Namespace').closest('tr')).toHaveTextContent('batch');
+ });
+
it('falls back to start and last-run times when a Job or CronJob has not completed', () => {
vi.useFakeTimers();
vi.setSystemTime(new Date('2026-05-24T13:31:00Z'));
@@ -198,6 +319,9 @@ describe('KubernetesControllersTable', () => {
/>
));
+ // A single desired completion reads as "1 completion", matching the
+ // expansion's Target row.
+ expect(screen.getByText('1 completion')).toBeInTheDocument();
expect(screen.getByText('Started 1m ago')).toHaveAttribute(
'title',
`Started: ${absoluteTime('2026-05-24T13:29:30Z')}`,
diff --git a/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts b/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts
index 2d6a7f9cf7..4bc6ed695f 100644
--- a/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts
+++ b/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts
@@ -322,7 +322,7 @@ describe('platform overview layout guardrails', () => {
expect(source).toContain('platform-table-mobile-w-30');
}
expect(dockerImagesTableSource).toMatch(
- /sortKey="size"[\s\S]{0,120}?class="platform-table-mobile-w-15 md:w-\[12%\]"/,
+ /sortKey="size"[\s\S]{0,120}?class="platform-table-mobile-w-20 md:w-\[12%\]"/,
);
expect(dockerServicesTableSource).toMatch(
/sortKey="mode"[\s\S]{0,120}?class="platform-table-phone-hidden md:w-\[8%\]"/,
diff --git a/frontend-modern/src/features/proxmox/ProxmoxBackupServersTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxBackupServersTable.tsx
index 313270eca0..79c59775f0 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxBackupServersTable.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxBackupServersTable.tsx
@@ -422,14 +422,10 @@ export function ProxmoxBackupServersTable(props: {
}
header={
<>
-
+
-
+
@@ -449,20 +445,16 @@ export function ProxmoxBackupServersTable(props: {
-
+
-
+
Used
@@ -597,12 +589,14 @@ export function ProxmoxBackupServersTable(props: {
>
{(datastore) => (
-
+
+
+
diff --git a/frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx
index dfdf028f97..530547b651 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx
@@ -43,6 +43,7 @@ import {
import {
buildProxmoxBackupRecoveryModel,
coverageRowMatchesSearch,
+ isBackupArtifact,
recoverableArtifactMatchesSearch,
type RecoverableArtifact,
type WorkloadCoverageRow,
@@ -347,17 +348,20 @@ export const ProxmoxBackupsTable: Component<{
return recoveryModel().coverageRows.flatMap((row) => {
const artifacts = row.artifacts.filter(locationMatches);
if (artifacts.length === 0) return [];
+ // Same rule as the model: running or failed artifacts stay listed but
+ // never become a "latest" pointer, and snapshots never become the backup.
+ const completed = artifacts.filter((artifact) => !artifact.running && !artifact.failed);
return [
{
...row,
artifacts,
- latestRecovery: newestArtifact(artifacts),
- latestPBS: newestArtifact(artifacts.filter((artifact) => artifact.sourceKind === 'pbs')),
+ latestBackup: newestArtifact(completed.filter(isBackupArtifact)),
+ latestPBS: newestArtifact(completed.filter((artifact) => artifact.sourceKind === 'pbs')),
latestArchive: newestArtifact(
- artifacts.filter((artifact) => artifact.sourceKind === 'archive'),
+ completed.filter((artifact) => artifact.sourceKind === 'archive'),
),
latestSnapshot: newestArtifact(
- artifacts.filter((artifact) => artifact.sourceKind === 'snapshot'),
+ completed.filter((artifact) => artifact.sourceKind === 'snapshot'),
),
pbsCount: artifacts.filter((artifact) => artifact.sourceKind === 'pbs').length,
archiveCount: artifacts.filter((artifact) => artifact.sourceKind === 'archive').length,
@@ -385,7 +389,7 @@ export const ProxmoxBackupsTable: Component<{
case 'workload':
return cmpString(a.workload.label, b.workload.label, direction);
case 'latest':
- return cmpNumber(a.latestRecovery?.createdMs, b.latestRecovery?.createdMs, direction);
+ return cmpNumber(a.latestBackup?.createdMs, b.latestBackup?.createdMs, direction);
case 'pbs':
return cmpNumber(a.latestPBS?.createdMs, b.latestPBS?.createdMs, direction);
case 'archive':
diff --git a/frontend-modern/src/features/proxmox/ProxmoxCoverageTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxCoverageTable.tsx
index c963a6e98d..5c58e4c8f7 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxCoverageTable.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxCoverageTable.tsx
@@ -50,6 +50,10 @@ import { useProxmoxBackupTableWindowing } from './useProxmoxBackupTableWindowing
// "None" instead of restating the source ("No PVE backup file"). The long form
// truncated at most widths and stays available as the hover title.
const COVERAGE_EMPTY_LABEL = 'None';
+const COVERAGE_NO_BACKUP_TITLE = 'No PBS snapshot or PVE backup file';
+// Matches the posture engine's own wording for a snapshot-only subject.
+const COVERAGE_SNAPSHOT_ONLY_TITLE =
+ 'No PBS snapshot or PVE backup file. Guest snapshots alone do not prove independent recovery.';
const coveragePostureVariant = (
posture: WorkloadCoverageRow['posture'],
@@ -240,7 +244,13 @@ export function ProxmoxCoverageTable(props: {
headClass={getPlatformTableHeadClassForKind('text')}
/>
+
{COVERAGE_EMPTY_LABEL}
}
>
- {(artifact) => }
+ {(artifact) => (
+
+ )}
@@ -429,7 +451,12 @@ export function ProxmoxCoverageTable(props: {
}
>
- {(artifact) => }
+ {(artifact) => (
+
+ )}
@@ -703,7 +730,7 @@ export function ProxmoxCoverageTable(props: {
>
{artifact.detail || '—'}
diff --git a/frontend-modern/src/features/proxmox/ProxmoxRecoverableTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxRecoverableTable.tsx
index 6da1dd7948..4c29fd190c 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxRecoverableTable.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxRecoverableTable.tsx
@@ -123,6 +123,9 @@ export function ProxmoxRecoverableTable(props: {
artifact.workload.name || artifact.workload.label,
artifact.workload.typeLabel,
artifact.workload.vmid,
+ // The phone projection has no location column, so the row's
+ // hover title carries the repository instead.
+ columnVisible('location') ? undefined : artifact.location,
]
.filter(Boolean)
.join(' · ')}
@@ -163,7 +166,7 @@ export function ProxmoxRecoverableTable(props: {
-
+
@@ -189,7 +192,10 @@ export function ProxmoxRecoverableTable(props: {
-
+
{artifact.detail || '—'}
diff --git a/frontend-modern/src/features/proxmox/__tests__/ProxmoxCoverageTable.test.tsx b/frontend-modern/src/features/proxmox/__tests__/ProxmoxCoverageTable.test.tsx
index 50adeb3dd8..b9b7e75eaf 100644
--- a/frontend-modern/src/features/proxmox/__tests__/ProxmoxCoverageTable.test.tsx
+++ b/frontend-modern/src/features/proxmox/__tests__/ProxmoxCoverageTable.test.tsx
@@ -80,7 +80,7 @@ describe('ProxmoxCoverageTable column visibility', () => {
expect(headers).toContain('Target ID');
expect(headers).toContain('Node');
expect(headers).toContain('Posture▲');
- expect(headers).toContain('Restore');
+ expect(headers).toContain('Last backup');
expect(headers).toContain('PBS snapshot');
expect(headers).toContain('Guest snapshot');
expect(headers).not.toContain('PVE file');
@@ -239,7 +239,7 @@ describe('ProxmoxCoverageTable column visibility', () => {
// cannot truncate to "No PVE backup f…".
const empty = (title: string) => document.querySelector(`td span[title="${title}"]`);
for (const title of [
- 'No restore point',
+ 'No PBS snapshot or PVE backup file',
'No PBS snapshot',
'No PVE backup file',
'No guest snapshot',
diff --git a/frontend-modern/src/features/proxmox/__tests__/ProxmoxRecoverableTable.test.tsx b/frontend-modern/src/features/proxmox/__tests__/ProxmoxRecoverableTable.test.tsx
index 0dea167612..a8c0248ff5 100644
--- a/frontend-modern/src/features/proxmox/__tests__/ProxmoxRecoverableTable.test.tsx
+++ b/frontend-modern/src/features/proxmox/__tests__/ProxmoxRecoverableTable.test.tsx
@@ -55,12 +55,13 @@ describe('ProxmoxRecoverableTable responsive columns', () => {
expect([...document.querySelectorAll('thead th')].map((th) => th.textContent?.trim())).toEqual([
'Workload',
'Via',
- 'Loc',
'Age▼',
'State',
]);
expect(document.body.textContent).toContain('VM 100');
- expect(document.body.textContent).toContain('main / pve1');
+ // The phone projection has no location column; the row title carries it.
+ expect(document.body.textContent).not.toContain('main / pve1');
+ expect(document.querySelector('td [title*="main / pve1"]')).not.toBeNull();
expect(document.body.textContent).not.toContain('5 PBS files');
});
diff --git a/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupRecoveryModel.branchcov.test.ts b/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupRecoveryModel.branchcov.test.ts
index 8ae3acda04..6ab7884a78 100644
--- a/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupRecoveryModel.branchcov.test.ts
+++ b/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupRecoveryModel.branchcov.test.ts
@@ -522,7 +522,7 @@ describe('buildProxmoxBackupRecoveryModel summary, sort, and empty edges', () =>
expect(model.coverageSummary.attention).toBe(0);
});
- it('sorts rows by postureRank asc, then latestRecovery createdMs desc', () => {
+ it('sorts rows by postureRank asc, then latestBackup createdMs desc', () => {
const postures = new Map([
['vm-830', posture('vm-830', 'unprotected')],
['vm-840', posture('vm-840', 'protected')],
diff --git a/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupRecoveryModel.test.ts b/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupRecoveryModel.test.ts
index a7e222ac29..43fc7e5a41 100644
--- a/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupRecoveryModel.test.ts
+++ b/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupRecoveryModel.test.ts
@@ -162,6 +162,35 @@ describe('proxmoxBackupRecoveryModel', () => {
);
});
+ it('shows the archive format as its detail and keeps the volid on hover and in search', () => {
+ const model = buildProxmoxBackupRecoveryModel({
+ workloads: [workload({})],
+ pbsBackups: [],
+ archives: [archive({ format: 'tar.zst' })],
+ snapshots: [],
+ tasks: [],
+ nowMs: Date.parse('2026-05-26T08:00:00Z'),
+ });
+
+ const [artifact] = model.recoverableArtifacts;
+ expect(artifact.detail).toBe('tar.zst');
+ expect(artifact.detailTitle).toBe('local:backup/vzdump-lxc-112-2026_05_24-02_00_00.tar.zst');
+ expect(recoverableArtifactMatchesSearch(artifact, 'vzdump-lxc-112')).toBe(true);
+ });
+
+ it('falls back to the archive file name when the provider reports no format', () => {
+ const model = buildProxmoxBackupRecoveryModel({
+ workloads: [workload({})],
+ pbsBackups: [],
+ archives: [archive({ format: '' })],
+ snapshots: [],
+ tasks: [],
+ nowMs: Date.parse('2026-05-26T08:00:00Z'),
+ });
+
+ expect(model.recoverableArtifacts[0].detail).toBe('vzdump-lxc-112-2026_05_24-02_00_00.tar.zst');
+ });
+
it('keeps a terminally incomplete PBS artifact out of latest recovery', () => {
const model = buildProxmoxBackupRecoveryModel({
workloads: [workload({})],
@@ -186,10 +215,49 @@ describe('proxmoxBackupRecoveryModel', () => {
const failed = model.recoverableArtifacts.find((artifact) => artifact.id.includes('failed'));
expect(failed).toMatchObject({ failed: true, running: false, verified: undefined });
- expect(model.coverageRows[0].latestRecovery?.createdAt).toBe('2026-05-25T01:34:25Z');
+ expect(model.coverageRows[0].latestBackup?.createdAt).toBe('2026-05-25T01:34:25Z');
expect(recoverableArtifactMatchesSearch(failed!, 'failed incomplete')).toBe(true);
});
+ it('keeps a fresh guest snapshot from standing in for the last backup', () => {
+ const model = buildProxmoxBackupRecoveryModel({
+ workloads: [workload({})],
+ pbsBackups: [pbsBackup({ backupTime: '2026-05-05T01:34:25Z' })],
+ archives: [],
+ snapshots: [snapshot({ time: '2026-05-26T03:00:00Z' })],
+ tasks: [],
+ nowMs: Date.parse('2026-05-26T08:00:00Z'),
+ });
+
+ const row = model.coverageRows[0];
+ expect(row.latestSnapshot?.createdAt).toBe('2026-05-26T03:00:00Z');
+ expect(row.latestBackup?.sourceKind).toBe('pbs');
+ expect(row.latestBackup?.createdAt).toBe('2026-05-05T01:34:25Z');
+ expect(
+ getRecoveryAgeBand(
+ row.latestBackup?.createdMs,
+ model.coverageRows.length && Date.parse('2026-05-26T08:00:00Z'),
+ ),
+ ).toBe('aging');
+ });
+
+ it('reports no last backup for a snapshot-only workload', () => {
+ const model = buildProxmoxBackupRecoveryModel({
+ workloads: [workload({})],
+ pbsBackups: [],
+ archives: [],
+ snapshots: [snapshot()],
+ tasks: [],
+ nowMs: Date.parse('2026-05-26T08:00:00Z'),
+ });
+
+ const row = model.coverageRows[0];
+ expect(row.latestBackup).toBeUndefined();
+ expect(row.latestSnapshot?.sourceKind).toBe('snapshot');
+ expect(row.artifacts).toHaveLength(1);
+ expect(model.coverageSummary.recoverableArtifacts).toBe(1);
+ });
+
it('uses canonical workload attention while retaining the failed task as evidence', () => {
const model = buildProxmoxBackupRecoveryModel({
workloads: [workload({})],
diff --git a/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTablePresentation.test.ts b/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTablePresentation.test.ts
index 8817787792..a52bd7c075 100644
--- a/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTablePresentation.test.ts
+++ b/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTablePresentation.test.ts
@@ -44,10 +44,10 @@ describe('Proxmox backups responsive table presentation', () => {
'status',
'datastore',
'used',
- 'backups',
]);
expect(getBackupServerColumnWidthStyle('server', 'compact')).toEqual({ width: '40%' });
- expect(getBackupServerColumnWidthStyle('used', 'compact')).toEqual({ width: '20%' });
+ expect(getBackupServerColumnWidthStyle('status', 'compact')).toEqual({ width: '23%' });
+ expect(getBackupServerColumnWidthStyle('used', 'compact')).toEqual({ width: '15%' });
expect(ids(getBackupServerColumns('basic'))).toEqual([
'server',
'status',
@@ -124,12 +124,11 @@ describe('Proxmox backups responsive table presentation', () => {
expect(ids(getRecoverableColumns('compact'))).toEqual([
'workload',
'source',
- 'location',
'created',
'state',
]);
expect(getRecoverableColumnWidthStyle('workload', 'compact')).toEqual({ width: '40%' });
- expect(getRecoverableColumnWidthStyle('state', 'compact')).toEqual({ width: '16%' });
+ expect(getRecoverableColumnWidthStyle('state', 'compact')).toEqual({ width: '30%' });
expect(ids(getRecoverableColumns('basic'))).toEqual([
'workload',
'source',
diff --git a/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTableShared.test.tsx b/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTableShared.test.tsx
index cb34f14569..3694f78460 100644
--- a/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTableShared.test.tsx
+++ b/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTableShared.test.tsx
@@ -8,8 +8,10 @@ import proxmoxBackupsTableSharedSource from '../proxmoxBackupsTableShared.tsx?ra
import {
ArtifactSourceBadge,
ArtifactStateBadge,
+ ProxmoxBackupAgeText,
ProxmoxBackupWorkloadTypeBadge,
SortableHead,
+ formatCompactBackupAge,
} from '../proxmoxBackupsTableShared';
import type { RecoverableArtifact } from '../proxmoxBackupRecoveryModel';
@@ -86,6 +88,28 @@ describe('proxmoxBackupsTableShared', () => {
}
});
+ it('drops the age suffix in the phone projection and keeps the timestamp on hover', () => {
+ const createdAt = new Date(Date.now() - 18 * 60 * 60 * 1000).toISOString();
+ expect(formatCompactBackupAge(createdAt)).toBe('18h');
+ expect(formatCompactBackupAge(new Date().toISOString())).toBe('now');
+
+ const artifact = {
+ id: 'pbs:1',
+ nativeId: '1',
+ sourceKind: 'pbs',
+ sourceLabel: 'PBS',
+ workload: { key: 'w', type: 'vm', typeLabel: 'VM', vmid: '100', label: 'VM 100' },
+ createdAt,
+ createdMs: Date.parse(createdAt),
+ location: 'main',
+ detail: '',
+ protected: false,
+ } as RecoverableArtifact;
+ render(() => );
+ const age = screen.getByText('18h');
+ expect(age.closest('[title]')?.getAttribute('title')).toContain(createdAt);
+ });
+
it('keeps backup age text on the shared relative-time primitive', () => {
expect(proxmoxBackupsTableSharedSource).toContain('PlatformTableRelativeTimeValue');
expect(proxmoxBackupsTableSharedSource).not.toContain('formatRelativeTime(');
diff --git a/frontend-modern/src/features/proxmox/__tests__/proxmoxHostTableModel.test.ts b/frontend-modern/src/features/proxmox/__tests__/proxmoxHostTableModel.test.ts
index 1e23674fb7..305232fb26 100644
--- a/frontend-modern/src/features/proxmox/__tests__/proxmoxHostTableModel.test.ts
+++ b/frontend-modern/src/features/proxmox/__tests__/proxmoxHostTableModel.test.ts
@@ -19,16 +19,16 @@ describe('proxmoxHostTableModel', () => {
expect(getProxmoxHostColumnWidthStyle('uptime', 'narrow', ids)).toEqual({ width: '15%' });
});
- it('shows the full operational metric track at phone width', () => {
+ it('matches the guest table columns and keeps node names whole at phone width', () => {
const columns = getProxmoxHostVisibleColumnsForLayout('phone');
const ids = columns.map((column) => column.id);
- expect(ids).toEqual(['node', 'cpu', 'memory', 'disk', 'temp', 'uptime']);
+ expect(ids).toEqual(['node', 'cpu', 'memory', 'disk', 'uptime']);
expect(getProxmoxHostTableMinWidthClass('phone')).toBe('min-w-[0px]');
- expect(getProxmoxHostColumnWidthStyle('node', 'phone', ids)).toEqual({ width: '30%' });
- expect(getProxmoxHostColumnWidthStyle('disk', 'phone', ids)).toEqual({ width: '13.3824%' });
- expect(getProxmoxHostColumnWidthStyle('temp', 'phone', ids)).toEqual({ width: '15.4412%' });
- expect(getProxmoxHostColumnWidthStyle('uptime', 'phone', ids)).toEqual({ width: '14.4118%' });
+ expect(getProxmoxHostColumnWidthStyle('node', 'phone', ids)).toEqual({ width: '38%' });
+ expect(getProxmoxHostColumnWidthStyle('cpu', 'phone', ids)).toEqual({ width: '15.5%' });
+ expect(getProxmoxHostColumnWidthStyle('disk', 'phone', ids)).toEqual({ width: '15.5%' });
+ expect(getProxmoxHostColumnWidthStyle('uptime', 'phone', ids)).toEqual({ width: '15.5%' });
});
it('prioritizes live utilization columns in the mobile host table', () => {
diff --git a/frontend-modern/src/features/proxmox/proxmoxBackupRecoveryModel.ts b/frontend-modern/src/features/proxmox/proxmoxBackupRecoveryModel.ts
index c71846a6ae..b4288cf9f6 100644
--- a/frontend-modern/src/features/proxmox/proxmoxBackupRecoveryModel.ts
+++ b/frontend-modern/src/features/proxmox/proxmoxBackupRecoveryModel.ts
@@ -47,6 +47,8 @@ export interface RecoverableArtifact {
/** Operator-facing source/repository label used by the backup-location filter. */
locationLabel?: string;
detail: string;
+ /** Full provider identifier behind a shortened `detail`, shown on hover. */
+ detailTitle?: string;
protected: boolean;
verified?: boolean;
/** A still-running backup is writing this artifact; it is not recoverable yet. */
@@ -70,7 +72,13 @@ export interface WorkloadCoverageRow {
key: string;
workload: WorkloadReference;
artifacts: RecoverableArtifact[];
- latestRecovery?: RecoverableArtifact;
+ /**
+ * Newest completed PBS snapshot or PVE backup file. Guest snapshots never
+ * fill this slot: they live on the guest's own storage and the protection
+ * posture engine does not count them as independent recovery, so a fresh
+ * snapshot must not read as a fresh backup beside a stale posture.
+ */
+ latestBackup?: RecoverableArtifact;
latestPBS?: RecoverableArtifact;
latestArchive?: RecoverableArtifact;
latestSnapshot?: RecoverableArtifact;
@@ -138,12 +146,25 @@ export function getRecoveryAgeBand(
return 'stale';
}
+// A guest snapshot shares the guest's storage, so it is listed as restore
+// evidence but never counted as a backup. Mirrors the server posture rule that
+// "snapshots alone do not prove independent recovery".
+export function isBackupArtifact(artifact: RecoverableArtifact): boolean {
+ return artifact.sourceKind !== 'snapshot';
+}
+
function parseTimestampMs(value: string | undefined): number | undefined {
if (!value) return undefined;
const ms = Date.parse(value);
return Number.isFinite(ms) ? ms : undefined;
}
+function archiveFileName(volid: string | undefined): string {
+ const trimmed = volid?.trim() ?? '';
+ if (!trimmed) return '';
+ return trimmed.slice(trimmed.lastIndexOf('/') + 1);
+}
+
function pbsBackupFileDetailLabel(fileCount: number): string {
if (fileCount <= 0) return 'PBS files not listed';
if (fileCount === 1) return '1 PBS file';
@@ -572,7 +593,12 @@ export function buildProxmoxBackupRecoveryModel(
size: archive.size,
location: archive.storage || archive.node || '—',
...artifactLocationScope('archive', archive.instance, archive.storage || archive.node),
- detail: archive.volid || archive.format || archiveSource.detailFallbackLabel,
+ // The volid repeats the storage, guest type, VMID, and timestamp the row
+ // already shows in their own columns and clips at every width; the
+ // archive format is the one fact it adds, so that is the cell and the
+ // volid stays on hover and in search.
+ detail: archive.format || archiveFileName(archive.volid) || archiveSource.detailFallbackLabel,
+ detailTitle: archive.volid || undefined,
protected: archive.protected,
verified: archive.inProgress ? undefined : archive.isPBS ? archive.verified : undefined,
running: archive.inProgress === true,
@@ -626,6 +652,7 @@ export function buildProxmoxBackupRecoveryModel(
// the "latest" pointers (which answer "what can I recover to?") skip them.
// The artifacts themselves stay listed with an honest state.
const completed = row.artifacts.filter((artifact) => !artifact.running && !artifact.failed);
+ row.latestBackup = newest(completed.filter(isBackupArtifact), (artifact) => artifact.createdMs);
row.latestPBS = newest(
completed.filter((artifact) => artifact.sourceKind === 'pbs'),
(artifact) => artifact.createdMs,
@@ -638,7 +665,6 @@ export function buildProxmoxBackupRecoveryModel(
completed.filter((artifact) => artifact.sourceKind === 'snapshot'),
(artifact) => artifact.createdMs,
);
- row.latestRecovery = newest(completed, (artifact) => artifact.createdMs);
}
const coverageRows = Array.from(rows.values()).map((row) => {
@@ -665,7 +691,7 @@ export function buildProxmoxBackupRecoveryModel(
coverageRows.sort((left, right) => {
if (left.postureRank !== right.postureRank) return left.postureRank - right.postureRank;
- return (right.latestRecovery?.createdMs ?? 0) - (left.latestRecovery?.createdMs ?? 0);
+ return (right.latestBackup?.createdMs ?? 0) - (left.latestBackup?.createdMs ?? 0);
});
artifacts.sort((left, right) => (right.createdMs ?? 0) - (left.createdMs ?? 0));
@@ -730,6 +756,7 @@ export function recoverableArtifactMatchesSearch(
artifact.sourceTitle,
artifact.location,
artifact.detail,
+ artifact.detailTitle,
artifact.verified === true
? 'verified'
: artifact.verified === false
diff --git a/frontend-modern/src/features/proxmox/proxmoxBackupsTablePresentation.ts b/frontend-modern/src/features/proxmox/proxmoxBackupsTablePresentation.ts
index b1342d3396..92e3e2f3a0 100644
--- a/frontend-modern/src/features/proxmox/proxmoxBackupsTablePresentation.ts
+++ b/frontend-modern/src/features/proxmox/proxmoxBackupsTablePresentation.ts
@@ -93,8 +93,10 @@ const BACKUP_SERVER_VISIBLE: Record<
> = {
// Reachability and datastore exhaustion are the two risks that can stop all
// future backups. Host telemetry and space-efficiency context return only as
- // the table gains enough room to keep those headline answers readable.
- compact: ['server', 'status', 'datastore', 'used', 'backups'],
+ // the table gains enough room to keep those headline answers readable. The
+ // phone projection keeps those two answers whole ("Healthy", "33.6%") and
+ // lets the backup count return with the first wider layout.
+ compact: ['server', 'status', 'datastore', 'used'],
basic: ['server', 'status', 'datastore', 'used', 'backups'],
operational: ['server', 'status', 'cpu', 'memory', 'datastore', 'used', 'backups'],
expanded: ['server', 'status', 'cpu', 'memory', 'uptime', 'datastore', 'used', 'backups'],
@@ -105,8 +107,10 @@ const BACKUP_SERVER_WEIGHTS: Record<
ProxmoxBackupsTableLayoutMode,
Partial>
> = {
- compact: { server: 40, status: 15, datastore: 15, used: 20, backups: 10 },
- basic: { server: 24, status: 14, datastore: 20, used: 28, backups: 14 },
+ compact: { server: 40, status: 23, datastore: 22, used: 15 },
+ // Just above the phone projection the used cell carries its used/total
+ // pair again, the longest value in the row, so it takes the most room.
+ basic: { server: 24, status: 13.6, datastore: 18.2, used: 28.4, backups: 9.8 },
operational: {
server: 20,
status: 12,
@@ -175,7 +179,7 @@ export const COVERAGE_COLUMNS: readonly BackupTableColumn[] =
{ id: 'targetId', label: 'Target ID', kind: 'text' },
{ id: 'node', label: 'Node', kind: 'text' },
{ id: 'posture', label: 'Posture', kind: 'text' },
- { id: 'latest', label: 'Restore', kind: 'numeric-value' },
+ { id: 'latest', label: 'Last backup', kind: 'numeric-value' },
{ id: 'pbs', label: 'PBS snapshot', kind: 'text' },
{ id: 'archive', label: 'PVE file', kind: 'text' },
{ id: 'snapshot', label: 'Guest snapshot', kind: 'text' },
@@ -184,7 +188,7 @@ export const COVERAGE_COLUMNS: readonly BackupTableColumn[] =
const COVERAGE_VISIBLE: Record = {
// On narrow surfaces answer: which workload, what posture, how recent is the
- // newest restore point, and did the latest task succeed? Provider-by-provider
+ // newest independent backup, and did the latest task succeed? Provider-by-provider
// evidence is progressive detail in the expansion row; target identity folds
// beneath the name so the scan stays legible at 320px.
compact: ['workload', 'posture', 'latest', 'pbs', 'task'],
@@ -198,11 +202,14 @@ const COVERAGE_WEIGHTS: Record<
ProxmoxBackupsTableLayoutMode,
Partial>
> = {
- compact: { workload: 40, posture: 18, latest: 16, pbs: 16, task: 10 },
+ // Posture keeps its whole compact word ("Unknown"), the two age cells hold
+ // the suffix-free compact age, and the job dot takes what a "Job" header
+ // needs.
+ compact: { workload: 40, posture: 21, latest: 14.5, pbs: 14.5, task: 10 },
// Above the phone projection the identity columns (workload, node) take the
// slack that the short type badge, target id, and age cells cannot use, so
// names stay whole instead of truncating beside empty space.
- basic: { workload: 31, node: 20, posture: 20, latest: 14, task: 15 },
+ basic: { workload: 31, node: 18, posture: 22, latest: 15, task: 14 },
operational: { workload: 27, type: 8, node: 17, posture: 17, latest: 15, task: 16 },
expanded: {
workload: 19,
@@ -287,7 +294,10 @@ const RECOVERABLE_VISIBLE: Record getRecoveryAgeBand(props.artifact.createdMs);
const title = () => {
const parts = [recoveryAgeTitleByBand[band()], props.artifact.createdAt].filter(Boolean);
@@ -228,7 +239,12 @@ export function ProxmoxBackupAgeText(props: { artifact: RecoverableArtifact }) {
return (
-
+ }
+ >
+ {formatCompactBackupAge(props.artifact.createdAt)}
+
);
}
diff --git a/frontend-modern/src/features/proxmox/proxmoxHostTableModel.ts b/frontend-modern/src/features/proxmox/proxmoxHostTableModel.ts
index b053bdb00f..1a9d7db7cd 100644
--- a/frontend-modern/src/features/proxmox/proxmoxHostTableModel.ts
+++ b/frontend-modern/src/features/proxmox/proxmoxHostTableModel.ts
@@ -31,7 +31,7 @@ const HOST_COLUMN_MIN_LAYOUT: Record = {
- node: 18,
- version: 7,
+ node: 20,
+ version: 6,
uptime: 7,
cpu: 13,
memory: 13,
@@ -55,7 +55,7 @@ const HOST_COLUMN_DESKTOP_WIDTHS: Record = {
temp: 6,
vms: 5,
cts: 5,
- cluster: 13,
+ cluster: 12,
};
const HOST_COLUMN_RESPONSIVE_WEIGHTS: Record<
@@ -69,13 +69,15 @@ const HOST_COLUMN_RESPONSIVE_WEIGHTS: Record<
disk: 15,
uptime: 15,
},
+ // Phones carry the same five columns as the guest table below them. A sixth
+ // (temperature) left the node name with four characters, which made a
+ // cluster of "Analytics A".."F" rows unreadable.
phone: {
node: 32,
- cpu: 13,
- memory: 13,
- disk: 13,
- temp: 15,
- uptime: 14,
+ cpu: 15,
+ memory: 15,
+ disk: 15,
+ uptime: 15,
},
mobile: {
node: 32,
@@ -146,6 +148,11 @@ export const getProxmoxHostVisibleColumnsForLayout = (
);
};
+// The node cell carries the expansion toggle and status dot before the name,
+// so it needs more than the shared 30% phone identity anchor to show a
+// typical node name whole.
+const PROXMOX_HOST_PHONE_IDENTITY_WIDTH_PERCENT = 38;
+
export const getProxmoxHostColumnWidthStyle = (
columnId: ProxmoxHostTableColumnId,
layoutMode: WorkloadTableLayoutMode,
@@ -159,9 +166,11 @@ export const getProxmoxHostColumnWidthStyle = (
visibleColumnIds,
layoutMode === 'narrow'
? { columnId: 'node', widthPercent: PLATFORM_TABLE_NARROW_IDENTITY_WIDTH_PERCENT }
- : layoutMode === 'phone' || layoutMode === 'mobile'
- ? { columnId: 'node', widthPercent: PLATFORM_TABLE_PHONE_IDENTITY_WIDTH_PERCENT }
- : undefined,
+ : layoutMode === 'phone'
+ ? { columnId: 'node', widthPercent: PROXMOX_HOST_PHONE_IDENTITY_WIDTH_PERCENT }
+ : layoutMode === 'mobile'
+ ? { columnId: 'node', widthPercent: PLATFORM_TABLE_PHONE_IDENTITY_WIDTH_PERCENT }
+ : undefined,
);
};
diff --git a/frontend-modern/src/features/storageBackups/__tests__/diskDetailPresentation.test.ts b/frontend-modern/src/features/storageBackups/__tests__/diskDetailPresentation.test.ts
index 8edf3ca711..89a8caacb3 100644
--- a/frontend-modern/src/features/storageBackups/__tests__/diskDetailPresentation.test.ts
+++ b/frontend-modern/src/features/storageBackups/__tests__/diskDetailPresentation.test.ts
@@ -4,6 +4,7 @@ import {
DISK_DETAIL_LIVE_CHARTS,
getDiskAttributeValueTextClass,
getDiskDetailAttributeCards,
+ getDiskDetailHealthPresentation,
getDiskDetailHistoryCharts,
getDiskDetailHistoryFallbackMessage,
getDiskDetailLiveBadgeLabel,
@@ -34,6 +35,41 @@ describe('diskDetailPresentation', () => {
);
});
+ it('carries the row verdict and its reason into the drawer header', () => {
+ const disk = {
+ node: 'tower',
+ instance: 'cluster-main',
+ devPath: '/dev/sda',
+ model: 'Archive HDD',
+ serial: 'SERIAL-1',
+ wwn: '',
+ size: 1,
+ health: 'PASSED',
+ wearout: -1,
+ type: 'hdd',
+ temperature: 42,
+ rpm: 7200,
+ used: '',
+ riskReasons: [] as string[],
+ };
+ expect(getDiskDetailHealthPresentation(disk)).toEqual({
+ label: 'Healthy',
+ summary: '',
+ tone: 'text-emerald-700 dark:text-emerald-300',
+ });
+ expect(
+ getDiskDetailHealthPresentation({
+ ...disk,
+ health: 'FAILED',
+ riskReasons: ['SMART failed.'],
+ }),
+ ).toEqual({
+ label: 'Replace Now',
+ summary: 'SMART failed.',
+ tone: 'text-red-700 dark:text-red-300',
+ });
+ });
+
it('builds canonical SATA and NVMe attribute cards', () => {
expect(
getDiskDetailAttributeCards({
diff --git a/frontend-modern/src/features/storageBackups/__tests__/diskPresentation.test.ts b/frontend-modern/src/features/storageBackups/__tests__/diskPresentation.test.ts
index 4d177523c1..b6823bd0f7 100644
--- a/frontend-modern/src/features/storageBackups/__tests__/diskPresentation.test.ts
+++ b/frontend-modern/src/features/storageBackups/__tests__/diskPresentation.test.ts
@@ -19,9 +19,11 @@ import {
PHYSICAL_DISK_TABLE_CLASS,
PHYSICAL_DISK_TABLE_ROW_HOVER_CLASS,
getPhysicalDiskEmptyStatePresentation,
- getPhysicalDiskColumnWidthPercent,
+ getPhysicalDiskCellPaddingClass,
+ getPhysicalDiskColumnWidthStyle,
getPhysicalDiskCollectionMessages,
getPhysicalDiskFieldStatusMessage,
+ getPhysicalDiskHealthCompactLabel,
getPhysicalDiskHealthStatus,
getPhysicalDiskHealthSummary,
getPhysicalDiskHostLabel,
@@ -158,14 +160,55 @@ describe('diskPresentation', () => {
),
),
).toBe(true);
- expect(getPhysicalDiskColumnWidthPercent('compact', 'disk')).toBe(33);
- expect(getPhysicalDiskColumnWidthPercent('compact', 'size')).toBe(14);
- expect(getPhysicalDiskColumnWidthPercent('operational', 'life')).toBe(9);
- expect(getPhysicalDiskColumnWidthPercent('compact', 'device')).toBe(0);
+ expect(getPhysicalDiskColumnWidthStyle('compact', 'disk')).toEqual({ width: '34%' });
+ expect(getPhysicalDiskColumnWidthStyle('compact', 'temp')).toEqual({ width: '12%' });
+ expect(getPhysicalDiskColumnWidthStyle('compact', 'size')).toEqual({ width: '15%' });
+ expect(getPhysicalDiskColumnWidthStyle('operational', 'life')).toEqual({ width: '9%' });
+ expect(getPhysicalDiskColumnWidthStyle('compact', 'device')).toEqual({ width: '0%' });
expect(isPhysicalDiskColumnVisible('narrow', 'life')).toBe(false);
expect(isPhysicalDiskColumnVisible('narrow', 'temp')).toBe(true);
- expect(getPhysicalDiskColumnWidthPercent('narrow', 'disk')).toBe(40);
- expect(getPhysicalDiskColumnWidthPercent('narrow', 'size')).toBe(15);
+ expect(getPhysicalDiskColumnWidthStyle('narrow', 'disk')).toEqual({ width: '41%' });
+ expect(getPhysicalDiskColumnWidthStyle('narrow', 'temp')).toEqual({ width: '12%' });
+ expect(getPhysicalDiskColumnWidthStyle('narrow', 'size')).toEqual({ width: '16%' });
+ });
+
+ it('keeps the desktop disk column widths on the canonical weighted helper', () => {
+ const columns = [
+ 'disk',
+ 'device',
+ 'host',
+ 'role',
+ 'parent',
+ 'health',
+ 'life',
+ 'temp',
+ 'size',
+ ] as const;
+ expect(columns.map((column) => getPhysicalDiskColumnWidthStyle('full', column).width)).toEqual([
+ '19%',
+ '9%',
+ '10%',
+ '8%',
+ '12%',
+ '17%',
+ '6%',
+ '7%',
+ '12%',
+ ]);
+ });
+
+ it('sheds the shared cell padding only on the phone disk layouts', () => {
+ expect(getPhysicalDiskCellPaddingClass('narrow')).toBe('!px-1');
+ expect(getPhysicalDiskCellPaddingClass('compact')).toBe('!px-1');
+ expect(getPhysicalDiskCellPaddingClass('basic')).toBe('');
+ expect(getPhysicalDiskCellPaddingClass('full')).toBe('');
+ });
+
+ it('shortens only the health words that cannot fit a phone health column', () => {
+ expect(getPhysicalDiskHealthCompactLabel('Needs Attention')).toBe('Attention');
+ expect(getPhysicalDiskHealthCompactLabel('Replace Now')).toBe('Replace');
+ expect(getPhysicalDiskHealthCompactLabel('Healthy')).toBe('Healthy');
+ expect(getPhysicalDiskHealthCompactLabel('Unknown')).toBe('Unknown');
});
it('detects SMART warnings from counters', () => {
diff --git a/frontend-modern/src/features/storageBackups/__tests__/resourceStoragePresentation.test.ts b/frontend-modern/src/features/storageBackups/__tests__/resourceStoragePresentation.test.ts
index 14cd9deebd..5185db68c3 100644
--- a/frontend-modern/src/features/storageBackups/__tests__/resourceStoragePresentation.test.ts
+++ b/frontend-modern/src/features/storageBackups/__tests__/resourceStoragePresentation.test.ts
@@ -62,6 +62,14 @@ describe('resourceStoragePresentation', () => {
),
).toBe('Datastore');
expect(getResourceStorageTopologyLabel(makeResource(), 'rbd')).toBe('Cluster Storage');
+ // Proxmox plugin names are acronyms or compound words; title-casing them
+ // produced "Lvmthin" for every default local-lvm storage and "Nfs".
+ expect(getResourceStorageTopologyLabel(makeResource(), 'lvmthin')).toBe('LVM-Thin');
+ expect(getResourceStorageTopologyLabel(makeResource(), 'lvm')).toBe('LVM');
+ expect(getResourceStorageTopologyLabel(makeResource(), 'nfs')).toBe('NFS');
+ expect(getResourceStorageTopologyLabel(makeResource(), 'cifs')).toBe('SMB/CIFS');
+ expect(getResourceStorageTopologyLabel(makeResource(), 'iscsi')).toBe('iSCSI');
+ expect(getResourceStorageTopologyLabel(makeResource(), 'btrfs')).toBe('BTRFS');
expect(getResourceStorageTopologyLabel(makeResource(), 'ignored', 'rebuild target')).toBe(
'Rebuild Target',
);
diff --git a/frontend-modern/src/features/storageBackups/__tests__/rowPresentation.branchcov0712b.test.ts b/frontend-modern/src/features/storageBackups/__tests__/rowPresentation.branchcov0712b.test.ts
index 99ee1f17b7..a23aa645a0 100644
--- a/frontend-modern/src/features/storageBackups/__tests__/rowPresentation.branchcov0712b.test.ts
+++ b/frontend-modern/src/features/storageBackups/__tests__/rowPresentation.branchcov0712b.test.ts
@@ -219,12 +219,12 @@ describe('getStoragePoolStateLabel branch coverage', () => {
expect(getStoragePoolStateLabel(record)).toBe('Online');
});
- it('returns the raw pool state when it is anything other than "ONLINE"', () => {
+ it('titleizes a non-ONLINE zfs pool state like every other state path', () => {
const record = {
...baseRecord(),
details: { zfsPool: { state: 'FAULTED', devices: [] } },
} as unknown as StorageRecord;
- expect(getStoragePoolStateLabel(record)).toBe('FAULTED');
+ expect(getStoragePoolStateLabel(record)).toBe('Faulted');
});
it('skips a zfs pool whose state is the empty string (pool?.state truthiness guard false)', () => {
diff --git a/frontend-modern/src/features/storageBackups/__tests__/rowPresentation.branchcov2.test.ts b/frontend-modern/src/features/storageBackups/__tests__/rowPresentation.branchcov2.test.ts
index 0c2c8f0b59..27d8fff8e6 100644
--- a/frontend-modern/src/features/storageBackups/__tests__/rowPresentation.branchcov2.test.ts
+++ b/frontend-modern/src/features/storageBackups/__tests__/rowPresentation.branchcov2.test.ts
@@ -239,7 +239,7 @@ describe('getStoragePoolStateLabel branch coverage', () => {
expect(getStoragePoolStateLabel(record)).toBe('Online');
});
- it('returns the raw pool state when it is anything other than "ONLINE"', () => {
+ it('titleizes a non-ONLINE zfs pool state like every other state path', () => {
const record = {
...baseRecord(),
details: {
@@ -249,7 +249,7 @@ describe('getStoragePoolStateLabel branch coverage', () => {
},
},
} as unknown as StorageRecord;
- expect(getStoragePoolStateLabel(record)).toBe('FAULTED');
+ expect(getStoragePoolStateLabel(record)).toBe('Faulted');
});
it('titleizes the derived status when arrayState and pool are both absent', () => {
diff --git a/frontend-modern/src/features/storageBackups/__tests__/rowPresentation.test.ts b/frontend-modern/src/features/storageBackups/__tests__/rowPresentation.test.ts
index 1afe8dff92..8787f8637d 100644
--- a/frontend-modern/src/features/storageBackups/__tests__/rowPresentation.test.ts
+++ b/frontend-modern/src/features/storageBackups/__tests__/rowPresentation.test.ts
@@ -101,6 +101,47 @@ describe('storage row presentation', () => {
expect(getCompactStoragePoolProtectionTitle(record)).not.toContain('without parity');
});
+ it('shows a zfs rebuild as its activity word and keeps the sentence as the title', () => {
+ const resilvering = {
+ ...baseRecord(),
+ rebuildInProgress: true,
+ protectionLabel: 'ZFS pool tank is resilvering',
+ details: {
+ zfsPool: { state: 'DEGRADED', scan: 'resilver in progress', devices: [] },
+ },
+ } as unknown as StorageRecord;
+ expect(getCompactStoragePoolProtectionLabel(resilvering)).toBe('Resilvering');
+ expect(getCompactStoragePoolProtectionTitle(resilvering)).toBe('ZFS pool tank is resilvering');
+
+ const scrubbing = {
+ ...baseRecord(),
+ rebuildInProgress: true,
+ protectionLabel: 'ZFS pool tank scrub is running (45.2%)',
+ protectionSummary: 'ZFS pool tank scrub is running (45.2%)',
+ details: {
+ zfsPool: {
+ state: 'ONLINE',
+ scan: '',
+ scanDetails: { function: 'SCRUB', state: 'SCANNING', percentage: 45.2 },
+ devices: [],
+ },
+ },
+ } as unknown as StorageRecord;
+ expect(getCompactStoragePoolProtectionLabel(scrubbing)).toBe('Scrubbing 45%');
+ expect(getCompactStoragePoolProtectionTitle(scrubbing)).toBe(
+ 'ZFS pool tank scrub is running (45.2%)',
+ );
+
+ // A rebuild without zfs scan data keeps the label its platform supplied.
+ const parity = {
+ ...baseRecord(),
+ rebuildInProgress: true,
+ protectionLabel: 'Parity sync 12%',
+ } as unknown as StorageRecord;
+ expect(getCompactStoragePoolProtectionLabel(parity)).toBe('Parity sync 12%');
+ expect(getCompactStoragePoolProtectionTitle(parity)).toBe('Parity sync 12%');
+ });
+
it('derives zfs issue fallback from pool state and errors', () => {
const record = {
...baseRecord(),
diff --git a/frontend-modern/src/features/storageBackups/__tests__/storageAdapters.test.ts b/frontend-modern/src/features/storageBackups/__tests__/storageAdapters.test.ts
index 96866fbeda..7e5917d601 100644
--- a/frontend-modern/src/features/storageBackups/__tests__/storageAdapters.test.ts
+++ b/frontend-modern/src/features/storageBackups/__tests__/storageAdapters.test.ts
@@ -467,6 +467,37 @@ describe('storageAdapters', () => {
expect(records[0].hostLabel).toBe('pve1');
});
+ it('labels a poller-merged shared storage as shared with its node count', () => {
+ const records = buildStorageRecords({
+ state: baseState(),
+ resources: [
+ makeResourceStorage({
+ id: 'cluster-a-cluster-nfs-iso',
+ name: 'nfs-iso',
+ parentName: 'cluster',
+ platformData: { type: 'nfs', node: 'cluster', instance: 'cluster-a', shared: true },
+ storage: {
+ type: 'nfs',
+ shared: true,
+ nodes: ['pve1', 'pve2', 'pve3'],
+ } as Resource['storage'],
+ }),
+ makeResourceStorage({
+ id: 'pve2-local-lvm',
+ name: 'local-lvm',
+ parentName: 'pve2',
+ platformData: { type: 'lvmthin', node: 'pve2', instance: 'cluster-a', shared: false },
+ storage: { type: 'lvmthin', shared: false } as Resource['storage'],
+ }),
+ ],
+ });
+
+ // The poller folds a shared storage into one entry on the synthetic
+ // "cluster" node; a node-local storage keeps its node name.
+ expect(records.map((record) => record.hostLabel)).toEqual(['Shared · 3 nodes', 'pve2']);
+ expect(records.map((record) => record.topologyLabel)).toEqual(['NFS', 'LVM-Thin']);
+ });
+
it('keeps dependency impact separate from healthy storage primary issues', () => {
const records = buildStorageRecords({
state: baseState(),
diff --git a/frontend-modern/src/features/storageBackups/__tests__/storageBarPresentation.test.ts b/frontend-modern/src/features/storageBackups/__tests__/storageBarPresentation.test.ts
index a2b1c04bed..86ec88080b 100644
--- a/frontend-modern/src/features/storageBackups/__tests__/storageBarPresentation.test.ts
+++ b/frontend-modern/src/features/storageBackups/__tests__/storageBarPresentation.test.ts
@@ -13,6 +13,7 @@ import {
STORAGE_BAR_ZFS_SECTION_CLASS,
STORAGE_BAR_ZFS_STATE_LABEL_CLASS,
STORAGE_BAR_ZFS_STATE_ROW_CLASS,
+ getStorageBarCompactLabel,
getStorageBarLabel,
getStorageBarTooltipRowClass,
getStorageBarTooltipRows,
@@ -39,6 +40,7 @@ describe('storageBarPresentation', () => {
expect(STORAGE_BAR_ZFS_STATE_LABEL_CLASS).toBe('text-slate-400');
expect(getStorageBarUsagePercent(40, 100)).toBe(40);
expect(getStorageBarLabel(40, 100)).toBe('40% (40.0 B/100 B)');
+ expect(getStorageBarCompactLabel(40, 100)).toBe('40%');
expect(getStorageBarTooltipTitle()).toBe('Storage Details');
expect(getStorageBarTooltipRowClass()).toBe('flex justify-between gap-3 py-0.5 ');
expect(getStorageBarTooltipRowClass(true)).toBe(
diff --git a/frontend-modern/src/features/storageBackups/__tests__/storagePagePresentation.test.ts b/frontend-modern/src/features/storageBackups/__tests__/storagePagePresentation.test.ts
index a8971d42b9..b909d2e8f5 100644
--- a/frontend-modern/src/features/storageBackups/__tests__/storagePagePresentation.test.ts
+++ b/frontend-modern/src/features/storageBackups/__tests__/storagePagePresentation.test.ts
@@ -1,6 +1,7 @@
import { describe, expect, it } from 'vitest';
import {
- getStoragePoolColumnWidthPercent,
+ getStoragePoolCellPaddingClass,
+ getStoragePoolColumnWidthStyle,
getStoragePoolTableColumns,
getStoragePoolTableLayoutModeForContainer,
getStorageTableHeading,
@@ -46,22 +47,44 @@ describe('storagePagePresentation', () => {
expect(getStoragePoolTableLayoutModeForContainer(0)).toBe('compact');
expect(getStoragePoolTableLayoutModeForContainer(359)).toBe('narrow');
expect(getStoragePoolTableLayoutModeForContainer(360)).toBe('compact');
- expect(getStoragePoolTableLayoutModeForContainer(559)).toBe('compact');
- expect(getStoragePoolTableLayoutModeForContainer(560)).toBe('operational');
+ // The compact/operational boundary is the shared phone container query
+ // (34rem), so the usage bar label and the column set change together.
+ expect(getStoragePoolTableLayoutModeForContainer(543)).toBe('compact');
+ expect(getStoragePoolTableLayoutModeForContainer(544)).toBe('operational');
expect(getStoragePoolTableLayoutModeForContainer(1_039)).toBe('operational');
expect(getStoragePoolTableLayoutModeForContainer(1_040)).toBe('full');
expect(isStoragePoolColumnVisible('operational', 'host')).toBe(true);
expect(isStoragePoolColumnVisible('operational', 'growth')).toBe(false);
- expect(getStoragePoolColumnWidthPercent('operational', 'usage')).toBe(21);
+ expect(getStoragePoolColumnWidthStyle('operational', 'usage')).toEqual({ width: '25%' });
+ expect(getStoragePoolColumnWidthStyle('operational', 'name')).toEqual({ width: '27%' });
expect(isStoragePoolColumnVisible('compact', 'host')).toBe(true);
expect(isStoragePoolColumnVisible('compact', 'type')).toBe(false);
expect(isStoragePoolColumnVisible('compact', 'protection')).toBe(false);
- expect(getStoragePoolColumnWidthPercent('compact', 'name')).toBe(35);
- expect(getStoragePoolColumnWidthPercent('compact', 'usage')).toBe(25);
- expect(getStoragePoolColumnWidthPercent('compact', 'growth')).toBe(0);
+ expect(getStoragePoolColumnWidthStyle('compact', 'name')).toEqual({ width: '37%' });
+ expect(getStoragePoolColumnWidthStyle('compact', 'host')).toEqual({ width: '31.5%' });
+ expect(getStoragePoolColumnWidthStyle('compact', 'usage')).toEqual({ width: '13%' });
+ expect(getStoragePoolColumnWidthStyle('compact', 'growth')).toEqual({ width: '0%' });
expect(isStoragePoolColumnVisible('narrow', 'type')).toBe(false);
expect(isStoragePoolColumnVisible('narrow', 'protection')).toBe(false);
- expect(getStoragePoolColumnWidthPercent('narrow', 'name')).toBe(40);
- expect(getStoragePoolColumnWidthPercent('narrow', 'usage')).toBe(20);
+ expect(getStoragePoolColumnWidthStyle('narrow', 'name')).toEqual({ width: '35%' });
+ expect(getStoragePoolColumnWidthStyle('narrow', 'usage')).toEqual({ width: '13%' });
+ });
+
+ it('sheds the desktop cell gutter only on the phone pool layouts', () => {
+ expect(getStoragePoolCellPaddingClass('narrow')).toBe('!px-1');
+ expect(getStoragePoolCellPaddingClass('compact')).toBe('!px-1');
+ expect(getStoragePoolCellPaddingClass('operational')).toBe('');
+ expect(getStoragePoolCellPaddingClass('full')).toBe('');
+ });
+
+ it('keeps the desktop pool column widths on the canonical weighted helper', () => {
+ const fullWidths = ['name', 'state', 'type', 'host', 'protection', 'usage', 'growth'].map(
+ (column) =>
+ getStoragePoolColumnWidthStyle(
+ 'full',
+ column as 'name' | 'state' | 'type' | 'host' | 'protection' | 'usage' | 'growth',
+ ).width,
+ );
+ expect(fullWidths).toEqual(['20%', '14%', '10%', '12%', '13%', '20%', '11%']);
});
});
diff --git a/frontend-modern/src/features/storageBackups/diskDetailPresentation.ts b/frontend-modern/src/features/storageBackups/diskDetailPresentation.ts
index 12cc6a8f12..449020cb8f 100644
--- a/frontend-modern/src/features/storageBackups/diskDetailPresentation.ts
+++ b/frontend-modern/src/features/storageBackups/diskDetailPresentation.ts
@@ -1,4 +1,8 @@
-import type { PhysicalDiskPresentationData } from '@/features/storageBackups/diskPresentation';
+import {
+ getPhysicalDiskHealthStatus,
+ getPhysicalDiskHealthSummary,
+ type PhysicalDiskPresentationData,
+} from '@/features/storageBackups/diskPresentation';
import type { HistoryTimeRange } from '@/api/charts';
import { formatPowerOnHours } from '@/utils/format';
import { getMetricSeverity, type MetricDisplayThresholds } from '@/utils/metricThresholds';
@@ -78,6 +82,32 @@ export const getDiskDetailLiveBadgeLabel = (): string => 'Real-time';
export const getDiskDetailHistoryFallbackMessage = (): string =>
'Historical disk charts are unavailable until Pulse can resolve a stable identity for this disk.';
+export type DiskDetailHealthPresentation = {
+ label: string;
+ summary: string;
+ tone: string;
+};
+
+// The drawer header carries the disk's verdict and its reason. The table row
+// shows only the verdict word, so this is where the reason is read in full.
+export const DISK_DETAIL_HEADER_STACK_CLASS = 'min-w-0 space-y-1';
+export const DISK_DETAIL_HEALTH_ROW_CLASS =
+ 'flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-[11px]';
+export const DISK_DETAIL_HEALTH_LABEL_CLASS = 'font-semibold';
+export const DISK_DETAIL_HEALTH_SUMMARY_CLASS =
+ 'min-w-0 max-w-full whitespace-normal break-words text-muted';
+
+export function getDiskDetailHealthPresentation(
+ disk: PhysicalDiskPresentationData,
+): DiskDetailHealthPresentation {
+ const status = getPhysicalDiskHealthStatus(disk);
+ return {
+ label: status.label,
+ summary: getPhysicalDiskHealthSummary(status),
+ tone: status.tone,
+ };
+}
+
export function getDiskDetailAttributeCards(
disk: PhysicalDiskPresentationData,
diskTempThresholds?: MetricDisplayThresholds | null,
diff --git a/frontend-modern/src/features/storageBackups/diskPresentation.ts b/frontend-modern/src/features/storageBackups/diskPresentation.ts
index 9cf9707e53..5d4aee37ca 100644
--- a/frontend-modern/src/features/storageBackups/diskPresentation.ts
+++ b/frontend-modern/src/features/storageBackups/diskPresentation.ts
@@ -1,8 +1,10 @@
+import type { JSX } from 'solid-js';
import type {
PhysicalDiskCollectionStatus,
PhysicalDiskFieldStatus,
Resource,
} from '@/types/resource';
+import { getPlatformTableWeightedColumnWidthStyle } from '@/features/platformPage/sharedPlatformPage';
import {
getSourcePlatformLabel,
getSourcePlatformPresentation,
@@ -141,12 +143,16 @@ const PHYSICAL_DISK_VISIBLE_COLUMNS: Record<
full: ['disk', 'device', 'host', 'role', 'parent', 'health', 'life', 'temp', 'size'],
};
-const PHYSICAL_DISK_COLUMN_WIDTHS: Record<
+// Relative weights per layout, resolved through the canonical weighted-width
+// helper. The phone layouts are sized from the measured values they show:
+// a temperature ("100°C"), a capacity ("5.46 TB"), a compact health word and
+// a short node name must each fit whole, and the disk model takes the rest.
+const PHYSICAL_DISK_COLUMN_WEIGHTS: Record<
PhysicalDiskTableLayoutMode,
Partial>
> = {
- narrow: { disk: 40, host: 15, health: 20, temp: 10, size: 15 },
- compact: { disk: 33, host: 15, health: 18, life: 10, temp: 10, size: 14 },
+ narrow: { disk: 41, host: 12, health: 19, temp: 12, size: 16 },
+ compact: { disk: 34, host: 11, health: 17, life: 11, temp: 12, size: 15 },
basic: { disk: 33, host: 17, health: 22, temp: 12, size: 16 },
operational: { disk: 25, host: 12, parent: 15, health: 17, life: 9, temp: 9, size: 13 },
expanded: { disk: 22, host: 10, role: 9, parent: 14, health: 15, life: 8, temp: 8, size: 14 },
@@ -168,10 +174,31 @@ export const isPhysicalDiskColumnVisible = (
columnId: PhysicalDiskTableColumnId,
): boolean => PHYSICAL_DISK_VISIBLE_COLUMNS[layout].includes(columnId);
-export const getPhysicalDiskColumnWidthPercent = (
+export const getPhysicalDiskColumnWidthStyle = (
layout: PhysicalDiskTableLayoutMode,
columnId: PhysicalDiskTableColumnId,
-): number => PHYSICAL_DISK_COLUMN_WIDTHS[layout][columnId] ?? 0;
+): JSX.CSSProperties =>
+ getPlatformTableWeightedColumnWidthStyle(
+ columnId,
+ PHYSICAL_DISK_COLUMN_WEIGHTS[layout],
+ PHYSICAL_DISK_VISIBLE_COLUMNS[layout],
+ );
+
+// The shared table cell primitives pad every cell for desktop density. On the
+// phone layouts that padding alone is a fifth of the row, so rendered cells
+// and headers shed it the same way the Proxmox replication table does.
+export const PHYSICAL_DISK_PHONE_CELL_PADDING_CLASS = '!px-1';
+
+export const getPhysicalDiskCellPaddingClass = (layout: PhysicalDiskTableLayoutMode): string =>
+ layout === 'narrow' || layout === 'compact' ? PHYSICAL_DISK_PHONE_CELL_PADDING_CLASS : '';
+
+// Health words that do not fit a phone-width health column fall back to a
+// shorter form; the full label stays in the wider projections and the detail.
+export const getPhysicalDiskHealthCompactLabel = (label: string): string => {
+ if (label === 'Needs Attention') return 'Attention';
+ if (label === 'Replace Now') return 'Replace';
+ return label;
+};
export const PHYSICAL_DISK_COL_DISK_CLASS = '';
export const PHYSICAL_DISK_COL_DEVICE_CLASS = '';
@@ -221,8 +248,10 @@ export const PHYSICAL_DISK_MUTED_PLACEHOLDER_CLASS = 'text-[11px] text-muted';
export const PHYSICAL_DISK_LIFE_CLASS = 'text-[11px] font-medium';
export const PHYSICAL_DISK_HEALTH_WRAP_CLASS =
'flex min-w-0 items-center gap-1.5 whitespace-nowrap';
-export const PHYSICAL_DISK_HEALTH_LABEL_CLASS = 'min-w-0 truncate text-[11px] font-semibold';
-export const PHYSICAL_DISK_HEALTH_SUMMARY_CLASS = 'hidden xl:block truncate text-[11px] text-muted';
+// The health word is the row's verdict and always renders whole. Its reason
+// lives in the cell title and in the disk drawer, not in a truncating sibling
+// that would compete with it for the track.
+export const PHYSICAL_DISK_HEALTH_LABEL_CLASS = 'shrink-0 text-[11px] font-semibold';
export const PHYSICAL_DISK_TEMPERATURE_CLASS = 'text-[11px] font-medium';
export const PHYSICAL_DISK_SIZE_VALUE_CLASS = 'text-[11px] text-base-content';
diff --git a/frontend-modern/src/features/storageBackups/resourceStoragePresentation.ts b/frontend-modern/src/features/storageBackups/resourceStoragePresentation.ts
index 0c3b5d618a..9302b84d66 100644
--- a/frontend-modern/src/features/storageBackups/resourceStoragePresentation.ts
+++ b/frontend-modern/src/features/storageBackups/resourceStoragePresentation.ts
@@ -244,6 +244,30 @@ export const getResourceStorageTopologyLabel = (
case 'rbd':
case 'cephfs':
return 'Cluster Storage';
+ // Proxmox storage plugin names are acronyms or compound words that
+ // title-casing mangles ("Lvmthin" for the default local-lvm, "Nfs"); use
+ // the names the Proxmox UI shows for them.
+ case 'nfs':
+ return 'NFS';
+ case 'cifs':
+ case 'smb':
+ return 'SMB/CIFS';
+ case 'lvm':
+ return 'LVM';
+ case 'lvmthin':
+ case 'lvm-thin':
+ return 'LVM-Thin';
+ case 'iscsi':
+ case 'iscsidirect':
+ return 'iSCSI';
+ case 'zfs':
+ return 'ZFS';
+ case 'btrfs':
+ return 'BTRFS';
+ case 'glusterfs':
+ return 'GlusterFS';
+ case 'esxi':
+ return 'ESXi';
default:
return titleize(storageType) || titleize(resource.type) || 'Storage';
}
diff --git a/frontend-modern/src/features/storageBackups/rowPresentation.ts b/frontend-modern/src/features/storageBackups/rowPresentation.ts
index 10e4c68f7a..f9bacbab41 100644
--- a/frontend-modern/src/features/storageBackups/rowPresentation.ts
+++ b/frontend-modern/src/features/storageBackups/rowPresentation.ts
@@ -66,9 +66,32 @@ export function getStoragePoolStateTextClass(record: StorageRecord): string {
return 'text-base-content';
}
+// The rebuild summary the backend promotes into the protection label is a
+// sentence ("ZFS pool tank is resilvering (45.2%)"). The protection column is
+// a badge, so a ZFS scan reads as the activity word, derived from the pool's
+// own scan state (the same source the backend keys its risk reason on); the
+// sentence stays available as the cell title. Non-ZFS rebuilds keep the label
+// their platform supplies.
+export function getStoragePoolRebuildLabel(record: StorageRecord): string {
+ const pool = getStorageRecordZfsPool(record);
+ if (!pool) return '';
+ const scan = `${pool.scanDetails?.function || ''} ${pool.scan || ''}`.toLowerCase();
+ const percentage = pool.scanDetails?.percentage;
+ const progress =
+ typeof percentage === 'number' && Number.isFinite(percentage) && percentage > 0
+ ? ` ${Math.round(percentage)}%`
+ : '';
+ if (scan.includes('resilver')) return `Resilvering${progress}`;
+ if (scan.includes('scrub')) return `Scrubbing${progress}`;
+ return '';
+}
+
export function getCompactStoragePoolProtectionLabel(record: StorageRecord): string {
const label = (record.protectionLabel || '').trim();
- if (record.rebuildInProgress || record.protectionReduced) {
+ if (record.rebuildInProgress) {
+ return getStoragePoolRebuildLabel(record) || label || '—';
+ }
+ if (record.protectionReduced) {
return label || '—';
}
if (label && label.toLowerCase() !== 'healthy') {
@@ -87,7 +110,9 @@ export function getStoragePoolStateLabel(record: StorageRecord): string {
}
const pool = getStorageRecordZfsPool(record);
if (pool?.state) {
- return pool.state === 'ONLINE' ? 'Online' : pool.state;
+ // zpool reports upper-case states; present them like every other state
+ // path so a DEGRADED pool reads the same as a degraded array.
+ return titleize(pool.state);
}
const status = getStorageRecordStatus(record);
return status ? titleize(status) : '—';
@@ -122,7 +147,9 @@ export function getCompactStoragePoolProtectionTitle(record: StorageRecord): str
return issueSummary;
}
}
- return label;
+ // When the badge shows a derived word, the platform's full label is the title.
+ const fullLabel = (record.protectionLabel || '').trim();
+ return fullLabel && fullLabel.toLowerCase() !== label.toLowerCase() ? fullLabel : label;
}
export function getCompactStoragePoolImpactLabel(record: StorageRecord): string {
diff --git a/frontend-modern/src/features/storageBackups/storageAdapters.ts b/frontend-modern/src/features/storageBackups/storageAdapters.ts
index 19b8ac6598..7e22fdd6d7 100644
--- a/frontend-modern/src/features/storageBackups/storageAdapters.ts
+++ b/frontend-modern/src/features/storageBackups/storageAdapters.ts
@@ -129,7 +129,16 @@ const mapResourceStorageRecord = (resource: Resource, adapterId: string): Storag
const usedBytes = asNumberOrNull(resource.disk?.used);
const freeBytes = asNumberOrNull(resource.disk?.free);
const canonicalPlatform = getCanonicalStoragePlatformKey(resource, resource.storage?.platform);
- const hostLabel = locationLabel;
+ // The poller folds a shared storage into one entry whose node is the
+ // synthetic "cluster" marker (the mock uses "shared"); show that as a
+ // shared storage with its reporting node count rather than a node name.
+ const sharedLocationMarkers = new Set(['cluster', 'shared']);
+ const hostLabel =
+ shared && sharedLocationMarkers.has(locationLabel.trim().toLowerCase())
+ ? storageNodes.length > 1
+ ? `Shared · ${storageNodes.length} nodes`
+ : 'Shared'
+ : locationLabel;
const platformLabel = getResourceStoragePlatformLabel(canonicalPlatform);
const issueLabel = getResourceStorageIssueLabel(resource);
const issueSummary = getResourceStorageIssueSummary(resource);
diff --git a/frontend-modern/src/features/storageBackups/storageBarPresentation.ts b/frontend-modern/src/features/storageBackups/storageBarPresentation.ts
index 02b7fda274..533641e90a 100644
--- a/frontend-modern/src/features/storageBackups/storageBarPresentation.ts
+++ b/frontend-modern/src/features/storageBackups/storageBarPresentation.ts
@@ -38,8 +38,13 @@ export const getStorageBarUsagePercent = (used: number, total: number): number =
return (used / total) * 100;
};
+// Phone-width tables only have room for the percentage inside the bar; the
+// used/total sublabel stays in the tooltip and in the wider projections.
+export const getStorageBarCompactLabel = (used: number, total: number): string =>
+ formatPercent(getStorageBarUsagePercent(used, total));
+
export const getStorageBarLabel = (used: number, total: number): string =>
- `${formatPercent(getStorageBarUsagePercent(used, total))} (${formatBytes(used)}/${formatBytes(total)})`;
+ `${getStorageBarCompactLabel(used, total)} (${formatBytes(used)}/${formatBytes(total)})`;
export const getStorageBarTooltipTitle = (): string => 'Storage Details';
diff --git a/frontend-modern/src/features/storageBackups/storagePagePresentation.ts b/frontend-modern/src/features/storageBackups/storagePagePresentation.ts
index 6d1d641452..26c156fd0e 100644
--- a/frontend-modern/src/features/storageBackups/storagePagePresentation.ts
+++ b/frontend-modern/src/features/storageBackups/storagePagePresentation.ts
@@ -1,5 +1,7 @@
+import type { JSX } from 'solid-js';
import type { StorageSortKey } from './storageModelCore';
import type { PlatformTableColumnKind } from '@/features/platformPage/columnAlignment';
+import { getPlatformTableWeightedColumnWidthStyle } from '@/features/platformPage/sharedPlatformPage';
export type StorageViewOption = {
value: 'pools' | 'disks';
@@ -21,11 +23,14 @@ export type StoragePoolTableColumn = {
export type StoragePoolTableLayoutMode = 'narrow' | 'compact' | 'operational' | 'full';
+// The compact/operational boundary matches the shared phone projection of the
+// table container (`@container (max-width: 33.999rem)` = 544px), so the
+// columns and the in-cell labels always change projection together.
export const getStoragePoolTableLayoutModeForContainer = (
containerWidth: number,
): StoragePoolTableLayoutMode => {
if (containerWidth >= 1_040) return 'full';
- if (containerWidth >= 560) return 'operational';
+ if (containerWidth >= 544) return 'operational';
if (containerWidth > 0 && containerWidth < 360) return 'narrow';
return 'compact';
};
@@ -43,13 +48,20 @@ const STORAGE_POOL_VISIBLE_COLUMNS: Record<
full: ['name', 'state', 'type', 'host', 'protection', 'usage', 'growth'],
};
-const STORAGE_POOL_COLUMN_WIDTHS: Record<
+// Relative weights per layout, resolved through the canonical weighted-width
+// helper. On phones the usage bar carries only its percentage, so most of the
+// row goes to the two identity strings (pool name and host); a state word such
+// as "Degraded" must still fit whole. The shared 30% identity anchor is not
+// used here because a four-column row cannot keep the host readable with it.
+const STORAGE_POOL_COLUMN_WEIGHTS: Record<
StoragePoolTableLayoutMode,
Partial>
> = {
- narrow: { name: 40, state: 20, host: 20, usage: 20 },
- compact: { name: 35, state: 20, host: 20, usage: 25 },
- operational: { name: 29, state: 20, host: 15, protection: 15, usage: 21 },
+ narrow: { name: 35, state: 21, host: 31, usage: 13 },
+ compact: { name: 37, state: 18.5, host: 31.5, usage: 13 },
+ // The full "59% (1.18 TB/2.00 TB)" bar label returns at 544px, so the usage
+ // track must hold ~120px of text from the first operational width.
+ operational: { name: 27, state: 18, host: 15, protection: 15, usage: 25 },
full: { name: 20, state: 14, type: 10, host: 12, protection: 13, usage: 20, growth: 11 },
};
@@ -58,10 +70,24 @@ export const isStoragePoolColumnVisible = (
columnId: StoragePoolTableColumnId,
): boolean => STORAGE_POOL_VISIBLE_COLUMNS[layout].includes(columnId);
-export const getStoragePoolColumnWidthPercent = (
+// On phones the pool row sheds the desktop cell gutter the same way its
+// headers (via the shared container query) and the physical-disk rows do:
+// four cells at 12px each were 48px of a 361px row, and the measured values
+// fit the tracks with only a pixel or two to spare.
+export const STORAGE_POOL_PHONE_CELL_PADDING_CLASS = '!px-1';
+
+export const getStoragePoolCellPaddingClass = (layout: StoragePoolTableLayoutMode): string =>
+ layout === 'narrow' || layout === 'compact' ? STORAGE_POOL_PHONE_CELL_PADDING_CLASS : '';
+
+export const getStoragePoolColumnWidthStyle = (
layout: StoragePoolTableLayoutMode,
columnId: StoragePoolTableColumnId,
-): number => STORAGE_POOL_COLUMN_WIDTHS[layout][columnId] ?? 0;
+): JSX.CSSProperties =>
+ getPlatformTableWeightedColumnWidthStyle(
+ columnId,
+ STORAGE_POOL_COLUMN_WEIGHTS[layout],
+ STORAGE_POOL_VISIBLE_COLUMNS[layout],
+ );
const STORAGE_POOL_TABLE_HEADER_CLASS =
'overflow-hidden text-ellipsis whitespace-nowrap text-[10px] sm:text-[11px] lg:text-xs uppercase tracking-wider';
diff --git a/frontend-modern/src/hooks/__tests__/useUnifiedResources.test.ts b/frontend-modern/src/hooks/__tests__/useUnifiedResources.test.ts
index 3408c0079d..ef2dfae357 100644
--- a/frontend-modern/src/hooks/__tests__/useUnifiedResources.test.ts
+++ b/frontend-modern/src/hooks/__tests__/useUnifiedResources.test.ts
@@ -2,6 +2,7 @@ import { batch, createRoot, createSignal } from 'solid-js';
import { createStore, reconcile, type SetStoreFunction } from 'solid-js/store';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { buildProxmoxPageModel } from '@/features/proxmox/proxmoxPageModel';
+import { getDockerContainerLifecycleDisabledReason } from '@/features/docker/dockerContainerLifecycleActions';
import type { State } from '@/types/api';
import type { Resource } from '@/types/resource';
import useUnifiedResourcesSource from '../useUnifiedResources.ts?raw';
@@ -1626,6 +1627,173 @@ describe('useUnifiedResources', () => {
dispose();
});
+ it('keeps PMG metadata on the canonical resource for REST-first paints', async () => {
+ // The Mail Gateway table reads `resource.pmg`. The mapper used to keep it
+ // only under platformData, so a REST-sourced row rendered every PMG column
+ // as a dash until a websocket row happened to replace it.
+ apiFetchMock.mockResolvedValueOnce({
+ ok: true,
+ json: async () => ({
+ data: [
+ {
+ id: 'pmg-1',
+ type: 'pmg',
+ name: 'mail-gateway-eu',
+ status: 'online',
+ lastSeen: '2026-02-06T12:00:00Z',
+ sources: ['pmg'],
+ uptime: 1_555_222,
+ technology: 'pmg',
+ sourceStatus: { pmg: { status: 'online', lastSeen: '2026-02-06T12:00:00Z' } },
+ actionReadiness: [{ name: 'restart', available: true }],
+ pmg: {
+ instanceId: 'pmg-eu',
+ hostname: 'pmg.example.lan',
+ version: '8.1-2',
+ nodeCount: 1,
+ mailCountTotal: 2_740,
+ spamIn: 321,
+ virusIn: 14,
+ queueTotal: 11,
+ queueDeferred: 5,
+ },
+ },
+ ],
+ }),
+ });
+
+ let dispose = () => {};
+ let result: ReturnType | undefined;
+ createRoot((d) => {
+ dispose = d;
+ result = useUnifiedResources({ query: 'type=pmg&source=pmg', cacheKey: 'pmg-first-paint' });
+ });
+
+ await result!.refetch();
+ const row = result!.resources().find((resource) => resource.id === 'pmg-1');
+ expect(row?.pmg).toEqual(
+ expect.objectContaining({ version: '8.1-2', spamIn: 321, queueDeferred: 5 }),
+ );
+ expect(row?.platformData?.pmg).toEqual(row?.pmg);
+ // The per-source status, action readiness, and technology facets ride the
+ // same race: Docker lifecycle actions and storage freshness read them at
+ // the top level, where only websocket rows used to carry them.
+ expect(row?.sourceStatus?.pmg?.status).toBe('online');
+ expect(row?.actionReadiness?.[0]?.name).toBe('restart');
+ expect(row?.technology).toBe('pmg');
+
+ dispose();
+ });
+
+ it.each([
+ {
+ label: 'stale inventory',
+ sourceStatus: { docker: { status: 'stale', lastSeen: '2026-02-06T12:00:00Z' } },
+ actionReadiness: [],
+ expected: 'Docker inventory is stale. Refresh inventory before running lifecycle actions.',
+ },
+ {
+ label: 'failed inventory',
+ sourceStatus: {
+ docker: { status: 'online', lastSeen: '2026-02-06T12:00:00Z', error: 'Collector refused' },
+ },
+ actionReadiness: [],
+ expected: 'Docker inventory is not healthy: Collector refused',
+ },
+ {
+ label: 'server action refusal',
+ sourceStatus: { docker: { status: 'online', lastSeen: '2026-02-06T12:00:00Z' } },
+ actionReadiness: [
+ { name: 'restart', available: false, reason: 'Command agent disconnected' },
+ ],
+ expected: 'Command agent disconnected',
+ },
+ {
+ label: 'no invented action grant',
+ sourceStatus: { docker: { status: 'online', lastSeen: '2026-02-06T12:00:00Z' } },
+ actionReadiness: [],
+ expected:
+ 'Pulse does not currently advertise a fresh restart command capability for this container.',
+ },
+ ])('preserves $label through REST mapping into lifecycle controls', async (testCase) => {
+ apiFetchMock.mockResolvedValue(
+ resourceResponse([
+ {
+ id: 'docker-container-1',
+ type: 'app-container',
+ name: 'edge-web',
+ status: 'running',
+ lastSeen: '2026-02-06T12:00:00Z',
+ sources: ['docker'],
+ technology: 'docker',
+ docker: { runtime: 'docker', agentId: 'agent-edge', containerState: 'running' },
+ sourceStatus: testCase.sourceStatus,
+ actionReadiness: testCase.actionReadiness,
+ },
+ ]),
+ );
+ let dispose = () => {};
+ let result: ReturnType | undefined;
+ createRoot((d) => {
+ dispose = d;
+ result = useUnifiedResources({ query: 'type=app-container', cacheKey: testCase.label });
+ });
+ try {
+ await result!.refetch();
+ const row = result!.resources()[0];
+ expect(row.sourceStatus).toEqual(testCase.sourceStatus);
+ expect(row.actionReadiness).toEqual(testCase.actionReadiness);
+ expect(row.technology).toBe('docker');
+ expect(getDockerContainerLifecycleDisabledReason(row, 'restart')).toBe(testCase.expected);
+ } finally {
+ dispose();
+ }
+ });
+
+ it('replaces REST facets without retaining a removed PMG counter or action refusal', async () => {
+ const base = {
+ id: 'pmg-1',
+ type: 'pmg',
+ name: 'mail-gateway',
+ status: 'online',
+ sources: ['pmg'],
+ lastSeen: '2026-02-06T12:00:00Z',
+ };
+ apiFetchMock.mockResolvedValue(
+ resourceResponse([
+ {
+ ...base,
+ technology: 'pmg',
+ pmg: { version: '8.1-2', queueTotal: 11 },
+ sourceStatus: { pmg: { status: 'stale', lastSeen: base.lastSeen } },
+ actionReadiness: [{ name: 'restart', available: false, reason: 'Old refusal' }],
+ },
+ ]),
+ );
+ let dispose = () => {};
+ let result: ReturnType | undefined;
+ createRoot((d) => {
+ dispose = d;
+ result = useUnifiedResources({ query: 'type=pmg', cacheKey: 'removed-rest-facets' });
+ });
+ try {
+ await result!.refetch();
+ expect(result!.resources()[0].pmg?.queueTotal).toBe(11);
+ apiFetchMock.mockResolvedValue(
+ resourceResponse([{ ...base, actionReadiness: [], sourceStatus: {} }]),
+ );
+ await result!.refetch();
+ const row = result!.resources()[0];
+ expect(row.pmg).toBeUndefined();
+ expect(row.platformData?.pmg).toBeUndefined();
+ expect(row.actionReadiness).toEqual([]);
+ expect(row.sourceStatus).toEqual({});
+ expect(row.technology).toBeUndefined();
+ } finally {
+ dispose();
+ }
+ });
+
it('falls back to canonical resource.uptime when no platform-specific field is set (vSphere)', async () => {
// vSphere ESXi hosts and VMs populate only the canonical
// Resource.Uptime field — there's no vmware-specific UptimeSeconds
diff --git a/frontend-modern/src/hooks/useUnifiedResources.ts b/frontend-modern/src/hooks/useUnifiedResources.ts
index 9093092194..dbb5d9b3d8 100644
--- a/frontend-modern/src/hooks/useUnifiedResources.ts
+++ b/frontend-modern/src/hooks/useUnifiedResources.ts
@@ -18,8 +18,10 @@ import type {
ResourceDockerMeta,
ResourceHealth,
ResourceMetricsTarget,
+ ResourceActionReadiness,
ResourceAvailabilityMeta,
ResourcePBSMeta,
+ ResourcePMGMeta,
ResourcePolicyPostureSummary,
ResourcePhysicalDiskMeta,
ResourcePoolHealth,
@@ -210,6 +212,8 @@ type APIResource = {
sources?: string[];
platformScopes?: string[];
sourceStatus?: Record;
+ actionReadiness?: ResourceActionReadiness[];
+ technology?: string;
health?: ResourceHealth;
identity?: {
machineId?: string;
@@ -868,6 +872,17 @@ const toResource = (v2: APIResource): Resource => {
truenas: v2.truenas as ResourceTrueNASMeta | undefined,
vmware: v2.vmware as ResourceVMwareMeta | undefined,
pbs: v2.pbs as ResourcePBSMeta | undefined,
+ // Mail Gateway rows read `resource.pmg` directly. Leaving it only under
+ // platformData meant a REST-first paint rendered every PMG column as a
+ // dash until a websocket row happened to replace it, and never did when
+ // the REST snapshot landed last.
+ pmg: v2.pmg as ResourcePMGMeta | undefined,
+ // Same race for the per-source status, action readiness, and technology
+ // facets: Docker lifecycle actions and storage freshness read them from
+ // the top level, and the websocket rows carry them there.
+ sourceStatus: v2.sourceStatus,
+ actionReadiness: v2.actionReadiness,
+ technology: v2.technology,
availability: v2.availability as ResourceAvailabilityMeta | undefined,
availabilityChecks: v2.availabilityChecks as ResourceAvailabilityMeta[] | undefined,
physicalDisk: v2.physicalDisk,
diff --git a/frontend-modern/src/utils/__tests__/alertDestinationsPresentation.test.ts b/frontend-modern/src/utils/__tests__/alertDestinationsPresentation.test.ts
index 839f7bc178..8cf26ffba5 100644
--- a/frontend-modern/src/utils/__tests__/alertDestinationsPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertDestinationsPresentation.test.ts
@@ -35,6 +35,9 @@ import {
getAlertDestinationsDeliveryLogEmpty,
getAlertDestinationsDeliveryLogTitle,
getAlertDestinationsDeliveryLogUnavailable,
+ getAlertDestinationsDeliveryLogLoading,
+ getAlertDestinationsHeldEventsLoading,
+ getAlertDestinationsHeldEventsUnavailable,
getAlertDestinationsTestPausedWarning,
getAlertDestinationsAppriseTargetsHelp,
getAlertDestinationsAppriseTestLabel,
@@ -267,6 +270,28 @@ describe('alert destinations delivery log copy', () => {
);
});
+ it('distinguishes pending and unavailable activity sources without implying delivery failure', () => {
+ expect(getAlertDestinationsDeliveryLogLoading()).toBe('Loading delivery attempts...');
+ expect(getAlertDestinationsHeldEventsLoading()).toBe(
+ 'Loading held and deferred notifications...',
+ );
+ expect(getAlertDestinationsHeldEventsUnavailable()).toBe(
+ 'Pulse could not read held or deferred notifications. Refresh to try again.',
+ );
+ expect(getAlertDestinationsDeliveryLogUnavailable()).toBe(
+ 'Pulse could not read the delivery log. Refresh to check delivery attempts.',
+ );
+ for (const message of [
+ getAlertDestinationsDeliveryLogLoading(),
+ getAlertDestinationsHeldEventsLoading(),
+ getAlertDestinationsHeldEventsUnavailable(),
+ getAlertDestinationsDeliveryLogUnavailable(),
+ ]) {
+ expect(message).not.toContain('No alert deliveries');
+ expect(message).not.toContain('not delivered');
+ }
+ });
+
it('warns that a passing test does not mean live alerts flow while delivery is paused', () => {
const warning = getAlertDestinationsTestPausedWarning();
expect(warning).toContain('Test sent');
diff --git a/frontend-modern/src/utils/alertDestinationsPresentation.ts b/frontend-modern/src/utils/alertDestinationsPresentation.ts
index 92ad797dc7..1fc3454103 100644
--- a/frontend-modern/src/utils/alertDestinationsPresentation.ts
+++ b/frontend-modern/src/utils/alertDestinationsPresentation.ts
@@ -277,7 +277,19 @@ export const ALERT_DESTINATIONS_DELIVERY_LOG_TITLE = 'Recent delivery activity';
export const ALERT_DESTINATIONS_DELIVERY_LOG_EMPTY =
'No alert deliveries were attempted in this window.';
export const ALERT_DESTINATIONS_DELIVERY_LOG_UNAVAILABLE =
- 'Pulse could not read the delivery log, so recent delivery activity cannot be shown.';
+ 'Pulse could not read the delivery log. Refresh to check delivery attempts.';
+
+export function getAlertDestinationsHeldEventsUnavailable() {
+ return 'Pulse could not read held or deferred notifications. Refresh to try again.';
+}
+
+export function getAlertDestinationsDeliveryLogLoading() {
+ return 'Loading delivery attempts...';
+}
+
+export function getAlertDestinationsHeldEventsLoading() {
+ return 'Loading held and deferred notifications...';
+}
export function getAlertDestinationsDeliveryLogTitle() {
return ALERT_DESTINATIONS_DELIVERY_LOG_TITLE;