@serve.zone/catalog 2.2.0 → 2.4.0

package/ts_web/elements/sz-demo-view-config.ts

@@ -0,0 +1,164 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import type { IConfigField } from './sz-config-section.js';
+import './index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-demo-view-config': SzDemoViewConfig;
+  }
+}
+
+@customElement('sz-demo-view-config')
+export class SzDemoViewConfig extends DeesElement {
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        padding: 24px;
+        height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const systemFields: IConfigField[] = [
+      { key: 'Base Directory', value: '/home/user/.serve.zone/dcrouter' },
+      { key: 'Data Directory', value: '/home/user/.serve.zone/dcrouter/data' },
+      { key: 'Public IP', value: '203.0.113.50' },
+      { key: 'Proxy IPs', value: ['203.0.113.10', '203.0.113.11'], type: 'pills' },
+      { key: 'Uptime', value: '3d 14h 22m' },
+      { key: 'Storage Backend', value: 'filesystem', type: 'badge' },
+    ];
+
+    const proxyFields: IConfigField[] = [
+      { key: 'Route Count', value: 12 },
+      { key: 'ACME Enabled', value: true, type: 'boolean' },
+      { key: 'Account Email', value: 'admin@serve.zone' },
+      { key: 'Use Production', value: true, type: 'boolean' },
+      { key: 'Auto Renew', value: true, type: 'boolean' },
+      { key: 'Renew Threshold', value: '30 days' },
+    ];
+
+    const emailFields: IConfigField[] = [
+      { key: 'Ports', value: ['25', '465', '587'], type: 'pills' },
+      { key: 'Hostname', value: 'mail.serve.zone' },
+      { key: 'Domains', value: ['serve.zone', 'mail.serve.zone'], type: 'pills' },
+      { key: 'Email Routes', value: 5 },
+      { key: 'Received Path', value: '/data/emails' },
+    ];
+
+    const dnsFields: IConfigField[] = [
+      { key: 'Port', value: 53 },
+      { key: 'NS Domains', value: ['ns1.serve.zone', 'ns2.serve.zone'], type: 'pills' },
+      { key: 'Scopes', value: ['serve.zone', 'example.com'], type: 'pills' },
+      { key: 'Record Count', value: 24 },
+      { key: 'DNS Challenge', value: true, type: 'boolean' },
+    ];
+
+    const tlsFields: IConfigField[] = [
+      { key: 'Contact Email', value: 'admin@serve.zone' },
+      { key: 'Domain', value: 'serve.zone' },
+      { key: 'Source', value: 'acme', type: 'badge' },
+      { key: 'Certificate Path', value: null },
+      { key: 'Key Path', value: null },
+    ];
+
+    const cacheFields: IConfigField[] = [
+      { key: 'Storage Path', value: '/home/user/.serve.zone/dcrouter/tsmdb' },
+      { key: 'DB Name', value: 'dcrouter' },
+      { key: 'Default TTL', value: '30 days' },
+      { key: 'Cleanup Interval', value: '1 hour' },
+    ];
+
+    const radiusFields: IConfigField[] = [
+      { key: 'Auth Port', value: null },
+      { key: 'Accounting Port', value: null },
+    ];
+
+    const remoteIngressFields: IConfigField[] = [
+      { key: 'Tunnel Port', value: 8443 },
+      { key: 'Hub Domain', value: 'hub.serve.zone' },
+      { key: 'TLS Configured', value: true, type: 'boolean' },
+    ];
+
+    return html`
+      <sz-config-overview
+        infoText="This view displays the current running configuration. DcRouter is configured through code or remote management."
+      >
+        <sz-config-section
+          title="System"
+          subtitle="Base paths and infrastructure"
+          icon="lucide:server"
+          status="enabled"
+          .fields=${systemFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="SmartProxy"
+          subtitle="HTTP/HTTPS and TCP/SNI reverse proxy"
+          icon="lucide:network"
+          status="enabled"
+          .fields=${proxyFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="Email Server"
+          subtitle="SMTP email handling with smartmta"
+          icon="lucide:mail"
+          status="enabled"
+          .fields=${emailFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="DNS Server"
+          subtitle="Authoritative DNS with smartdns"
+          icon="lucide:globe"
+          status="enabled"
+          .fields=${dnsFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="TLS / Certificates"
+          subtitle="Certificate management and ACME"
+          icon="lucide:shield-check"
+          status="enabled"
+          .fields=${tlsFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="Cache Database"
+          subtitle="Persistent caching with smartdata"
+          icon="lucide:database"
+          status="enabled"
+          .fields=${cacheFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="RADIUS Server"
+          subtitle="Network authentication and VLAN assignment"
+          icon="lucide:wifi"
+          status="not-configured"
+          .fields=${radiusFields}
+        ></sz-config-section>
+
+        <sz-config-section
+          title="Remote Ingress"
+          subtitle="Edge tunnel nodes"
+          icon="lucide:cloud"
+          status="enabled"
+          .fields=${remoteIngressFields}
+        ></sz-config-section>
+      </sz-config-overview>
+    `;
+  }
+}

package/ts_web/elements/sz-demo-view-routes.ts

@@ -0,0 +1,362 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import type { DeesAppui } from '@design.estate/dees-catalog';
+import type { IRouteConfig } from './sz-route-card.js';
+import './index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-demo-view-routes': SzDemoViewRoutes;
+  }
+}
+
+@customElement('sz-demo-view-routes')
+export class SzDemoViewRoutes extends DeesElement {
+  private appui: DeesAppui | null = null;
+
+  @state()
+  private accessor currentTab: 'all' | 'https' | 'email' | 'dns' = 'all';
+
+  private demoRoutes: IRouteConfig[] = [
+    // 1. HTTPS with TLS termination + auto cert
+    {
+      id: 'route-1',
+      name: 'Web Frontend',
+      description: 'Main website with TLS termination and automatic certificates',
+      enabled: true,
+      priority: 10,
+      tags: ['web', 'https', 'production'],
+      match: {
+        ports: 443,
+        domains: ['serve.zone', 'www.serve.zone'],
+        protocol: 'http',
+      },
+      action: {
+        type: 'forward',
+        targets: [{ host: '10.0.0.10', port: 3000 }],
+        tls: { mode: 'terminate', certificate: 'auto' },
+      },
+    },
+    // 2. HTTP to HTTPS redirect
+    {
+      id: 'route-2',
+      name: 'HTTP Redirect',
+      description: 'Redirects all HTTP traffic to HTTPS',
+      enabled: true,
+      priority: 100,
+      tags: ['web', 'http', 'redirect'],
+      match: {
+        ports: 80,
+        domains: ['serve.zone', 'www.serve.zone'],
+        protocol: 'http',
+      },
+      action: {
+        type: 'socket-handler',
+      },
+    },
+    // 3. Email SMTP route
+    {
+      id: 'route-3',
+      name: 'SMTP Inbound',
+      description: 'Inbound email relay for serve.zone domain',
+      enabled: true,
+      tags: ['email', 'smtp', 'production'],
+      match: {
+        ports: 25,
+        domains: 'mail.serve.zone',
+      },
+      action: {
+        type: 'forward',
+        targets: [{ host: '10.0.1.5', port: 25 }],
+        tls: { mode: 'terminate', certificate: 'auto' },
+      },
+    },
+    // 4. API gateway with path matching, rate limiting, CORS
+    {
+      id: 'route-4',
+      name: 'API Gateway',
+      description: 'API gateway with rate limiting, CORS headers, and load balancing',
+      enabled: true,
+      priority: 20,
+      tags: ['web', 'api', 'https', 'production'],
+      match: {
+        ports: 443,
+        domains: 'api.serve.zone',
+        path: '/v2/*',
+        protocol: 'http',
+      },
+      action: {
+        type: 'forward',
+        targets: [
+          { host: ['10.0.0.20', '10.0.0.21', '10.0.0.22'], port: 8080 },
+        ],
+        tls: { mode: 'terminate', certificate: 'auto' },
+        loadBalancing: { algorithm: 'round-robin' },
+      },
+      security: {
+        rateLimit: { enabled: true, maxRequests: 200, window: 60 },
+        maxConnections: 5000,
+      },
+      headers: {
+        response: {
+          'Access-Control-Allow-Origin': '*',
+          'X-Request-Id': '{{requestId}}',
+        },
+      },
+    },
+    // 5. WebSocket route
+    {
+      id: 'route-5',
+      name: 'WebSocket Realtime',
+      description: 'Real-time WebSocket connections for live updates',
+      enabled: true,
+      tags: ['web', 'https', 'websocket'],
+      match: {
+        ports: 443,
+        domains: 'ws.serve.zone',
+        path: '/ws/*',
+        protocol: 'http',
+      },
+      action: {
+        type: 'forward',
+        targets: [{ host: '10.0.0.30', port: 9090 }],
+        tls: { mode: 'terminate', certificate: 'auto' },
+        websocket: { enabled: true },
+      },
+    },
+    // 6. Wildcard domain route
+    {
+      id: 'route-6',
+      name: 'Tenant Wildcard',
+      description: 'Multi-tenant wildcard routing for customer subdomains',
+      enabled: true,
+      priority: 50,
+      tags: ['web', 'https', 'multi-tenant'],
+      match: {
+        ports: 443,
+        domains: '*.customers.serve.zone',
+        protocol: 'http',
+      },
+      action: {
+        type: 'forward',
+        targets: [{ host: '10.0.0.40', port: 8080 }],
+        tls: { mode: 'terminate', certificate: 'auto' },
+      },
+      security: {
+        ipAllowList: ['10.0.0.0/8', '172.16.0.0/12'],
+      },
+    },
+    // 7. Load-balanced route with health check
+    {
+      id: 'route-7',
+      name: 'Microservices LB',
+      description: 'Load-balanced microservices backend with IP-hash affinity',
+      enabled: true,
+      tags: ['web', 'https', 'production'],
+      match: {
+        ports: [443, 8443],
+        domains: 'services.serve.zone',
+        protocol: 'http',
+      },
+      action: {
+        type: 'forward',
+        targets: [
+          { host: ['10.0.2.1', '10.0.2.2', '10.0.2.3', '10.0.2.4'], port: 3000 },
+        ],
+        tls: { mode: 'terminate-and-reencrypt', certificate: 'auto' },
+        loadBalancing: { algorithm: 'ip-hash' },
+      },
+    },
+    // 8. DNS-over-HTTPS route
+    {
+      id: 'route-8',
+      name: 'DNS over HTTPS',
+      description: 'DNS-over-HTTPS resolver endpoint',
+      enabled: true,
+      tags: ['dns', 'https'],
+      match: {
+        ports: 443,
+        domains: 'dns.serve.zone',
+        path: '/dns-query',
+        protocol: 'http',
+      },
+      action: {
+        type: 'forward',
+        targets: [{ host: '10.0.3.1', port: 8053 }],
+        tls: { mode: 'terminate', certificate: 'auto' },
+      },
+    },
+    // 9. NFTables high-performance route
+    {
+      id: 'route-9',
+      name: 'High-Perf TCP Proxy',
+      description: 'NFTables-accelerated TCP proxy for game servers',
+      enabled: true,
+      tags: ['tcp', 'nftables', 'production'],
+      match: {
+        ports: [{ from: 27000, to: 27050 }],
+        protocol: 'tcp',
+      },
+      action: {
+        type: 'forward',
+        targets: [{ host: '10.0.4.1', port: 'preserve' }],
+        forwardingEngine: 'nftables',
+      },
+    },
+    // 10. Disabled maintenance route
+    {
+      id: 'route-10',
+      name: 'Legacy Admin Panel',
+      description: 'Deprecated admin panel — disabled for maintenance',
+      enabled: false,
+      tags: ['web', 'https', 'deprecated'],
+      match: {
+        ports: 443,
+        domains: 'admin-old.serve.zone',
+        protocol: 'http',
+      },
+      action: {
+        type: 'socket-handler',
+      },
+      security: {
+        ipBlockList: ['0.0.0.0/0'],
+      },
+    },
+  ];
+
+  private get filteredRoutes(): IRouteConfig[] {
+    if (this.currentTab === 'all') return this.demoRoutes;
+    if (this.currentTab === 'https') {
+      return this.demoRoutes.filter((r) =>
+        r.tags?.some((t) => ['web', 'https', 'http'].includes(t))
+      );
+    }
+    if (this.currentTab === 'email') {
+      return this.demoRoutes.filter((r) =>
+        r.tags?.some((t) => ['email', 'smtp'].includes(t))
+      );
+    }
+    if (this.currentTab === 'dns') {
+      return this.demoRoutes.filter((r) =>
+        r.tags?.some((t) => ['dns'].includes(t))
+      );
+    }
+    return this.demoRoutes;
+  }
+
+  async onActivate(context: { appui: DeesAppui; viewId: string }) {
+    this.appui = context.appui;
+
+    this.appui.setContentTabs([
+      {
+        key: 'All Routes',
+        action: () => {
+          this.currentTab = 'all';
+          this.updateSecondaryMenu();
+        },
+      },
+      {
+        key: 'HTTP/S',
+        action: () => {
+          this.currentTab = 'https';
+          this.updateSecondaryMenu();
+        },
+      },
+      {
+        key: 'Email',
+        action: () => {
+          this.currentTab = 'email';
+          this.updateSecondaryMenu();
+        },
+      },
+      {
+        key: 'DNS',
+        action: () => {
+          this.currentTab = 'dns';
+          this.updateSecondaryMenu();
+        },
+      },
+    ]);
+
+    this.updateSecondaryMenu();
+  }
+
+  private updateSecondaryMenu() {
+    if (!this.appui) return;
+
+    const total = this.demoRoutes.length;
+    const active = this.demoRoutes.filter((r) => r.enabled !== false).length;
+    const forwardCount = this.demoRoutes.filter((r) => r.action.type === 'forward').length;
+
+    this.appui.setSecondaryMenu({
+      heading: 'Routes',
+      groups: [
+        {
+          name: 'Actions',
+          items: [
+            {
+              type: 'action',
+              key: 'Refresh',
+              iconName: 'lucide:RefreshCw',
+              action: () => {
+                console.log('Refresh routes');
+              },
+            },
+            {
+              type: 'action',
+              key: 'Add Route',
+              iconName: 'lucide:Plus',
+              action: () => {
+                console.log('Add route');
+              },
+            },
+          ],
+        },
+        {
+          name: 'Statistics',
+          items: [
+            { type: 'header' as const, label: `${total} Total Routes` },
+            { type: 'header' as const, label: `${active} Active` },
+            { type: 'header' as const, label: `${forwardCount} Forward` },
+            { type: 'header' as const, label: `${total - forwardCount} Socket Handler` },
+          ],
+        },
+      ],
+    });
+  }
+
+  onDeactivate() {
+    // Cleanup if needed
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        padding: 24px;
+        height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <sz-route-list-view
+        .routes=${this.filteredRoutes}
+        @route-click=${(e: CustomEvent<IRouteConfig>) => {
+          console.log('Route clicked:', e.detail.name);
+        }}
+      ></sz-route-list-view>
+    `;
+  }
+}