From 9f058e5811cce08c218b76d8d34110f6aead93fd Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Thu, 12 Feb 2026 23:28:55 +0700
Subject: [PATCH] refactor(MikrotikTools): streamline parameters section layout
 and button actions for traceroute and ping, enhancing user interaction

---
 frontend/src/MikrotikTools.jsx | 111 ++++++++++++++++-----------------
 1 file changed, 55 insertions(+), 56 deletions(-)

diff --git a/frontend/src/MikrotikTools.jsx b/frontend/src/MikrotikTools.jsx
index 55f063d..72b6234 100644
--- a/frontend/src/MikrotikTools.jsx
+++ b/frontend/src/MikrotikTools.jsx
@@ -304,65 +304,64 @@ 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>
-            </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>
-
-      {/* Параметры проверки + результаты */}
+      {/* Параметры проверки — сразу под выбором сервера, в стиле Tabler (card с meta + действия) */}
       <div className="row g-3">
         <div className="col-md-4">
           <div className="card">
-            <div className="card-header">
-              <h3 className="card-title mb-0">Параметры проверки</h3>
+            <div className="card-header d-flex flex-wrap align-items-center gap-2">
+              <div className="flex-grow-1 min-w-0">
+                <h3 className="card-title mb-0">Параметры проверки</h3>
+                <p className="text-muted small mb-0 mt-1">
+                  {serverId ? (
+                    <>Через сервер: <span className="fw-semibold">{currentServerLabel}</span></>
+                  ) : (
+                    'Выберите сервер выше, чтобы настроить gateway и цель.'
+                  )}
+                </p>
+              </div>
+              <div className="card-actions ms-auto d-flex flex-wrap align-items-center gap-1">
+                <ul className="nav nav-pills nav-pills-sm" 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 className="btn-list">
+                  <button
+                    type="button"
+                    className="btn btn-outline-secondary btn-sm"
+                    onClick={handleReset}
+                    disabled={running}
+                  >
+                    <IconRefresh size={14} className="me-1" />
+                    Сбросить
+                  </button>
+                  <button
+                    type="button"
+                    className="btn btn-primary btn-sm"
+                    onClick={handleRunCheck}
+                    disabled={running || loading || !serverId}
+                  >
+                    {running ? 'Выполнение…' : (mode === 'traceroute' ? 'Запустить трассировку' : 'Запустить ping')}
+                  </button>
+                </div>
+              </div>
             </div>
             <div className="card-body">
               {loading && !networkConfig ? (