update

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

@@ -0,0 +1,99 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import './sz-resource-usage-card.js';
+import './sz-platform-services-card.js';
+
+import type { IResourceUsage } from './sz-resource-usage-card.js';
+import type { IPlatformService } from './sz-platform-services-card.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-status-grid-services': SzStatusGridServices;
+  }
+}
+
+@customElement('sz-status-grid-services')
+export class SzStatusGridServices extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 1200px;">
+      <sz-status-grid-services
+        .resourceUsage=${{
+          cpu: { percentage: 45, label: 'CPU Usage' },
+          memory: { percentage: 62, label: 'Memory', used: '4.96 GB', total: '8 GB' },
+          network: { percentage: 23, label: 'Network I/O', rate: '1.2 MB/s' },
+          topConsumers: [
+            { name: 'api-service', cpu: 25, memory: 512 },
+            { name: 'web-frontend', cpu: 15, memory: 256 },
+            { name: 'worker', cpu: 5, memory: 128 },
+          ],
+        }}
+        .platformServices=${[
+          { name: 'MongoDB', status: 'running' },
+          { name: 'S3 Storage', status: 'running' },
+          { name: 'ClickHouse', status: 'stopped' },
+          { name: 'Redis Cache', status: 'running' },
+        ]}
+      ></sz-status-grid-services>
+    </div>
+  `;
+
+  @property({ type: Object })
+  public accessor resourceUsage: IResourceUsage = {
+    cpu: 0,
+    memoryUsed: '0 GB',
+    memoryTotal: '0 GB',
+    networkIn: '0 MB/s',
+    networkOut: '0 MB/s',
+    topConsumers: [],
+  };
+
+  @property({ type: Array })
+  public accessor platformServices: IPlatformService[] = [];
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 16px;
+        align-items: stretch;
+      }
+
+      .grid > * {
+        height: 100%;
+      }
+
+      @media (min-width: 768px) {
+        .grid {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="grid">
+        <sz-resource-usage-card
+          .usage=${this.resourceUsage}
+        ></sz-resource-usage-card>
+        <sz-platform-services-card
+          .services=${this.platformServices}
+        ></sz-platform-services-card>
+      </div>
+    `;
+  }
+}