fix(vpn,target-profiles): normalize target profile route references and stabilize VPN host-IP client routing behavior

This commit is contained in:
2026-04-13 23:02:42 +00:00
parent 466654ee4c
commit aec8b72ca3
11 changed files with 446 additions and 131 deletions

View File

@@ -95,7 +95,7 @@ export class OpsViewTargetProfiles extends DeesElement {
? html`${profile.targets.map(t => html`<span class="tagBadge">${t.ip}:${t.port}</span>`)}`
: '-',
'Route Refs': profile.routeRefs?.length
? html`${profile.routeRefs.map(r => html`<span class="tagBadge">${r}</span>`)}`
? html`${profile.routeRefs.map(r => html`<span class="tagBadge">${this.formatRouteRef(r)}</span>`)}`
: '-',
Created: new Date(profile.createdAt).toLocaleDateString(),
})}
@@ -149,12 +149,57 @@ export class OpsViewTargetProfiles extends DeesElement {
`;
}
private getRouteCandidates() {
private getRouteChoices() {
const routeState = appstate.routeManagementStatePart.getState();
const routes = routeState?.mergedRoutes || [];
return routes
.filter((mr) => mr.route.name)
.map((mr) => ({ viewKey: mr.route.name! }));
.filter((mr) => mr.route.name && mr.id)
.map((mr) => ({
routeId: mr.id!,
routeName: mr.route.name!,
label: `${mr.route.name} (${mr.id})`,
}));
}
private getRouteCandidates() {
return this.getRouteChoices().map((route) => ({ viewKey: route.label }));
}
private resolveRouteRefsToLabels(routeRefs?: string[]): string[] | undefined {
if (!routeRefs?.length) return undefined;
const routeChoices = this.getRouteChoices();
const routeById = new Map(routeChoices.map((route) => [route.routeId, route.label]));
const routeByName = new Map<string, string[]>();
for (const route of routeChoices) {
const labels = routeByName.get(route.routeName) || [];
labels.push(route.label);
routeByName.set(route.routeName, labels);
}
return routeRefs.map((routeRef) => {
const routeLabel = routeById.get(routeRef);
if (routeLabel) return routeLabel;
const labelsForName = routeByName.get(routeRef) || [];
if (labelsForName.length === 1) return labelsForName[0];
return routeRef;
});
}
private resolveRouteLabelsToRefs(routeRefs: string[]): string[] {
if (!routeRefs.length) return [];
const labelToId = new Map(
this.getRouteChoices().map((route) => [route.label, route.routeId]),
);
return routeRefs.map((routeRef) => labelToId.get(routeRef) || routeRef);
}
private formatRouteRef(routeRef: string): string {
return this.resolveRouteRefsToLabels([routeRef])?.[0] || routeRef;
}
private async ensureRoutesLoaded() {
@@ -203,7 +248,9 @@ export class OpsViewTargetProfiles extends DeesElement {
};
})
.filter((t): t is { ip: string; port: number } => t !== null && !isNaN(t.port));
const routeRefs: string[] = Array.isArray(data.routeRefs) ? data.routeRefs : [];
const routeRefs = this.resolveRouteLabelsToRefs(
Array.isArray(data.routeRefs) ? data.routeRefs : [],
);
await appstate.targetProfilesStatePart.dispatchAction(appstate.createTargetProfileAction, {
name: String(data.name),
@@ -222,7 +269,7 @@ export class OpsViewTargetProfiles extends DeesElement {
private async showEditProfileDialog(profile: interfaces.data.ITargetProfile) {
const currentDomains = profile.domains || [];
const currentTargets = profile.targets?.map(t => `${t.ip}:${t.port}`) || [];
const currentRouteRefs = profile.routeRefs || [];
const currentRouteRefs = this.resolveRouteRefsToLabels(profile.routeRefs) || [];
const { DeesModal } = await import('@design.estate/dees-catalog');
await this.ensureRoutesLoaded();
@@ -261,7 +308,9 @@ export class OpsViewTargetProfiles extends DeesElement {
};
})
.filter((t): t is { ip: string; port: number } => t !== null && !isNaN(t.port));
const routeRefs: string[] = Array.isArray(data.routeRefs) ? data.routeRefs : [];
const routeRefs = this.resolveRouteLabelsToRefs(
Array.isArray(data.routeRefs) ? data.routeRefs : [],
);
await appstate.targetProfilesStatePart.dispatchAction(appstate.updateTargetProfileAction, {
id: profile.id,
@@ -336,7 +385,7 @@ export class OpsViewTargetProfiles extends DeesElement {
<div style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};">Route Refs</div>
<div style="font-size: 14px; margin-top: 4px;">
${profile.routeRefs?.length
? profile.routeRefs.map(r => html`<span class="tagBadge">${r}</span>`)
? profile.routeRefs.map(r => html`<span class="tagBadge">${this.formatRouteRef(r)}</span>`)
: '-'}
</div>
</div>