refactor(MikrotikTools): streamline parameters section layout and button actions for traceroute and ping, enhancing user interaction
Publish Fast Tabler Docker image / build-and-push-fast (push) Failing after 3m2s
Publish Fast Tabler Docker image / build-and-push-fast (push) Failing after 3m2s
This commit is contained in:
@@ -304,12 +304,23 @@ function MikrotikTools() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Горизонтальная панель: режим (Traceroute/Ping) + основное действие — по образцу Tabler "page-header" с btn-list */}
|
{/* Параметры проверки — сразу под выбором сервера, в стиле Tabler (card с meta + действия) */}
|
||||||
<div className="card mb-3">
|
<div className="row g-3">
|
||||||
<div className="card-body py-2">
|
<div className="col-md-4">
|
||||||
<div className="row align-items-center g-2">
|
<div className="card">
|
||||||
<div className="col">
|
<div className="card-header d-flex flex-wrap align-items-center gap-2">
|
||||||
<ul className="nav nav-pills" role="tablist">
|
<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">
|
<li className="nav-item" role="presentation">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -331,39 +342,27 @@ function MikrotikTools() {
|
|||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
<div className="col-auto ms-auto">
|
|
||||||
<div className="btn-list">
|
<div className="btn-list">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-outline-secondary"
|
className="btn btn-outline-secondary btn-sm"
|
||||||
onClick={handleReset}
|
onClick={handleReset}
|
||||||
disabled={running}
|
disabled={running}
|
||||||
>
|
>
|
||||||
<IconRefresh size={16} className="me-1" />
|
<IconRefresh size={14} className="me-1" />
|
||||||
Сбросить
|
Сбросить
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-primary"
|
className="btn btn-primary btn-sm"
|
||||||
onClick={handleRunCheck}
|
onClick={handleRunCheck}
|
||||||
disabled={running || loading}
|
disabled={running || loading || !serverId}
|
||||||
>
|
>
|
||||||
{running ? 'Выполнение…' : (mode === 'traceroute' ? 'Запустить трассировку' : 'Запустить ping')}
|
{running ? 'Выполнение…' : (mode === 'traceroute' ? 'Запустить трассировку' : 'Запустить ping')}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Параметры проверки + результаты */}
|
|
||||||
<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>
|
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
{loading && !networkConfig ? (
|
{loading && !networkConfig ? (
|
||||||
<div className="text-muted small">Загрузка сетевых настроек…</div>
|
<div className="text-muted small">Загрузка сетевых настроек…</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user