mirror of
https://github.com/rcourtman/Pulse.git
synced 2026-09-22 03:04:03 +00:00
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:
@@ -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>
|
||||
}>
|
||||
|
||||
Reference in New Issue
Block a user