@serve.zone/dcrouter 6.7.0 → 6.9.0

package/ts_web/elements/ops-view-certificates.ts

@@ -241,6 +241,61 @@ export class OpsViewCertificates extends DeesElement {
               : '',
         })}
         .dataActions=${[
+          {
+            name: 'Import Certificate',
+            iconName: 'lucide:upload',
+            type: ['header'],
+            actionFunc: async () => {
+              const { DeesModal } = await import('@design.estate/dees-catalog');
+              await DeesModal.createAndShow({
+                heading: 'Import Certificate',
+                content: html`
+                  <dees-form>
+                    <dees-input-fileupload
+                      key="certJsonFile"
+                      label="Certificate JSON (.tsclass.cert.json)"
+                      accept=".json"
+                      .multiple=${false}
+                      required
+                    ></dees-input-fileupload>
+                  </dees-form>
+                `,
+                menuOptions: [
+                  {
+                    name: 'Import',
+                    iconName: 'lucide:upload',
+                    action: async (modal) => {
+                      const { DeesToast } = await import('@design.estate/dees-catalog');
+                      try {
+                        const form = modal.shadowRoot.querySelector('dees-form') as any;
+                        const formData = await form.collectFormData();
+                        const files = formData.certJsonFile;
+                        if (!files || files.length === 0) {
+                          DeesToast.show({ message: 'Please select a JSON file.', type: 'warning', duration: 3000 });
+                          return;
+                        }
+                        const file = files[0];
+                        const text = await file.text();
+                        const cert = JSON.parse(text);
+                        if (!cert.domainName || !cert.publicKey || !cert.privateKey) {
+                          DeesToast.show({ message: 'Invalid cert JSON: missing domainName, publicKey, or privateKey.', type: 'error', duration: 4000 });
+                          return;
+                        }
+                        await appstate.certificateStatePart.dispatchAction(
+                          appstate.importCertificateAction,
+                          cert,
+                        );
+                        DeesToast.show({ message: `Certificate imported for ${cert.domainName}`, type: 'success', duration: 3000 });
+                        modal.destroy();
+                      } catch (err) {
+                        DeesToast.show({ message: `Import failed: ${err.message}`, type: 'error', duration: 4000 });
+                      }
+                    },
+                  },
+                ],
+              });
+            },
+          },
           {
             name: 'Reprovision',
             iconName: 'lucide:RefreshCw',
@@ -268,6 +323,63 @@ export class OpsViewCertificates extends DeesElement {
               });
             },
           },
+          {
+            name: 'Export',
+            iconName: 'lucide:download',
+            type: ['contextmenu'],
+            actionFunc: async (actionData: { item: interfaces.requests.ICertificateInfo }) => {
+              const { DeesToast } = await import('@design.estate/dees-catalog');
+              const cert = actionData.item;
+              try {
+                const response = await appstate.fetchCertificateExport(cert.domain);
+                if (response.success && response.cert) {
+                  const safeDomain = cert.domain.replace(/\*/g, '_wildcard');
+                  this.downloadJsonFile(`${safeDomain}.tsclass.cert.json`, response.cert);
+                  DeesToast.show({ message: `Certificate exported for ${cert.domain}`, type: 'success', duration: 3000 });
+                } else {
+                  DeesToast.show({ message: response.message || 'Export failed', type: 'error', duration: 4000 });
+                }
+              } catch (err) {
+                DeesToast.show({ message: `Export failed: ${err.message}`, type: 'error', duration: 4000 });
+              }
+            },
+          },
+          {
+            name: 'Delete',
+            iconName: 'lucide:trash-2',
+            type: ['contextmenu'],
+            actionFunc: async (actionData: { item: interfaces.requests.ICertificateInfo }) => {
+              const cert = actionData.item;
+              const { DeesModal, DeesToast } = await import('@design.estate/dees-catalog');
+              await DeesModal.createAndShow({
+                heading: `Delete Certificate: ${cert.domain}`,
+                content: html`
+                  <div style="padding: 20px; font-size: 14px;">
+                    <p>Are you sure you want to delete the certificate data for <strong>${cert.domain}</strong>?</p>
+                    <p style="color: #f59e0b; margin-top: 12px;">Note: The certificate may remain in proxy memory until the next restart or reprovisioning.</p>
+                  </div>
+                `,
+                menuOptions: [
+                  {
+                    name: 'Delete',
+                    iconName: 'lucide:trash-2',
+                    action: async (modal) => {
+                      try {
+                        await appstate.certificateStatePart.dispatchAction(
+                          appstate.deleteCertificateAction,
+                          cert.domain,
+                        );
+                        DeesToast.show({ message: `Certificate deleted for ${cert.domain}`, type: 'success', duration: 3000 });
+                        modal.destroy();
+                      } catch (err) {
+                        DeesToast.show({ message: `Delete failed: ${err.message}`, type: 'error', duration: 4000 });
+                      }
+                    },
+                  },
+                ],
+              });
+            },
+          },
           {
             name: 'View Details',
             iconName: 'lucide:Search',
@@ -309,6 +421,19 @@ export class OpsViewCertificates extends DeesElement {
     `;
   }
 
+  private downloadJsonFile(filename: string, data: any): void {
+    const json = JSON.stringify(data, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
   private renderRoutePills(routeNames: string[]): TemplateResult {
     const maxShow = 3;
     const visible = routeNames.slice(0, maxShow);

package/ts_web/elements/ops-view-remoteingress.ts

@@ -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 {