mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-09-24 10:46:34 +08:00
feat(nord): support multi-server NordLynx outbounds (#6311)
* feat(nord): support multi-server NordLynx outbounds * fix(nord): address verified PR review findings Tighten the NordVPN multi-outbound implementation and its regression coverage based on the verified review feedback. - remove the redundant Xray validation test that duplicated the base branch and did not exercise multiple outbounds - make NordModal tests wait for server loading and assert the modal close callback, duplicate-server state, and endpoint behavior - add coverage for resolving the NordLynx public key from technology metadata instead of a numeric technology ID - use a real httptest server for Nord integration tests through an injectable API base URL - represent the All Cities sentinel consistently as null and reset it when a country changes The existing NordVPN API contracts and persisted outbound schema remain unchanged.
This commit is contained in:
Masterain
@@ -1,16 +1,17 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Divider, Form, Input, message, Modal, Select, Tabs, Tag } from 'antd';
|
||||
import { Button, Divider, Form, Input, message, Modal, Select, Tabs } from 'antd';
|
||||
import { LoginOutlined, SaveOutlined } from '@ant-design/icons';
|
||||
import { FormProvider, useForm, useWatch } from 'react-hook-form';
|
||||
|
||||
import { HttpUtil } from '@/utils';
|
||||
import { FormField } from '@/components/form/rhf';
|
||||
import { countryFlag, countryName } from '../outbounds/outbounds-tab-helpers';
|
||||
import './NordModal.css';
|
||||
|
||||
interface NordModalProps {
|
||||
open: boolean;
|
||||
templateSettings: { outbounds?: { tag?: string }[] } | null;
|
||||
templateSettings: { outbounds?: NordOutboundRow[] } | null;
|
||||
onClose: () => void;
|
||||
onAddOutbound: (outbound: Record<string, unknown>) => void;
|
||||
onResetOutbound: (payload: {
|
||||
@@ -19,8 +20,19 @@ interface NordModalProps {
|
||||
oldTag?: string;
|
||||
newTag: string;
|
||||
}) => void;
|
||||
onRemoveOutbound: (index: number) => void;
|
||||
onRemoveRoutingRules: (payload: { prefix: string }) => void;
|
||||
}
|
||||
|
||||
interface NordOutboundRow {
|
||||
tag?: string;
|
||||
protocol?: string;
|
||||
settings?: unknown;
|
||||
}
|
||||
|
||||
interface NordAddedRow {
|
||||
index: number;
|
||||
tag: string;
|
||||
endpoint: string;
|
||||
resettable: boolean;
|
||||
}
|
||||
|
||||
interface NordData {
|
||||
@@ -45,12 +57,19 @@ interface NordServer {
|
||||
hostname: string;
|
||||
station: string;
|
||||
load: number;
|
||||
technologies?: { id: number; metadata?: { name: string; value: string }[] }[];
|
||||
technologies?: { metadata?: { name: string; value: string }[] }[];
|
||||
location_ids?: number[];
|
||||
cityId?: number | null;
|
||||
cityName?: string;
|
||||
}
|
||||
|
||||
interface NordServerOption {
|
||||
value: number;
|
||||
label: string;
|
||||
searchText: string;
|
||||
server: NordServer;
|
||||
}
|
||||
|
||||
interface NordFormValues {
|
||||
token: string;
|
||||
manualKey: string;
|
||||
@@ -67,10 +86,30 @@ const EMPTY: NordFormValues = {
|
||||
serverId: null,
|
||||
};
|
||||
|
||||
function loadColor(load: number): string {
|
||||
if (load < 30) return 'green';
|
||||
if (load < 70) return 'orange';
|
||||
return 'red';
|
||||
function loadLevel(load: number): 'low' | 'medium' | 'high' {
|
||||
if (load < 30) return 'low';
|
||||
if (load < 70) return 'medium';
|
||||
return 'high';
|
||||
}
|
||||
|
||||
function isRecord(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === 'object' && value !== null && !Array.isArray(value);
|
||||
}
|
||||
|
||||
function isResettableNordOutbound(outbound: NordOutboundRow): boolean {
|
||||
if (outbound.protocol !== 'wireguard' || !isRecord(outbound.settings)) return false;
|
||||
return (
|
||||
Array.isArray(outbound.settings.address) &&
|
||||
outbound.settings.address.length > 0 &&
|
||||
Array.isArray(outbound.settings.peers) &&
|
||||
outbound.settings.peers.length > 0
|
||||
);
|
||||
}
|
||||
|
||||
function nordOutboundEndpoint(outbound: NordOutboundRow): string {
|
||||
if (!isRecord(outbound.settings) || !Array.isArray(outbound.settings.peers)) return '';
|
||||
const peer = outbound.settings.peers.find(isRecord);
|
||||
return typeof peer?.endpoint === 'string' ? peer.endpoint : '';
|
||||
}
|
||||
|
||||
export default function NordModal({
|
||||
@@ -79,10 +118,8 @@ export default function NordModal({
|
||||
onClose,
|
||||
onAddOutbound,
|
||||
onResetOutbound,
|
||||
onRemoveOutbound,
|
||||
onRemoveRoutingRules,
|
||||
}: NordModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const { t, i18n } = useTranslation();
|
||||
const [messageApi, messageContextHolder] = message.useMessage();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [nordData, setNordData] = useState<NordData | null>(null);
|
||||
@@ -92,18 +129,47 @@ export default function NordModal({
|
||||
const methods = useForm<NordFormValues>({ defaultValues: EMPTY });
|
||||
const cityId = useWatch({ control: methods.control, name: 'cityId' });
|
||||
const serverId = useWatch({ control: methods.control, name: 'serverId' });
|
||||
const locale = i18n.resolvedLanguage || i18n.language;
|
||||
|
||||
const nordOutboundIndex = useMemo(() => {
|
||||
const nordRows = useMemo<NordAddedRow[]>(() => {
|
||||
const list = templateSettings?.outbounds;
|
||||
if (!list) return -1;
|
||||
return list.findIndex((o) => o?.tag?.startsWith?.('nord-'));
|
||||
if (!list) return [];
|
||||
return list.flatMap((outbound, index) => {
|
||||
const tag = outbound?.tag;
|
||||
if (typeof tag !== 'string' || !tag.startsWith('nord-')) return [];
|
||||
return [
|
||||
{
|
||||
index,
|
||||
tag,
|
||||
endpoint: nordOutboundEndpoint(outbound),
|
||||
resettable: isResettableNordOutbound(outbound),
|
||||
},
|
||||
];
|
||||
});
|
||||
}, [templateSettings?.outbounds]);
|
||||
|
||||
const addedTags = useMemo(() => new Set(nordRows.map((row) => row.tag)), [nordRows]);
|
||||
|
||||
const filteredServers = useMemo(() => {
|
||||
if (!cityId) return servers;
|
||||
if (cityId == null) return servers;
|
||||
return servers.filter((s) => s.cityId === cityId);
|
||||
}, [cityId, servers]);
|
||||
|
||||
const selectedServer = filteredServers.find((server) => server.id === serverId);
|
||||
const selectedTag = selectedServer ? `nord-${selectedServer.hostname}` : '';
|
||||
const selectedAlreadyAdded = Boolean(selectedTag && addedTags.has(selectedTag));
|
||||
const serverOptions = useMemo<NordServerOption[]>(
|
||||
() =>
|
||||
filteredServers.map((server) => ({
|
||||
value: server.id,
|
||||
label: server.hostname,
|
||||
searchText:
|
||||
`${server.cityName ?? ''} ${server.name} ${server.hostname} ${server.station}`.toLowerCase(),
|
||||
server,
|
||||
})),
|
||||
[filteredServers],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
methods.setValue('serverId', filteredServers.length > 0 ? filteredServers[0].id : null);
|
||||
}, [filteredServers, methods]);
|
||||
@@ -174,8 +240,6 @@ export default function NordModal({
|
||||
try {
|
||||
const msg = await HttpUtil.post('/panel/api/xray/nord/del');
|
||||
if (msg?.success) {
|
||||
onRemoveOutbound(nordOutboundIndex);
|
||||
onRemoveRoutingRules({ prefix: 'nord-' });
|
||||
setNordData(null);
|
||||
methods.reset(EMPTY);
|
||||
setCountries([]);
|
||||
@@ -216,6 +280,7 @@ export default function NordModal({
|
||||
return { ...s, cityId: city?.id || null, cityName: city?.name || 'Unknown' };
|
||||
})
|
||||
.sort((a: NordServer, b: NordServer) => a.load - b.load);
|
||||
methods.setValue('cityId', null);
|
||||
setServers(next);
|
||||
if (next.length === 0) messageApi.warning(t('pages.xray.nord.noServers'));
|
||||
} finally {
|
||||
@@ -227,8 +292,9 @@ export default function NordModal({
|
||||
const selectedServerId = methods.getValues('serverId');
|
||||
const server = servers.find((s) => s.id === selectedServerId);
|
||||
if (!server) return null;
|
||||
const tech = server.technologies?.find((tt) => tt.id === 35);
|
||||
const publicKey = tech?.metadata?.find((m) => m.name === 'public_key')?.value;
|
||||
const publicKey = server.technologies
|
||||
?.flatMap((technology) => technology.metadata ?? [])
|
||||
.find((metadata) => metadata.name === 'public_key')?.value;
|
||||
if (!publicKey) {
|
||||
messageApi.error(t('pages.xray.nord.noPublicKey'));
|
||||
return null;
|
||||
@@ -249,32 +315,49 @@ export default function NordModal({
|
||||
}
|
||||
|
||||
function addOutbound() {
|
||||
if (selectedAlreadyAdded) return;
|
||||
const ob = buildNordOutbound();
|
||||
if (!ob) return;
|
||||
const tag = typeof ob.tag === 'string' ? ob.tag : '';
|
||||
if (tag && templateSettings?.outbounds?.some((outbound) => outbound?.tag === tag)) return;
|
||||
onAddOutbound(ob);
|
||||
messageApi.success(t('pages.xray.nord.outboundAdded'));
|
||||
onClose();
|
||||
}
|
||||
|
||||
function resetOutbound() {
|
||||
if (nordOutboundIndex === -1) return;
|
||||
const ob = buildNordOutbound();
|
||||
if (!ob) return;
|
||||
const oldTag = templateSettings?.outbounds?.[nordOutboundIndex]?.tag;
|
||||
function resetOutbound(index: number) {
|
||||
const existing = templateSettings?.outbounds?.[index];
|
||||
if (
|
||||
!existing?.tag?.startsWith?.('nord-') ||
|
||||
!isResettableNordOutbound(existing) ||
|
||||
!isRecord(existing.settings) ||
|
||||
!nordData?.private_key
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const ob = {
|
||||
...existing,
|
||||
settings: { ...existing.settings, secretKey: nordData.private_key },
|
||||
};
|
||||
onResetOutbound({
|
||||
index: nordOutboundIndex,
|
||||
index,
|
||||
outbound: ob,
|
||||
oldTag,
|
||||
newTag: ob.tag as string,
|
||||
oldTag: existing.tag,
|
||||
newTag: existing.tag,
|
||||
});
|
||||
messageApi.success(t('pages.xray.nord.outboundUpdated'));
|
||||
onClose();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{messageContextHolder}
|
||||
<Modal open={open} title="NordVPN NordLynx" footer={null} onCancel={onClose}>
|
||||
<Modal
|
||||
open={open}
|
||||
title="NordVPN NordLynx"
|
||||
footer={null}
|
||||
width={680}
|
||||
className="nord-modal"
|
||||
onCancel={onClose}
|
||||
>
|
||||
<FormProvider {...methods}>
|
||||
{nordData == null ? (
|
||||
<Tabs
|
||||
@@ -284,18 +367,13 @@ export default function NordModal({
|
||||
key: 'token',
|
||||
label: t('pages.xray.nord.accessToken'),
|
||||
children: (
|
||||
<Form
|
||||
colon={false}
|
||||
labelCol={{ md: { span: 6 } }}
|
||||
wrapperCol={{ md: { span: 18 } }}
|
||||
className="mt-20"
|
||||
>
|
||||
<Form colon={false} layout="vertical" className="nord-login-form">
|
||||
<FormField name="token" label={t('pages.xray.nord.accessToken')}>
|
||||
<Input placeholder={t('pages.xray.nord.accessToken')} />
|
||||
</FormField>
|
||||
<Button
|
||||
type="primary"
|
||||
className="mt-10"
|
||||
className="nord-login-action"
|
||||
loading={loading}
|
||||
icon={<LoginOutlined />}
|
||||
onClick={login}
|
||||
@@ -309,18 +387,13 @@ export default function NordModal({
|
||||
key: 'key',
|
||||
label: t('pages.xray.nord.privateKey'),
|
||||
children: (
|
||||
<Form
|
||||
colon={false}
|
||||
labelCol={{ md: { span: 6 } }}
|
||||
wrapperCol={{ md: { span: 18 } }}
|
||||
className="mt-20"
|
||||
>
|
||||
<Form colon={false} layout="vertical" className="nord-login-form">
|
||||
<FormField name="manualKey" label={t('pages.xray.nord.privateKey')}>
|
||||
<Input placeholder={t('pages.xray.nord.privateKey')} />
|
||||
</FormField>
|
||||
<Button
|
||||
type="primary"
|
||||
className="mt-10"
|
||||
className="nord-login-action"
|
||||
loading={loading}
|
||||
icon={<SaveOutlined />}
|
||||
onClick={saveKey}
|
||||
@@ -334,109 +407,186 @@ export default function NordModal({
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<table className="nord-data-table">
|
||||
<tbody>
|
||||
{nordData.token && (
|
||||
<tr className="row-odd">
|
||||
<td>{t('pages.xray.nord.accessToken')}</td>
|
||||
<td>{nordData.token}</td>
|
||||
<div className="nord-account-card">
|
||||
<table className="nord-data-table">
|
||||
<tbody>
|
||||
{nordData.token && (
|
||||
<tr>
|
||||
<td>{t('pages.xray.nord.accessToken')}</td>
|
||||
<td>{nordData.token}</td>
|
||||
</tr>
|
||||
)}
|
||||
<tr>
|
||||
<td>{t('pages.xray.nord.privateKey')}</td>
|
||||
<td>{nordData.private_key}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<Button loading={loading} danger onClick={logout}>
|
||||
{t('logout')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Divider className="nord-section-divider">{t('pages.xray.warp.settings')}</Divider>
|
||||
|
||||
<Form colon={false} layout="vertical" className="nord-location-form">
|
||||
<div className="nord-location-grid">
|
||||
<FormField
|
||||
name="countryId"
|
||||
label={t('pages.xray.outbound.country')}
|
||||
transform={{ input: (v) => v ?? undefined }}
|
||||
onAfterChange={(v) => fetchServers(v as number)}
|
||||
>
|
||||
<Select
|
||||
data-testid="nord-country-select"
|
||||
showSearch={{ optionFilterProp: 'label' }}
|
||||
options={countries.map((c) => {
|
||||
const name = countryName(c.code, locale) || c.name || c.code;
|
||||
const flag = countryFlag(c.code);
|
||||
return {
|
||||
value: c.id,
|
||||
label: `${flag ? `${flag} ` : ''}${name} (${c.code})`,
|
||||
};
|
||||
})}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
{cities.length > 0 && (
|
||||
<FormField name="cityId" label={t('pages.xray.outbound.city')}>
|
||||
<Select
|
||||
data-testid="nord-city-select"
|
||||
showSearch={{ optionFilterProp: 'label' }}
|
||||
options={[
|
||||
{ value: null, label: t('pages.xray.outbound.allCities') },
|
||||
...cities.map((c) => ({ value: c.id, label: c.name })),
|
||||
]}
|
||||
/>
|
||||
</FormField>
|
||||
)}
|
||||
<tr>
|
||||
<td>{t('pages.xray.nord.privateKey')}</td>
|
||||
<td>{nordData.private_key}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<Button loading={loading} type="primary" danger className="mt-8" onClick={logout}>
|
||||
{t('logout')}
|
||||
</Button>
|
||||
|
||||
<Divider className="zero-margin">{t('pages.xray.warp.settings')}</Divider>
|
||||
|
||||
<Form
|
||||
colon={false}
|
||||
labelCol={{ md: { span: 6 } }}
|
||||
wrapperCol={{ md: { span: 18 } }}
|
||||
className="mt-10"
|
||||
>
|
||||
<FormField
|
||||
name="countryId"
|
||||
label={t('pages.xray.outbound.country')}
|
||||
transform={{ input: (v) => v ?? undefined }}
|
||||
onAfterChange={(v) => fetchServers(v as number)}
|
||||
>
|
||||
<Select
|
||||
showSearch={{ optionFilterProp: 'label' }}
|
||||
options={countries.map((c) => ({
|
||||
value: c.id,
|
||||
label: `${c.name} (${c.code})`,
|
||||
}))}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
{cities.length > 0 && (
|
||||
<FormField name="cityId" label={t('pages.xray.outbound.city')}>
|
||||
<Select
|
||||
showSearch={{ optionFilterProp: 'label' }}
|
||||
options={[
|
||||
{ value: null, label: t('pages.xray.outbound.allCities') },
|
||||
...cities.map((c) => ({ value: c.id, label: c.name })),
|
||||
]}
|
||||
/>
|
||||
</FormField>
|
||||
)}
|
||||
|
||||
{filteredServers.length > 0 && (
|
||||
<FormField name="serverId" label={t('pages.xray.outbound.server')}>
|
||||
<Select
|
||||
showSearch={{ optionFilterProp: 'label' }}
|
||||
options={filteredServers.map((s) => ({
|
||||
value: s.id,
|
||||
label: `${s.cityName} ${s.name} ${s.hostname}`,
|
||||
children: (
|
||||
<span className="server-row">
|
||||
<span className="server-name">
|
||||
{s.cityName} - {s.name}
|
||||
</span>
|
||||
<Tag color={loadColor(s.load)} className="server-load-tag">
|
||||
{s.load}%
|
||||
</Tag>
|
||||
</span>
|
||||
),
|
||||
}))}
|
||||
/>
|
||||
</FormField>
|
||||
)}
|
||||
{filteredServers.length > 0 && (
|
||||
<div className="nord-server-field">
|
||||
<FormField name="serverId" label={t('pages.xray.outbound.server')}>
|
||||
<Select<number, NordServerOption>
|
||||
data-testid="nord-server-select"
|
||||
classNames={{ popup: { root: 'nord-server-popup' } }}
|
||||
listHeight={320}
|
||||
listItemHeight={58}
|
||||
options={serverOptions}
|
||||
showSearch={{
|
||||
filterOption: (input, option) =>
|
||||
option?.searchText.includes(input.trim().toLowerCase()) ?? false,
|
||||
}}
|
||||
optionRender={(option) => {
|
||||
const server = option.data.server;
|
||||
return (
|
||||
<div className="nord-server-option">
|
||||
<span className="nord-server-option-copy">
|
||||
<span className="nord-server-option-name">{server.name}</span>
|
||||
<span className="nord-server-option-meta">
|
||||
<span>{server.cityName}</span>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span className="nord-server-option-hostname">
|
||||
{server.hostname}
|
||||
</span>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span className="nord-server-option-address">
|
||||
{server.station}:51820
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
className={`nord-server-load nord-server-load-${loadLevel(server.load)}`}
|
||||
title={`${t('pages.xray.nord.serverLoad')}: ${server.load}%`}
|
||||
>
|
||||
<span className="nord-server-load-dot" aria-hidden="true" />
|
||||
<span className="nord-server-load-label">
|
||||
{t('pages.xray.nord.serverLoad')}
|
||||
</span>
|
||||
<span className="nord-server-load-value">{server.load}%</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
labelRender={() =>
|
||||
selectedServer ? (
|
||||
<span className="nord-selected-server">
|
||||
<span className="nord-selected-server-name">
|
||||
{selectedServer.name}
|
||||
</span>
|
||||
<span className="nord-selected-server-hostname">
|
||||
{selectedServer.hostname}
|
||||
</span>
|
||||
<span className="nord-selected-server-address">
|
||||
{selectedServer.station}:51820
|
||||
</span>
|
||||
<span
|
||||
className={`nord-server-load nord-server-load-${loadLevel(selectedServer.load)}`}
|
||||
title={`${t('pages.xray.nord.serverLoad')}: ${selectedServer.load}%`}
|
||||
>
|
||||
<span className="nord-server-load-dot" aria-hidden="true" />
|
||||
<span className="nord-server-load-value">
|
||||
{selectedServer.load}%
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Form>
|
||||
|
||||
<Divider className="my-10">{t('pages.xray.outbound.outboundStatus')}</Divider>
|
||||
{nordOutboundIndex >= 0 ? (
|
||||
<div className="nord-add-actions">
|
||||
<div className="nord-already-added" aria-live="polite">
|
||||
{selectedAlreadyAdded
|
||||
? t('pages.xray.nord.alreadyAdded', { reset: t('reset') })
|
||||
: null}
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
disabled={!serverId || selectedAlreadyAdded}
|
||||
loading={loading}
|
||||
onClick={addOutbound}
|
||||
>
|
||||
{t('pages.xray.warp.addOutbound')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{nordRows.length > 0 && (
|
||||
<>
|
||||
<Tag color="green">{t('enabled')}</Tag>
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
loading={loading}
|
||||
className="ml-8"
|
||||
onClick={resetOutbound}
|
||||
>
|
||||
{t('reset')}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Tag color="orange">{t('disabled')}</Tag>
|
||||
<Button
|
||||
type="primary"
|
||||
className="ml-8"
|
||||
disabled={!serverId}
|
||||
loading={loading}
|
||||
onClick={addOutbound}
|
||||
>
|
||||
{t('pages.xray.warp.addOutbound')}
|
||||
</Button>
|
||||
<Divider className="nord-section-divider">
|
||||
{t('pages.xray.nord.addedServers')}
|
||||
</Divider>
|
||||
<table className="nord-added-table" data-testid="nord-added-table">
|
||||
<tbody>
|
||||
{nordRows.map((row) => (
|
||||
<tr key={`${row.index}-${row.tag}`}>
|
||||
<td>
|
||||
<span className="nord-added-server-tag">{row.tag}</span>
|
||||
{row.endpoint && (
|
||||
<span className="nord-added-server-endpoint">{row.endpoint}</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
size="small"
|
||||
loading={loading}
|
||||
disabled={!row.resettable}
|
||||
data-testid={`nord-reset-${row.index}`}
|
||||
onClick={() => resetOutbound(row.index)}
|
||||
>
|
||||
{t('reset')}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user