update

2026-01-03 02:44:25 +00:00
commit 4c0e498c4e
140 changed files with 245676 additions and 0 deletions
--- a/ts_web/elements/sz-demo-view-dashboard.ts
+++ b/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>
+    `;
+  }
+}