update

ts_web/elements/sz-status-grid-cluster.ts

@@ -0,0 +1,105 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import './sz-stat-card.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-status-grid-cluster': SzStatusGridCluster;
+  }
+}
+
+export interface IClusterStats {
+  totalServices: number;
+  running: number;
+  stopped: number;
+  dockerStatus: 'running' | 'stopped';
+}
+
+@customElement('sz-status-grid-cluster')
+export class SzStatusGridCluster extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 900px;">
+      <sz-status-grid-cluster
+        .stats=${{
+          totalServices: 7,
+          running: 7,
+          stopped: 0,
+          dockerStatus: 'running',
+        }}
+      ></sz-status-grid-cluster>
+    </div>
+  `;
+
+  @property({ type: Object })
+  public accessor stats: IClusterStats = {
+    totalServices: 0,
+    running: 0,
+    stopped: 0,
+    dockerStatus: 'stopped',
+  };
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+        align-items: stretch;
+      }
+
+      .grid > * {
+        height: 100%;
+      }
+
+      @media (min-width: 768px) {
+        .grid {
+          grid-template-columns: repeat(4, 1fr);
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="grid">
+        <sz-stat-card
+          label="Total Services"
+          value="${this.stats.totalServices}"
+          icon="server"
+        ></sz-stat-card>
+        <sz-stat-card
+          label="Running"
+          value="${this.stats.running}"
+          icon="check"
+          variant="success"
+        ></sz-stat-card>
+        <sz-stat-card
+          label="Stopped"
+          value="${this.stats.stopped}"
+          icon="stop"
+          variant="${this.stats.stopped > 0 ? 'warning' : 'default'}"
+        ></sz-stat-card>
+        <sz-stat-card
+          label="Docker"
+          value="${this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped'}"
+          icon="container"
+          variant="${this.stats.dockerStatus === 'running' ? 'success' : 'error'}"
+          valueBadge
+        ></sz-stat-card>
+      </div>
+    `;
+  }
+}