Polish server health checking feedback and bump Harbor versions

2026-07-12 19:14:00 +03:00
parent 5874df2fce
commit 90447de0aa
4 changed files with 116 additions and 20 deletions
--- a/src/shared/versions.js
+++ b/src/shared/versions.js
@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.7.22',
-  gatewayClient: '0.7.22',
+  macClient: '0.7.23',
+  gatewayClient: '0.7.23',
  gatewayBackend: '0.7.1',
 });

--- a/src/web/components/ServerPicker.jsx
+++ b/src/web/components/ServerPicker.jsx
@@ -38,14 +38,40 @@ function readAuto() {
 }

 function serverHealthText(ping) {
-  if (ping?.checking) return 'Проверяем TCP…';
  if (ping?.error) return 'Проверка недоступна';
  if (ping?.ok) return `TCP ${ping.latency} мс`;
  return ping ? 'TCP недоступен' : 'Не проверен';
 }

+function ServerHealth({ ping, fallback }) {
+  const health = fallback || serverHealthText(ping);
+  return <small
+    className={`client-server-health${ping?.checking ? ' is-checking' : ''}`}
+    title={ping?.checkedAt || undefined}
+    aria-label={ping?.checking ? 'Проверяем TCP' : health}
+  >
+    <span aria-hidden="true">{health}</span>
+    <span className="client-server-health-checking" aria-hidden="true">Проверяем TCP…</span>
+  </small>;
+}
+
+function ServerCheckButton({ checking, disabled, onClick }) {
+  return <button
+    className={`client-server-check${checking ? ' is-checking' : ''}`}
+    type="button"
+    aria-label={checking ? 'Проверяем доступность серверов по TCP' : 'Проверить доступность серверов по TCP'}
+    disabled={checking || disabled}
+    onClick={onClick}
+  >
+    <span>TCP</span>
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M21 12a9 9 0 0 0-15.2-6.5L3 8m0-5v5h5M3 12a9 9 0 0 0 15.2 6.5L21 16m0 5v-5h-5" />
+    </svg>
+  </button>;
+}
+
 function ServerRow({ server, selected, favorite, ping, disabled, index, onSelect, onFavorite }) {
-  const health = serverHealthText(ping);
+  const health = ping?.checking ? 'Проверяем TCP' : serverHealthText(ping);

  return <div className={`client-server-row${selected ? ' is-selected' : ''}${onFavorite ? ' has-favorite' : ''}`}>
    <button
@@ -58,7 +84,7 @@ function ServerRow({ server, selected, favorite, ping, disabled, index, onSelect
      onClick={() => onSelect(server.id)}
    >
      <strong>{server.label}</strong>
-      <small title={ping?.checkedAt || undefined}>{health}</small>
+      <ServerHealth ping={ping} />
    </button>
    {onFavorite && <button
      className={`client-server-favorite${favorite ? ' is-active' : ''}`}
@@ -136,23 +162,29 @@ export function ServerPicker({
  async function checkVisible() {
    const ids = [...new Set([selectedServerId, ...visible.map(({ id }) => id)].filter(Boolean))].slice(0, 30);
    if (!ids.length) return;
+    const startedAt = performance.now();
    setChecking(true);
    setPings((current) => ({
      ...current,
-      ...Object.fromEntries(ids.map((id) => [id, { checking: true }])),
+      ...Object.fromEntries(ids.map((id) => [id, { ...current[id], checking: true }])),
    }));
    try {
      const data = await api.servers.ping(ids);
      setPings((current) => ({
        ...current,
-        ...Object.fromEntries((data.results || []).map((result) => [result.id, result])),
+        ...Object.fromEntries((data.results || []).map((result) => [result.id, { ...result, checking: true }])),
      }));
    } catch {
      setPings((current) => ({
        ...current,
-        ...Object.fromEntries(ids.map((id) => [id, { error: true, checkedAt: new Date().toISOString() }])),
+        ...Object.fromEntries(ids.map((id) => [id, { error: true, checking: true, checkedAt: new Date().toISOString() }])),
      }));
    } finally {
+      await new Promise((resolve) => setTimeout(resolve, Math.max(0, 700 - (performance.now() - startedAt))));
+      setPings((current) => ({
+        ...current,
+        ...Object.fromEntries(ids.map((id) => [id, { ...current[id], checking: false }])),
+      }));
      setChecking(false);
    }
  }
@@ -167,9 +199,7 @@ export function ServerPicker({
    return <section className="client-servers" aria-label="Выберите сервер">
      {prompt && <span className="client-server-prompt">Выберите сервер</span>}
      <div className="client-server-toolbar is-single">
-        <button className="client-server-check" type="button" disabled={checking} onClick={checkVisible}>
-          {checking ? 'Проверяем…' : 'Проверить TCP'}
-        </button>
+        <ServerCheckButton checking={checking} onClick={checkVisible} />
      </div>
      <div className="client-server-grid">
        <ServerRow
@@ -217,9 +247,7 @@ export function ServerPicker({
        <span>Поиск и фильтры</span>
        <svg viewBox="0 0 12 8" aria-hidden="true"><path d="m1 1 5 5 5-5" /></svg>
      </button>
-      <button className="client-server-check" type="button" disabled={checking || !servers.length} onClick={checkVisible}>
-        {checking ? 'Проверяем…' : 'Проверить TCP'}
-      </button>
+      <ServerCheckButton checking={checking} disabled={!servers.length} onClick={checkVisible} />
    </div>

    <div className="client-server-mode-panels">
@@ -286,9 +314,10 @@ export function ServerPicker({
              onClick={() => select(autoServer(servers)?.id, true)}
            >
              <strong>Auto</strong>
-              <small title={pings[selectedServerId]?.checkedAt || undefined}>
-                {autoActive ? serverHealthText(pings[selectedServerId]) : 'Первый стабильный сервер'}
-              </small>
+              <ServerHealth
+                ping={autoActive ? pings[selectedServerId] : undefined}
+                fallback={autoActive ? undefined : 'Первый стабильный сервер'}
+              />
            </button>
            {selected && <ServerRow
              server={selected}
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -2717,6 +2717,34 @@ p {
  text-align: center;
 }

+.client-server-health {
+  min-height: 14px;
+  display: grid;
+  place-items: center;
+}
+
+.client-server-health > span {
+  grid-area: 1 / 1;
+  transition: opacity 420ms ease, filter 520ms cubic-bezier(0.16, 1, 0.3, 1), color 520ms ease;
+}
+
+.client-server-health-checking {
+  color: var(--client-accent);
+  opacity: 0;
+  filter: blur(4px);
+  text-shadow: 0 0 8px color-mix(in oklch, var(--client-accent) 42%, transparent);
+}
+
+.client-server-health.is-checking > span:first-child {
+  opacity: 0.32;
+  filter: blur(2px);
+}
+
+.client-server-health.is-checking .client-server-health-checking {
+  opacity: 1;
+  filter: blur(0);
+}
+
 .client-servers.is-scalable {
  width: min(100%, 360px);
  margin-inline: auto;
@@ -2766,8 +2794,37 @@ p {
  border: 0;
  background: transparent;
  color: var(--client-muted);
-  font: 700 8px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  cursor: pointer;
+  transition: color 300ms ease, opacity 300ms ease, text-shadow 500ms ease;
+}
+
+.client-server-check svg {
+  width: 13px;
+  height: 13px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.client-server-check.is-checking {
+  color: var(--client-accent);
+  opacity: 1;
+  text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 46%, transparent);
+}
+
+.client-server-check.is-checking svg {
+  animation: client-server-check-spin 700ms linear infinite;
+}
+
+@keyframes client-server-check-spin {
+  to { transform: rotate(360deg); }
 }

 .client-server-check:hover:not(:disabled),
@@ -2782,6 +2839,9 @@ p {

 .client-server-check:disabled {
  cursor: default;
+}
+
+.client-server-check:disabled:not(.is-checking) {
  opacity: 0.55;
 }

@@ -3553,6 +3613,9 @@ p {
  .client-usage > strong,
  .client-server,
  .client-server-auto,
+  .client-server-health > span,
+  .client-server-check,
+  .client-server-check svg,
  .client-server-mode-toggle,
  .client-server-mode-toggle svg,
  .client-server-mode-panel,
--- a/test/web/server-picker.test.js
+++ b/test/web/server-picker.test.js
@@ -42,6 +42,9 @@ test('server picker checks health once on load, keeps manual refresh and bounds
  assert.match(picker, /if \(initialCheckStarted\.current \|\| !servers\.length\) return/);
  assert.match(picker, /initialCheckStarted\.current = true;\s*checkVisible\(\)/);
  assert.match(picker, /onClick={checkVisible}/);
+  assert.match(picker, /\{ \.\.\.current\[id\], checking: true \}/);
+  assert.match(picker, /700 - \(performance\.now\(\) - startedAt\)/);
+  assert.match(picker, /\{ \.\.\.current\[id\], checking: false \}/);
  assert.match(picker, /\.slice\(page \* SERVER_RESULT_WINDOW, \(page \+ 1\) \* SERVER_RESULT_WINDOW\)/);
  assert.match(picker, /\.slice\(0, 30\)/);
  assert.match(picker, /Math\.min\(index, 7\)/);
@@ -52,8 +55,9 @@ test('server picker checks health once on load, keeps manual refresh and bounds
 });

 test('manual health remains visible for Auto and simple rows', () => {
-  assert.match(picker, /autoActive \? serverHealthText\(pings\[selectedServerId\]\)/);
-  assert.match(picker, /className="client-server-check"/);
+  assert.match(picker, /function ServerHealth/);
+  assert.match(picker, /client-server-health-checking/);
+  assert.match(picker, /function ServerCheckButton/);
  assert.match(picker, /server={servers\[0\]}[\s\S]*?ping={pings\[servers\[0\]\.id\]}/);
  assert.match(picker, /simpleServers\.map[\s\S]*?ping={pings\[server\.id\]}/);
 });