feat(MikrotikTools): implement server search functionality and enhance UI for jumphost selection in traceroute

frontend/src/MikrotikTools.jsx

@@ -1,13 +1,17 @@
 import { useEffect, useMemo, useState } from 'react';
 import api from './lib/api.js';
 import { useNotify } from './components/NotifyProvider.jsx';
-import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
 import GatewayAutocompleteInput from './components/GatewayAutocompleteInput.jsx';
+import PageHeader from './components/PageHeader.jsx';
+import TableSkeleton from './components/TableSkeleton.jsx';
+import EmptyState from './components/EmptyState.jsx';
+import { countryToFlag } from './utils/serverUtils.js';
 import {
   IconRoute,
   IconWorld,
   IconAlertTriangle,
   IconRefresh,
+  IconSearch,
 } from '@tabler/icons-react';
 
 /**
@@ -32,6 +36,8 @@ function MikrotikTools() {
   const [analysis, setAnalysis] = useState([]);
   const [useDns, setUseDns] = useState(true);
 
+  const [serverSearch, setServerSearch] = useState('');
+
   // Загрузка серверов и сетевого конфига
   useEffect(() => {
     const load = async () => {
@@ -128,22 +134,145 @@ function MikrotikTools() {
     setAnalysis([]);
   };
 
+  const jumphostServers = useMemo(
+    () => (servers || []).filter((s) => String(s.type || '').toLowerCase() === 'jumphost'),
+    [servers]
+  );
+
+  const makeServerId = (s) => (s.id || s.dns || s.ip || '').toString();
+
+  const jumphostInputServers = useMemo(
+    () => jumphostServers.map((s) => ({ ...s, id: makeServerId(s) })),
+    [jumphostServers]
+  );
+
+  const visibleJumphostServers = useMemo(() => {
+    if (!serverSearch.trim()) return jumphostInputServers;
+    const q = serverSearch.trim().toLowerCase();
+    return jumphostInputServers.filter((s) => {
+      const fields = [
+        s.id,
+        s.ip,
+        s.dns,
+        s.extIp,
+        s.internalIp,
+        s.country,
+        s.provider,
+      ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+      return fields.includes(q);
+    });
+  }, [jumphostInputServers, serverSearch]);
+
+  const currentServer = useMemo(
+    () => jumphostServers.find((s) => makeServerId(s) === serverId) || null,
+    [jumphostServers, serverId]
+  );
+
+  const currentServerLabel =
+    currentServer?.dns || currentServer?.ip || makeServerId(currentServer || {}) || 'Не выбран';
+
+  const isInitialLoading = loading && servers.length === 0;
+
   return (
-    <div className="container-xl py-3">
-      <div className="page-header d-print-none mb-3">
-        <div className="row align-items-center">
-          <div className="col">
-            <h2 className="page-title d-flex align-items-center">
-              <IconRoute size={24} className="me-2 text-primary" />
-              Инструменты MikroTik: трассировка
-            </h2>
-            <div className="page-subtitle text-muted">
-              Проверка маршрута до домена/IP через выбранный jumphost и gateway с расшифровкой хопов.
+    <div className="page">
+      <PageHeader
+        title="MikroTik Tools"
+        pretitle="Traceroute через выбранный jumphost/gateway"
+        meta={`Текущий сервер: ${currentServerLabel}`}
+      />
+
+      {/* Выбор сервера для трассировки (в стиле MikrotikBackups / filters) */}
+      <div className="card mb-3">
+        <div className="card-header">
+          <div className="row align-items-center g-2">
+            <div className="col">
+              <h3 className="card-title mb-1">Сервер для трассировки</h3>
+              <div className="text-muted small">
+                Доступно Jumphost-серверов: {jumphostServers.length}.{' '}
+                {serverId
+                  ? 'Кликните по другой карточке, чтобы сменить сервер.'
+                  : 'Выберите сервер, чтобы выполнять трассировку через него.'}
+              </div>
             </div>
+            <div className="col-auto">
+              <div className="input-icon" style={{ minWidth: 240 }}>
+                <input
+                  type="text"
+                  className="form-control form-control-sm"
+                  placeholder="Поиск серверов по IP, DNS, провайдеру..."
+                  value={serverSearch}
+                  onChange={(e) => setServerSearch(e.target.value)}
+                />
+                <span className="input-icon-addon">
+                  <IconSearch size={16} />
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="card-body">
+          {isInitialLoading ? (
+            <TableSkeleton rows={2} columns={2} />
+          ) : jumphostServers.length === 0 ? (
+            <div className="text-muted small">
+              Нет серверов типа <code>jumphost</code>. Добавьте их в разделе «Серверы», чтобы использовать инструменты MikroTik.
+            </div>
+          ) : visibleJumphostServers.length === 0 ? (
+            <div className="text-muted small">
+              По вашему запросу серверы не найдены. Попробуйте изменить фильтр поиска.
+            </div>
+          ) : (
+            <div className="row row-cards g-2">
+              {visibleJumphostServers.map((s) => {
+                const id = s.id;
+                const isActive = id === serverId;
+                const flag = s.country ? countryToFlag(s.country) : '';
+                const line = [s.dns, s.ip].filter(Boolean).join(' · ');
+                return (
+                  <div className="col-12 col-sm-6 col-md-4 col-lg-3" key={id}>
+                    <div
+                      className={`card card-sm h-100 cursor-pointer ${
+                        isActive ? 'border-primary card-hover' : 'card-hover'
+                      }`}
+                      onClick={() => setServerId(id)}
+                    >
+                      <div className="card-body d-flex align-items-start gap-2">
+                        <span className="avatar bg-primary-lt" title={s.country || ''}>
+                          {flag || s.ip?.slice(0, 2) || '?'}
+                        </span>
+                        <div className="flex-grow-1 min-w-0">
+                          <div className="d-flex align-items-center gap-2">
+                            <div className="fw-bold text-truncate" title={s.dns || s.ip || id}>
+                              {s.dns || s.ip || id}
+                            </div>
+                          </div>
+                          {line && (
+                            <div className="text-muted small text-truncate" title={line}>
+                              {line}
+                            </div>
+                          )}
+                          <div className="text-muted small mt-1">
+                            {[s.country, s.provider].filter(Boolean).join(' · ') || '—'}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          <div className="text-muted small mt-2">
+            Текущий сервер:&nbsp;
+            <span className="fw-semibold">{currentServerLabel}</span>
           </div>
         </div>
       </div>
 
+      {/* Параметры трассировки + результаты */}
       <div className="row g-3">
         <div className="col-md-4">
           <div className="card">
@@ -151,22 +280,10 @@ function MikrotikTools() {
               <h3 className="card-title">Параметры проверки</h3>
             </div>
             <div className="card-body">
-              {loading ? (
-                <div className="text-muted small">Загрузка серверов и сетевых настроек…</div>
+              {loading && !networkConfig ? (
+                <div className="text-muted small">Загрузка сетевых настроек…</div>
               ) : (
                 <>
-                  <div className="mb-3">
-                    <label className="form-label">Сервер (jumphost)</label>
-                    <ServerAutocompleteInput
-                      value={serverId}
-                      onChange={setServerId}
-                      servers={servers.filter((s) => String(s.type).toLowerCase() === 'jumphost')}
-                      placeholder="Начните вводить IP, DNS или провайдера…"
-                    />
-                    <div className="form-text">
-                      Выберите MikroTik‑jumphost, через который будет выполняться трассировка.
-                    </div>
-                  </div>
 
                   <div className="mb-3">
                     <label className="form-label">Привязка к gateway / интерфейсу (опционально)</label>