fix: Update Mail Gateway disconnect state for consistency
Changed from warning (amber) to danger (red) tone and added: - Dynamic description based on reconnecting status - Manual "Reconnect now" button when not auto-reconnecting - Consistent "Connection lost" title All 7 major pages now have unified connection lost UX: Dashboard, Storage, Backups, Replication, Hosts, Docker, Mail Gateway
This commit is contained in:
parent
6505ff5edf
commit
282a323c10
1 changed files with 20 additions and 5 deletions
|
|
@ -22,7 +22,7 @@ const parseTimestamp = (value?: string) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const MailGateway: Component = () => {
|
const MailGateway: Component = () => {
|
||||||
const { state, connected } = useWebSocket();
|
const { state, connected, reconnecting, reconnect } = useWebSocket();
|
||||||
const instances = createMemo(() => state.pmg ?? []);
|
const instances = createMemo(() => state.pmg ?? []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -30,15 +30,30 @@ const MailGateway: Component = () => {
|
||||||
<ProxmoxSectionNav current="mail" />
|
<ProxmoxSectionNav current="mail" />
|
||||||
|
|
||||||
<Show when={!connected()}>
|
<Show when={!connected()}>
|
||||||
<Card padding="lg" tone="warning">
|
<Card padding="lg" tone="danger">
|
||||||
<EmptyState
|
<EmptyState
|
||||||
icon={
|
icon={
|
||||||
<svg class="h-12 w-12 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<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" />
|
<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>
|
</svg>
|
||||||
}
|
}
|
||||||
title="Disconnected from backend"
|
title="Connection lost"
|
||||||
description="Waiting for backend to reconnect before loading Mail Gateway details."
|
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>
|
</Card>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue