From ce13ca78453b1cd14a268371d03c516ea435ed06 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Tue, 10 Feb 2026 15:52:05 +0700
Subject: [PATCH] feat(MikrotikBackupsManager): add server search functionality
 to enhance server selection UI

---
 frontend/src/MikrotikBackupsManager.jsx | 124 +++++++++++++++++++++---
 1 file changed, 113 insertions(+), 11 deletions(-)

diff --git a/frontend/src/MikrotikBackupsManager.jsx b/frontend/src/MikrotikBackupsManager.jsx
index 4240cfa..b665f7c 100644
--- a/frontend/src/MikrotikBackupsManager.jsx
+++ b/frontend/src/MikrotikBackupsManager.jsx
@@ -5,8 +5,8 @@ import PageHeader from './components/PageHeader.jsx';
 import TableSkeleton from './components/TableSkeleton.jsx';
 import EmptyState from './components/EmptyState.jsx';
 import Tooltip from './components/Tooltip.jsx';
-import ServerAutocompleteInput from './components/ServerAutocompleteInput.jsx';
 import DataTable from './components/DataTable.jsx';
+import { countryToFlag } from './utils/serverUtils.js';
 import {
   IconRefresh,
   IconAlertTriangle,
@@ -14,6 +14,7 @@ import {
   IconArrowsLeftRight,
   IconDownload,
   IconCopy,
+  IconSearch,
 } from '@tabler/icons-react';
 
 function formatDateTime(value) {
@@ -59,6 +60,9 @@ function MikrotikBackupsManager() {
   const [diffResult, setDiffResult] = useState(null);
   const [diffLoading, setDiffLoading] = useState(false);
 
+  // UI-состояние выбора сервера для просмотра бэкапов (в стиле /filters)
+  const [serverSearch, setServerSearch] = useState('');
+
   // UI-состояние для таблицы выбора серверов автобэкапов
   const [backupSearch, setBackupSearch] = useState('');
   const [backupSortField, setBackupSortField] = useState('ip');
@@ -92,6 +96,27 @@ function MikrotikBackupsManager() {
     [jumphostServers],
   );
 
+  // Список серверов для выбора "текущего сервера" бэкапов с поиском (как в /filters)
+  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) === selectedServerId) || null,
     [jumphostServers, selectedServerId],
@@ -337,16 +362,6 @@ function MikrotikBackupsManager() {
 
   const actions = (
     <div className="d-flex flex-wrap gap-2 align-items-center">
-      <div style={{ minWidth: 260 }}>
-        <ServerAutocompleteInput
-          label="Jumphost для бэкапов"
-          placeholder="Выберите сервер Jumphost"
-          servers={jumphostInputServers}
-          value={selectedServerId}
-          onChange={setSelectedServerId}
-          size="sm"
-        />
-      </div>
       <button
         type="button"
         className="btn btn-outline-primary btn-sm d-inline-flex align-items-center"
@@ -416,6 +431,93 @@ function MikrotikBackupsManager() {
         actions={actions}
       />
 
+      {/* Выбор сервера для просмотра бэкапов (как в /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}.{' '}
+                {selectedServerId
+                  ? 'Кликните по другой карточке, чтобы сменить сервер.'
+                  : 'Выберите сервер, чтобы увидеть его бэкапы.'}
+              </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">
+          {jumphostServers.length === 0 ? (
+            <div className="text-muted small">
+              Нет серверов типа <code>jumphost</code>. Добавьте их в разделе «Серверы», чтобы смотреть
+              бэкапы.
+            </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 === selectedServerId;
+                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={() => setSelectedServerId(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="card mb-4">
         <div className="card-header">