@serve.zone/catalog 1.0.1

package/ts_web/elements/sz-registry-onebox-view.ts

@@ -0,0 +1,258 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-registry-onebox-view': SzRegistryOneboxView;
+  }
+}
+
+@customElement('sz-registry-onebox-view')
+export class SzRegistryOneboxView extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 800px;">
+      <sz-registry-onebox-view
+        status="running"
+        registryUrl="localhost:3000/v2"
+      ></sz-registry-onebox-view>
+    </div>
+  `;
+
+  @property({ type: String })
+  public accessor status: 'running' | 'stopped' = 'stopped';
+
+  @property({ type: String })
+  public accessor registryUrl: string = '';
+
+  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;
+        overflow: hidden;
+      }
+
+      .card-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+      }
+
+      .registry-icon {
+        width: 40px;
+        height: 40px;
+        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .header-info {
+        flex: 1;
+      }
+
+      .header-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .default-badge {
+        padding: 2px 8px;
+        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 600;
+      }
+
+      .header-subtitle {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-top: 2px;
+      }
+
+      .card-content {
+        padding: 16px;
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 16px;
+        margin-bottom: 24px;
+      }
+
+      .info-item {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .info-label {
+        font-size: 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .info-value {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .status-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .status-badge.running {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .status-badge.stopped {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .manage-link {
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+      .manage-link:hover {
+        text-decoration: underline;
+      }
+
+      .quick-start {
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        border-radius: 6px;
+        padding: 16px;
+      }
+
+      .quick-start-title {
+        font-size: 14px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        margin-bottom: 8px;
+      }
+
+      .quick-start-desc {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-bottom: 12px;
+      }
+
+      .code-block {
+        background: ${cssManager.bdTheme('#18181b', '#0a0a0a')};
+        border-radius: 6px;
+        padding: 12px;
+        font-family: monospace;
+        font-size: 13px;
+        overflow-x: auto;
+      }
+
+      .code-line {
+        color: ${cssManager.bdTheme('#a1a1aa', '#71717a')};
+        margin-bottom: 4px;
+      }
+
+      .code-line:last-child {
+        margin-bottom: 0;
+      }
+
+      .code-comment {
+        color: ${cssManager.bdTheme('#6b7280', '#52525b')};
+      }
+
+      .code-command {
+        color: ${cssManager.bdTheme('#fafafa', '#e4e4e7')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="card">
+        <div class="card-header">
+          <div class="registry-icon">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
+            </svg>
+          </div>
+          <div class="header-info">
+            <div class="header-title">
+              Onebox Registry (Built-in)
+              <span class="default-badge">Default</span>
+            </div>
+            <div class="header-subtitle">Built-in container registry for your services</div>
+          </div>
+        </div>
+
+        <div class="card-content">
+          <div class="info-grid">
+            <div class="info-item">
+              <span class="info-label">Status</span>
+              <span class="info-value">
+                <span class="status-badge ${this.status}">${this.status === 'running' ? 'Running' : 'Stopped'}</span>
+              </span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">Registry URL</span>
+              <span class="info-value">${this.registryUrl}</span>
+            </div>
+            <div class="info-item">
+              <span class="info-label">Authentication</span>
+              <span class="info-value">
+                <a class="manage-link" @click=${() => this.handleManageTokens()}>Manage Tokens</a>
+              </span>
+            </div>
+          </div>
+
+          <div class="quick-start">
+            <div class="quick-start-title">Quick Start</div>
+            <div class="quick-start-desc">To push images to the Onebox registry, use a CI or Global token:</div>
+            <div class="code-block">
+              <div class="code-line code-comment"># Login to the registry</div>
+              <div class="code-line code-command">docker login ${this.registryUrl.split('/')[0]} -u onebox -p YOUR_TOKEN</div>
+              <div class="code-line code-comment"># Tag and push your image</div>
+              <div class="code-line code-command">docker tag myapp ${this.registryUrl.split('/')[0]}/myservice:latest</div>
+              <div class="code-line code-command">docker push ${this.registryUrl.split('/')[0]}/myservice:latest</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private handleManageTokens() {
+    this.dispatchEvent(new CustomEvent('manage-tokens', { bubbles: true, composed: true }));
+  }
+}

package/ts_web/elements/sz-resource-usage-card.ts

@@ -0,0 +1,284 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-resource-usage-card': SzResourceUsageCard;
+  }
+}
+
+export interface IResourceUsage {
+  cpu: number;
+  memoryUsed: string;
+  memoryTotal: string;
+  networkIn: string;
+  networkOut: string;
+  topConsumers: Array<{ name: string; memory: string }>;
+}
+
+@customElement('sz-resource-usage-card')
+export class SzResourceUsageCard extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 800px;">
+      <sz-resource-usage-card
+        .data=${{
+          cpu: 0.5,
+          memoryUsed: '191 MB',
+          memoryTotal: '429.2 GB',
+          networkIn: '38.9 KB/s',
+          networkOut: '1.7 KB/s',
+          topConsumers: [
+            { name: 'test-nginx', memory: '32.1 MB' },
+            { name: 'test-v2', memory: '31.7 MB' },
+          ],
+        }}
+        serviceCount="7"
+      ></sz-resource-usage-card>
+    </div>
+  `;
+
+  @property({ type: Object })
+  public accessor data: IResourceUsage = {
+    cpu: 0,
+    memoryUsed: '0 MB',
+    memoryTotal: '0 GB',
+    networkIn: '0 KB/s',
+    networkOut: '0 KB/s',
+    topConsumers: [],
+  };
+
+  @property({ type: String })
+  public accessor serviceCount: string = '0';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .card {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        padding: 20px;
+        height: 100%;
+        box-sizing: border-box;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .subtitle {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-top: 2px;
+      }
+
+      .view-all {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+      .view-all:hover {
+        text-decoration: underline;
+      }
+
+      .metrics {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      .metric-row {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .metric-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .metric-label {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .metric-value {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .progress-bar {
+        height: 6px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        border-radius: 3px;
+        overflow: hidden;
+      }
+
+      .progress-fill {
+        height: 100%;
+        background: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        border-radius: 3px;
+        transition: width 300ms ease;
+      }
+
+      .network-row {
+        display: flex;
+        gap: 16px;
+        align-items: center;
+      }
+
+      .network-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .network-icon {
+        width: 14px;
+        height: 14px;
+      }
+
+      .network-icon.down {
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .network-icon.up {
+        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+      }
+
+      .top-consumers {
+        margin-top: 8px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+      }
+
+      .consumers-label {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-bottom: 6px;
+      }
+
+      .consumers-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+      }
+
+      .consumer-item {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .consumer-name {
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="card">
+        <div class="header">
+          <div>
+            <div class="title">Resource Usage</div>
+            <div class="subtitle">Aggregated across ${this.serviceCount} services</div>
+          </div>
+          <a class="view-all">View All</a>
+        </div>
+
+        <div class="metrics">
+          <div class="metric-row">
+            <div class="metric-header">
+              <span class="metric-label">CPU</span>
+              <span class="metric-value">${this.data.cpu.toFixed(1)}%</span>
+            </div>
+            <div class="progress-bar">
+              <div class="progress-fill" style="width: ${Math.min(this.data.cpu, 100)}%"></div>
+            </div>
+          </div>
+
+          <div class="metric-row">
+            <div class="metric-header">
+              <span class="metric-label">Memory</span>
+              <span class="metric-value">${this.data.memoryUsed} / ${this.data.memoryTotal}</span>
+            </div>
+            <div class="progress-bar">
+              <div class="progress-fill" style="width: ${this.calculateMemoryPercent()}%"></div>
+            </div>
+          </div>
+
+          <div class="metric-row">
+            <div class="metric-header">
+              <span class="metric-label">Network</span>
+              <div class="network-row">
+                <span class="network-item">
+                  <svg class="network-icon down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 5v14M19 12l-7 7-7-7"/>
+                  </svg>
+                  ${this.data.networkIn}
+                </span>
+                <span class="network-item">
+                  <svg class="network-icon up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 19V5M5 12l7-7 7 7"/>
+                  </svg>
+                  ${this.data.networkOut}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        ${this.data.topConsumers.length > 0 ? html`
+          <div class="top-consumers">
+            <div class="consumers-label">Top consumers</div>
+            <div class="consumers-list">
+              ${this.data.topConsumers.map(
+                (consumer) => html`
+                  <span class="consumer-item">
+                    <span class="consumer-name">${consumer.name}:</span> ${consumer.memory}
+                  </span>
+                `
+              )}
+            </div>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private calculateMemoryPercent(): number {
+    // Simple extraction of numbers - in real app would parse properly
+    const used = parseFloat(this.data.memoryUsed);
+    const total = parseFloat(this.data.memoryTotal);
+    if (total === 0) return 0;
+    // Assuming both are in same unit for demo
+    return Math.min((used / total) * 100, 100);
+  }
+}

package/ts_web/elements/sz-reverse-proxy-card.ts

@@ -0,0 +1,151 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-reverse-proxy-card': SzReverseProxyCard;
+  }
+}
+
+@customElement('sz-reverse-proxy-card')
+export class SzReverseProxyCard extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 400px;">
+      <sz-reverse-proxy-card
+        httpPort="8080"
+        httpsPort="8443"
+        httpActive
+        httpsActive
+        routeCount="3"
+      ></sz-reverse-proxy-card>
+    </div>
+  `;
+
+  @property({ type: String })
+  public accessor httpPort: string = '80';
+
+  @property({ type: String })
+  public accessor httpsPort: string = '443';
+
+  @property({ type: Boolean })
+  public accessor httpActive: boolean = false;
+
+  @property({ type: Boolean })
+  public accessor httpsActive: boolean = false;
+
+  @property({ type: String })
+  public accessor routeCount: string = '0';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .card {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        padding: 20px;
+        height: 100%;
+        box-sizing: border-box;
+      }
+
+      .header {
+        margin-bottom: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .subtitle {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-top: 2px;
+      }
+
+      .items {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .item-label {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .item-value {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 10px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .badge.active {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .badge.inactive {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="card">
+        <div class="header">
+          <div class="title">Reverse Proxy</div>
+          <div class="subtitle">HTTP/HTTPS proxy status</div>
+        </div>
+
+        <div class="items">
+          <div class="item">
+            <span class="item-label">HTTP (${this.httpPort})</span>
+            <span class="badge ${this.httpActive ? 'active' : 'inactive'}">
+              ${this.httpActive ? 'Active' : 'Inactive'}
+            </span>
+          </div>
+          <div class="item">
+            <span class="item-label">HTTPS (${this.httpsPort})</span>
+            <span class="badge ${this.httpsActive ? 'active' : 'inactive'}">
+              ${this.httpsActive ? 'Active' : 'Inactive'}
+            </span>
+          </div>
+          <div class="item">
+            <span class="item-label">Routes</span>
+            <span class="item-value">${this.routeCount}</span>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}