fix: Add reconnect button to Backups and Replication pages

Both pages now show a consistent disconnect state with:
- Dynamic description based on reconnecting status
- Manual "Reconnect now" button when not auto-reconnecting

This matches the Dashboard and Storage page behavior, providing a
consistent UX across all main pages when connection is lost.
This commit is contained in:
rcourtman 2025-12-02 20:24:34 +00:00
parent 2cec2215f1
commit 3a5f0d1c19
2 changed files with 32 additions and 4 deletions

View file

@ -6,7 +6,7 @@ import UnifiedBackups from './UnifiedBackups';
import { ProxmoxSectionNav } from '@/components/Proxmox/ProxmoxSectionNav';
const Backups: Component = () => {
const { state, connected, initialDataReceived } = useWebSocket();
const { state, connected, initialDataReceived, reconnecting, reconnect } = useWebSocket();
const hasBackupData = () =>
Boolean(
@ -75,8 +75,22 @@ const Backups: Component = () => {
</svg>
}
title="Connection lost"
description="Unable to connect to the backend server. Attempting to reconnect..."
description={
reconnecting()
? 'Attempting to reconnect…'
: 'Unable to connect to the backend server'
}
tone="danger"
actions={
!reconnecting() ? (
<button
onClick={() => reconnect()}
class="mt-2 inline-flex items-center px-4 py-2 text-xs font-medium rounded bg-red-600 text-white hover:bg-red-700 transition-colors"
>
Reconnect now
</button>
) : undefined
}
/>
</Card>
</Show>

View file

@ -33,7 +33,7 @@ function formatRate(limit?: number): string {
}
const Replication: Component = () => {
const { state, connected } = useWebSocket();
const { state, connected, reconnecting, reconnect } = useWebSocket();
const replicationJobs = createMemo(() => {
const jobs = state.replicationJobs ?? [];
@ -59,8 +59,22 @@ const Replication: Component = () => {
</svg>
}
title="Connection lost"
description="Unable to connect to the backend server. Attempting to reconnect..."
description={
reconnecting()
? 'Attempting to reconnect…'
: 'Unable to connect to the backend server'
}
tone="danger"
actions={
!reconnecting() ? (
<button
onClick={() => reconnect()}
class="mt-2 inline-flex items-center px-4 py-2 text-xs font-medium rounded bg-red-600 text-white hover:bg-red-700 transition-colors"
>
Reconnect now
</button>
) : undefined
}
/>
</Card>
}>