From 48419d577a450b29c7404f063edf74faa6bf19e7 Mon Sep 17 00:00:00 2001 From: shats Date: Thu, 22 Jan 2026 10:32:54 +0700 Subject: [PATCH] refactor(NetworkConfigManager): remove provider and country from gateway configuration; integrate server details for improved filtering and UI display --- example/s3/network-config.json | 10 -- frontend/src/NetworkConfigManager.jsx | 218 +++++++++++++++----------- 2 files changed, 123 insertions(+), 105 deletions(-) diff --git a/example/s3/network-config.json b/example/s3/network-config.json index 4d84ad6..13c56c3 100644 --- a/example/s3/network-config.json +++ b/example/s3/network-config.json @@ -4,8 +4,6 @@ "id": "gw-cloudflare-swe", "name": "SWE-IHOR", "ip": "94.142.140.1", - "provider": "cloudflare", - "country": "SWE", "description": "Cloudflare Sweden - основной выход", "serverId": "SWE-HIPHOST" }, @@ -13,8 +11,6 @@ "id": "gw-bunny-swe", "name": "SWE-BUNNY", "ip": "94.142.140.2", - "provider": "bunny", - "country": "SWE", "description": "Bunny CDN Sweden", "serverId": "SWE-HIPHOST" }, @@ -22,8 +18,6 @@ "id": "gw-telegram-nl", "name": "TG-PROXY-1", "ip": "149.154.167.50", - "provider": "telegram", - "country": "NL", "description": "Telegram DC2", "serverId": "NL-AMSTERDAM" }, @@ -31,8 +25,6 @@ "id": "gw-hetzner-de", "name": "DE-HETZNER", "ip": "195.100.30.21", - "provider": "hetzner", - "country": "DE", "description": "Hetzner Frankfurt", "serverId": "DE-FRANKFURT" }, @@ -40,8 +32,6 @@ "id": "gw-fastly-us", "name": "US-FASTLY", "ip": "151.101.1.1", - "provider": "fastly", - "country": "US", "description": "Fastly US East", "serverId": "US-NEWYORK" } diff --git a/frontend/src/NetworkConfigManager.jsx b/frontend/src/NetworkConfigManager.jsx index aacdcc7..d7cf6c7 100644 --- a/frontend/src/NetworkConfigManager.jsx +++ b/frontend/src/NetworkConfigManager.jsx @@ -55,8 +55,6 @@ const getEmptyGateway = () => ({ id: `gw-${Date.now()}-${Math.random().toString(16).slice(2, 6)}`, name: '', ip: '', - provider: 'custom', - country: '', description: '', serverId: '', }); @@ -198,7 +196,11 @@ function NetworkConfigManager() { let result = [...(config.gateways || [])]; if (providerFilter) { - result = result.filter(g => g.provider === providerFilter); + // Фильтруем по провайдеру сервера + result = result.filter(g => { + const server = getServerInfo(g.serverId); + return server?.provider === providerFilter; + }); } if (serverFilter) { @@ -207,13 +209,17 @@ function NetworkConfigManager() { if (searchTerm) { const term = searchTerm.toLowerCase(); - result = result.filter(g => - g.name?.toLowerCase().includes(term) || - g.ip?.toLowerCase().includes(term) || - g.country?.toLowerCase().includes(term) || - g.description?.toLowerCase().includes(term) || - getServerLabel(g.serverId).toLowerCase().includes(term) - ); + result = result.filter(g => { + const server = getServerInfo(g.serverId); + return ( + g.name?.toLowerCase().includes(term) || + g.ip?.toLowerCase().includes(term) || + server?.country?.toLowerCase().includes(term) || + server?.provider?.toLowerCase().includes(term) || + g.description?.toLowerCase().includes(term) || + getServerLabel(g.serverId).toLowerCase().includes(term) + ); + }); } return result; @@ -442,8 +448,19 @@ function NetworkConfigManager() { // === Получение цвета провайдера === const getProviderColor = (provider) => { - const p = GATEWAY_PROVIDERS.find(gp => gp.value === provider); - return p?.color || 'secondary'; + if (!provider) return 'secondary'; + // Ищем точное совпадение + const exact = GATEWAY_PROVIDERS.find(gp => + gp.value === provider || + gp.label.toLowerCase() === provider.toLowerCase() + ); + if (exact) return exact.color; + // Проверяем частичное совпадение + const partial = GATEWAY_PROVIDERS.find(gp => + provider.toLowerCase().includes(gp.value.toLowerCase()) || + provider.toLowerCase().includes(gp.label.toLowerCase()) + ); + return partial?.color || 'secondary'; }; const getInterfaceTypeColor = (type) => { @@ -501,66 +518,72 @@ function NetworkConfigManager() { }; // === Рендер карточки Gateway === - const renderGatewayCard = (gateway) => ( -
-
-
-
- - - -
-
{gateway.name || '—'}
-
- {GATEWAY_PROVIDERS.find(p => p.value === gateway.provider)?.label || gateway.provider} + const renderGatewayCard = (gateway) => { + const server = getServerInfo(gateway.serverId); + const provider = server?.provider || ''; + const country = server?.country || ''; + + return ( +
+
+
+
+ + + +
+
{gateway.name || '—'}
+
+ {provider || '—'} +
+
+
+ +
+ + +
-
- -
- - -
+ )}
-
- -
- - {gateway.ip || '—'} - - {gateway.ip && ( - + + {country && ( +
+ {countryToFlag(country)} + {country} +
+ )} + + {gateway.description && ( +
+ {gateway.description} +
)}
- - {gateway.country && ( -
- {countryToFlag(gateway.country)} - {gateway.country} -
- )} - - {gateway.description && ( -
- {gateway.description} -
- )}
-
- ); + ); + }; // === Рендер карточки Interface === const renderInterfaceCard = (iface) => ( @@ -739,7 +762,7 @@ function NetworkConfigManager() {
)} - {/* Provider filter for gateways */} + {/* Provider filter for gateways - берем уникальные провайдеры из серверов */} {activeTab === 'gateways' && (
@@ -887,12 +910,15 @@ function NetworkConfigManager() { {filteredGateways.map(gateway => { const server = getServerInfo(gateway.serverId); + const provider = server?.provider || ''; + const country = server?.country || ''; + return (
- - + + {gateway.name || '—'}
@@ -912,9 +938,11 @@ function NetworkConfigManager() { - - {GATEWAY_PROVIDERS.find(p => p.value === gateway.provider)?.label || gateway.provider} - + {provider ? ( + + {provider} + + ) : '—'} {server ? ( @@ -929,8 +957,8 @@ function NetworkConfigManager() { )} - {gateway.country ? ( - {countryToFlag(gateway.country)} {gateway.country} + {country ? ( + {countryToFlag(country)} {country} ) : '—'} @@ -1173,14 +1201,16 @@ function NetworkConfigManager() { {editingGateway && (
- + setEditingGateway({ ...editingGateway, serverId: val })} servers={servers} placeholder="Выберите сервер..." /> -
Gateway будет привязан к выбранному серверу
+
+ Страна и провайдер будут автоматически взяты из данных сервера +
-
- setEditingGateway({ ...editingGateway, provider: val })} - options={GATEWAY_PROVIDERS.map(p => ({ value: p.value, label: p.label }))} - /> -
-
- setEditingGateway({ ...editingGateway, country: val })} - placeholder="SWE" - /> -
+ {editingGateway.serverId && (() => { + const server = getServerInfo(editingGateway.serverId); + return server ? ( +
+
+
+ +
+ {server.dns || server.ip} + {server.provider && • {server.provider}} + {server.country && • {countryToFlag(server.country)} {server.country}} +
+
+
+
+ ) : null; + })()}
)}