@serve.zone/catalog 1.0.1

package/ts_web/elements/sz-dashboard-view.ts

@@ -0,0 +1,217 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import './sz-status-grid-cluster.js';
+import './sz-status-grid-services.js';
+import './sz-status-grid-network.js';
+import './sz-status-grid-infra.js';
+
+import type { IClusterStats } from './sz-status-grid-cluster.js';
+import type { IResourceUsage } from './sz-resource-usage-card.js';
+import type { IPlatformService } from './sz-platform-services-card.js';
+import type { ITrafficData } from './sz-traffic-card.js';
+import type { IProxyStatus, ICertificateStatus } from './sz-status-grid-network.js';
+import type { IQuickAction } from './sz-quick-actions-card.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-dashboard-view': SzDashboardView;
+  }
+}
+
+export interface IDashboardData {
+  cluster: IClusterStats;
+  resourceUsage: IResourceUsage;
+  platformServices: IPlatformService[];
+  traffic: ITrafficData;
+  proxy: IProxyStatus;
+  certificates: ICertificateStatus;
+  dnsConfigured: boolean;
+  acmeConfigured: boolean;
+  quickActions: IQuickAction[];
+}
+
+@customElement('sz-dashboard-view')
+export class SzDashboardView extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 1400px;">
+      <sz-dashboard-view
+        .data=${{
+          cluster: {
+            totalServices: 7,
+            running: 7,
+            stopped: 0,
+            dockerStatus: 'running',
+          },
+          resourceUsage: {
+            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' },
+            ],
+          },
+          platformServices: [
+            { name: 'MongoDB', status: '1 DB', running: true },
+            { name: 'S3 Storage (MinIO)', status: '1 bucket', running: true },
+            { name: 'Caddy Reverse Proxy', status: 'Running', running: true },
+            { name: 'ClickHouse', status: '1 DB', running: true },
+          ],
+          traffic: {
+            requests: 1250,
+            errors: 15,
+            errorPercent: 1.2,
+            avgResponse: 145,
+            reqPerMin: 21,
+            status2xx: 85,
+            status3xx: 5,
+            status4xx: 8,
+            status5xx: 2,
+          },
+          proxy: {
+            httpPort: '80',
+            httpsPort: '443',
+            httpActive: true,
+            httpsActive: true,
+            routeCount: '12',
+          },
+          certificates: {
+            valid: 8,
+            expiring: 2,
+            expired: 0,
+          },
+          dnsConfigured: true,
+          acmeConfigured: true,
+          quickActions: [
+            { label: 'Deploy Service', icon: 'plus', primary: true },
+            { label: 'View All Services' },
+            { label: 'Platform Services' },
+            { label: 'Manage Domains' },
+          ],
+        }}
+      ></sz-dashboard-view>
+    </div>
+  `;
+
+  @property({ type: Object })
+  public accessor data: IDashboardData = {
+    cluster: {
+      totalServices: 0,
+      running: 0,
+      stopped: 0,
+      dockerStatus: 'stopped',
+    },
+    resourceUsage: {
+      cpu: 0,
+      memoryUsed: '0 MB',
+      memoryTotal: '0 GB',
+      networkIn: '0 KB/s',
+      networkOut: '0 KB/s',
+      topConsumers: [],
+    },
+    platformServices: [],
+    traffic: {
+      requests: 0,
+      errors: 0,
+      errorPercent: 0,
+      avgResponse: 0,
+      reqPerMin: 0,
+      status2xx: 0,
+      status3xx: 0,
+      status4xx: 0,
+      status5xx: 0,
+    },
+    proxy: {
+      httpPort: '80',
+      httpsPort: '443',
+      httpActive: false,
+      httpsActive: false,
+      routeCount: '0',
+    },
+    certificates: {
+      valid: 0,
+      expiring: 0,
+      expired: 0,
+    },
+    dnsConfigured: false,
+    acmeConfigured: false,
+    quickActions: [],
+  };
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .dashboard {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .section-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        margin-bottom: 12px;
+      }
+
+      .section {
+        display: flex;
+        flex-direction: column;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="dashboard">
+        <section class="section">
+          <h2 class="section-title">Cluster Overview</h2>
+          <sz-status-grid-cluster
+            .stats=${this.data.cluster}
+          ></sz-status-grid-cluster>
+        </section>
+
+        <section class="section">
+          <h2 class="section-title">Services & Resources</h2>
+          <sz-status-grid-services
+            .resourceUsage=${this.data.resourceUsage}
+            .platformServices=${this.data.platformServices}
+          ></sz-status-grid-services>
+        </section>
+
+        <section class="section">
+          <h2 class="section-title">Network & Traffic</h2>
+          <sz-status-grid-network
+            .traffic=${this.data.traffic}
+            .proxy=${this.data.proxy}
+            .certificates=${this.data.certificates}
+          ></sz-status-grid-network>
+        </section>
+
+        <section class="section">
+          <h2 class="section-title">Infrastructure</h2>
+          <sz-status-grid-infra
+            ?dnsConfigured=${this.data.dnsConfigured}
+            ?acmeConfigured=${this.data.acmeConfigured}
+            .actions=${this.data.quickActions}
+            @action-click=${(e: CustomEvent) => this.dispatchEvent(new CustomEvent('action-click', { detail: e.detail, bubbles: true, composed: true }))}
+          ></sz-status-grid-infra>
+        </section>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,150 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import type { DeesAppui } from '@design.estate/dees-catalog';
+import './index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-demo-view-dashboard': SzDemoViewDashboard;
+  }
+}
+
+@customElement('sz-demo-view-dashboard')
+export class SzDemoViewDashboard extends DeesElement {
+  private appui: DeesAppui | null = null;
+
+  async onActivate(context: { appui: DeesAppui; viewId: string }) {
+    this.appui = context.appui;
+
+    // Dashboard secondary menu with quick actions
+    this.appui.setSecondaryMenu({
+      heading: 'Dashboard',
+      groups: [
+        {
+          name: 'Quick Actions',
+          items: [
+            { type: 'action', key: 'Deploy Service', iconName: 'lucide:Rocket', action: () => { console.log('Deploy service'); } },
+            { type: 'action', key: 'Add Domain', iconName: 'lucide:Globe', action: () => { console.log('Add domain'); } },
+            { type: 'action', key: 'Create Token', iconName: 'lucide:Key', action: () => { console.log('Create token'); } },
+          ],
+        },
+        {
+          name: 'System',
+          items: [
+            { type: 'action', key: 'Refresh Stats', iconName: 'lucide:RefreshCw', action: () => { console.log('Refresh'); } },
+            { type: 'action', key: 'View Logs', iconName: 'lucide:Terminal', action: () => { console.log('View logs'); } },
+          ],
+        },
+      ],
+    });
+  }
+
+  onDeactivate() {
+    // Cleanup if needed
+  }
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        padding: 24px;
+        height: 100%;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+
+      .page-header {
+        margin-bottom: 24px;
+      }
+
+      .page-title {
+        font-size: 24px;
+        font-weight: 700;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        margin: 0 0 8px 0;
+      }
+
+      .page-subtitle {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin: 0;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="page-header">
+        <h1 class="page-title">Dashboard</h1>
+        <p class="page-subtitle">Overview of your onebox infrastructure</p>
+      </div>
+
+      <sz-dashboard-view
+        .clusterStats=${{
+          totalServices: 12,
+          running: 9,
+          stopped: 3,
+          dockerStatus: 'running',
+        }}
+        .resourceUsage=${{
+          cpu: 45,
+          memoryUsed: '6.2 GB',
+          memoryTotal: '16 GB',
+          networkIn: '2.5 MB/s',
+          networkOut: '1.2 MB/s',
+          topConsumers: [
+            { name: 'mongodb', memory: '1.2 GB' },
+            { name: 'clickhouse', memory: '980 MB' },
+            { name: 'nginx-proxy', memory: '256 MB' },
+          ],
+        }}
+        .platformServices=${[
+          { name: 'MongoDB', status: 'running', icon: 'database' },
+          { name: 'S3 Storage', status: 'running', icon: 'storage' },
+          { name: 'ClickHouse', status: 'stopped', icon: 'analytics' },
+          { name: 'Redis Cache', status: 'running', icon: 'cache' },
+        ]}
+        .traffic=${{
+          requests: 15420,
+          errors: 23,
+          errorPercent: 0.15,
+          avgResponse: 145,
+          reqPerMin: 856,
+          status2xx: 14850,
+          status3xx: 320,
+          status4xx: 227,
+          status5xx: 23,
+        }}
+        .proxy=${{
+          httpPort: '80',
+          httpsPort: '443',
+          httpActive: true,
+          httpsActive: true,
+          routeCount: '24',
+        }}
+        .certificates=${{
+          valid: 18,
+          expiring: 2,
+          expired: 0,
+        }}
+        .dns=${{
+          records: 45,
+          zones: 8,
+          pendingChanges: 0,
+        }}
+        .ssl=${{
+          activeCerts: 20,
+          autoRenew: true,
+          provider: "Let's Encrypt",
+        }}
+        @quick-action=${(e: CustomEvent) => console.log('Quick action:', e.detail)}
+      ></sz-dashboard-view>
+    `;
+  }
+}