refactor(alerts): consolidate tunnel alert settings into a single structure with enhanced UI controls
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m47s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m47s
This commit is contained in:
+239
-123
@@ -114,12 +114,9 @@ export default function SettingsPage() {
|
||||
const [alertHighHddEnabled, setAlertHighHddEnabled] = useState(true);
|
||||
const [alertHighHddThreshold, setAlertHighHddThreshold] = useState('90');
|
||||
const [alertHighHddDurationMinutes, setAlertHighHddDurationMinutes] = useState('10');
|
||||
const [alertTunnelHighPingEnabled, setAlertTunnelHighPingEnabled] = useState(false);
|
||||
const [alertTunnelHighPingThresholdMs, setAlertTunnelHighPingThresholdMs] = useState('0');
|
||||
const [alertTunnelLowSpeedEnabled, setAlertTunnelLowSpeedEnabled] = useState(false);
|
||||
const [alertTunnelLowSpeedMinDownload, setAlertTunnelLowSpeedMinDownload] = useState('0');
|
||||
const [alertTunnelLowSpeedMinUpload, setAlertTunnelLowSpeedMinUpload] = useState('0');
|
||||
const [serversList, setServersList] = useState([]);
|
||||
const [tunnelConnections, setTunnelConnections] = useState([]);
|
||||
const [tunnelThresholds, setTunnelThresholds] = useState([]);
|
||||
const [sidebarSearch, setSidebarSearch] = useState('');
|
||||
const [activeSection, setActiveSection] = useState(() => {
|
||||
const hash = (typeof location.hash === 'string' && location.hash.slice(1)) || '';
|
||||
@@ -234,9 +231,10 @@ export default function SettingsPage() {
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const [settingsRes, serversRes] = await Promise.all([
|
||||
const [settingsRes, serversRes, networkRes] = await Promise.all([
|
||||
api.get('/ui-settings'),
|
||||
api.get('/servers').catch(() => ({ data: [] })),
|
||||
api.get('/network-config').catch(() => ({ data: null })),
|
||||
]);
|
||||
const data = settingsRes?.data || {};
|
||||
setRawSettings(data);
|
||||
@@ -324,6 +322,37 @@ export default function SettingsPage() {
|
||||
}))
|
||||
: []
|
||||
);
|
||||
const serversData = Array.isArray(serversRes?.data) ? serversRes.data : [];
|
||||
setServersList(serversData);
|
||||
|
||||
// Построить список туннелей (как в NetworkMapDashboard / планировщике карты сети)
|
||||
const config = networkRes?.data || {};
|
||||
const tunnelInterfaces = Array.isArray(config.tunnelInterfaces) ? config.tunnelInterfaces : [];
|
||||
const getServer = (serverId) =>
|
||||
serversData.find(
|
||||
(s) => s.id === serverId || s.ip === serverId || s.dns === serverId
|
||||
);
|
||||
const tunnelConns = [];
|
||||
tunnelInterfaces.forEach((iface) => {
|
||||
if (!iface.serverId || !iface.serverId2) return;
|
||||
const s1 = getServer(iface.serverId);
|
||||
const s2 = getServer(iface.serverId2);
|
||||
if (!s1 || !s2 || s1.ip === s2.ip) return;
|
||||
const s1Key = s1.id || s1.dns || s1.ip;
|
||||
const s2Key = s2.id || s2.dns || s2.ip;
|
||||
if (!s1Key || !s2Key) return;
|
||||
tunnelConns.push({
|
||||
from: s1.ip,
|
||||
to: s2.ip,
|
||||
fromKey: s1Key,
|
||||
toKey: s2Key,
|
||||
interfaceName: iface.name || '',
|
||||
fromLabel: s1.name || s1.dns || s1.ip || s1.id || 'Сервер',
|
||||
toLabel: s2.name || s2.dns || s2.ip || s2.id || 'Сервер',
|
||||
});
|
||||
});
|
||||
setTunnelConnections(tunnelConns);
|
||||
|
||||
const a = data?.alertSettings || {};
|
||||
setAlertServerOffline(a.serverOffline?.enabled !== false);
|
||||
setAlertServerOfflineMinutes(
|
||||
@@ -356,23 +385,40 @@ export default function SettingsPage() {
|
||||
setAlertHighHddDurationMinutes(
|
||||
a.highHdd?.durationMinutes != null ? String(a.highHdd.durationMinutes) : '10'
|
||||
);
|
||||
setAlertTunnelHighPingEnabled(a.tunnelHighPing?.enabled === true);
|
||||
setAlertTunnelHighPingThresholdMs(
|
||||
a.tunnelHighPing?.thresholdMs != null ? String(a.tunnelHighPing.thresholdMs) : '0'
|
||||
);
|
||||
setAlertTunnelLowSpeedEnabled(a.tunnelLowSpeed?.enabled === true);
|
||||
setAlertTunnelLowSpeedMinDownload(
|
||||
a.tunnelLowSpeed?.minDownloadMbps != null
|
||||
? String(a.tunnelLowSpeed.minDownloadMbps)
|
||||
: '0'
|
||||
);
|
||||
setAlertTunnelLowSpeedMinUpload(
|
||||
a.tunnelLowSpeed?.minUploadMbps != null ? String(a.tunnelLowSpeed.minUploadMbps) : '0'
|
||||
|
||||
const rawTunnelThresholds = Array.isArray(a.tunnelThresholds) ? a.tunnelThresholds : [];
|
||||
setTunnelThresholds(
|
||||
rawTunnelThresholds
|
||||
.filter((t) => t && (t.fromKey || t.toKey))
|
||||
.map((t) => ({
|
||||
fromKey: String(t.fromKey || '').trim(),
|
||||
toKey: String(t.toKey || '').trim(),
|
||||
interfaceName: t.interfaceName != null ? String(t.interfaceName) : '',
|
||||
enabled: t.enabled !== false,
|
||||
maxPingMs:
|
||||
t.maxPingMs != null
|
||||
? String(t.maxPingMs)
|
||||
: t.thresholdMs != null
|
||||
? String(t.thresholdMs)
|
||||
: '',
|
||||
minDownloadMbps:
|
||||
t.minDownloadMbps != null
|
||||
? String(t.minDownloadMbps)
|
||||
: t.minDownMbps != null
|
||||
? String(t.minDownMbps)
|
||||
: '',
|
||||
minUploadMbps:
|
||||
t.minUploadMbps != null
|
||||
? String(t.minUploadMbps)
|
||||
: t.minUpMbps != null
|
||||
? String(t.minUpMbps)
|
||||
: '',
|
||||
}))
|
||||
);
|
||||
|
||||
const e =
|
||||
settingsRes?.headers?.etag || settingsRes?.headers?.ETag || '';
|
||||
setEtag(e ? String(e) : '');
|
||||
setServersList(Array.isArray(serversRes?.data) ? serversRes.data : []);
|
||||
} catch (e) {
|
||||
setError('Не удалось загрузить настройки');
|
||||
} finally {
|
||||
@@ -405,6 +451,46 @@ export default function SettingsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const tunnelKey = (fromKey, toKey, interfaceName) => {
|
||||
const a = String(fromKey || '');
|
||||
const b = String(toKey || '');
|
||||
const pair = [a, b].sort().join('__');
|
||||
return `${pair}::${interfaceName || ''}`;
|
||||
};
|
||||
|
||||
const findTunnelThreshold = (conn) => {
|
||||
const key = tunnelKey(conn.fromKey || conn.from, conn.toKey || conn.to, conn.interfaceName || '');
|
||||
return tunnelThresholds.find(
|
||||
(t) => tunnelKey(t.fromKey, t.toKey, t.interfaceName) === key
|
||||
);
|
||||
};
|
||||
|
||||
const upsertTunnelThreshold = (conn, patch) => {
|
||||
setTunnelThresholds((prev) => {
|
||||
const key = tunnelKey(conn.fromKey || conn.from, conn.toKey || conn.to, conn.interfaceName || '');
|
||||
const idx = prev.findIndex(
|
||||
(t) => tunnelKey(t.fromKey, t.toKey, t.interfaceName) === key
|
||||
);
|
||||
const base =
|
||||
idx >= 0
|
||||
? prev[idx]
|
||||
: {
|
||||
fromKey: String(conn.fromKey || conn.from || '').trim(),
|
||||
toKey: String(conn.toKey || conn.to || '').trim(),
|
||||
interfaceName: conn.interfaceName || '',
|
||||
enabled: true,
|
||||
maxPingMs: '',
|
||||
minDownloadMbps: '',
|
||||
minUploadMbps: '',
|
||||
};
|
||||
const nextItem = { ...base, ...patch };
|
||||
const next = [...prev];
|
||||
if (idx >= 0) next[idx] = nextItem;
|
||||
else next.push(nextItem);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const onSave = async () => {
|
||||
setError('');
|
||||
setSuccess('');
|
||||
@@ -483,7 +569,7 @@ export default function SettingsPage() {
|
||||
interfaceName: p.interfaceName,
|
||||
}))
|
||||
: [],
|
||||
alertSettings: {
|
||||
alertSettings: {
|
||||
serverOffline: {
|
||||
enabled: alertServerOffline,
|
||||
offlineMinutes: Math.max(
|
||||
@@ -531,24 +617,28 @@ export default function SettingsPage() {
|
||||
Math.min(1440, parseInt(alertHighHddDurationMinutes, 10) || 10)
|
||||
),
|
||||
},
|
||||
tunnelHighPing: {
|
||||
enabled: alertTunnelHighPingEnabled,
|
||||
thresholdMs: Math.max(
|
||||
1,
|
||||
Math.min(5000, parseInt(alertTunnelHighPingThresholdMs, 10) || 0)
|
||||
),
|
||||
},
|
||||
tunnelLowSpeed: {
|
||||
enabled: alertTunnelLowSpeedEnabled,
|
||||
minDownloadMbps: Math.max(
|
||||
0,
|
||||
Math.min(10000, parseInt(alertTunnelLowSpeedMinDownload, 10) || 0)
|
||||
),
|
||||
minUploadMbps: Math.max(
|
||||
0,
|
||||
Math.min(10000, parseInt(alertTunnelLowSpeedMinUpload, 10) || 0)
|
||||
),
|
||||
},
|
||||
tunnelThresholds: Array.isArray(tunnelThresholds)
|
||||
? tunnelThresholds
|
||||
.filter((t) => {
|
||||
const fromKey = String(t.fromKey || '').trim();
|
||||
const toKey = String(t.toKey || '').trim();
|
||||
if (!fromKey || !toKey) return false;
|
||||
if (t.enabled === false) return false;
|
||||
const maxPing = parseInt(t.maxPingMs, 10) || 0;
|
||||
const minDown = parseInt(t.minDownloadMbps, 10) || 0;
|
||||
const minUp = parseInt(t.minUploadMbps, 10) || 0;
|
||||
return maxPing > 0 || minDown > 0 || minUp > 0;
|
||||
})
|
||||
.map((t) => ({
|
||||
fromKey: String(t.fromKey || '').trim(),
|
||||
toKey: String(t.toKey || '').trim(),
|
||||
interfaceName: String(t.interfaceName || '').trim() || null,
|
||||
enabled: t.enabled !== false,
|
||||
maxPingMs: Math.max(0, parseInt(t.maxPingMs, 10) || 0),
|
||||
minDownloadMbps: Math.max(0, parseInt(t.minDownloadMbps, 10) || 0),
|
||||
minUploadMbps: Math.max(0, parseInt(t.minUploadMbps, 10) || 0),
|
||||
}))
|
||||
: [],
|
||||
},
|
||||
};
|
||||
const payload = { settings: mergedSettings, etag };
|
||||
@@ -1399,94 +1489,120 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Пинг по туннелям (карта сети) */}
|
||||
<div className="list-group-item d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-3 py-3">
|
||||
<div className="flex-grow-1 min-w-0">
|
||||
<div className="fw-semibold">Пинг по туннелям</div>
|
||||
{/* Туннели (карта сети): индивидуальные пороги */}
|
||||
<div className="list-group-item py-3">
|
||||
<div className="fw-semibold mb-1">Туннели (карта сети)</div>
|
||||
<div className="text-muted small mb-2">
|
||||
Для каждого туннеля можно задать собственные пороги по пингу и скорости. Используются данные
|
||||
с планировщика карты сети и раздела «Сетевые настройки».
|
||||
</div>
|
||||
{tunnelConnections.length === 0 && (
|
||||
<div className="text-muted small">
|
||||
Срабатывает, если средний пинг по туннелю на карте сети превышает указанный порог.
|
||||
Применяется ко всем туннелям из раздела «Сетевые настройки».
|
||||
Нет настроенных туннелей. Добавьте связи в разделе «Сетевые настройки».
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-wrap align-items-center gap-2">
|
||||
<div className="input-group input-group-sm" style={{ width: 110 }}>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
min={1}
|
||||
max={5000}
|
||||
value={alertTunnelHighPingThresholdMs}
|
||||
onChange={(e) => setAlertTunnelHighPingThresholdMs(e.target.value)}
|
||||
disabled={saving || !alertTunnelHighPingEnabled}
|
||||
/>
|
||||
<span className="input-group-text">ms</span>
|
||||
)}
|
||||
{tunnelConnections.length > 0 && (
|
||||
<div className="table-responsive">
|
||||
<table className="table table-sm table-transparent mb-0 align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: '32%' }}>Туннель</th>
|
||||
<th style={{ width: '16%' }}>Интерфейс</th>
|
||||
<th style={{ width: '16%' }}>Макс. пинг (ms)</th>
|
||||
<th style={{ width: '18%' }}>Мин. ↓ (Мбит/с)</th>
|
||||
<th style={{ width: '18%' }}>Мин. ↑ (Мбит/с)</th>
|
||||
<th style={{ width: '8%' }}>Вкл</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tunnelConnections.map((conn) => {
|
||||
const thr = findTunnelThreshold(conn) || {};
|
||||
const enabled = thr.enabled === undefined ? false : thr.enabled;
|
||||
const maxPingMs = thr.maxPingMs ?? '';
|
||||
const minDown = thr.minDownloadMbps ?? '';
|
||||
const minUp = thr.minUploadMbps ?? '';
|
||||
return (
|
||||
<tr key={`${conn.fromKey}-${conn.toKey}-${conn.interfaceName || ''}`}>
|
||||
<td>
|
||||
<div className="small">
|
||||
<span className="fw-semibold">
|
||||
{conn.fromLabel} ⇄ {conn.toLabel}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-muted small font-monospace">
|
||||
{conn.from} ⇄ {conn.to}
|
||||
</div>
|
||||
</td>
|
||||
<td className="small">
|
||||
{conn.interfaceName ? (
|
||||
<span className="font-monospace">{conn.interfaceName}</span>
|
||||
) : (
|
||||
<span className="text-muted">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm"
|
||||
min={0}
|
||||
max={5000}
|
||||
value={maxPingMs}
|
||||
onChange={(e) =>
|
||||
upsertTunnelThreshold(conn, { maxPingMs: e.target.value })
|
||||
}
|
||||
disabled={saving || !enabled}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm"
|
||||
min={0}
|
||||
max={10000}
|
||||
value={minDown}
|
||||
onChange={(e) =>
|
||||
upsertTunnelThreshold(conn, {
|
||||
minDownloadMbps: e.target.value,
|
||||
})
|
||||
}
|
||||
disabled={saving || !enabled}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm"
|
||||
min={0}
|
||||
max={10000}
|
||||
value={minUp}
|
||||
onChange={(e) =>
|
||||
upsertTunnelThreshold(conn, {
|
||||
minUploadMbps: e.target.value,
|
||||
})
|
||||
}
|
||||
disabled={saving || !enabled}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<div className="form-check form-switch mb-0 d-inline-flex">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
checked={enabled}
|
||||
onChange={(e) =>
|
||||
upsertTunnelThreshold(conn, { enabled: e.target.checked })
|
||||
}
|
||||
disabled={saving}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="form-check form-switch mb-0">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="alertTunnelHighPingEnabled"
|
||||
checked={alertTunnelHighPingEnabled}
|
||||
onChange={(e) => setAlertTunnelHighPingEnabled(e.target.checked)}
|
||||
disabled={saving}
|
||||
/>
|
||||
<label className="form-check-label small" htmlFor="alertTunnelHighPingEnabled">
|
||||
Вкл
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Скорость по туннелям (карта сети) */}
|
||||
<div className="list-group-item d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-3 py-3">
|
||||
<div className="flex-grow-1 min-w-0">
|
||||
<div className="fw-semibold">Скорость по туннелям</div>
|
||||
<div className="text-muted small">
|
||||
Срабатывает, если измеренная скорость по туннелю (download и/или upload) ниже указанных
|
||||
порогов. Используются последние результаты планировщика карты сети.
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-wrap align-items-center gap-2">
|
||||
<div className="input-group input-group-sm" style={{ width: 130 }}>
|
||||
<span className="input-group-text">↓</span>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
min={0}
|
||||
max={10000}
|
||||
value={alertTunnelLowSpeedMinDownload}
|
||||
onChange={(e) => setAlertTunnelLowSpeedMinDownload(e.target.value)}
|
||||
disabled={saving || !alertTunnelLowSpeedEnabled}
|
||||
/>
|
||||
<span className="input-group-text">Мбит/с</span>
|
||||
</div>
|
||||
<div className="input-group input-group-sm" style={{ width: 130 }}>
|
||||
<span className="input-group-text">↑</span>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
min={0}
|
||||
max={10000}
|
||||
value={alertTunnelLowSpeedMinUpload}
|
||||
onChange={(e) => setAlertTunnelLowSpeedMinUpload(e.target.value)}
|
||||
disabled={saving || !alertTunnelLowSpeedEnabled}
|
||||
/>
|
||||
<span className="input-group-text">Мбит/с</span>
|
||||
</div>
|
||||
<div className="form-check form-switch mb-0">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="alertTunnelLowSpeedEnabled"
|
||||
checked={alertTunnelLowSpeedEnabled}
|
||||
onChange={(e) => setAlertTunnelLowSpeedEnabled(e.target.checked)}
|
||||
disabled={saving}
|
||||
/>
|
||||
<label className="form-check-label small" htmlFor="alertTunnelLowSpeedEnabled">
|
||||
Вкл
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user