@serve.zone/catalog 2.2.0 → 2.4.0

package/ts_web/elements/sz-route-card.ts

@@ -0,0 +1,667 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-route-card': SzRouteCard;
+  }
+}
+
+// Simplified route types for display purposes
+export type TRouteActionType = 'forward' | 'socket-handler';
+export type TTlsMode = 'passthrough' | 'terminate' | 'terminate-and-reencrypt';
+export type TPortRange = number | number[] | Array<{ from: number; to: number }>;
+
+export interface IRouteMatch {
+  ports: TPortRange;
+  domains?: string | string[];
+  path?: string;
+  clientIp?: string[];
+  tlsVersion?: string[];
+  headers?: Record<string, string>;
+  protocol?: 'http' | 'tcp';
+}
+
+export interface IRouteTarget {
+  host: string | string[];
+  port: number | 'preserve';
+}
+
+export interface IRouteTls {
+  mode: TTlsMode;
+  certificate?: 'auto' | { key: string; cert: string };
+}
+
+export interface IRouteAction {
+  type: TRouteActionType;
+  targets?: IRouteTarget[];
+  tls?: IRouteTls;
+  websocket?: { enabled: boolean };
+  loadBalancing?: { algorithm: 'round-robin' | 'least-connections' | 'ip-hash' };
+  forwardingEngine?: 'node' | 'nftables';
+}
+
+export interface IRouteSecurity {
+  ipAllowList?: string[];
+  ipBlockList?: string[];
+  maxConnections?: number;
+  rateLimit?: { enabled: boolean; maxRequests: number; window: number };
+}
+
+export interface IRouteConfig {
+  id?: string;
+  match: IRouteMatch;
+  action: IRouteAction;
+  security?: IRouteSecurity;
+  headers?: { request?: Record<string, string>; response?: Record<string, string> };
+  name?: string;
+  description?: string;
+  priority?: number;
+  tags?: string[];
+  enabled?: boolean;
+}
+
+function formatPorts(ports: TPortRange): string {
+  if (typeof ports === 'number') return String(ports);
+  if (Array.isArray(ports)) {
+    return ports
+      .map((p) => {
+        if (typeof p === 'number') return String(p);
+        return `${p.from}\u2013${p.to}`;
+      })
+      .join(', ');
+  }
+  return String(ports);
+}
+
+function formatTargets(targets: IRouteTarget[]): string[] {
+  const result: string[] = [];
+  for (const t of targets) {
+    const hosts = Array.isArray(t.host) ? t.host : [t.host];
+    const portStr = t.port === 'preserve' ? '(preserve)' : String(t.port);
+    for (const h of hosts) {
+      result.push(`${h}:${portStr}`);
+    }
+  }
+  return result;
+}
+
+@customElement('sz-route-card')
+export class SzRouteCard extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 520px;">
+      <sz-route-card
+        .route=${{
+          name: 'API Gateway',
+          description: 'Main API gateway with TLS termination and load balancing',
+          enabled: true,
+          priority: 10,
+          tags: ['web', 'api', 'production'],
+          match: {
+            ports: [443, 8443],
+            domains: ['api.example.com', '*.api.serve.zone'],
+            path: '/api/*',
+            protocol: 'http' as const,
+            clientIp: ['10.0.0.0/8'],
+          },
+          action: {
+            type: 'forward' as const,
+            targets: [
+              { host: ['10.0.0.1', '10.0.0.2'], port: 8080 },
+            ],
+            tls: { mode: 'terminate' as const, certificate: 'auto' as const },
+            websocket: { enabled: true },
+            loadBalancing: { algorithm: 'round-robin' as const },
+            forwardingEngine: 'nftables' as const,
+          },
+          security: {
+            ipAllowList: ['10.0.0.0/8'],
+            ipBlockList: ['192.168.100.0/24'],
+            rateLimit: { enabled: true, maxRequests: 100, window: 60 },
+            maxConnections: 1000,
+          },
+        } satisfies IRouteConfig}
+      ></sz-route-card>
+    </div>
+  `;
+
+  public static demoGroups = ['Routes'];
+
+  @property({ type: Object })
+  public accessor route: IRouteConfig | null = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .card {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        padding: 20px;
+        transition: border-color 200ms ease, box-shadow 200ms ease;
+      }
+
+      .card:hover {
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        box-shadow: 0 2px 8px ${cssManager.bdTheme('rgba(0,0,0,0.06)', 'rgba(0,0,0,0.2)')};
+      }
+
+      /* Header */
+      .header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 4px;
+      }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+      }
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .status-dot.enabled {
+        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
+        box-shadow: 0 0 6px ${cssManager.bdTheme('rgba(34,197,94,0.4)', 'rgba(34,197,94,0.3)')};
+      }
+
+      .status-dot.disabled {
+        background: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+      }
+
+      .route-name {
+        font-size: 15px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .header-badges {
+        display: flex;
+        gap: 6px;
+        flex-shrink: 0;
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 11px;
+        font-weight: 500;
+        white-space: nowrap;
+      }
+
+      .badge.forward {
+        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .badge.socket-handler {
+        background: ${cssManager.bdTheme('#ede9fe', 'rgba(139, 92, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#7c3aed', '#a78bfa')};
+      }
+
+      .badge.enabled {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .badge.disabled {
+        background: ${cssManager.bdTheme('#f4f4f5', 'rgba(113, 113, 122, 0.2)')};
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .description {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-bottom: 8px;
+        line-height: 1.4;
+      }
+
+      .meta-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 6px;
+        margin-bottom: 16px;
+      }
+
+      .tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+      }
+
+      .tag {
+        padding: 2px 8px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
+      }
+
+      .priority {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#a1a1aa', '#71717a')};
+        font-weight: 500;
+      }
+
+      /* Sections */
+      .section {
+        border-left: 3px solid;
+        padding: 10px 14px;
+        margin-bottom: 12px;
+        border-radius: 0 6px 6px 0;
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+      }
+
+      .section:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .section.match {
+        border-left-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+      }
+
+      .section.action {
+        border-left-color: ${cssManager.bdTheme('#22c55e', '#22c55e')};
+      }
+
+      .section.security {
+        border-left-color: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
+      }
+
+      .section-label {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: ${cssManager.bdTheme('#a1a1aa', '#71717a')};
+        margin-bottom: 8px;
+      }
+
+      .field-row {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 5px;
+        font-size: 13px;
+        line-height: 1.5;
+      }
+
+      .field-row:last-child {
+        margin-bottom: 0;
+      }
+
+      .field-key {
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        min-width: 64px;
+        flex-shrink: 0;
+        font-weight: 500;
+      }
+
+      .field-value {
+        color: ${cssManager.bdTheme('#18181b', '#e4e4e7')};
+        word-break: break-all;
+      }
+
+      .domain-chip {
+        display: inline-flex;
+        padding: 1px 6px;
+        background: ${cssManager.bdTheme('#eff6ff', 'rgba(59, 130, 246, 0.1)')};
+        border-radius: 3px;
+        font-size: 12px;
+        margin-right: 4px;
+        margin-bottom: 2px;
+        font-family: monospace;
+      }
+
+      .domain-chip.glob {
+        background: ${cssManager.bdTheme('#fef3c7', 'rgba(245, 158, 11, 0.15)')};
+        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+      }
+
+      .mono {
+        font-family: monospace;
+        font-size: 12px;
+      }
+
+      .protocol-badge {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 11px;
+        font-weight: 500;
+      }
+
+      .protocol-badge.http {
+        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .protocol-badge.tcp {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .tls-badge {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 11px;
+        font-weight: 500;
+      }
+
+      .tls-badge.auto {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .tls-badge.custom {
+        background: ${cssManager.bdTheme('#ffedd5', 'rgba(249, 115, 22, 0.2)')};
+        color: ${cssManager.bdTheme('#c2410c', '#fb923c')};
+      }
+
+      .engine-badge {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 11px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme('#fae8ff', 'rgba(168, 85, 247, 0.2)')};
+        color: ${cssManager.bdTheme('#7e22ce', '#c084fc')};
+      }
+
+      .header-pair {
+        display: inline;
+        font-family: monospace;
+        font-size: 12px;
+      }
+
+      /* Feature icons */
+      .features-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-top: 14px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1a')};
+      }
+
+      .feature {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .feature-icon {
+        font-size: 13px;
+      }
+
+      .no-route {
+        text-align: center;
+        padding: 24px;
+        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
+        font-size: 13px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    if (!this.route) {
+      return html`<div class="card"><div class="no-route">No route data</div></div>`;
+    }
+
+    const r = this.route;
+    const isEnabled = r.enabled !== false;
+    const match = r.match;
+    const action = r.action;
+    const security = r.security;
+
+    return html`
+      <div class="card">
+        <!-- Header -->
+        <div class="header">
+          <div class="header-left">
+            <span class="status-dot ${isEnabled ? 'enabled' : 'disabled'}"></span>
+            <span class="route-name">${r.name || r.id || 'Unnamed Route'}</span>
+          </div>
+          <div class="header-badges">
+            <span class="badge ${action.type}">${action.type}</span>
+            <span class="badge ${isEnabled ? 'enabled' : 'disabled'}">${isEnabled ? 'enabled' : 'disabled'}</span>
+          </div>
+        </div>
+
+        ${r.description ? html`<div class="description">${r.description}</div>` : ''}
+
+        <div class="meta-row">
+          ${r.tags && r.tags.length > 0
+            ? html`<div class="tags">${r.tags.map((t) => html`<span class="tag">${t}</span>`)}</div>`
+            : html`<div></div>`}
+          ${r.priority != null ? html`<span class="priority">Priority: ${r.priority}</span>` : ''}
+        </div>
+
+        <!-- Match Section -->
+        <div class="section match">
+          <div class="section-label">Match</div>
+          <div class="field-row">
+            <span class="field-key">Ports</span>
+            <span class="field-value mono">${formatPorts(match.ports)}</span>
+          </div>
+          ${match.domains
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Domains</span>
+                  <span class="field-value">${this.renderDomains(match.domains)}</span>
+                </div>
+              `
+            : ''}
+          ${match.path
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Path</span>
+                  <span class="field-value mono">${match.path}</span>
+                </div>
+              `
+            : ''}
+          ${match.protocol
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Protocol</span>
+                  <span class="field-value">
+                    <span class="protocol-badge ${match.protocol}">${match.protocol}</span>
+                  </span>
+                </div>
+              `
+            : ''}
+          ${match.clientIp && match.clientIp.length > 0
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Client</span>
+                  <span class="field-value mono">${match.clientIp.join(', ')}</span>
+                </div>
+              `
+            : ''}
+          ${match.tlsVersion && match.tlsVersion.length > 0
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">TLS Ver</span>
+                  <span class="field-value">${match.tlsVersion.join(', ')}</span>
+                </div>
+              `
+            : ''}
+          ${match.headers
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Headers</span>
+                  <span class="field-value">
+                    ${Object.entries(match.headers).map(
+                      ([k, v]) => html`<span class="header-pair">${k}=${v}</span> `
+                    )}
+                  </span>
+                </div>
+              `
+            : ''}
+        </div>
+
+        <!-- Action Section -->
+        <div class="section action">
+          <div class="section-label">Action</div>
+          ${action.targets && action.targets.length > 0
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Targets</span>
+                  <span class="field-value mono">${formatTargets(action.targets).join(', ')}</span>
+                </div>
+              `
+            : ''}
+          ${action.tls
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">TLS</span>
+                  <span class="field-value">
+                    ${action.tls.mode}
+                    ${action.tls.certificate
+                      ? action.tls.certificate === 'auto'
+                        ? html` <span class="tls-badge auto">auto cert</span>`
+                        : html` <span class="tls-badge custom">custom cert</span>`
+                      : ''}
+                  </span>
+                </div>
+              `
+            : ''}
+          ${action.forwardingEngine
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">Engine</span>
+                  <span class="field-value"><span class="engine-badge">${action.forwardingEngine}</span></span>
+                </div>
+              `
+            : ''}
+          ${action.loadBalancing
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">LB</span>
+                  <span class="field-value">${action.loadBalancing.algorithm}</span>
+                </div>
+              `
+            : ''}
+          ${action.websocket?.enabled
+            ? html`
+                <div class="field-row">
+                  <span class="field-key">WS</span>
+                  <span class="field-value"><span class="badge enabled">enabled</span></span>
+                </div>
+              `
+            : ''}
+        </div>
+
+        <!-- Security Section -->
+        ${security
+          ? html`
+              <div class="section security">
+                <div class="section-label">Security</div>
+                ${security.ipAllowList && security.ipAllowList.length > 0
+                  ? html`
+                      <div class="field-row">
+                        <span class="field-key">Allow</span>
+                        <span class="field-value mono">${security.ipAllowList.join(', ')}</span>
+                      </div>
+                    `
+                  : ''}
+                ${security.ipBlockList && security.ipBlockList.length > 0
+                  ? html`
+                      <div class="field-row">
+                        <span class="field-key">Block</span>
+                        <span class="field-value mono">${security.ipBlockList.join(', ')}</span>
+                      </div>
+                    `
+                  : ''}
+                ${security.rateLimit?.enabled
+                  ? html`
+                      <div class="field-row">
+                        <span class="field-key">Rate</span>
+                        <span class="field-value">${security.rateLimit.maxRequests} req / ${security.rateLimit.window}s</span>
+                      </div>
+                    `
+                  : ''}
+                ${security.maxConnections
+                  ? html`
+                      <div class="field-row">
+                        <span class="field-key">Max Conn</span>
+                        <span class="field-value">${security.maxConnections}</span>
+                      </div>
+                    `
+                  : ''}
+              </div>
+            `
+          : ''}
+
+        <!-- Feature Icons Row -->
+        ${this.renderFeatures()}
+      </div>
+    `;
+  }
+
+  private renderDomains(domains: string | string[]): TemplateResult {
+    const list = Array.isArray(domains) ? domains : [domains];
+    return html`${list.map(
+      (d) =>
+        html`<span class="domain-chip ${d.includes('*') ? 'glob' : ''}">${d}</span>`
+    )}`;
+  }
+
+  private renderFeatures(): TemplateResult {
+    if (!this.route) return html``;
+    const features: TemplateResult[] = [];
+    const action = this.route.action;
+    const security = this.route.security;
+    const headers = this.route.headers;
+
+    if (action.tls) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x1f512;</span>TLS</span>`);
+    }
+    if (action.websocket?.enabled) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x2194;</span>WS</span>`);
+    }
+    if (action.loadBalancing) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x2696;</span>LB</span>`);
+    }
+    if (security) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x1f6e1;</span>Security</span>`);
+    }
+    if (headers) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x2699;</span>Headers</span>`);
+    }
+
+    if (features.length === 0) return html``;
+    return html`<div class="features-row">${features}</div>`;
+  }
+}