feat(NetworkConfigManager): refine tunnel preview functionality to support multiple server pairs; enhance IP address generation logic for better handling of local and remote IPs, ensuring uniqueness and proper display in the UI
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m38s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m38s
This commit is contained in:
@@ -982,15 +982,13 @@ function NetworkConfigManager() {
|
|||||||
|
|
||||||
// Проверяем, что IP входят в диапазон пула и отличаются
|
// Проверяем, что IP входят в диапазон пула и отличаются
|
||||||
if (!isIpInCidr(localIp, cidr)) continue;
|
if (!isIpInCidr(localIp, cidr)) continue;
|
||||||
if (isIpInCidr(remoteIp, cidr) && localIp !== remoteIp) {
|
if (localIp === remoteIp) continue;
|
||||||
if (prefix >= 30) {
|
|
||||||
if (!usedIps.has(localIp) && !usedIps.has(remoteIp)) {
|
// Для всех префиксов проверяем, что оба IP свободны (для туннелей нужны пары)
|
||||||
return forRemote ? remoteIp : localIp;
|
if (!usedIps.has(localIp) && !usedIps.has(remoteIp)) {
|
||||||
}
|
// Проверяем, что Remote IP тоже входит в пул (для префиксов >= 30 это всегда true)
|
||||||
} else {
|
if (prefix >= 30 || isIpInCidr(remoteIp, cidr)) {
|
||||||
if (!usedIps.has(localIp)) {
|
return forRemote ? remoteIp : localIp;
|
||||||
return localIp;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -3696,129 +3694,85 @@ function NetworkConfigManager() {
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
})()}
|
})()}
|
||||||
{templateServer1 && templateServer2 && templateServer1 !== templateServer2 && (() => {
|
{templateTunnelCount > 1 && templateServerPairs.length === templateTunnelCount && (
|
||||||
const server1 = getServerInfo(templateServer1);
|
<div className="col-12">
|
||||||
const server2 = getServerInfo(templateServer2);
|
<label className="form-label">Предпросмотр туннелей:</label>
|
||||||
if (!server1 || !server2) return null;
|
<div className="d-flex flex-column gap-3">
|
||||||
|
{templateServerPairs.map((pair, index) => {
|
||||||
|
const server1 = getServerInfo(pair.server1);
|
||||||
|
const server2 = getServerInfo(pair.server2);
|
||||||
|
if (!server1 || !server2 || !pair.server1 || !pair.server2 || pair.server1 === pair.server2) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
const autoName1 = generateInterfaceName(server1, server2, templateType, templateNamePrefix);
|
const baseName1 = generateInterfaceName(server1, server2, templateType, templateNamePrefix);
|
||||||
const autoName2 = generateInterfaceName(server2, server1, templateType, templateNamePrefix);
|
const baseName2 = generateInterfaceName(server2, server1, templateType, templateNamePrefix);
|
||||||
const previewName1 = templateName1.trim() || autoName1;
|
const previewName1 = pair.name1?.trim() || baseName1;
|
||||||
const previewName2 = templateName2.trim() || autoName2;
|
const previewName2 = pair.name2?.trim() || baseName2;
|
||||||
const previewLocalIp = generateFreePrivateIp(null, false, null, templateIpPoolId || null);
|
|
||||||
const previewRemoteIp = previewLocalIp ? generateFreePrivateIp(null, true, previewLocalIp, templateIpPoolId || null) : null;
|
|
||||||
|
|
||||||
return (
|
// Используем настройки из пары или глобальные для предпросмотра
|
||||||
<>
|
const pairIpPoolId = pair.ipPoolId || templateIpPoolId;
|
||||||
<div className="col-md-6">
|
|
||||||
<label className="form-label">
|
// Генерируем предпросмотр IP (используем временный Set для предпросмотра)
|
||||||
Имя интерфейса (сервер 1)
|
const previewUsedIps = new Set(getAllUsedIpsSet);
|
||||||
{!templateName1 && <span className="text-muted small ms-1">(авто: {autoName1})</span>}
|
// Добавляем IP из предыдущих туннелей в предпросмотре
|
||||||
</label>
|
for (let i = 0; i < index; i++) {
|
||||||
<input
|
const prevPair = templateServerPairs[i];
|
||||||
type="text"
|
if (prevPair.server1 && prevPair.server2) {
|
||||||
className="form-control"
|
const prevPairIpPoolId = prevPair.ipPoolId || templateIpPoolId;
|
||||||
value={templateName1}
|
const prevPreviewLocal = generateFreePrivateIp(null, false, null, prevPairIpPoolId || null, previewUsedIps);
|
||||||
onChange={(e) => setTemplateName1(e.target.value)}
|
if (prevPreviewLocal) {
|
||||||
placeholder={autoName1}
|
const prevPreviewRemote = generateFreePrivateIp(null, true, prevPreviewLocal, prevPairIpPoolId || null, previewUsedIps);
|
||||||
/>
|
if (prevPreviewRemote && prevPreviewRemote !== prevPreviewLocal) {
|
||||||
<div className="form-text">Оставьте пустым для автогенерации</div>
|
previewUsedIps.add(prevPreviewLocal);
|
||||||
</div>
|
previewUsedIps.add(prevPreviewRemote);
|
||||||
<div className="col-md-6">
|
}
|
||||||
<label className="form-label">
|
}
|
||||||
Имя интерфейса (сервер 2)
|
}
|
||||||
{!templateName2 && <span className="text-muted small ms-1">(авто: {autoName2})</span>}
|
}
|
||||||
</label>
|
|
||||||
<input
|
const previewLocalIp = generateFreePrivateIp(null, false, null, pairIpPoolId || null, previewUsedIps);
|
||||||
type="text"
|
const previewRemoteIp = previewLocalIp ? generateFreePrivateIp(null, true, previewLocalIp, pairIpPoolId || null, previewUsedIps) : null;
|
||||||
className="form-control"
|
|
||||||
value={templateName2}
|
return (
|
||||||
onChange={(e) => setTemplateName2(e.target.value)}
|
<div key={index} className="card card-sm border">
|
||||||
placeholder={autoName2}
|
<div className="card-header bg-light">
|
||||||
/>
|
<strong>Туннель {index + 1}:</strong>
|
||||||
<div className="form-text">Оставьте пустым для автогенерации </div>
|
</div>
|
||||||
</div>
|
<div className="card-body">
|
||||||
{(templateType === 'IPSec' || templateType === 'GRE') && (
|
<div className="row">
|
||||||
<div className="col-12">
|
<div className="col-md-6">
|
||||||
<label className="form-label">IPSec пароль</label>
|
<div className="mb-2">
|
||||||
<div className="input-group">
|
<strong>Сервер 1 ({server1.dns || server1.ip}):</strong>
|
||||||
<select
|
<div className="ms-2">
|
||||||
className="form-select"
|
<div>Имя: {previewName1}</div>
|
||||||
value={templateIpsecPasswordId}
|
<div>Local IP: {previewLocalIp || '—'}</div>
|
||||||
onChange={(e) => setTemplateIpsecPasswordId(e.target.value)}
|
</div>
|
||||||
>
|
|
||||||
<option value="">Не выбран</option>
|
|
||||||
{ipsecPasswords.map(pwd => (
|
|
||||||
<option key={pwd.id} value={pwd.id}>
|
|
||||||
{pwd.name} {pwd.description ? `(${pwd.description})` : ''}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-outline-primary"
|
|
||||||
onClick={() => {
|
|
||||||
setIpsecPasswordModalMode('add');
|
|
||||||
setEditingIpsecPassword({ name: '', password: '', description: '' });
|
|
||||||
setIpsecPasswordModalOpen(true);
|
|
||||||
}}
|
|
||||||
title="Создать новый IPSec пароль"
|
|
||||||
>
|
|
||||||
<IconPlus size={16} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="form-text">
|
|
||||||
Выберите сохраненный IPSec пароль или создайте новый (опционально для GRE)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="col-12">
|
|
||||||
<label className="form-label">IP пул</label>
|
|
||||||
<select
|
|
||||||
className="form-select"
|
|
||||||
value={templateIpPoolId}
|
|
||||||
onChange={(e) => setTemplateIpPoolId(e.target.value)}
|
|
||||||
>
|
|
||||||
<option value="">Автоматический подбор (RFC 1918)</option>
|
|
||||||
{config.ipPools?.map(pool => (
|
|
||||||
<option key={pool.id} value={pool.id}>
|
|
||||||
{pool.name} ({pool.cidr}) {pool.description ? `- ${pool.description}` : ''}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<div className="form-text">
|
|
||||||
Выберите IP пул для подбора адресов или оставьте автоматический подбор
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12">
|
|
||||||
<div className="card card-sm border">
|
|
||||||
<div className="card-body">
|
|
||||||
<h6 className="card-title mb-3">Предпросмотр интерфейса:</h6>
|
|
||||||
<div className="row g-2">
|
|
||||||
<div className="col-md-6">
|
|
||||||
<div className="small text-muted mb-1">Сервер 1 ({server1.dns || server1.ip}):</div>
|
|
||||||
<div><strong>Имя:</strong> <code>{previewName1}</code></div>
|
|
||||||
<div><strong>Local IP:</strong> <code>{previewLocalIp || '—'}</code></div>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6">
|
|
||||||
<div className="small text-muted mb-1">Сервер 2 ({server2.dns || server2.ip}):</div>
|
|
||||||
<div><strong>Имя:</strong> <code>{previewName2}</code></div>
|
|
||||||
<div><strong>Local IP:</strong> <code>{previewRemoteIp || '—'}</code></div>
|
|
||||||
</div>
|
|
||||||
{previewLocalIp && previewRemoteIp && (
|
|
||||||
<div className="col-12 mt-2">
|
|
||||||
<div className="badge bg-success-lt text-success">
|
|
||||||
{previewLocalIp} ↔ {previewRemoteIp}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
<div className="col-md-6">
|
||||||
|
<div className="mb-2">
|
||||||
|
<strong>Сервер 2 ({server2.dns || server2.ip}):</strong>
|
||||||
|
<div className="ms-2">
|
||||||
|
<div>Имя: {previewName2}</div>
|
||||||
|
<div>Local IP: {previewRemoteIp || '—'}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{previewLocalIp && previewRemoteIp && (
|
||||||
|
<div className="col-12 text-center">
|
||||||
|
<IconArrowsRightLeft size={20} className="text-muted" />
|
||||||
|
<span className="ms-2 text-muted">{previewLocalIp} ↔ {previewRemoteIp}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
</div>
|
})}
|
||||||
</>
|
</div>
|
||||||
);
|
</div>
|
||||||
})()}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</FormModal>
|
</FormModal>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user