serve.zone/dcrouter
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(remote-ingress): support auto-deriving ports for remote ingress edges and expose manual/derived port breakdown in API and UI

Browse Source
This commit is contained in:
Jürgen Kunz
2026-02-17 14:17:18 +00:00
parent 31a6510d8b
commit 49606ae007
9 changed files with 183 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
ts_web/elements/ops-view-remoteingress.ts
View File

@@ -114,6 +114,17 @@ export class OpsViewRemoteIngress extends DeesElement {
background: ${cssManager.bdTheme('#eff6ff', '#172554')};
color: ${cssManager.bdTheme('#1e40af', '#60a5fa')};
}
.portBadge.manual {
background: ${cssManager.bdTheme('#eff6ff', '#172554')};
color: ${cssManager.bdTheme('#1e40af', '#60a5fa')};
}
.portBadge.derived {
background: ${cssManager.bdTheme('#ecfdf5', '#022c22')};
color: ${cssManager.bdTheme('#047857', '#34d399')};
border: 1px dashed ${cssManager.bdTheme('#6ee7b7', '#065f46')};
}
`,
];
@@ -203,7 +214,8 @@ export class OpsViewRemoteIngress extends DeesElement {
content: html`
<dees-form>
<dees-input-text .key=${'name'} .label=${'Name'} .required=${true}></dees-input-text>
<dees-input-text .key=${'listenPorts'} .label=${'Listen Ports (comma-separated, auto-derived if empty)'}></dees-input-text>
<dees-input-text .key=${'listenPorts'} .label=${'Additional Manual Ports (comma-separated, optional)'}></dees-input-text>
<dees-input-checkbox .key=${'autoDerivePorts'} .label=${'Auto-derive ports from routes'} .value=${true}></dees-input-checkbox>
<dees-input-text .key=${'tags'} .label=${'Tags (comma-separated, optional)'}></dees-input-text>
</dees-form>
`,
@@ -226,12 +238,13 @@ export class OpsViewRemoteIngress extends DeesElement {
const listenPorts = portsStr
? portsStr.split(',').map((p: string) => parseInt(p.trim(), 10)).filter((p: number) => !isNaN(p))
: undefined;
const autoDerivePorts = formData.autoDerivePorts !== false;
const tags = formData.tags
? formData.tags.split(',').map((t: string) => t.trim()).filter(Boolean)
: undefined;
await appstate.remoteIngressStatePart.dispatchAction(
appstate.createRemoteIngressAction,
{ name, listenPorts, tags },
{ name, listenPorts, autoDerivePorts, tags },
);
await modalArg.destroy();
},
@@ -266,6 +279,61 @@ export class OpsViewRemoteIngress extends DeesElement {
);
},
},
{
name: 'Edit',
iconName: 'lucide:pencil',
type: ['inRow', 'contextmenu'] as any,
actionFunc: async (actionData: any) => {
const edge = actionData.item as interfaces.data.IRemoteIngress;
const { DeesModal } = await import('@design.estate/dees-catalog');
await DeesModal.createAndShow({
heading: `Edit Edge: ${edge.name}`,
content: html`
<dees-form>
<dees-input-text .key=${'name'} .label=${'Name'} .value=${edge.name}></dees-input-text>
<dees-input-text .key=${'listenPorts'} .label=${'Manual Ports (comma-separated)'} .value=${(edge.listenPorts || []).join(', ')}></dees-input-text>
<dees-input-checkbox .key=${'autoDerivePorts'} .label=${'Auto-derive ports from routes'} .value=${edge.autoDerivePorts !== false}></dees-input-checkbox>
<dees-input-text .key=${'tags'} .label=${'Tags (comma-separated)'} .value=${(edge.tags || []).join(', ')}></dees-input-text>
</dees-form>
`,
menuOptions: [
{
name: 'Cancel',
iconName: 'lucide:x',
action: async (modalArg: any) => await modalArg.destroy(),
},
{
name: 'Save',
iconName: 'lucide:check',
action: async (modalArg: any) => {
const form = modalArg.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
if (!form) return;
const formData = await form.collectFormData();
const portsStr = formData.listenPorts?.trim();
const listenPorts = portsStr
? portsStr.split(',').map((p: string) => parseInt(p.trim(), 10)).filter((p: number) => !isNaN(p))
: [];
const autoDerivePorts = formData.autoDerivePorts !== false;
const tags = formData.tags
? formData.tags.split(',').map((t: string) => t.trim()).filter(Boolean)
: [];
await appstate.remoteIngressStatePart.dispatchAction(
appstate.updateRemoteIngressAction,
{
id: edge.id,
name: formData.name || edge.name,
listenPorts,
autoDerivePorts,
tags,
},
);
await modalArg.destroy();
},
},
],
});
},
},
{
name: 'Regenerate Secret',
iconName: 'lucide:key',
@@ -317,13 +385,12 @@ export class OpsViewRemoteIngress extends DeesElement {
}
private getPortsHtml(edge: interfaces.data.IRemoteIngress): TemplateResult {
const hasManualPorts = edge.listenPorts && edge.listenPorts.length > 0;
const ports = hasManualPorts ? edge.listenPorts : (edge.effectiveListenPorts || []);
const isAuto = !hasManualPorts && ports.length > 0;
if (ports.length === 0) {
const manualPorts = edge.manualPorts || [];
const derivedPorts = edge.derivedPorts || [];
if (manualPorts.length === 0 && derivedPorts.length === 0) {
return html`<span style="color: var(--text-muted, #6b7280); font-size: 12px;">none</span>`;
}
return html`<div class="portsDisplay">${ports.map(p => html`<span class="portBadge">${p}</span>`)}${isAuto ? html`<span style="font-size: 11px; color: var(--text-muted, #6b7280); align-self: center;">(auto)</span>` : ''}</div>`;
return html`<div class="portsDisplay">${manualPorts.map(p => html`<span class="portBadge manual">${p}</span>`)}${derivedPorts.map(p => html`<span class="portBadge derived">${p}</span>`)}${derivedPorts.length > 0 ? html`<span style="font-size: 11px; color: var(--text-muted, #6b7280); align-self: center;">(auto)</span>` : ''}</div>`;
}
private getEdgeTunnelCount(edgeId: string): number {