+ {/* Header */}
+
+
+
+
+
+ Сетевые настройки
+
+
+ Справочник IP-адресов, интерфейсов и gateway для серверов
+
+
+
+
+
+
+
+
+
+
+
+ {/* Tabs */}
+
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+ {/* Search & Filters */}
+ {activeTab !== 'defaults' && (
+
+
+
+
+
+
+
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
+ {activeTab === 'gateways' && (
+
+
+
+ )}
+
+
+ {activeTab === 'gateways' && (
+
+ )}
+ {activeTab === 'interfaces' && (
+
+ )}
+ {activeTab === 'pools' && (
+
+ )}
+
+
+
+
+ )}
+
+ {/* Content */}
+ {loading ? (
+
+ ) : (
+ <>
+ {/* Gateways Tab */}
+ {activeTab === 'gateways' && (
+
+ {filteredGateways.length === 0 ? (
+
+
+
Gateways не найдены
+
Добавьте gateway для использования в конфигурациях
+
+
+ ) : (
+
+
+
+
+ | Имя |
+ IP адрес |
+ Провайдер |
+ Страна |
+ Описание |
+ Действия |
+
+
+
+ {filteredGateways.map(gateway => (
+
+ |
+ {gateway.name || '—'}
+ |
+
+
+ {gateway.ip || '—'}
+ {gateway.ip && (
+
+ )}
+
+ |
+
+
+ {GATEWAY_PROVIDERS.find(p => p.value === gateway.provider)?.label || gateway.provider}
+
+ |
+ {gateway.country || '—'} |
+ {gateway.description || '—'} |
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+ )}
+
+ )}
+
+ {/* Interfaces Tab */}
+ {activeTab === 'interfaces' && (
+
+ {filteredInterfaces.length === 0 ? (
+
+
+
Интерфейсы не найдены
+
Добавьте туннельные интерфейсы для серверов
+
+
+ ) : (
+
+
+
+
+ | Имя |
+ Тип |
+ Local IP |
+ Remote IP |
+ Порт |
+ Сервер |
+ Действия |
+
+
+
+ {filteredInterfaces.map(iface => (
+
+ | {iface.name || '—'} |
+
+ {iface.type}
+ |
+
+
+ {iface.localIp || '—'}
+ {iface.localIp && (
+
+ )}
+
+ |
+
+ {iface.remoteIp || '—'}
+ |
+ {iface.port || '—'} |
+ {getServerName(iface.serverId)} |
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+ )}
+
+ )}
+
+ {/* IP Pools Tab */}
+ {activeTab === 'pools' && (
+
+ {filteredPools.length === 0 ? (
+
+
+
IP пулы не найдены
+
Добавьте пулы IP-адресов для автоматического назначения
+
+
+ ) : (
+
+
+
+
+ | Название |
+ CIDR |
+ Описание |
+ Действия |
+
+
+
+ {filteredPools.map(pool => (
+
+ | {pool.name || '—'} |
+
+
+ {pool.cidr || '—'}
+ {pool.cidr && (
+
+ )}
+
+ |
+ {pool.description || '—'} |
+
+
+
+
+
+ |
+
+ ))}
+
+
+
+ )}
+
+ )}
+
+ {/* Defaults Tab */}
+ {activeTab === 'defaults' && (
+
+
+
Настройки по умолчанию для генерации URL
+
+
+
+
+
+
handleDefaultsChange('baseUrl', e.target.value)}
+ placeholder="https://functions.yandexcloud.net/..."
+ />
+
Базовый URL для генерации ссылок
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ )}
+
+ {/* Gateway Modal */}
+
{ setGatewayModalOpen(false); setEditingGateway(null); }}
+ onSubmit={() => editingGateway && handleSaveGateway(editingGateway)}
+ title={gatewayModalMode === 'add' ? 'Добавить Gateway' : 'Редактировать Gateway'}
+ submitLabel={gatewayModalMode === 'add' ? 'Добавить' : 'Сохранить'}
+ submitIcon={gatewayModalMode === 'add' ? IconPlus : IconEdit}
+ >
+ {editingGateway && (
+
+
+ setEditingGateway({ ...editingGateway, name: val })}
+ placeholder="SWE-IHOR"
+ required
+ />
+
+
+ setEditingGateway({ ...editingGateway, ip: val })}
+ placeholder="94.142.140.1"
+ />
+
+
+ setEditingGateway({ ...editingGateway, provider: val })}
+ options={GATEWAY_PROVIDERS.map(p => ({ value: p.value, label: p.label }))}
+ />
+
+
+ setEditingGateway({ ...editingGateway, country: val })}
+ placeholder="SWE"
+ />
+
+
+ setEditingGateway({ ...editingGateway, description: val })}
+ placeholder="Основной выход через Cloudflare"
+ />
+
+
+
+ {/* Interface Modal */}
+
{ setInterfaceModalOpen(false); setEditingInterface(null); }}
+ onSubmit={() => editingInterface && handleSaveInterface(editingInterface)}
+ title={interfaceModalMode === 'add' ? 'Добавить интерфейс' : 'Редактировать интерфейс'}
+ submitLabel={interfaceModalMode === 'add' ? 'Добавить' : 'Сохранить'}
+ submitIcon={interfaceModalMode === 'add' ? IconPlus : IconEdit}
+ >
+ {editingInterface && (
+
+
+ setEditingInterface({ ...editingInterface, name: val })}
+ placeholder="gre-tunnel1"
+ required
+ />
+
+
+ setEditingInterface({ ...editingInterface, type: val })}
+ options={INTERFACE_TYPES}
+ />
+
+
+ setEditingInterface({ ...editingInterface, localIp: val })}
+ placeholder="10.10.0.1"
+ />
+
+
+ setEditingInterface({ ...editingInterface, remoteIp: val })}
+ placeholder="10.10.0.2"
+ />
+
+
+ setEditingInterface({ ...editingInterface, port: val })}
+ placeholder="51820"
+ />
+
+
+ setEditingInterface({ ...editingInterface, serverId: val })}
+ options={[
+ { value: '', label: 'Выберите сервер' },
+ ...servers.map(s => ({ value: s.id || s.ip, label: s.dns || s.ip }))
+ ]}
+ />
+
+
+
+ {/* Pool Modal */}
+
{ setPoolModalOpen(false); setEditingPool(null); }}
+ onSubmit={() => editingPool && handleSavePool(editingPool)}
+ title={poolModalMode === 'add' ? 'Добавить IP пул' : 'Редактировать IP пул'}
+ submitLabel={poolModalMode === 'add' ? 'Добавить' : 'Сохранить'}
+ submitIcon={poolModalMode === 'add' ? IconPlus : IconEdit}
+ >
+ {editingPool && (
+
+
+ setEditingPool({ ...editingPool, name: val })}
+ placeholder="GRE Tunnels"
+ required
+ />
+
+
+ setEditingPool({ ...editingPool, cidr: val })}
+ placeholder="10.10.0.0/24"
+ required
+ />
+
+
+ setEditingPool({ ...editingPool, description: val })}
+ placeholder="Пул для GRE туннелей между серверами"
+ />
+
+
+
+ {/* Delete Confirmation Modal */}
+
{ setDeleteModalOpen(false); setItemToDelete(null); }}
+ onConfirm={executeDelete}
+ title="Подтверждение удаления"
+ message={
+ itemToDelete ? (
+ <>
+ Вы уверены, что хотите удалить {itemToDelete.name || itemToDelete.cidr || 'этот элемент'}?
+ Это действие нельзя отменить.
+
+ ) : null
+ }
+ confirmLabel="Удалить"
+ variant="danger"
+ icon={IconTrash}
+ />
+