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';
|
import { ProxmoxSectionNav } from '@/components/Proxmox/ProxmoxSectionNav';
|
||||||
|
|
||||||
const Backups: Component = () => {
|
const Backups: Component = () => {
|
||||||
const { state, connected, initialDataReceived } = useWebSocket();
|
const { state, connected, initialDataReceived, reconnecting, reconnect } = useWebSocket();
|
||||||
|
|
||||||
const hasBackupData = () =>
|
const hasBackupData = () =>
|
||||||
Boolean(
|
Boolean(
|
||||||
|
|
@ -75,8 +75,22 @@ const Backups: Component = () => {
|
||||||
</svg>
|
</svg>
|
||||||
}
|
}
|
||||||
title="Connection lost"
|
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"
|
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>
|
</Card>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@ function formatRate(limit?: number): string {
|
||||||
}
|
}
|
||||||
|
|
||||||
const Replication: Component = () => {
|
const Replication: Component = () => {
|
||||||
const { state, connected } = useWebSocket();
|
const { state, connected, reconnecting, reconnect } = useWebSocket();
|
||||||
|
|
||||||
const replicationJobs = createMemo(() => {
|
const replicationJobs = createMemo(() => {
|
||||||
const jobs = state.replicationJobs ?? [];
|
const jobs = state.replicationJobs ?? [];
|
||||||
|
|
@ -59,8 +59,22 @@ const Replication: Component = () => {
|
||||||
</svg>
|
</svg>
|
||||||
}
|
}
|
||||||
title="Connection lost"
|
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"
|
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>
|
</Card>
|
||||||
}>
|
}>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue