fix: Add connection lost indicator to Docker page
Docker/Containers page now shows a clear error state when WebSocket connection is lost, with a manual "Reconnect now" button. This matches the pattern established across all other major pages. Connection lost UX is now consistent across: Dashboard, Storage, Backups, Replication, Hosts, and Docker.
This commit is contained in:
parent
779e4e8a86
commit
6505ff5edf
1 changed files with 41 additions and 1 deletions
|
|
@ -25,7 +25,7 @@ interface DockerHostsProps {
|
||||||
|
|
||||||
export const DockerHosts: Component<DockerHostsProps> = (props) => {
|
export const DockerHosts: Component<DockerHostsProps> = (props) => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { initialDataReceived, reconnecting, connected } = useWebSocket();
|
const { initialDataReceived, reconnecting, connected, reconnect } = useWebSocket();
|
||||||
|
|
||||||
// Load docker metadata from localStorage or API
|
// Load docker metadata from localStorage or API
|
||||||
const loadInitialDockerMetadata = (): DockerMetadataRecord => {
|
const loadInitialDockerMetadata = (): DockerMetadataRecord => {
|
||||||
|
|
@ -325,6 +325,46 @@ export const DockerHosts: Component<DockerHostsProps> = (props) => {
|
||||||
</Card>
|
</Card>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
|
{/* Disconnected State */}
|
||||||
|
<Show when={!connected() && !isLoading()}>
|
||||||
|
<Card padding="lg" tone="danger">
|
||||||
|
<EmptyState
|
||||||
|
icon={
|
||||||
|
<svg
|
||||||
|
class="h-12 w-12 text-red-400"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
title="Connection lost"
|
||||||
|
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>
|
||||||
|
|
||||||
<Show when={!isLoading()}>
|
<Show when={!isLoading()}>
|
||||||
<Show
|
<Show
|
||||||
when={sortedHosts().length > 0}
|
when={sortedHosts().length > 0}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue