diff --git a/frontend/src/NetworkConfigManager.jsx b/frontend/src/NetworkConfigManager.jsx index e39d2df..0279b76 100644 --- a/frontend/src/NetworkConfigManager.jsx +++ b/frontend/src/NetworkConfigManager.jsx @@ -215,13 +215,14 @@ function NetworkConfigManager() { const allServerIds = new Set([ ...(config.gateways || []).map(g => g.serverId).filter(Boolean), ...(config.tunnelInterfaces || []).map(i => i.serverId).filter(Boolean), + ...(config.ipPools || []).map(p => p.serverId).filter(Boolean), ]); return Array.from(allServerIds).map(id => ({ id, label: getServerLabel(id), server: getServerInfo(id), })); - }, [config.gateways, config.tunnelInterfaces, servers]); + }, [config.gateways, config.tunnelInterfaces, config.ipPools, servers]); // === Фильтрация === const filteredGateways = useMemo(() => { @@ -289,17 +290,25 @@ function NetworkConfigManager() { const filteredPools = useMemo(() => { let result = [...(config.ipPools || [])]; + if (serverFilter) { + result = result.filter(p => p.serverId === serverFilter); + } + if (searchTerm) { const term = searchTerm.toLowerCase(); - result = result.filter(p => - p.name?.toLowerCase().includes(term) || - p.cidr?.toLowerCase().includes(term) || - p.description?.toLowerCase().includes(term) - ); + result = result.filter(p => { + const server = getServerInfo(p.serverId); + return ( + p.name?.toLowerCase().includes(term) || + p.cidr?.toLowerCase().includes(term) || + p.description?.toLowerCase().includes(term) || + getServerLabel(p.serverId).toLowerCase().includes(term) + ); + }); } return result; - }, [config.ipPools, searchTerm]); + }, [config.ipPools, serverFilter, searchTerm, servers]); // === Группировка по серверам === const gatewaysByServer = useMemo(() => { @@ -1170,7 +1179,9 @@ function NetworkConfigManager() {
{items.map(item => (
- {type === 'gateway' ? renderGatewayCard(item) : renderInterfaceCard(item, serverId)} + {type === 'gateway' ? renderGatewayCard(item) : + type === 'interface' ? renderInterfaceCard(item, serverId) : + type === 'pool' ? renderPoolCard(item) : null}
))}
@@ -1214,6 +1225,100 @@ function NetworkConfigManager() { return null; }; + // === Рендер карточки IP Pool === + const renderPoolCard = (pool) => { + const server = getServerInfo(pool.serverId); + const serverCountry = server?.country || ''; + + // Определяем цвет индикатора (зеленый для IP пулов) + const indicatorColor = 'green'; + const IndicatorIcon = IconDatabase; + + return ( +
+
+
+ {/* Левая часть: тип индикатора */} +
+
+
+ +
+
+ Pool +
+
+
+ + {/* Центральная часть: информация */} +
+ {/* Верхняя строка: флаг, название */} +
+
+ {serverCountry && ( + {countryToFlag(serverCountry)} + )} +
+ {pool.name || '—'} +
+
+
+ + {/* CIDR под названием */} + {pool.cidr && ( +
+ + {pool.cidr} + +
+ )} + + {/* Нижняя строка: DNS сервера */} +
+ {server && ( + + {server.dns || server.ip || pool.serverId} + + )} + {!server && pool.serverId && ( + + {pool.serverId} + + )} +
+
+ + {/* Правая часть: действия */} +
+ + +
+
+
+
+ ); + }; + // === Рендер карточки Gateway === const renderGatewayCard = (gateway) => { const server = getServerInfo(gateway.serverId); @@ -1578,7 +1683,7 @@ function NetworkConfigManager() { {/* Server filter */} - {(activeTab === 'gateways' || activeTab === 'interfaces') && uniqueServersInConfig.length > 0 && ( + {(activeTab === 'gateways' || activeTab === 'interfaces' || activeTab === 'pools') && uniqueServersInConfig.length > 0 && (