feat(cluster): Add cluster setupMode (manual|hetzner|aws|digitalocean) with conditional Hetzner auto-provisioning; UI and dashboard improvements; dependency upgrades

ts_web/elements/cloudly-view-overview.ts

@@ -1,4 +1,3 @@
-import * as plugins from '../plugins.js';
 import * as shared from '../elements/shared/index.js';
 
 import {
@@ -34,34 +33,124 @@ export class CloudlyViewOverview extends DeesElement {
     cssManager.defaultStyles,
     shared.viewHostCss,
     css`
-      .clusterGrid {
-        display: grid;
-        grid-template-columns: ${cssManager.cssGridColumns(3, 8)};
-        grid-gap: 16px;
-        margin-bottom: 40px;
+      dees-statsgrid {
+        margin-top: 24px;
       }
     `,
   ];
 
   public render() {
+    // Calculate total servers across all clusters
+    const totalServers = this.data.clusters?.reduce((sum, cluster) => 
+      sum + (cluster.data.servers?.length || 0), 0) || 0;
+
+    // Create tiles for the stats grid
+    const statsTiles = [
+      {
+        id: 'clusters',
+        title: 'Total Clusters',
+        value: this.data.clusters?.length || 0,
+        type: 'number' as const,
+        iconName: 'lucide:Network',
+        description: 'Active clusters'
+      },
+      {
+        id: 'servers',
+        title: 'Total Servers',
+        value: totalServers,
+        type: 'number' as const,
+        iconName: 'lucide:Server',
+        description: 'Connected servers'
+      },
+      {
+        id: 'services',
+        title: 'Services',
+        value: this.data.services?.length || 0,
+        type: 'number' as const,
+        iconName: 'lucide:Layers',
+        description: 'Deployed services'
+      },
+      {
+        id: 'deployments',
+        title: 'Deployments',
+        value: this.data.deployments?.length || 0,
+        type: 'number' as const,
+        iconName: 'lucide:Rocket',
+        description: 'Active deployments'
+      },
+      {
+        id: 'secretGroups',
+        title: 'Secret Groups',
+        value: this.data.secretGroups?.length || 0,
+        type: 'number' as const,
+        iconName: 'lucide:ShieldCheck',
+        description: 'Configured secret groups'
+      },
+      {
+        id: 'secretBundles',
+        title: 'Secret Bundles',
+        value: this.data.secretBundles?.length || 0,
+        type: 'number' as const,
+        iconName: 'lucide:LockKeyhole',
+        description: 'Available secret bundles'
+      },
+      {
+        id: 'images',
+        title: 'Images',
+        value: this.data.images?.length || 0,
+        type: 'number' as const,
+        iconName: 'lucide:Image',
+        description: 'Container images'
+      },
+      {
+        id: 'dns',
+        title: 'DNS Zones',
+        value: this.data.dns?.length || 0,
+        type: 'number' as const,
+        iconName: 'lucide:Globe',
+        description: 'Managed DNS zones'
+      },
+      {
+        id: 'databases',
+        title: 'Databases',
+        value: this.data.dbs?.length || 0,
+        type: 'number' as const,
+        iconName: 'lucide:Database',
+        description: 'Database instances'
+      },
+      {
+        id: 'backups',
+        title: 'Backups',
+        value: this.data.backups?.length || 0,
+        type: 'number' as const,
+        iconName: 'lucide:Save',
+        description: 'Available backups'
+      },
+      {
+        id: 'mails',
+        title: 'Mail Domains',
+        value: this.data.mails?.length || 0,
+        type: 'number' as const,
+        iconName: 'lucide:Mail',
+        description: 'Mail configurations'
+      },
+      {
+        id: 's3',
+        title: 'S3 Buckets',
+        value: this.data.s3?.length || 0,
+        type: 'number' as const,
+        iconName: 'lucide:Cloud',
+        description: 'Storage buckets'
+      }
+    ];
+
     return html`
       <cloudly-sectionheading>Overview</cloudly-sectionheading>
-      ${this.data.clusters.length === 0 ? html`
-        You need to create at least one cluster to see an overview.
-      `: html``}
-      ${this.data.clusters.map(
-        (clusterArg) => html`
-          <dees-label .label=${'cluster: ' + clusterArg.data.name}></dees-label>
-          <div class="clusterGrid">
-            <dees-chart-area .label=${'System Usage'}></dees-chart-area>
-            <dees-chart-area .label=${'Internet Traffic'}></dees-chart-area>
-            <dees-chart-area .label=${'Requests'}></dees-chart-area>
-            <dees-chart-area .label=${'WebSocket Connections'}></dees-chart-area>
-            <dees-chart-log class="services" .label=${'Deployed Services'}></dees-chart-log>
-            <dees-chart-log class="eventLog" .label=${'Event Log'}></dees-chart-log>
-          </div>
-        `
-      )}
+      <dees-statsgrid
+        .tiles=${statsTiles}
+        .minTileWidth=${250}
+        .gap=${16}
+      ></dees-statsgrid>
     `;
   }
 }