From caa566aa8fa451c1b0841ae00b4e922b5993ce64 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Thu, 12 Feb 2026 23:43:44 +0700
Subject: [PATCH] feat(MikrotikTools): implement gateway selection feature with
 enhanced UI for improved user experience and server-specific filtering

---
 frontend/src/MikrotikTools.jsx | 278 +++++++++++++++++----------------
 1 file changed, 145 insertions(+), 133 deletions(-)

diff --git a/frontend/src/MikrotikTools.jsx b/frontend/src/MikrotikTools.jsx
index 55f063d..60f7b8d 100644
--- a/frontend/src/MikrotikTools.jsx
+++ b/frontend/src/MikrotikTools.jsx
@@ -199,6 +199,16 @@ function MikrotikTools() {
     [jumphostServers, serverId]
   );
 
+  const gatewaysForServer = useMemo(() => {
+    if (!serverId || !gateways.length) return [];
+    const ids = currentServer
+      ? new Set(
+          [serverId, currentServer.id, currentServer.ip, currentServer.dns].filter(Boolean).map(String)
+        )
+      : new Set([String(serverId)]);
+    return gateways.filter((g) => g && g.ip && ids.has(String(g.serverId)));
+  }, [serverId, currentServer, gateways]);
+
   const currentServerLabel =
     currentServer?.dns || currentServer?.ip || makeServerId(currentServer || {}) || 'Не выбран';
 
@@ -304,58 +314,143 @@ function MikrotikTools() {
         </div>
       </div>
 
-      {/* Горизонтальная панель: режим (Traceroute/Ping) + основное действие — по образцу Tabler "page-header" с btn-list */}
-      <div className="card mb-3">
-        <div className="card-body py-2">
-          <div className="row align-items-center g-2">
-            <div className="col">
-              <ul className="nav nav-pills" role="tablist">
-                <li className="nav-item" role="presentation">
-                  <button
-                    type="button"
-                    className={`nav-link ${mode === 'traceroute' ? 'active' : ''}`}
-                    onClick={() => { setMode('traceroute'); setHops([]); setAnalysis([]); setPingResult(null); }}
-                    role="tab"
-                  >
-                    Traceroute
-                  </button>
-                </li>
-                <li className="nav-item" role="presentation">
-                  <button
-                    type="button"
-                    className={`nav-link ${mode === 'ping' ? 'active' : ''}`}
-                    onClick={() => { setMode('ping'); setHops([]); setAnalysis([]); setPingResult(null); }}
-                    role="tab"
-                  >
-                    Ping
-                  </button>
-                </li>
-              </ul>
+      {/* Шлюз и параметры проверки — только когда выбран сервер, в том же стиле что и блок серверов */}
+      {serverId && (
+        <>
+          {/* Выбор gateway в стиле карточек серверов */}
+          <div className="card mb-3">
+            <div className="card-header">
+              <h3 className="card-title mb-1">Шлюз (gateway)</h3>
+              <div className="text-muted small">
+                {gatewaysForServer.length > 0
+                  ? 'Выберите шлюз для привязки проверки (опционально). Можно искать по IP или интерфейсу ниже.'
+                  : 'Нет настроенных шлюзов для этого сервера. Проверка пойдёт без привязки к gateway.'}
+              </div>
             </div>
-            <div className="col-auto ms-auto">
-              <div className="btn-list">
-                <button
-                  type="button"
-                  className="btn btn-outline-secondary"
-                  onClick={handleReset}
-                  disabled={running}
-                >
-                  <IconRefresh size={16} className="me-1" />
-                  Сбросить
-                </button>
-                <button
-                  type="button"
-                  className="btn btn-primary"
-                  onClick={handleRunCheck}
-                  disabled={running || loading}
-                >
-                  {running ? 'Выполнение…' : (mode === 'traceroute' ? 'Запустить трассировку' : 'Запустить ping')}
-                </button>
+            <div className="card-body">
+              {loading && !networkConfig ? (
+                <div className="text-muted small">Загрузка сетевых настроек…</div>
+              ) : (
+                <>
+                  {gatewaysForServer.length > 0 && (
+                    <div className="row row-cards g-2 mb-3">
+                      {gatewaysForServer                        .map((g) => {
+                          const isSelected = gatewayRef === g.ip || gatewayRef === g.id;
+                          const flag = g.country ? countryToFlag(g.country) : '';
+                          const subtitle = [g.country, g.provider].filter(Boolean).join(' · ');
+                          return (
+                            <div className="col-12 col-sm-6 col-md-4 col-lg-3" key={g.id || g.ip}>
+                              <div
+                                className={`card card-sm h-100 cursor-pointer ${
+                                  isSelected ? 'border-primary card-hover' : 'card-hover'
+                                }`}
+                                onClick={() => {
+                                  const next = isSelected ? '' : (g.ip || g.id);
+                                  setGatewayRef(next);
+                                  if (!next) {
+                                    setGatewayMeta(null);
+                                  } else {
+                                    setGatewayMeta({ ip: g.ip, gateway: g });
+                                    if (!target && g.ip) setTarget(g.ip);
+                                  }
+                                }}
+                              >
+                                <div className="card-body d-flex align-items-start gap-2">
+                                  <span className="avatar bg-primary-lt" title={g.country || ''}>
+                                    {flag || (g.ip ? g.ip.slice(0, 2) : '?')}
+                                  </span>
+                                  <div className="flex-grow-1 min-w-0">
+                                    <div className="fw-bold text-truncate" title={g.ip || ''}>
+                                      {g.ip || '—'}
+                                    </div>
+                                    {(g.description || g.ip) && (
+                                      <div className="text-muted small text-truncate" title={g.description || g.ip}>
+                                        {g.description || g.ip}
+                                      </div>
+                                    )}
+                                    <div className="text-muted small mt-1">
+                                      {subtitle || '—'}
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          );
+                        })}
+                    </div>
+                  )}
+                  <GatewayAutocompleteInput
+                    value={gatewayRef}
+                    onChange={setGatewayRef}
+                    gateways={gateways}
+                    interfaces={interfaces}
+                    serverId={serverId || null}
+                    placeholder="IP gateway или remote IP туннеля…"
+                    onSelectMeta={handleSelectGatewayMeta}
+                  />
+                  <div className="text-muted small mt-2">
+                    Текущий gateway:&nbsp;
+                    <span className="fw-semibold">{gatewayRef || gatewayMeta?.ip || 'не выбран'}</span>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Режим и кнопки запуска */}
+          <div className="card mb-3">
+            <div className="card-body py-2">
+              <div className="row align-items-center g-2">
+                <div className="col">
+                  <ul className="nav nav-pills" role="tablist">
+                    <li className="nav-item" role="presentation">
+                      <button
+                        type="button"
+                        className={`nav-link ${mode === 'traceroute' ? 'active' : ''}`}
+                        onClick={() => { setMode('traceroute'); setHops([]); setAnalysis([]); setPingResult(null); }}
+                        role="tab"
+                      >
+                        Traceroute
+                      </button>
+                    </li>
+                    <li className="nav-item" role="presentation">
+                      <button
+                        type="button"
+                        className={`nav-link ${mode === 'ping' ? 'active' : ''}`}
+                        onClick={() => { setMode('ping'); setHops([]); setAnalysis([]); setPingResult(null); }}
+                        role="tab"
+                      >
+                        Ping
+                      </button>
+                    </li>
+                  </ul>
+                </div>
+                <div className="col-auto ms-auto">
+                  <div className="btn-list">
+                    <button
+                      type="button"
+                      className="btn btn-outline-secondary"
+                      onClick={handleReset}
+                      disabled={running}
+                    >
+                      <IconRefresh size={16} className="me-1" />
+                      Сбросить
+                    </button>
+                    <button
+                      type="button"
+                      className="btn btn-primary"
+                      onClick={handleRunCheck}
+                      disabled={running || loading}
+                    >
+                      {running ? 'Выполнение…' : (mode === 'traceroute' ? 'Запустить трассировку' : 'Запустить ping')}
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
+        </>
+      )}
 
       {/* Параметры проверки + результаты */}
       <div className="row g-3">
@@ -367,93 +462,10 @@ function MikrotikTools() {
             <div className="card-body">
               {loading && !networkConfig ? (
                 <div className="text-muted small">Загрузка сетевых настроек…</div>
+              ) : !serverId ? (
+                <div className="text-muted small">Выберите сервер выше — шлюз и параметры появятся там.</div>
               ) : (
                 <>
-
-                  <div className="mb-3">
-                    <label className="form-label">Привязка к gateway / интерфейсу (опционально)</label>
-                    {/* Карточки gateways выбранного сервера */}
-                    {serverId && gateways.length > 0 && (
-                      <div className="mb-2">
-                        <div className="row row-cards g-2">
-                          {gateways
-                            .filter((g) => {
-                              if (!g || !g.ip) return false;
-                              if (!serverId) return false;
-                              if (!currentServer) return g.serverId === serverId;
-                              const serverIds = new Set([
-                                serverId,
-                                currentServer.id,
-                                currentServer.ip,
-                                currentServer.dns,
-                              ].filter(Boolean).map(String));
-                              return serverIds.has(String(g.serverId));
-                            })
-                            .map((g) => {
-                              const isSelected = gatewayRef === g.ip || gatewayRef === g.id;
-                              const flag = g.country ? countryToFlag(g.country) : '';
-                              // В подзаголовке показываем страну/провайдера, чтобы не дублировать description
-                              const subtitle = [g.country, g.provider].filter(Boolean).join(' · ');
-                              return (
-                                // Показываем карточки одной колонкой (по одной в ряд), чтобы текст был читаемым
-                                <div className="col-12" key={g.id || g.ip}>
-                                  <div
-                                    className={`card card-sm h-100 cursor-pointer ${
-                                      isSelected ? 'border-primary card-hover' : 'card-hover'
-                                    }`}
-                                    onClick={() => {
-                                      const next = isSelected ? '' : (g.ip || g.id);
-                                      setGatewayRef(next);
-                                      if (!next) {
-                                        setGatewayMeta(null);
-                                      } else {
-                                        setGatewayMeta({ ip: g.ip, gateway: g });
-                                        if (!target && g.ip) setTarget(g.ip);
-                                      }
-                                    }}
-                                  >
-                                    <div className="card-body py-2 px-3 d-flex align-items-start gap-2">
-                                      <span className="avatar bg-green-lt text-green">
-                                        {flag || (g.ip ? g.ip.split('.').slice(-1)[0] : '?')}
-                                      </span>
-                                      <div className="flex-grow-1 min-w-0">
-                                        <div className="fw-bold text-truncate" title={g.ip || g.description || ''}>
-                                          {g.ip || '—'}
-                                        </div>
-                                        {g.description && (
-                                          <div className="text-muted small text-truncate" title={g.description}>
-                                            {g.description}
-                                          </div>
-                                        )}
-                                        {subtitle && (
-                                          <div className="text-muted small text-truncate">
-                                            {subtitle}
-                                          </div>
-                                        )}
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              );
-                            })}
-                        </div>
-                      </div>
-                    )}
-                    {/* Расширенный выбор по IP/интерфейсу */}
-                    <GatewayAutocompleteInput
-                      value={gatewayRef}
-                      onChange={setGatewayRef}
-                      gateways={gateways}
-                      interfaces={interfaces}
-                      serverId={serverId || null}
-                      placeholder="IP gateway или remote IP туннеля…"
-                      onSelectMeta={handleSelectGatewayMeta}
-                    />
-                    <div className="form-text">
-                      Можно выбрать gateway карточкой выше или через поиск по IP/интерфейсу.
-                    </div>
-                  </div>
-
                   <div className="mb-3">
                     <label className="form-label">Домен или IP назначения</label>
                     <div className="input-group input-group-flat">