diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx index 0d3ec4d..0054968 100644 --- a/frontend-modern/src/components/Storage/Storage.tsx +++ b/frontend-modern/src/components/Storage/Storage.tsx @@ -22,7 +22,7 @@ type StorageSortKey = 'name' | 'node' | 'type' | 'status' | 'usage' | 'free' | ' const Storage: Component = () => { const navigate = useNavigate(); - const { state, connected, activeAlerts, initialDataReceived } = useWebSocket(); + const { state, connected, activeAlerts, initialDataReceived, reconnecting, reconnect } = useWebSocket(); const alertsActivation = useAlertsActivation(); const alertsEnabled = createMemo(() => alertsActivation.activationState() === 'active'); const [viewMode, setViewMode] = usePersistentSignal<'node' | 'storage'>( @@ -660,6 +660,46 @@ const Storage: Component = () => { + {/* Disconnected State */} + + + + + + } + title="Connection lost" + description={ + reconnecting() + ? 'Attempting to reconnect…' + : 'Unable to connect to the backend server' + } + tone="danger" + actions={ + !reconnecting() ? ( + + ) : undefined + } + /> + + + {/* Helpful hint for no PVE nodes but still show content */}