+
{ind.label}
@@ -567,7 +573,7 @@ export const ProxmoxReplicationTable: Component<{
class={`${getPlatformTableCellClassForKind('text')} text-base-content ${mobilePaddingClass()}`}
>
{sourceNode}
@@ -584,7 +590,7 @@ export const ProxmoxReplicationTable: Component<{
-
+
@@ -595,7 +601,7 @@ export const ProxmoxReplicationTable: Component<{
class={`${getPlatformTableCellClassForKind('numeric-value')} text-base-content ${mobilePaddingClass()} ${mobileLastSyncClass()}`}
>
}
@@ -612,9 +618,9 @@ export const ProxmoxReplicationTable: Component<{
class={`${getPlatformTableCellClassForKind('numeric-value')} text-base-content ${mobilePaddingClass()}`}
>
- {canRevealDetails()
+ {isCompact()
? compactReplicationNextSyncText(next.text, next.tone)
: next.text}
@@ -647,14 +653,14 @@ export const ProxmoxReplicationTable: Component<{
class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
>
—}
>
- {job.error}
+ {errorText}
@@ -666,9 +672,21 @@ export const ProxmoxReplicationTable: Component<{
colspan={visibleColumnCount()}
class="bg-surface-alt/60 hover:bg-surface-alt/60"
cellClass="!whitespace-normal"
- contentClass="px-2 py-2"
+ contentClass="px-2 py-2 sm:px-4 sm:py-3"
>
-
+ {/* The row truncates and narrower layouts drop columns, so
+ the expansion is where the whole job is always readable,
+ starting with why it failed. */}
+
+
+ - Error
+ -
+ {errorText}
+
+
- Guest
- {guestLabel}
- Job
@@ -679,6 +697,33 @@ export const ProxmoxReplicationTable: Component<{
-
{sourceNode} → {targetNode}
+ - Schedule
+ - {job.schedule || '—'}
+ - Last sync
+ -
+ {formatPlatformTableRelativeTimeValue(syncTimeValue(job))}
+
+ - Next sync
+ -
+ {next.text}
+
+ - Duration
+ -
+
+
+ - Failures
+ -
+ {job.failCount ?? 0}
+
+
+ - Comment
+ - {comment}
+
diff --git a/frontend-modern/src/features/proxmox/__tests__/ProxmoxCephTable.test.tsx b/frontend-modern/src/features/proxmox/__tests__/ProxmoxCephTable.test.tsx
index c30a97c97b..36f8bab9b4 100644
--- a/frontend-modern/src/features/proxmox/__tests__/ProxmoxCephTable.test.tsx
+++ b/frontend-modern/src/features/proxmox/__tests__/ProxmoxCephTable.test.tsx
@@ -3,12 +3,12 @@ import { afterEach, describe, expect, it } from 'vitest';
import type { Resource } from '@/types/resource';
import {
+ CEPH_COLUMN_WEIGHTS,
CEPH_PHONE_COLUMNS,
CEPH_PHONE_COLUMN_WIDTHS,
- CEPH_NARROW_COLUMNS,
- CEPH_NARROW_COLUMN_WIDTHS,
ProxmoxCephTable,
} from '../ProxmoxCephTable';
+import cephClusterDrawerSource from '../ProxmoxCephClusterDrawer.tsx?raw';
const makeCluster = (id: string): Resource => ({
id,
@@ -45,29 +45,20 @@ const makeCluster = (id: string): Resource => ({
afterEach(cleanup);
describe('ProxmoxCephTable', () => {
- it('keeps the phone projection dense and identity-led', () => {
- expect(CEPH_PHONE_COLUMNS).toEqual([
- 'cluster',
- 'health',
- 'quorum',
- 'osds',
- 'pools',
- 'capacity',
- ]);
+ it('keeps one phone projection of five values that each fit whole', () => {
+ // Quorum yields its track on phones: six columns clipped the cluster name,
+ // the health word, and every figure, and the monitor and manager counts are
+ // itemised in the expansion's Services table.
+ expect(CEPH_PHONE_COLUMNS).toEqual(['cluster', 'health', 'osds', 'pools', 'capacity']);
expect(CEPH_PHONE_COLUMN_WIDTHS).toEqual({
- cluster: 30,
- health: 15,
- quorum: 13,
- osds: 14,
- pools: 14,
- capacity: 14,
+ cluster: 36,
+ health: 21,
+ osds: 13,
+ pools: 12,
+ capacity: 18,
});
- });
-
- it('uses a five-column identity-led projection below 360px', () => {
- expect(CEPH_NARROW_COLUMNS).toEqual(['cluster', 'health', 'osds', 'pools', 'capacity']);
expect(
- CEPH_NARROW_COLUMNS.reduce((total, column) => total + CEPH_NARROW_COLUMN_WIDTHS[column], 0),
+ CEPH_PHONE_COLUMNS.reduce((total, column) => total + CEPH_PHONE_COLUMN_WIDTHS[column], 0),
).toBe(100);
});
@@ -130,4 +121,68 @@ describe('ProxmoxCephTable', () => {
await waitFor(() => expect(disclosure).toHaveFocus());
expect(disclosure).toHaveAccessibleName('Expand details for ceph-lab');
});
+
+ it('gives every desktop column a weighted share instead of the remainder', () => {
+ render(() => (
+ }
+ emptyTitle="No Ceph clusters"
+ emptyDescription="No clusters"
+ />
+ ));
+
+ const columns = [...document.querySelectorAll('col[data-proxmox-ceph-column]')];
+ expect(columns.map((column) => column.dataset.proxmoxCephColumn)).toEqual([
+ 'cluster',
+ 'health',
+ 'quorum',
+ 'osds',
+ 'pgs',
+ 'pools',
+ 'capacity',
+ 'services',
+ 'detail',
+ ]);
+ const widths = columns.map((column) => Number.parseFloat(column.style.width));
+ // The unsized Services column used to receive ~4% and clip to "mon…".
+ expect(Math.min(...widths)).toBeGreaterThan(4);
+ expect(widths.reduce((total, width) => total + width, 0)).toBeCloseTo(100, 1);
+ expect(Object.values(CEPH_COLUMN_WEIGHTS).every((weight) => weight > 0)).toBe(true);
+ });
+
+ it('keeps the FSID out of the row and whole in the expansion', () => {
+ render(() => (
+ }
+ emptyTitle="No Ceph clusters"
+ emptyDescription="No clusters"
+ />
+ ));
+
+ expect(screen.queryByRole('columnheader', { name: 'FSID' })).toBeNull();
+ expect(document.querySelector('[data-inline-detail-for="ceph-main"]')).toHaveTextContent(
+ '8f1c2d3e-fsid',
+ );
+ });
+
+ it('drops the pool object count, not the usage figure, in a narrow card', () => {
+ expect(cephClusterDrawerSource).toMatch(
+ /platform-table-phone-hidden md:w-\[16%\]`\}\s*>\s*Objects/,
+ );
+ expect(cephClusterDrawerSource).toMatch(
+ /platform-table-mobile-w-20 md:w-\[20%\]`\}\s*>\s*Used/,
+ );
+ });
});
diff --git a/frontend-modern/src/features/proxmox/__tests__/ProxmoxCoverageTable.test.tsx b/frontend-modern/src/features/proxmox/__tests__/ProxmoxCoverageTable.test.tsx
index f2f43394f6..50adeb3dd8 100644
--- a/frontend-modern/src/features/proxmox/__tests__/ProxmoxCoverageTable.test.tsx
+++ b/frontend-modern/src/features/proxmox/__tests__/ProxmoxCoverageTable.test.tsx
@@ -213,4 +213,39 @@ describe('ProxmoxCoverageTable column visibility', () => {
expect(document.body.textContent).toContain('workload-0');
expect(document.body.textContent).not.toContain('workload-599');
});
+
+ it('marks an empty evidence cell with a short label and the full reason on hover', () => {
+ render(() => (
+ }
+ emptyTitle=""
+ emptyDescription=""
+ sortKey={(() => 'posture') as Accessor}
+ sortDirection={() => 'asc'}
+ onSort={() => {}}
+ expandedKeys={new Set()}
+ onToggleExpand={() => {}}
+ showPbsColumn={true}
+ showArchiveColumn={true}
+ showSnapshotColumn={true}
+ showTaskColumn={true}
+ layoutWidth={() => 1_200}
+ />
+ ));
+
+ // The header already names the source, so the cell does not repeat it and
+ // 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',
+ 'No PVE backup file',
+ 'No guest snapshot',
+ 'No recent task',
+ ]) {
+ expect(empty(title)).toHaveTextContent(/^None$/);
+ }
+ });
});
diff --git a/frontend-modern/src/features/proxmox/__tests__/ProxmoxMailGatewayTable.test.ts b/frontend-modern/src/features/proxmox/__tests__/ProxmoxMailGatewayTable.test.ts
index 0347920fd5..5a741b4ee3 100644
--- a/frontend-modern/src/features/proxmox/__tests__/ProxmoxMailGatewayTable.test.ts
+++ b/frontend-modern/src/features/proxmox/__tests__/ProxmoxMailGatewayTable.test.ts
@@ -1,6 +1,9 @@
import { describe, expect, it } from 'vitest';
+import { getPlatformTableWeightedColumnWidthStyle } from '@/features/platformPage/sharedPlatformPage';
import {
+ MAIL_GATEWAY_COLUMN_WEIGHTS,
+ type MailGatewayColumn,
MAIL_GATEWAY_NARROW_PHONE_COLUMNS,
MAIL_GATEWAY_NARROW_PHONE_COLUMN_WIDTHS,
MAIL_GATEWAY_PHONE_COLUMNS,
@@ -53,4 +56,21 @@ describe('ProxmoxMailGatewayTable phone presentation', () => {
),
).toBe(100);
});
+
+ it('gives every desktop column a weighted share instead of the remainder', () => {
+ const columns = Object.keys(MAIL_GATEWAY_COLUMN_WEIGHTS) as MailGatewayColumn[];
+ expect(columns).toHaveLength(10);
+ const widths = columns.map((column) =>
+ Number.parseFloat(
+ String(
+ getPlatformTableWeightedColumnWidthStyle(column, MAIL_GATEWAY_COLUMN_WEIGHTS, columns)
+ .width,
+ ),
+ ),
+ );
+ // Version, Spam, Virus, and Quarantine used to split ~14% between them,
+ // which clipped a three-digit spam count to "3…" on a 1440px screen.
+ expect(Math.min(...widths)).toBeGreaterThan(7);
+ expect(widths.reduce((total, width) => total + width, 0)).toBeCloseTo(100, 1);
+ });
});
diff --git a/frontend-modern/src/features/proxmox/__tests__/ProxmoxReplicationTable.test.tsx b/frontend-modern/src/features/proxmox/__tests__/ProxmoxReplicationTable.test.tsx
index 2992ff50df..8c37a8c681 100644
--- a/frontend-modern/src/features/proxmox/__tests__/ProxmoxReplicationTable.test.tsx
+++ b/frontend-modern/src/features/proxmox/__tests__/ProxmoxReplicationTable.test.tsx
@@ -1,4 +1,4 @@
-import { cleanup, render, screen } from '@solidjs/testing-library';
+import { cleanup, fireEvent, render, screen } from '@solidjs/testing-library';
import { afterEach, describe, expect, it, vi } from 'vitest';
import type { ReplicationJob } from '@/types/api';
import {
@@ -95,4 +95,40 @@ describe('ProxmoxReplicationTable', () => {
expect(screen.getByText('backend duration')).toBeInTheDocument();
});
+
+ it('reveals the whole error from the row disclosure at desktop width', async () => {
+ const error =
+ "command 'zfs send -- rpool/data/vm-100-disk-0@__replicate_100-0__' failed: exit code 255";
+ render(() => (
+ undefined}
+ emptyIcon={}
+ emptyTitle="No replication jobs"
+ emptyDescription="Replication jobs appear here."
+ />
+ ));
+
+ expect(document.querySelector('[data-replication-job-error]')).toBeNull();
+ await fireEvent.click(
+ screen.getByRole('button', { name: 'Expand details for replication job 100-0' }),
+ );
+
+ const detail = document.querySelector('[data-replication-job-error]');
+ expect(detail).toHaveTextContent(error);
+ // The expansion wraps; only the one-line row cell truncates.
+ expect(detail?.className).toContain('break-words');
+ expect(detail?.className).not.toContain('truncate');
+ });
+
+ it('gives the error column more room than the 8% that clipped it', () => {
+ expect(replicationTableSource).toContain("error: 'w-[13%]'");
+ expect(replicationTableSource).not.toContain("error: 'w-[8%]'");
+ expect(replicationTableSource).not.toContain('max-w-[18rem] truncate');
+ });
+
+ it('matches jobs by their error text', () => {
+ expect(replicationTableSource).toMatch(/job\.lastSyncStatus,\s*job\.error,\s*job\.comment,/);
+ });
});
diff --git a/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTableShared.test.tsx b/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTableShared.test.tsx
index 8785d393c4..cb34f14569 100644
--- a/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTableShared.test.tsx
+++ b/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTableShared.test.tsx
@@ -9,6 +9,7 @@ import {
ArtifactSourceBadge,
ArtifactStateBadge,
ProxmoxBackupWorkloadTypeBadge,
+ SortableHead,
} from '../proxmoxBackupsTableShared';
import type { RecoverableArtifact } from '../proxmoxBackupRecoveryModel';
@@ -95,6 +96,28 @@ describe('proxmoxBackupsTableShared', () => {
expect(proxmoxBackupsTableSharedSource).not.toContain('ArrowUpDownIcon');
expect(proxmoxBackupsTableSharedSource).not.toContain('SORT_ICON_CLASS');
});
+
+ it('keeps sortable headers in the same uppercase as their plain neighbours', () => {
+ render(() => (
+
+
+
+ 'posture'}
+ direction={() => 'asc'}
+ onSort={() => undefined}
+ headClass=""
+ />
+
+
+
+ ));
+
+ // A button resets text-transform, so the header casing must be restated.
+ expect(screen.getByRole('button', { name: 'Sort by Workload' })).toHaveClass('uppercase');
+ });
});
function artifact(overrides: Partial = {}): RecoverableArtifact {
diff --git a/frontend-modern/src/features/proxmox/proxmoxBackupsTablePresentation.ts b/frontend-modern/src/features/proxmox/proxmoxBackupsTablePresentation.ts
index 1b15aea8ac..b1342d3396 100644
--- a/frontend-modern/src/features/proxmox/proxmoxBackupsTablePresentation.ts
+++ b/frontend-modern/src/features/proxmox/proxmoxBackupsTablePresentation.ts
@@ -126,15 +126,18 @@ const BACKUP_SERVER_WEIGHTS: Record<
used: 18,
backups: 9,
},
+ // Memory and Used carry a percentage plus a used/total pair, the longest
+ // values in the row, so they take the slack from the one-word status and
+ // version cells instead of truncating.
full: {
server: 15,
- status: 10,
- version: 8,
+ status: 8,
+ version: 7,
cpu: 6,
- memory: 11,
+ memory: 13.5,
uptime: 7,
datastore: 13,
- used: 15,
+ used: 15.5,
backups: 8,
dedup: 7,
},
@@ -196,30 +199,33 @@ const COVERAGE_WEIGHTS: Record<
Partial>
> = {
compact: { workload: 40, posture: 18, latest: 16, pbs: 16, task: 10 },
- basic: { workload: 31, node: 18, posture: 19, latest: 20, task: 12 },
- operational: { workload: 28, type: 9, node: 14, posture: 17, latest: 17, task: 15 },
+ // 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 },
+ operational: { workload: 27, type: 8, node: 17, posture: 17, latest: 15, task: 16 },
expanded: {
- workload: 17,
- type: 7,
- node: 10,
- posture: 13,
- latest: 12,
- pbs: 11,
- archive: 10.5,
- snapshot: 11.5,
- task: 8,
+ workload: 19,
+ type: 6.5,
+ node: 13.5,
+ posture: 13.5,
+ latest: 9.5,
+ pbs: 9.5,
+ archive: 10,
+ snapshot: 9.5,
+ task: 9,
},
full: {
- workload: 14.5,
- type: 6,
- targetId: 8.5,
- node: 9,
+ workload: 17,
+ type: 5.5,
+ targetId: 8,
+ node: 11.5,
posture: 11,
- latest: 10,
- pbs: 11.5,
- archive: 10,
- snapshot: 12.5,
- task: 8,
+ latest: 8.5,
+ pbs: 10.5,
+ archive: 8.5,
+ snapshot: 12,
+ task: 7.5,
},
};
diff --git a/frontend-modern/src/features/proxmox/proxmoxBackupsTableShared.tsx b/frontend-modern/src/features/proxmox/proxmoxBackupsTableShared.tsx
index 17b5bd4bcf..26e89ef9b5 100644
--- a/frontend-modern/src/features/proxmox/proxmoxBackupsTableShared.tsx
+++ b/frontend-modern/src/features/proxmox/proxmoxBackupsTableShared.tsx
@@ -342,8 +342,11 @@ export function ProxmoxBackupWorkloadTypeBadge(props: {
// Sortable column header — matches the shared active-only table pattern.
// Clicking an inactive column sorts it with the supplied default direction;
// clicking the active column flips direction.
+// Buttons reset text-transform and letter-spacing, so a sortable header has to
+// restate the header casing or it renders in sentence case beside its
+// uppercase non-sortable neighbours.
const SORT_BUTTON_CLASS =
- 'inline-flex min-w-0 max-w-full items-center gap-1 rounded-sm outline-none transition-colors hover:text-base-content focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 focus-visible:ring-offset-surface';
+ 'inline-flex min-w-0 max-w-full items-center gap-1 rounded-sm uppercase tracking-[inherit] outline-none transition-colors hover:text-base-content focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 focus-visible:ring-offset-surface';
export function SortableHead(props: {
label: string;