diff --git a/frontend/src/MikrotikTools.jsx b/frontend/src/MikrotikTools.jsx index cac649c..d72632a 100644 --- a/frontend/src/MikrotikTools.jsx +++ b/frontend/src/MikrotikTools.jsx @@ -232,21 +232,18 @@ function MikrotikTools() { meta={`Текущий сервер: ${currentServerLabel}`} /> - {/* Объединённый блок: сервер + шлюз + популярные цели */} -
-
+ {/* Сервер, шлюз, быстрые цели — один компактный блок */} +
+
-

Сервер и шлюз для проверки

-
- Доступно Jumphost-серверов: {jumphostServers.length}.{' '} - {serverId - ? 'Кликните по другой карточке, чтобы сменить сервер. Ниже — выбор шлюза и быстрые цели.' - : 'Выберите сервер, чтобы выполнять проверки через него.'} -
+

Сервер и шлюз

+

+ {jumphostServers.length} серверов · {serverId ? 'шлюз опционален' : 'выберите сервер'} +

-
-
+
+
setServerSearch(e.target.value)} /> - +
-
+
{isInitialLoading ? ( ) : jumphostServers.length === 0 ? ( @@ -273,7 +270,7 @@ function MikrotikTools() { По вашему запросу серверы не найдены. Попробуйте изменить фильтр поиска.
) : ( -
+
{visibleJumphostServers.map((s) => { const id = s.id; const isActive = id === serverId; @@ -287,21 +284,16 @@ function MikrotikTools() { }`} onClick={() => setServerId(id)} > -
- +
+ {flag || s.ip?.slice(0, 2) || '?'}
-
+
{s.dns || s.ip || id}
- {line && ( -
- {line} -
- )} -
- {[s.country, s.provider].filter(Boolean).join(' · ') || '—'} +
+ {line || [s.country, s.provider].filter(Boolean).join(' · ') || '—'}
@@ -311,31 +303,34 @@ function MikrotikTools() { })}
)} -
- Текущий сервер:  - {currentServerLabel} +
+ Сервер: {currentServerLabel} + {serverId && ( + + Шлюз: {gatewayRef || gatewayMeta?.ip || '—'} + + )}
- {/* Шлюз (gateway) — только при выбранном сервере */} + {/* Шлюз — только при выбранном сервере */} {serverId && ( <> -
-
Шлюз (gateway)
-
- {gatewaysForServer.length > 0 - ? 'Выберите шлюз для привязки проверки (опционально). Можно искать по IP или интерфейсу ниже.' - : 'Нет настроенных шлюзов для этого сервера. Проверка пойдёт без привязки к gateway.'} +
+
+ Шлюз + {gatewaysForServer.length === 0 && ( + нет настроенных + )}
{loading && !networkConfig ? (
Загрузка сетевых настроек…
) : ( <> {gatewaysForServer.length > 0 && ( -
+
{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 (
-
- +
+ {flag || (g.ip ? g.ip.slice(0, 2) : '?')}
-
+
{g.ip || '—'}
- {(g.description || g.ip) && ( -
- {g.description || g.ip} -
- )} -
{subtitle || '—'}
+
+ {g.description || [g.country, g.provider].filter(Boolean).join(' · ') || '—'} +
@@ -380,44 +372,30 @@ function MikrotikTools() { gateways={gateways} interfaces={interfaces} serverId={serverId || null} - placeholder="IP gateway или remote IP туннеля…" + placeholder="IP gateway или интерфейс…" onSelectMeta={handleSelectGatewayMeta} /> -
- Текущий gateway:  - {gatewayRef || gatewayMeta?.ip || 'не выбран'} -
)} - {/* Популярные цели — быстрый выбор таргета по логотипу */} -
-
Популярные цели
-
- Клик по карточке подставит цель в поле «Домен или IP назначения». -
-
+ {/* Быстрые цели — чипы */} +
+ Цель: {POPULAR_TARGETS.map(({ id: tid, name, target: tgt, Icon, color }) => { const isSelected = target === tgt; const bgClass = color === 'red' ? 'bg-red-lt' : color === 'blue' ? 'bg-blue-lt' : 'bg-orange-lt'; const textClass = color === 'red' ? 'text-red' : color === 'blue' ? 'text-blue' : 'text-orange'; return ( -
-
setTarget(tgt)} - > -
- - - -
-
{name}
-
{tgt}
-
-
-
-
+ ); })}
@@ -426,14 +404,16 @@ function MikrotikTools() {
- {/* Режим и кнопки запуска — только при выбранном сервере */} - {serverId && ( -
-
-
-
-
    -
  • + {/* Параметры + результаты */} +
    +
    +
    +
    +

    Параметры

    + {serverId && ( + <> +
      +
    • -
    • +
    -
    -
    -
    - -
    -
    -
    + + )}
    -
    - )} - - {/* Параметры проверки + результаты */} -
    -
    -
    -
    -

    Параметры проверки

    -
    -
    +
    {loading && !networkConfig ? ( -
    Загрузка сетевых настроек…
    +
    Загрузка…
    ) : !serverId ? ( -
    Выберите сервер выше — шлюз и параметры появятся там.
    +
    Выберите сервер выше.
    ) : ( - <> -
    - -
    - - - +
    +
    + +
    + setTarget(e.target.value)} /> {gatewayMeta?.ip && ( - )}
    -
    - Можно трассировать как до внешнего домена, так и до IP gateway/туннеля. -
    - {mode === 'traceroute' && ( -
    - - setMaxHops(e.target.value)} - /> +
    + + setMaxHops(e.target.value)} />
    )} - -
    - -
    - setUseDns(e.target.checked)} - /> - -
    -
    - Для traceroute параметр также передаётся на MikroTik как use-dns. +
    +
    + setUseDns(e.target.checked)} /> +
    - +
    )}
    @@ -563,8 +491,8 @@ function MikrotikTools() {
    {mode === 'ping' && ( -
    -
    +
    +

    Результаты ping

    @@ -681,8 +609,8 @@ function MikrotikTools() { )} {mode === 'traceroute' && ( -
    -
    +
    +