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:
parent
2cec2215f1
commit
3a5f0d1c19
2 changed files with 32 additions and 4 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue