feat: Add WebSocket and background update functionality to ASNs, Domains, and IPRanges managers; integrate WsUpdateModal for real-time updates
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 5m33s

This commit is contained in:
2025-08-12 22:33:57 +07:00
parent 79038a3981
commit 459b02f756
6 changed files with 155 additions and 27 deletions
+20
View File
@@ -22,6 +22,7 @@ import LockBanner from './components/LockBanner.jsx';
import TableSkeleton from './components/TableSkeleton.jsx';
import S3MetaBar from './components/S3MetaBar.jsx';
import PageHeaderActions from './components/PageHeaderActions.jsx';
import WsUpdateModal from './components/WsUpdateModal.jsx';
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
import HistoryModal from './components/HistoryModal.jsx';
@@ -203,6 +204,7 @@ function ASNsNewManager() {
const [diff, setDiff] = useState({ added: [], removed: [], changed: [] });
const [confirmSaveOpen, setConfirmSaveOpen] = useState(false);
const [historyOpen, setHistoryOpen] = useState(false);
const [wsOpen, setWsOpen] = useState(false);
const handlePreviewDiff = () => {
const valid = items.filter(i => isValidAsn(i.asn) && isValidCommunity(i.community))
@@ -409,6 +411,19 @@ function ASNsNewManager() {
onSave={handleSaveChanges}
disableSave={loading}
onHistory={() => setHistoryOpen(true)}
onOnlineUpdate={() => setWsOpen(true)}
onBackgroundUpdate={async () => {
try {
const res = await fetch('http://77.232.38.173:8080/api/update_bgp/background?api_key=denozord2502', { method: 'POST' });
const data = await res.json().catch(() => ({}));
if (!res.ok || data.ok === false) {
throw new Error(data?.message || `HTTP ${res.status}`);
}
window.notify?.success('Фоновое обновление запущено', data);
} catch (e) {
window.notify?.error('Не удалось запустить фоновое обновление', String(e));
}
}}
/>
</div>
</div>
@@ -671,6 +686,11 @@ function ASNsNewManager() {
onClose={() => setHistoryOpen(false)}
onRolledBack={() => fetchItems()}
/>
<WsUpdateModal
show={wsOpen}
url={'ws://77.232.38.173:8080/ws/update_bgp?api_key=denozord2502'}
onClose={() => setWsOpen(false)}
/>
{/* datalist больше не нужен, т.к. используем кастомный автокомплит */}
</>
);
+6 -26
View File
@@ -57,7 +57,7 @@ function MetricCard({ title, value, icon: Icon, color, description }) {
}
function Dashboard() {
const [globalQuery, setGlobalQuery] = useState('');
// Глобальный поиск удалён по требованию UX
const [stats, setStats] = useState({
domainsCount: null,
ipRangesCount: null,
@@ -170,19 +170,7 @@ function Dashboard() {
return (
<div>
{/* Глобальный поиск */}
<div className="card mb-3">
<div className="card-body d-flex align-items-center">
<span className="input-icon-addon me-2"><IconSearch size={18} /></span>
<input
type="text"
className="form-control"
placeholder="Глобальный поиск по доменам, ASN, IP, серверам..."
value={globalQuery}
onChange={(e) => setGlobalQuery(e.target.value)}
/>
</div>
</div>
{/* Глобальный поиск удалён */}
{/* Заголовок страницы */}
<div className="page-header d-print-none mb-4">
<div className="row align-items-center">
@@ -204,9 +192,7 @@ function Dashboard() {
<StatCard
icon={IconWorld}
color="blue"
value={loading ? '...' : (globalQuery
? raw.domains.filter(d => `${d.domain} ${d.community || d.type || ''}`.toLowerCase().includes(globalQuery.toLowerCase())).length
: (stats.domainsCount ?? '—'))}
value={loading ? '...' : (stats.domainsCount ?? '—')}
title="Доменов"
subtitle="Всего доменов в системе"
to="/domains"
@@ -216,9 +202,7 @@ function Dashboard() {
<StatCard
icon={IconNetwork}
color="green"
value={loading ? '...' : (globalQuery
? raw.ipRanges.filter(x => `${x.ipRange} ${x.community || ''}`.toLowerCase().includes(globalQuery.toLowerCase())).length
: (stats.ipRangesCount ?? '—'))}
value={loading ? '...' : (stats.ipRangesCount ?? '—')}
title="IP-диапазонов"
subtitle="Всего IP диапазонов"
to="/ip-ranges"
@@ -228,9 +212,7 @@ function Dashboard() {
<StatCard
icon={IconNetwork}
color="purple"
value={loading ? '...' : (globalQuery
? raw.asns.filter(a => `${a.domain || a.asn} ${a.type || a.community || ''}`.toLowerCase().includes(globalQuery.toLowerCase())).length
: (stats.asnsCount ?? '—'))}
value={loading ? '...' : (stats.asnsCount ?? '—')}
title="AS"
subtitle="Всего Autonomous Systems"
to="/asns"
@@ -240,9 +222,7 @@ function Dashboard() {
<StatCard
icon={IconServer}
color="orange"
value={loading ? '...' : (globalQuery
? raw.servers.filter(s => `${s.ip} ${s.dns} ${s.country} ${s.provider}`.toLowerCase().includes(globalQuery.toLowerCase())).length
: (stats.serversCount ?? '—'))}
value={loading ? '...' : (stats.serversCount ?? '—')}
title="Серверов"
subtitle="Всего серверов"
to="/servers"
+20
View File
@@ -22,6 +22,7 @@ import LockBanner from './components/LockBanner.jsx';
import TableSkeleton from './components/TableSkeleton.jsx';
import S3MetaBar from './components/S3MetaBar.jsx';
import PageHeaderActions from './components/PageHeaderActions.jsx';
import WsUpdateModal from './components/WsUpdateModal.jsx';
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
import HistoryModal from './components/HistoryModal.jsx';
@@ -207,6 +208,7 @@ function DomainsNewManager() {
const [diff, setDiff] = useState({ added: [], removed: [], changed: [] });
const [confirmSaveOpen, setConfirmSaveOpen] = useState(false);
const [historyOpen, setHistoryOpen] = useState(false);
const [wsOpen, setWsOpen] = useState(false);
const handlePreviewDiff = () => {
const valid = items.filter(i => isValidDomain(i.domain) && isValidCommunity(i.community))
@@ -416,6 +418,19 @@ function DomainsNewManager() {
onSave={handleSaveChanges}
disableSave={loading}
onHistory={() => setHistoryOpen(true)}
onOnlineUpdate={() => setWsOpen(true)}
onBackgroundUpdate={async () => {
try {
const res = await fetch('http://77.232.38.173:8080/api/update_bgp/background?api_key=denozord2502', { method: 'POST' });
const data = await res.json().catch(() => ({}));
if (!res.ok || data.ok === false) {
throw new Error(data?.message || `HTTP ${res.status}`);
}
window.notify?.success('Фоновое обновление запущено', data);
} catch (e) {
window.notify?.error('Не удалось запустить фоновое обновление', String(e));
}
}}
/>
</div>
</div>
@@ -680,6 +695,11 @@ function DomainsNewManager() {
onClose={() => setHistoryOpen(false)}
onRolledBack={() => fetchItems()}
/>
<WsUpdateModal
show={wsOpen}
url={'ws://77.232.38.173:8080/ws/update_bgp?api_key=denozord2502'}
onClose={() => setWsOpen(false)}
/>
{/* Diff Modal */}
{showDiff && (
<div className="modal modal-blur fade show" style={{display: 'block'}} tabIndex="-1">
+20
View File
@@ -22,6 +22,7 @@ import LockBanner from './components/LockBanner.jsx';
import TableSkeleton from './components/TableSkeleton.jsx';
import S3MetaBar from './components/S3MetaBar.jsx';
import PageHeaderActions from './components/PageHeaderActions.jsx';
import WsUpdateModal from './components/WsUpdateModal.jsx';
import ConfirmDiffModal from './components/ConfirmDiffModal.jsx';
import HistoryModal from './components/HistoryModal.jsx';
@@ -218,6 +219,7 @@ function IPRangesManager() {
const [diff, setDiff] = useState({ added: [], removed: [], changed: [] });
const [confirmSaveOpen, setConfirmSaveOpen] = useState(false);
const [historyOpen, setHistoryOpen] = useState(false);
const [wsOpen, setWsOpen] = useState(false);
const handlePreviewDiff = () => {
const valid = items.filter(i => isValidCidr(i.ipRange) && isValidCommunity(i.community))
@@ -425,6 +427,19 @@ function IPRangesManager() {
onSave={handleSaveChanges}
disableSave={loading}
onHistory={() => setHistoryOpen(true)}
onOnlineUpdate={() => setWsOpen(true)}
onBackgroundUpdate={async () => {
try {
const res = await fetch('http://77.232.38.173:8080/api/update_bgp/background?api_key=denozord2502', { method: 'POST' });
const data = await res.json().catch(() => ({}));
if (!res.ok || data.ok === false) {
throw new Error(data?.message || `HTTP ${res.status}`);
}
window.notify?.success('Фоновое обновление запущено', data);
} catch (e) {
window.notify?.error('Не удалось запустить фоновое обновление', String(e));
}
}}
/>
</div>
</div>
@@ -692,6 +707,11 @@ function IPRangesManager() {
onClose={() => setHistoryOpen(false)}
onRolledBack={() => fetchItems()}
/>
<WsUpdateModal
show={wsOpen}
url={'ws://77.232.38.173:8080/ws/update_bgp?api_key=denozord2502'}
onClose={() => setWsOpen(false)}
/>
{/* Diff Modal */}
{showDiff && (
<div className="modal modal-blur fade show" style={{display: 'block'}} tabIndex="-1">
+15 -1
View File
@@ -3,7 +3,9 @@ import {
IconRefresh,
IconUpload,
IconDownload,
IconDeviceFloppy
IconDeviceFloppy,
IconPlayerPlay,
IconBolt
} from '@tabler/icons-react';
function PageHeaderActions({
@@ -20,9 +22,21 @@ function PageHeaderActions({
onSave,
disableSave = false,
onHistory,
onOnlineUpdate,
onBackgroundUpdate,
}) {
return (
<div className="btn-list">
{onOnlineUpdate && (
<button className="btn btn-outline-warning" onClick={onOnlineUpdate} title="Online-обновление BGP (WebSocket)">
<IconBolt className="me-1" /> Online-обновление
</button>
)}
{onBackgroundUpdate && (
<button className="btn btn-outline-success" onClick={onBackgroundUpdate} title="Фоновое обновление BGP (POST)">
<IconPlayerPlay className="me-1" /> Фоновое обновление
</button>
)}
{onPreview && (
<button className="btn btn-outline-secondary" onClick={onPreview} disabled={disablePreview} title="Предпросмотр изменений">
<IconEye className="me-1" /> Предпросмотр
+74
View File
@@ -0,0 +1,74 @@
import { useEffect, useRef, useState } from 'react';
import { IconX, IconPlayerPlay, IconPlugConnected } from '@tabler/icons-react';
function WsUpdateModal({ show, url, onClose }) {
const [messages, setMessages] = useState([]);
const [status, setStatus] = useState('connecting'); // connecting | open | closed | error
const wsRef = useRef(null);
const bottomRef = useRef(null);
useEffect(() => {
if (!show) return;
try {
const ws = new WebSocket(url);
wsRef.current = ws;
setStatus('connecting');
ws.onopen = () => setStatus('open');
ws.onmessage = (evt) => {
const text = typeof evt.data === 'string' ? evt.data : '[binary]';
setMessages((prev) => [...prev, text]);
};
ws.onerror = () => setStatus('error');
ws.onclose = () => setStatus('closed');
} catch (e) {
setStatus('error');
}
return () => {
try { wsRef.current?.close(); } catch {}
wsRef.current = null;
};
}, [show, url]);
useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages, show]);
if (!show) return null;
return (
<div className="modal show d-block" tabIndex="-1" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
<div className="modal-dialog modal-lg">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title d-flex align-items-center">
<IconPlugConnected className="me-2" /> Online-обновление BGP
<span className={`badge ms-2 ${status === 'open' ? 'bg-green-lt text-green' : status === 'connecting' ? 'bg-orange-lt text-orange' : status === 'error' ? 'bg-red-lt text-red' : 'bg-secondary-lt text-secondary'}`}>{status}</span>
</h5>
<button type="button" className="btn btn-close" onClick={onClose}><IconX size={16} /></button>
</div>
<div className="modal-body">
<div className="card">
<div className="card-body" style={{ maxHeight: 360, overflowY: 'auto', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace', fontSize: '0.875rem' }}>
{messages.length === 0 ? (
<div className="text-muted">Ожидание сообщений от сервера...</div>
) : (
messages.map((m, i) => (
<div key={i} className="text-break"><span className="text-muted">$</span> {m}</div>
))
)}
<div ref={bottomRef} />
</div>
</div>
</div>
<div className="modal-footer">
<button className="btn btn-secondary" onClick={onClose}><IconX className="me-1" /> Закрыть</button>
</div>
</div>
</div>
</div>
);
}
export default WsUpdateModal;