Improve failover startup handling and status UI

2026-08-19 20:24:04 +03:00
parent cedd31cc16
commit 3b515ee355
10 changed files with 190 additions and 63 deletions
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { useEffect, useMemo, useRef, useState, type FormEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { flushSync } from 'react-dom';
 import { CONNECTIVITY_SITES, MAX_CUSTOM_DIAGNOSTIC_SERVICES, type DiagnosticSettings } from '../../../shared/connectivityDiagnostics.js';
 import { normalizeFailoverPolicy, type FailoverPolicy, type FailoverSnapshot } from '../../../shared/failover.js';
@@ -72,6 +72,14 @@ const milliseconds = (value: string, fallback: number) => {
  return Number.isFinite(parsed) ? Math.round(parsed * 1000) : fallback;
 };

+function pulseNumber(event: FormEvent<HTMLInputElement>) {
+  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+  event.currentTarget.animate([
+    { color: 'var(--client-accent)', textShadow: '0 0 10px color-mix(in oklch, var(--client-accent) 54%, transparent)' },
+    { color: 'var(--client-text)', textShadow: '0 0 0 transparent' },
+  ], { duration: 320, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' });
+}
+
 const reasonLabel = (reason: string | null) => ({
  'primary-healthy': 'Основной канал работает',
  'health-unknown': 'Ожидаем результаты проверки',
@@ -270,6 +278,8 @@ export function FailoverPanel({
  const [serviceError, setServiceError] = useState('');
  const [openPicker, setOpenPicker] = useState('');
  const [removingCheckId, setRemovingCheckId] = useState('');
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [advancedClosing, setAdvancedClosing] = useState(false);
  useEffect(() => {
    if (!dirty) setDraft(snapshot.policy);
  }, [snapshot.policy, dirty]);
@@ -374,6 +384,14 @@ export function FailoverPanel({
    if (!document.startViewTransition || matchMedia('(prefers-reduced-motion: reduce)').matches) finish();
    else document.startViewTransition(finish);
  };
+  const toggleAdvanced = () => {
+    if (!advancedOpen) {
+      setAdvancedOpen(true);
+      return;
+    }
+    if (matchMedia('(prefers-reduced-motion: reduce)').matches) setAdvancedOpen(false);
+    else setAdvancedClosing(true);
+  };

  return <Drawer
    panelRef={feature.panelRef}
@@ -415,14 +433,20 @@ export function FailoverPanel({
        ))?.id || '';
        const healthLabel = missing
          ? 'Цель недоступна'
+          : !draft.enabled
+            ? 'Выключен'
+            : snapshot.reason === 'vpn-stopped' || snapshot.activation === 'inactive'
+              ? 'VPN выключен'
+              : snapshot.activation === 'pending'
+                ? 'Ожидает запуска VPN'
          : channel === 'primary' && snapshot.reason === 'failure-window'
            ? `Нестабилен · ${seconds(Math.max(0, Date.now() - Date.parse(snapshot.primary.stateSince || new Date().toISOString())))} из ${seconds(draft.failureWindowMs)} с`
            : channel === 'primary' && snapshot.currentRole === 'reserve' && health === 'healthy' && snapshot.reason === 'recovery-hold'
              ? 'Восстанавливается'
-              : health === 'healthy' ? 'Работает' : health === 'unhealthy' ? 'Недоступен' : health === 'not-monitoring' ? 'Не проверяется' : 'Нет данных';
-        return <section className="client-failover-channel" key={channel}>
+              : health === 'healthy' ? 'Работает' : health === 'unhealthy' ? 'Недоступен' : health === 'not-monitoring' ? 'Не проверяется' : 'Ещё не проверен';
+        return <section className="client-failover-channel" data-channel={channel} key={channel}>
          <div className="client-failover-channel-title">
-            <span>{channel === 'primary' ? 'Основной' : 'Резервный'}</span>
+            <span><b>{channel === 'primary' ? 'Основной' : 'Резервный'}</b><i aria-hidden="true">=</i></span>
            <strong className={health === 'healthy' ? 'is-healthy' : health === 'unhealthy' || missing ? 'is-unhealthy' : ''}>{healthLabel}</strong>
          </div>
          <FailoverPicker
@@ -462,6 +486,7 @@ export function FailoverPanel({
                aria-label={`Таймаут проверки: ${service?.label || 'сервис недоступен'}`}
                value={seconds(check.timeoutMs)}
                disabled={blocked || !draft.enabled}
+                onInput={pulseNumber}
                onChange={(event) => updateChecks((checks) => checks.map((item) => item.serviceId === check.serviceId
                  ? { ...item, timeoutMs: milliseconds(event.target.value, item.timeoutMs) }
                  : item))}
@@ -473,12 +498,17 @@ export function FailoverPanel({
              aria-label={`Убрать проверку: ${service?.label || 'сервис недоступен'}`}
              disabled={blocked || !draft.enabled || draft.checks.length === 1 || Boolean(removingCheckId)}
              onClick={() => removeCheck(check.serviceId)}
-            >×</button>
+            >
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path className="client-failover-remove-lid" d="M8 7V5h8v2m-11 0h14" />
+                <path d="M7 7l1 13h8l1-13M10 10v7m4-7v7" />
+              </svg>
+            </button>
          </div>;
        })}
        {!addingService && <FailoverPicker
          id="client-failover-service-options"
-          label="+ Добавить проверку"
+          label="Добавить проверку"
          value=""
          options={servicePickerOptions}
          open={openPicker === 'services' && !blocked && draft.enabled}
@@ -502,9 +532,9 @@ export function FailoverPanel({
      </fieldset>

      <section className="client-failover-timing" aria-label="Пороги переключения">
-        <label><span>Проверять каждые, сек</span><input type="number" min="15" max="900" disabled={blocked || !draft.enabled} value={seconds(draft.intervalMs)} onChange={(event) => update({ intervalMs: milliseconds(event.target.value, draft.intervalMs) })} /></label>
-        <label><span>Сбой должен длиться, сек</span><input type="number" min={seconds(draft.intervalMs * 2)} max="1800" disabled={blocked || !draft.enabled} value={seconds(draft.failureWindowMs)} onChange={(event) => update({ failureWindowMs: milliseconds(event.target.value, draft.failureWindowMs) })} /></label>
-        <label><span>Восстановление, сек</span><input type="number" min="60" max="86400" disabled={blocked || !draft.enabled} value={seconds(draft.recoveryWindowMs)} onChange={(event) => update({ recoveryWindowMs: milliseconds(event.target.value, draft.recoveryWindowMs) })} /></label>
+        <label><span>Проверять каждые, сек</span><input type="number" min="15" max="900" disabled={blocked || !draft.enabled} value={seconds(draft.intervalMs)} onInput={pulseNumber} onChange={(event) => update({ intervalMs: milliseconds(event.target.value, draft.intervalMs) })} /></label>
+        <label><span>Сбой должен длиться, сек</span><input type="number" min={seconds(draft.intervalMs * 2)} max="1800" disabled={blocked || !draft.enabled} value={seconds(draft.failureWindowMs)} onInput={pulseNumber} onChange={(event) => update({ failureWindowMs: milliseconds(event.target.value, draft.failureWindowMs) })} /></label>
+        <label><span>Восстановление, сек</span><input type="number" min="60" max="86400" disabled={blocked || !draft.enabled} value={seconds(draft.recoveryWindowMs)} onInput={pulseNumber} onChange={(event) => update({ recoveryWindowMs: milliseconds(event.target.value, draft.recoveryWindowMs) })} /></label>
        <div className="client-failover-traffic-switch">
          <span><strong>Переключение во время работы</strong><small>{draft.trafficGuard.enabled ? 'Ждать тишины перед автоматическим переключением' : 'Переключать сразу после подтверждённого сбоя'}</small></span>
          <HarborSwitch
@@ -514,22 +544,40 @@ export function FailoverPanel({
            onChange={(enabled) => update({ trafficGuard: { ...draft.trafficGuard, enabled } })}
          />
        </div>
-        <label><span>Тишина перед переключением, сек</span><input type="number" min="5" max="600" disabled={blocked || !draft.enabled || !draft.trafficGuard.enabled} value={seconds(draft.trafficGuard.quietWindowMs)} onChange={(event) => update({ trafficGuard: { ...draft.trafficGuard, quietWindowMs: milliseconds(event.target.value, draft.trafficGuard.quietWindowMs) } })} /></label>
-        <label><span>Активный трафик, КБ/с</span><input type="number" min="1" max="102400" disabled={blocked || !draft.enabled || !draft.trafficGuard.enabled} value={Math.round(draft.trafficGuard.thresholdBytesPerSecond / 1024)} onChange={(event) => update({ trafficGuard: { ...draft.trafficGuard, thresholdBytesPerSecond: Number(event.target.value) * 1024 } })} /></label>
+        <label><span>Тишина перед переключением, сек</span><input type="number" min="5" max="600" disabled={blocked || !draft.enabled || !draft.trafficGuard.enabled} value={seconds(draft.trafficGuard.quietWindowMs)} onInput={pulseNumber} onChange={(event) => update({ trafficGuard: { ...draft.trafficGuard, quietWindowMs: milliseconds(event.target.value, draft.trafficGuard.quietWindowMs) } })} /></label>
+        <label><span>Активный трафик, КБ/с</span><input type="number" min="1" max="102400" disabled={blocked || !draft.enabled || !draft.trafficGuard.enabled} value={Math.round(draft.trafficGuard.thresholdBytesPerSecond / 1024)} onInput={pulseNumber} onChange={(event) => update({ trafficGuard: { ...draft.trafficGuard, thresholdBytesPerSecond: Number(event.target.value) * 1024 } })} /></label>
      </section>

-      <details className="client-failover-advanced"><summary>Защита от повторных сбоев</summary>
-        <label><span>Минимум на резерве, сек</span><input type="number" min="60" max="86400" disabled={blocked || !draft.enabled} value={seconds(draft.minimumReserveMs)} onChange={(event) => update({ minimumReserveMs: milliseconds(event.target.value, draft.minimumReserveMs) })} /></label>
-        <label><span>Падений до карантина</span><input type="number" min="2" max="10" disabled={blocked || !draft.enabled} value={draft.flapProtection.count} onChange={(event) => update({ flapProtection: { ...draft.flapProtection, count: Number(event.target.value) } })} /></label>
-        <label><span>Окно повторных сбоев, ч</span><input type="number" min="1" max="72" disabled={blocked || !draft.enabled} value={Math.round(draft.flapProtection.windowMs / 3_600_000)} onChange={(event) => update({ flapProtection: { ...draft.flapProtection, windowMs: Number(event.target.value) * 3_600_000 } })} /></label>
-        <label><span>Карантин основного, мин</span><input type="number" min="10" max="10080" disabled={blocked || !draft.enabled} value={Math.round(draft.flapProtection.quarantineMs / 60_000)} onChange={(event) => update({ flapProtection: { ...draft.flapProtection, quarantineMs: Number(event.target.value) * 60_000 } })} /></label>
-      </details>
+      <section className={`client-failover-advanced${advancedOpen ? ' is-open' : ''}${advancedClosing ? ' is-closing' : ''}`}>
+        <button type="button" aria-expanded={advancedOpen && !advancedClosing} aria-controls="client-failover-advanced-options" onClick={toggleAdvanced}>
+          <i aria-hidden="true" />
+          <span>Защита от повторных сбоев</span>
+        </button>
+        {advancedOpen && <div
+          id="client-failover-advanced-options"
+          className="client-failover-advanced-options"
+          inert={advancedClosing ? true : undefined}
+          onAnimationEnd={(event) => {
+            if (!advancedClosing || event.target !== event.currentTarget) return;
+            setAdvancedClosing(false);
+            setAdvancedOpen(false);
+          }}
+        >
+          <label><span>Минимум на резерве, сек</span><input type="number" min="60" max="86400" disabled={blocked || !draft.enabled} value={seconds(draft.minimumReserveMs)} onInput={pulseNumber} onChange={(event) => update({ minimumReserveMs: milliseconds(event.target.value, draft.minimumReserveMs) })} /></label>
+          <label><span>Падений до карантина</span><input type="number" min="2" max="10" disabled={blocked || !draft.enabled} value={draft.flapProtection.count} onInput={pulseNumber} onChange={(event) => update({ flapProtection: { ...draft.flapProtection, count: Number(event.target.value) } })} /></label>
+          <label><span>Окно повторных сбоев, ч</span><input type="number" min="1" max="72" disabled={blocked || !draft.enabled} value={Math.round(draft.flapProtection.windowMs / 3_600_000)} onInput={pulseNumber} onChange={(event) => update({ flapProtection: { ...draft.flapProtection, windowMs: Number(event.target.value) * 3_600_000 } })} /></label>
+          <label><span>Карантин основного, мин</span><input type="number" min="10" max="10080" disabled={blocked || !draft.enabled} value={Math.round(draft.flapProtection.quarantineMs / 60_000)} onInput={pulseNumber} onChange={(event) => update({ flapProtection: { ...draft.flapProtection, quarantineMs: Number(event.target.value) * 60_000 } })} /></label>
+        </div>}
+      </section>

      <div className="client-failover-runtime">
        <strong role="status" aria-live="polite">{blocked ? 'Harbor выполняет действие…' : snapshot.activation === 'pending' ? 'Включится при следующем запуске VPN' : reasonLabel(snapshot.reason)}</strong>
-        <span>Новые соединения: {role ? targetLabel(profiles, snapshot[role].target) : 'текущий канал вне настроенной пары'}</span>
+        <span>{role
+          ? `Новые соединения: ${targetLabel(profiles, snapshot[role].target)}`
+          : snapshot.reason === 'vpn-stopped'
+            ? `При запуске VPN: ${targetLabel(profiles, draft.primary)}`
+            : `После перезапуска VPN: ${targetLabel(profiles, draft.primary)}`}</span>
        {snapshot.nextDecisionAt && <span>Следующее решение не раньше чем через {seconds(Math.max(0, Date.parse(snapshot.nextDecisionAt) - Date.now()))} с</span>}
-        {snapshot.currentRole === 'other' && <span>Чтобы запустить автоматику, выключите VPN и включите снова на основном канале.</span>}
        {activity && <span>{activity.state === 'active' ? `Активный трафик · ${Math.round(activity.totalBytesPerSecond / 1024)} КБ/с · соединений: ${activity.transmittingConnections}` : activity.state === 'quiet' ? `Проверяем тишину · ${Math.min(seconds(quietElapsed), seconds(draft.trafficGuard.quietWindowMs))} из ${seconds(draft.trafficGuard.quietWindowMs)} с` : 'Не удалось определить активность · автоматическое переключение остановлено'}</span>}
        {activity?.blockers.slice(0, 2).map((blocker) => <small key={`${blocker.device}:${blocker.service}`}>{blocker.device} · {blocker.service} · {Math.round((blocker.uploadBytesPerSecond + blocker.downloadBytesPerSecond) / 1024)} КБ/с</small>)}
        {activity && activity.blockers.length > 2 && <small>Ещё {activity.blockers.length - 2}</small>}