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 (
+
+
+
+ {/* Левая часть: тип индикатора */}
+
+
+ {/* Центральная часть: информация */}
+
+ {/* Верхняя строка: флаг, название */}
+
+
+ {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 && (