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

feat(alerts): enhance alert settings with customizable durations for server offline and resource usage notifications
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m59s
Details

Browse Source
This commit is contained in:
denozord
2026-02-24 01:04:29 +07:00
parent b35f787626
commit 2e02d550f6
2 changed files with 232 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/routes/alertsRoutes.js
+9 -7
View File
@@ -11,11 +11,11 @@ const { getUptimeCacheData } = require('./mikrotikConfigRoutes');
/** Значения по умолчанию для настроек оповещений. */
const DEFAULT_ALERT_SETTINGS = {
serverOffline: { enabled: true },
mikrotikUnreachable: { enabled: true },
highCpu: { enabled: true, thresholdPercent: 85 },
highRam: { enabled: true, thresholdPercent: 85 },
highHdd: { enabled: true, thresholdPercent: 90 },
serverOffline: { enabled: true, offlineMinutes: 5 },
mikrotikUnreachable: { enabled: true, durationMinutes: 5 },
highCpu: { enabled: true, thresholdPercent: 85, durationMinutes: 10 },
highRam: { enabled: true, thresholdPercent: 85, durationMinutes: 10 },
highHdd: { enabled: true, thresholdPercent: 90, durationMinutes: 10 },
};
function getAlertSettings(uiSettings) {
@@ -64,9 +64,11 @@ async function getAlerts(req, res) {
if (isRouter) {
const entry = uptimeResults[serverId];
offline = entry ? entry.ok === false : false;
const offlineMinutes = Math.max(1, Math.min(1440, Number(settings.serverOffline.offlineMinutes) || 5));
const offlineSinceMs = entry && entry.lastCheckTs ? (Date.now() - entry.lastCheckTs) : 0;
offline = entry && entry.ok === false && offlineSinceMs >= offlineMinutes * 60 * 1000;
description = offline
? `${name} недоступен (по проверке Uptime Monitor).`
? `${name} недоступен более ${offlineMinutes} мин (по проверке Uptime Monitor).`
: '';
} else {
const idx = nonRouterServers.findIndex(
frontend/src/SettingsPage.jsx
+223 -148
View File
@@ -102,13 +102,18 @@ export default function SettingsPage() {
const [uptimeMonitorSchedulerEnabled, setUptimeMonitorSchedulerEnabled] = useState(true);
const [uptimeMonitorSchedulerIntervalMinutes, setUptimeMonitorSchedulerIntervalMinutes] = useState('2');
const [alertServerOffline, setAlertServerOffline] = useState(true);
const [alertServerOfflineMinutes, setAlertServerOfflineMinutes] = useState('5');
const [alertMikrotikUnreachable, setAlertMikrotikUnreachable] = useState(true);
const [alertMikrotikUnreachableMinutes, setAlertMikrotikUnreachableMinutes] = useState('5');
const [alertHighCpuEnabled, setAlertHighCpuEnabled] = useState(true);
const [alertHighCpuThreshold, setAlertHighCpuThreshold] = useState('85');
const [alertHighCpuDurationMinutes, setAlertHighCpuDurationMinutes] = useState('10');
const [alertHighRamEnabled, setAlertHighRamEnabled] = useState(true);
const [alertHighRamThreshold, setAlertHighRamThreshold] = useState('85');
const [alertHighRamDurationMinutes, setAlertHighRamDurationMinutes] = useState('10');
const [alertHighHddEnabled, setAlertHighHddEnabled] = useState(true);
const [alertHighHddThreshold, setAlertHighHddThreshold] = useState('90');
const [alertHighHddDurationMinutes, setAlertHighHddDurationMinutes] = useState('10');
const [serversList, setServersList] = useState([]);
const [sidebarSearch, setSidebarSearch] = useState('');
const [activeSection, setActiveSection] = useState(() => {
@@ -316,13 +321,18 @@ export default function SettingsPage() {
);
const a = data?.alertSettings || {};
setAlertServerOffline(a.serverOffline?.enabled !== false);
setAlertServerOfflineMinutes(a.serverOffline?.offlineMinutes != null ? String(a.serverOffline.offlineMinutes) : '5');
setAlertMikrotikUnreachable(a.mikrotikUnreachable?.enabled !== false);
setAlertMikrotikUnreachableMinutes(a.mikrotikUnreachable?.durationMinutes != null ? String(a.mikrotikUnreachable.durationMinutes) : '5');
setAlertHighCpuEnabled(a.highCpu?.enabled !== false);
setAlertHighCpuThreshold(a.highCpu?.thresholdPercent != null ? String(a.highCpu.thresholdPercent) : '85');
setAlertHighCpuDurationMinutes(a.highCpu?.durationMinutes != null ? String(a.highCpu.durationMinutes) : '10');
setAlertHighRamEnabled(a.highRam?.enabled !== false);
setAlertHighRamThreshold(a.highRam?.thresholdPercent != null ? String(a.highRam.thresholdPercent) : '85');
setAlertHighRamDurationMinutes(a.highRam?.durationMinutes != null ? String(a.highRam.durationMinutes) : '10');
setAlertHighHddEnabled(a.highHdd?.enabled !== false);
setAlertHighHddThreshold(a.highHdd?.thresholdPercent != null ? String(a.highHdd.thresholdPercent) : '90');
setAlertHighHddDurationMinutes(a.highHdd?.durationMinutes != null ? String(a.highHdd.durationMinutes) : '10');
const e =
settingsRes?.headers?.etag || settingsRes?.headers?.ETag || '';
setEtag(e ? String(e) : '');
@@ -438,19 +448,28 @@ export default function SettingsPage() {
}))
: [],
alertSettings: {
serverOffline: { enabled: alertServerOffline },
mikrotikUnreachable: { enabled: alertMikrotikUnreachable },
serverOffline: {
enabled: alertServerOffline,
offlineMinutes: Math.max(1, Math.min(1440, parseInt(alertServerOfflineMinutes, 10) || 5)),
},
mikrotikUnreachable: {
enabled: alertMikrotikUnreachable,
durationMinutes: Math.max(1, Math.min(1440, parseInt(alertMikrotikUnreachableMinutes, 10) || 5)),
},
highCpu: {
enabled: alertHighCpuEnabled,
thresholdPercent: Math.max(1, Math.min(100, parseInt(alertHighCpuThreshold, 10) || 85)),
durationMinutes: Math.max(1, Math.min(1440, parseInt(alertHighCpuDurationMinutes, 10) || 10)),
},
highRam: {
enabled: alertHighRamEnabled,
thresholdPercent: Math.max(1, Math.min(100, parseInt(alertHighRamThreshold, 10) || 85)),
durationMinutes: Math.max(1, Math.min(1440, parseInt(alertHighRamDurationMinutes, 10) || 10)),
},
highHdd: {
enabled: alertHighHddEnabled,
thresholdPercent: Math.max(1, Math.min(100, parseInt(alertHighHddThreshold, 10) || 90)),
durationMinutes: Math.max(1, Math.min(1440, parseInt(alertHighHddDurationMinutes, 10) || 10)),
},
},
};
@@ -1088,160 +1107,216 @@ export default function SettingsPage() {
<>
<SectionHeading title="Настройки оповещений" icon={IconBell} />
<p className="text-muted mb-4">
Включите или отключите типы оповещений и задайте пороги. Оповещения отображаются на панели и в колокольчике в шапке.
Настройте пороги и длительность для каждого типа оповещений. Оповещения отображаются на панели и в колокольчике в шапке.
</p>
<div className="mb-4">
<h4 className="subheader mb-3">Статус и доступность</h4>
<p className="text-muted small mb-3">
Для <strong>jumphost/home</strong> используются те же правила, что и в Uptime Monitor: тип проверки (HTTP, internal-ping, external-ping) и кеш. Настройки — в разделе <a href="#uptime-monitor" onClick={(e) => { e.preventDefault(); goToSection('uptime-monitor'); }}>Uptime Monitor</a>. Для остальных серверов — проверка TCP (80/443).
</p>
<div className="form-check form-switch mb-3">
<input
className="form-check-input"
type="checkbox"
id="alertServerOffline"
checked={alertServerOffline}
onChange={(e) => setAlertServerOffline(e.target.checked)}
disabled={saving}
/>
<label className="form-check-label" htmlFor="alertServerOffline">
Сервер недоступен — оповещение при недоступности (по правилам Uptime Monitor для роутеров, TCP для остальных).
</label>
<div className="list-group list-group-flush">
{/* Статус: сервер недоступен */}
<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">Система не в сети более указанного времени. Для jumphost/home — правила <a href="#uptime-monitor" onClick={(e) => { e.preventDefault(); goToSection('uptime-monitor'); }}>Uptime Monitor</a>.</div>
</div>
<div className="d-flex flex-wrap align-items-center gap-2">
<div className="input-group input-group-sm" style={{ width: 100 }}>
<input
type="number"
className="form-control"
min={1}
max={1440}
value={alertServerOfflineMinutes}
onChange={(e) => setAlertServerOfflineMinutes(e.target.value)}
disabled={saving || !alertServerOffline}
/>
<span className="input-group-text">мин</span>
</div>
<div className="form-check form-switch mb-0">
<input
className="form-check-input"
type="checkbox"
id="alertServerOffline"
checked={alertServerOffline}
onChange={(e) => setAlertServerOffline(e.target.checked)}
disabled={saving}
/>
<label className="form-check-label small" htmlFor="alertServerOffline">Вкл</label>
</div>
</div>
</div>
<div className="form-check form-switch mb-3">
<input
className="form-check-input"
type="checkbox"
id="alertMikrotikUnreachable"
checked={alertMikrotikUnreachable}
onChange={(e) => setAlertMikrotikUnreachable(e.target.checked)}
disabled={saving}
/>
<label className="form-check-label" htmlFor="alertMikrotikUnreachable">
MikroTik недоступен — срабатывает при ошибке доступа к RouterOS (таймаут, неверный пароль и т.п.).
</label>
</div>
</div>
<div className="mb-4">
<h4 className="subheader mb-3">Ресурсы роутеров (MikroTik)</h4>
<div className="row g-3">
<div className="col-12 col-md-6">
<div className="card">
<div className="card-body">
<div className="d-flex align-items-center mb-2">
<span className="avatar avatar-sm me-2 bg-blue-lt text-blue">
<IconCpu size={18} />
</span>
<span className="fw-medium">Использование CPU</span>
</div>
<div className="form-check form-switch mb-2">
<input
className="form-check-input"
type="checkbox"
id="alertHighCpuEnabled"
checked={alertHighCpuEnabled}
onChange={(e) => setAlertHighCpuEnabled(e.target.checked)}
disabled={saving}
/>
<label className="form-check-label small" htmlFor="alertHighCpuEnabled">
Включить оповещение
</label>
</div>
<div className="input-group input-group-sm">
<span className="input-group-text">Порог</span>
<input
type="number"
className="form-control"
min={1}
max={100}
value={alertHighCpuThreshold}
onChange={(e) => setAlertHighCpuThreshold(e.target.value)}
disabled={saving || !alertHighCpuEnabled}
/>
<span className="input-group-text">%</span>
</div>
<div className="form-text small">Среднее превышает указанный %.</div>
</div>
{/* MikroTik недоступен */}
<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">MikroTik недоступен</div>
<div className="text-muted small">Ошибка доступа к RouterOS (таймаут, неверный пароль) в течение указанного времени.</div>
</div>
<div className="d-flex flex-wrap align-items-center gap-2">
<div className="input-group input-group-sm" style={{ width: 100 }}>
<input
type="number"
className="form-control"
min={1}
max={1440}
value={alertMikrotikUnreachableMinutes}
onChange={(e) => setAlertMikrotikUnreachableMinutes(e.target.value)}
disabled={saving || !alertMikrotikUnreachable}
/>
<span className="input-group-text">мин</span>
</div>
<div className="form-check form-switch mb-0">
<input
className="form-check-input"
type="checkbox"
id="alertMikrotikUnreachable"
checked={alertMikrotikUnreachable}
onChange={(e) => setAlertMikrotikUnreachable(e.target.checked)}
disabled={saving}
/>
<label className="form-check-label small" htmlFor="alertMikrotikUnreachable">Вкл</label>
</div>
</div>
<div className="col-12 col-md-6">
<div className="card">
<div className="card-body">
<div className="d-flex align-items-center mb-2">
<span className="avatar avatar-sm me-2 bg-green-lt text-green">
<IconDeviceDesktop size={18} />
</span>
<span className="fw-medium">Использование памяти</span>
</div>
<div className="form-check form-switch mb-2">
<input
className="form-check-input"
type="checkbox"
id="alertHighRamEnabled"
checked={alertHighRamEnabled}
onChange={(e) => setAlertHighRamEnabled(e.target.checked)}
disabled={saving}
/>
<label className="form-check-label small" htmlFor="alertHighRamEnabled">
Включить оповещение
</label>
</div>
<div className="input-group input-group-sm">
<span className="input-group-text">Порог</span>
<input
type="number"
className="form-control"
min={1}
max={100}
value={alertHighRamThreshold}
onChange={(e) => setAlertHighRamThreshold(e.target.value)}
disabled={saving || !alertHighRamEnabled}
/>
<span className="input-group-text">%</span>
</div>
<div className="form-text small">Среднее превышает указанный %.</div>
</div>
</div>
{/* Использование CPU */}
<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 d-flex align-items-center gap-2">
<IconCpu size={18} className="text-blue" />
Использование CPU
</div>
<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: 80 }}>
<input
type="number"
className="form-control"
min={1}
max={100}
value={alertHighCpuThreshold}
onChange={(e) => setAlertHighCpuThreshold(e.target.value)}
disabled={saving || !alertHighCpuEnabled}
/>
<span className="input-group-text">%</span>
</div>
<div className="input-group input-group-sm" style={{ width: 100 }}>
<input
type="number"
className="form-control"
min={1}
max={1440}
value={alertHighCpuDurationMinutes}
onChange={(e) => setAlertHighCpuDurationMinutes(e.target.value)}
disabled={saving || !alertHighCpuEnabled}
/>
<span className="input-group-text">мин</span>
</div>
<div className="form-check form-switch mb-0">
<input
className="form-check-input"
type="checkbox"
id="alertHighCpuEnabled"
checked={alertHighCpuEnabled}
onChange={(e) => setAlertHighCpuEnabled(e.target.checked)}
disabled={saving}
/>
<label className="form-check-label small" htmlFor="alertHighCpuEnabled">Вкл</label>
</div>
</div>
<div className="col-12 col-md-6">
<div className="card">
<div className="card-body">
<div className="d-flex align-items-center mb-2">
<span className="avatar avatar-sm me-2 bg-orange-lt text-orange">
<IconDatabase size={18} />
</span>
<span className="fw-medium">Использование диска</span>
</div>
<div className="form-check form-switch mb-2">
<input
className="form-check-input"
type="checkbox"
id="alertHighHddEnabled"
checked={alertHighHddEnabled}
onChange={(e) => setAlertHighHddEnabled(e.target.checked)}
disabled={saving}
/>
<label className="form-check-label small" htmlFor="alertHighHddEnabled">
Включить оповещение
</label>
</div>
<div className="input-group input-group-sm">
<span className="input-group-text">Порог</span>
<input
type="number"
className="form-control"
min={1}
max={100}
value={alertHighHddThreshold}
onChange={(e) => setAlertHighHddThreshold(e.target.value)}
disabled={saving || !alertHighHddEnabled}
/>
<span className="input-group-text">%</span>
</div>
<div className="form-text small">Среднее превышает указанный %.</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 d-flex align-items-center gap-2">
<IconDeviceDesktop size={18} className="text-green" />
Использование памяти
</div>
<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: 80 }}>
<input
type="number"
className="form-control"
min={1}
max={100}
value={alertHighRamThreshold}
onChange={(e) => setAlertHighRamThreshold(e.target.value)}
disabled={saving || !alertHighRamEnabled}
/>
<span className="input-group-text">%</span>
</div>
<div className="input-group input-group-sm" style={{ width: 100 }}>
<input
type="number"
className="form-control"
min={1}
max={1440}
value={alertHighRamDurationMinutes}
onChange={(e) => setAlertHighRamDurationMinutes(e.target.value)}
disabled={saving || !alertHighRamEnabled}
/>
<span className="input-group-text">мин</span>
</div>
<div className="form-check form-switch mb-0">
<input
className="form-check-input"
type="checkbox"
id="alertHighRamEnabled"
checked={alertHighRamEnabled}
onChange={(e) => setAlertHighRamEnabled(e.target.checked)}
disabled={saving}
/>
<label className="form-check-label small" htmlFor="alertHighRamEnabled">Вкл</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 d-flex align-items-center gap-2">
<IconDatabase size={18} className="text-orange" />
Использование диска
</div>
<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: 80 }}>
<input
type="number"
className="form-control"
min={1}
max={100}
value={alertHighHddThreshold}
onChange={(e) => setAlertHighHddThreshold(e.target.value)}
disabled={saving || !alertHighHddEnabled}
/>
<span className="input-group-text">%</span>
</div>
<div className="input-group input-group-sm" style={{ width: 100 }}>
<input
type="number"
className="form-control"
min={1}
max={1440}
value={alertHighHddDurationMinutes}
onChange={(e) => setAlertHighHddDurationMinutes(e.target.value)}
disabled={saving || !alertHighHddEnabled}
/>
<span className="input-group-text">мин</span>
</div>
<div className="form-check form-switch mb-0">
<input
className="form-check-input"
type="checkbox"
id="alertHighHddEnabled"
checked={alertHighHddEnabled}
onChange={(e) => setAlertHighHddEnabled(e.target.checked)}
disabled={saving}
/>
<label className="form-check-label small" htmlFor="alertHighHddEnabled">Вкл</label>
</div>
</div>
</div>