denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(MikrotikTools): enhance UI layout and styling for server and gateway selection, improving readability and user experience
Publish Fast Tabler Docker image / build-and-push-fast (push) Failing after 3m38s
Details

Browse Source
This commit is contained in:
denozord
2026-02-13 00:01:44 +07:00
parent c7f55dfee9
commit 34a52ed826
1 changed files with 91 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/MikrotikTools.jsx
+91 -163
View File
@@ -232,21 +232,18 @@ function MikrotikTools() {
meta={`Текущий сервер: ${currentServerLabel}`} meta={`Текущий сервер: ${currentServerLabel}`}
/> />
{/* Объединённый блок: сервер + шлюз + популярные цели */} {/* Сервер, шлюз, быстрые цели — один компактный блок */}
<div className="card mb-3"> <div className="card mb-2">
<div className="card-header"> <div className="card-header py-2">
<div className="row align-items-center g-2"> <div className="row align-items-center g-2">
<div className="col"> <div className="col">
<h3 className="card-title mb-1">Сервер и шлюз для проверки</h3> <h3 className="card-title mb-0">Сервер и шлюз</h3>
<div className="text-muted small"> <p className="text-muted small mb-0 mt-0">
Доступно Jumphost-серверов: {jumphostServers.length}.{' '} {jumphostServers.length} серверов · {serverId ? 'шлюз опционален' : 'выберите сервер'}
{serverId </p>
? 'Кликните по другой карточке, чтобы сменить сервер. Ниже — выбор шлюза и быстрые цели.'
: 'Выберите сервер, чтобы выполнять проверки через него.'}
</div>
</div> </div>
<div className="col-auto ms-auto d-print-none" style={{ minWidth: 260 }}> <div className="col-auto">
<div className="input-icon"> <div className="input-icon input-icon-sm">
<input <input
type="text" type="text"
className="form-control form-control-sm" className="form-control form-control-sm"
@@ -255,13 +252,13 @@ function MikrotikTools() {
onChange={(e) => setServerSearch(e.target.value)} onChange={(e) => setServerSearch(e.target.value)}
/> />
<span className="input-icon-addon"> <span className="input-icon-addon">
<IconSearch size={16} className="text-muted" /> <IconSearch size={14} className="text-muted" />
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="card-body"> <div className="card-body py-2">
{isInitialLoading ? ( {isInitialLoading ? (
<TableSkeleton rows={2} columns={2} /> <TableSkeleton rows={2} columns={2} />
) : jumphostServers.length === 0 ? ( ) : jumphostServers.length === 0 ? (
@@ -273,7 +270,7 @@ function MikrotikTools() {
По вашему запросу серверы не найдены. Попробуйте изменить фильтр поиска. По вашему запросу серверы не найдены. Попробуйте изменить фильтр поиска.
</div> </div>
) : ( ) : (
<div className="row row-cards g-2"> <div className="row row-cards g-1">
{visibleJumphostServers.map((s) => { {visibleJumphostServers.map((s) => {
const id = s.id; const id = s.id;
const isActive = id === serverId; const isActive = id === serverId;
@@ -287,21 +284,16 @@ function MikrotikTools() {
}`} }`}
onClick={() => setServerId(id)} onClick={() => setServerId(id)}
> >
<div className="card-body d-flex align-items-start gap-2"> <div className="card-body py-2 px-2 d-flex align-items-center gap-2">
<span className="avatar bg-primary-lt" title={s.country || ''}> <span className="avatar avatar-sm bg-primary-lt" title={s.country || ''}>
{flag || s.ip?.slice(0, 2) || '?'} {flag || s.ip?.slice(0, 2) || '?'}
</span> </span>
<div className="flex-grow-1 min-w-0"> <div className="flex-grow-1 min-w-0">
<div className="fw-bold text-truncate" title={s.dns || s.ip || id}> <div className="fw-semibold text-truncate small" title={s.dns || s.ip || id}>
{s.dns || s.ip || id} {s.dns || s.ip || id}
</div> </div>
{line && ( <div className="text-muted small text-truncate" title={line}>
<div className="text-muted small text-truncate" title={line}> {line || [s.country, s.provider].filter(Boolean).join(' · ') || '—'}
{line}
</div>
)}
<div className="text-muted small mt-1">
{[s.country, s.provider].filter(Boolean).join(' · ') || '—'}
</div> </div>
</div> </div>
</div> </div>
@@ -311,31 +303,34 @@ function MikrotikTools() {
})} })}
</div> </div>
)} )}
<div className="text-muted small mt-2"> <div className="d-flex flex-wrap align-items-center gap-2 mt-2">
Текущий сервер:&nbsp; <span className="badge bg-primary-lt text-primary">Сервер: {currentServerLabel}</span>
<span className="fw-semibold">{currentServerLabel}</span> {serverId && (
<span className="badge bg-azure-lt text-azure">
Шлюз: {gatewayRef || gatewayMeta?.ip || '—'}
</span>
)}
</div> </div>
{/* Шлюз (gateway) — только при выбранном сервере */} {/* Шлюз — только при выбранном сервере */}
{serverId && ( {serverId && (
<> <>
<hr className="my-3" /> <hr className="my-2" />
<h5 className="mb-2">Шлюз (gateway)</h5> <div className="d-flex align-items-center gap-2 mb-1">
<div className="text-muted small mb-2"> <span className="fw-semibold small">Шлюз</span>
{gatewaysForServer.length > 0 {gatewaysForServer.length === 0 && (
? 'Выберите шлюз для привязки проверки (опционально). Можно искать по IP или интерфейсу ниже.' <span className="text-muted small">нет настроенных</span>
: 'Нет настроенных шлюзов для этого сервера. Проверка пойдёт без привязки к gateway.'} )}
</div> </div>
{loading && !networkConfig ? ( {loading && !networkConfig ? (
<div className="text-muted small">Загрузка сетевых настроек…</div> <div className="text-muted small">Загрузка сетевых настроек…</div>
) : ( ) : (
<> <>
{gatewaysForServer.length > 0 && ( {gatewaysForServer.length > 0 && (
<div className="row row-cards g-2 mb-2"> <div className="row row-cards g-1 mb-2">
{gatewaysForServer.map((g) => { {gatewaysForServer.map((g) => {
const isSelected = gatewayRef === g.ip || gatewayRef === g.id; const isSelected = gatewayRef === g.ip || gatewayRef === g.id;
const flag = g.country ? countryToFlag(g.country) : ''; const flag = g.country ? countryToFlag(g.country) : '';
const subtitle = [g.country, g.provider].filter(Boolean).join(' · ');
return ( return (
<div className="col-12 col-sm-6 col-md-4 col-lg-3" key={g.id || g.ip}> <div className="col-12 col-sm-6 col-md-4 col-lg-3" key={g.id || g.ip}>
<div <div
@@ -352,20 +347,17 @@ function MikrotikTools() {
} }
}} }}
> >
<div className="card-body d-flex align-items-start gap-2"> <div className="card-body py-2 px-2 d-flex align-items-center gap-2">
<span className="avatar bg-primary-lt" title={g.country || ''}> <span className="avatar avatar-sm bg-primary-lt" title={g.country || ''}>
{flag || (g.ip ? g.ip.slice(0, 2) : '?')} {flag || (g.ip ? g.ip.slice(0, 2) : '?')}
</span> </span>
<div className="flex-grow-1 min-w-0"> <div className="flex-grow-1 min-w-0">
<div className="fw-bold text-truncate" title={g.ip || ''}> <div className="fw-semibold text-truncate small" title={g.ip || ''}>
{g.ip || '—'} {g.ip || '—'}
</div> </div>
{(g.description || g.ip) && ( <div className="text-muted small text-truncate">
<div className="text-muted small text-truncate" title={g.description || g.ip}> {g.description || [g.country, g.provider].filter(Boolean).join(' · ') || '—'}
{g.description || g.ip} </div>
</div>
)}
<div className="text-muted small mt-1">{subtitle || '—'}</div>
</div> </div>
</div> </div>
</div> </div>
@@ -380,44 +372,30 @@ function MikrotikTools() {
gateways={gateways} gateways={gateways}
interfaces={interfaces} interfaces={interfaces}
serverId={serverId || null} serverId={serverId || null}
placeholder="IP gateway или remote IP туннеля…" placeholder="IP gateway или интерфейс…"
onSelectMeta={handleSelectGatewayMeta} onSelectMeta={handleSelectGatewayMeta}
/> />
<div className="text-muted small mt-2 mb-0">
Текущий gateway:&nbsp;
<span className="fw-semibold">{gatewayRef || gatewayMeta?.ip || 'не выбран'}</span>
</div>
</> </>
)} )}
{/* Популярные цели — быстрый выбор таргета по логотипу */} {/* Быстрые цели — чипы */}
<hr className="my-3" /> <div className="d-flex flex-wrap align-items-center gap-1 mt-2">
<h5 className="mb-2">Популярные цели</h5> <span className="text-muted small me-1">Цель:</span>
<div className="text-muted small mb-2">
Клик по карточке подставит цель в поле «Домен или IP назначения».
</div>
<div className="row row-cards g-2">
{POPULAR_TARGETS.map(({ id: tid, name, target: tgt, Icon, color }) => { {POPULAR_TARGETS.map(({ id: tid, name, target: tgt, Icon, color }) => {
const isSelected = target === tgt; const isSelected = target === tgt;
const bgClass = color === 'red' ? 'bg-red-lt' : color === 'blue' ? 'bg-blue-lt' : 'bg-orange-lt'; 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'; const textClass = color === 'red' ? 'text-red' : color === 'blue' ? 'text-blue' : 'text-orange';
return ( return (
<div className="col-12 col-sm-6 col-md-4" key={tid}> <button
<div type="button"
className={`card card-sm h-100 cursor-pointer ${isSelected ? 'border-primary card-hover' : 'card-hover'}`} key={tid}
onClick={() => setTarget(tgt)} className={`btn btn-sm ${isSelected ? `${bgClass} ${textClass}` : 'btn-outline-secondary'}`}
> onClick={() => setTarget(tgt)}
<div className="card-body d-flex align-items-center gap-2"> title={tgt}
<span className={`avatar ${bgClass} ${textClass}`}> >
<Icon size={24} stroke={1.5} /> <Icon size={14} stroke={1.5} className="me-1" />
</span> {name}
<div className="flex-grow-1 min-w-0"> </button>
<div className="fw-bold text-truncate">{name}</div>
<div className="text-muted small text-truncate">{tgt}</div>
</div>
</div>
</div>
</div>
); );
})} })}
</div> </div>
@@ -426,14 +404,16 @@ function MikrotikTools() {
</div> </div>
</div> </div>
{/* Режим и кнопки запуска — только при выбранном сервере */} {/* Параметры + результаты */}
{serverId && ( <div className="row g-2">
<div className="card mb-3"> <div className="col-md-4">
<div className="card-body py-2"> <div className="card mb-2">
<div className="row align-items-center g-2"> <div className="card-header py-2 d-flex flex-wrap align-items-center gap-2">
<div className="col"> <h3 className="card-title mb-0">Параметры</h3>
<ul className="nav nav-pills" role="tablist"> {serverId && (
<li className="nav-item" role="presentation"> <>
<ul className="nav nav-pills nav-pills-sm mb-0" role="tablist">
<li className="nav-item">
<button <button
type="button" type="button"
className={`nav-link ${mode === 'traceroute' ? 'active' : ''}`} className={`nav-link ${mode === 'traceroute' ? 'active' : ''}`}
@@ -443,7 +423,7 @@ function MikrotikTools() {
Traceroute Traceroute
</button> </button>
</li> </li>
<li className="nav-item" role="presentation"> <li className="nav-item">
<button <button
type="button" type="button"
className={`nav-link ${mode === 'ping' ? 'active' : ''}`} className={`nav-link ${mode === 'ping' ? 'active' : ''}`}
@@ -454,53 +434,29 @@ function MikrotikTools() {
</button> </button>
</li> </li>
</ul> </ul>
</div> <div className="btn-list ms-auto">
<div className="col-auto ms-auto"> <button type="button" className="btn btn-sm btn-outline-secondary" onClick={handleReset} disabled={running}>
<div className="btn-list"> <IconRefresh size={14} className="me-1" />
<button
type="button"
className="btn btn-outline-secondary"
onClick={handleReset}
disabled={running}
>
<IconRefresh size={16} className="me-1" />
Сбросить Сбросить
</button> </button>
<button <button type="button" className="btn btn-sm btn-primary" onClick={handleRunCheck} disabled={running || loading}>
type="button" {running ? '…' : (mode === 'traceroute' ? 'Трассировка' : 'Ping')}
className="btn btn-primary"
onClick={handleRunCheck}
disabled={running || loading}
>
{running ? 'Выполнение…' : (mode === 'traceroute' ? 'Запустить трассировку' : 'Запустить ping')}
</button> </button>
</div> </div>
</div> </>
</div> )}
</div> </div>
</div> <div className="card-body py-2">
)}
{/* Параметры проверки + результаты */}
<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">
{loading && !networkConfig ? ( {loading && !networkConfig ? (
<div className="text-muted small">Загрузка сетевых настроек…</div> <div className="text-muted small">Загрузка…</div>
) : !serverId ? ( ) : !serverId ? (
<div className="text-muted small">Выберите сервер выше — шлюз и параметры появятся там.</div> <div className="text-muted small">Выберите сервер выше.</div>
) : ( ) : (
<> <div className="row g-2">
<div className="mb-3"> <div className="col-12">
<label className="form-label">Домен или IP назначения</label> <label className="form-label small mb-0">Домен или IP</label>
<div className="input-group input-group-flat"> <div className="input-group input-group-flat input-group-sm">
<span className="input-group-text"> <span className="input-group-text"><IconWorld size={14} className="text-muted" /></span>
<IconWorld size={16} className="text-muted" />
</span>
<input <input
type="text" type="text"
className="form-control" className="form-control"
@@ -509,53 +465,25 @@ function MikrotikTools() {
onChange={(e) => setTarget(e.target.value)} onChange={(e) => setTarget(e.target.value)}
/> />
{gatewayMeta?.ip && ( {gatewayMeta?.ip && (
<button <button type="button" className="btn btn-outline-secondary btn-sm" onClick={() => setTarget(gatewayMeta.ip)}>
type="button"
className="btn btn-outline-secondary"
onClick={() => setTarget(gatewayMeta.ip)}
>
IP gateway IP gateway
</button> </button>
)} )}
</div> </div>
<div className="form-text">
Можно трассировать как до внешнего домена, так и до IP gateway/туннеля.
</div>
</div> </div>
{mode === 'traceroute' && ( {mode === 'traceroute' && (
<div className="mb-3"> <div className="col-6 col-md-5">
<label className="form-label">Максимальное число хопов</label> <label className="form-label small mb-0">Макс. хопов</label>
<input <input type="number" className="form-control form-control-sm" min={1} max={64} value={maxHops} onChange={(e) => setMaxHops(e.target.value)} />
type="number"
className="form-control"
min={1}
max={64}
value={maxHops}
onChange={(e) => setMaxHops(e.target.value)}
/>
</div> </div>
)} )}
<div className="col-12">
<div className="mb-2"> <div className="form-check form-switch form-check-inline">
<label className="form-label">Формат адресов в результатах</label> <input className="form-check-input" type="checkbox" id="useDnsToggle" checked={useDns} onChange={(e) => setUseDns(e.target.checked)} />
<div className="form-check form-switch"> <label className="form-check-label small" htmlFor="useDnsToggle">{useDns ? 'DNS+IP' : 'Только IP'}</label>
<input
className="form-check-input"
type="checkbox"
id="useDnsToggle"
checked={useDns}
onChange={(e) => setUseDns(e.target.checked)}
/>
<label className="form-check-label" htmlFor="useDnsToggle">
{useDns ? 'DNS + IP (если доступны)' : 'Только IP адреса'}
</label>
</div>
<div className="form-text">
Для traceroute параметр также передаётся на MikroTik как <code>use-dns</code>.
</div> </div>
</div> </div>
</> </div>
)} )}
</div> </div>
</div> </div>
@@ -563,8 +491,8 @@ function MikrotikTools() {
<div className="col-md-8"> <div className="col-md-8">
{mode === 'ping' && ( {mode === 'ping' && (
<div className="card mb-3"> <div className="card mb-2">
<div className="card-header"> <div className="card-header py-2">
<h3 className="card-title mb-0">Результаты ping</h3> <h3 className="card-title mb-0">Результаты ping</h3>
</div> </div>
<div className="card-body p-0"> <div className="card-body p-0">
@@ -681,8 +609,8 @@ function MikrotikTools() {
)} )}
{mode === 'traceroute' && ( {mode === 'traceroute' && (
<div className="card"> <div className="card mb-2">
<div className="card-header"> <div className="card-header py-2">
<ul className="nav nav-tabs card-header-tabs" role="tablist"> <ul className="nav nav-tabs card-header-tabs" role="tablist">
<li className="nav-item" role="presentation"> <li className="nav-item" role="presentation">
<button <button