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-status-grid-network.ts
+++ b/ts_web/elements/sz-status-grid-network.ts
@@ -0,0 +1,152 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import './sz-traffic-card.js';
+import './sz-reverse-proxy-card.js';
+import './sz-certificates-card.js';
+
+import type { ITrafficData } from './sz-traffic-card.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sz-status-grid-network': SzStatusGridNetwork;
+  }
+}
+
+export interface IProxyStatus {
+  httpPort: string;
+  httpsPort: string;
+  httpActive: boolean;
+  httpsActive: boolean;
+  routeCount: string;
+}
+
+export interface ICertificateStatus {
+  valid: number;
+  expiring: number;
+  expired: number;
+}
+
+@customElement('sz-status-grid-network')
+export class SzStatusGridNetwork extends DeesElement {
+  public static demo = () => html`
+    <div style="padding: 24px; max-width: 1400px;">
+      <sz-status-grid-network
+        .traffic=${{
+          totalRequests: 125420,
+          requestsPerMinute: 847,
+          errorRate: 0.12,
+          avgResponseTime: 45,
+          statusDistribution: {
+            '2xx': 95.2,
+            '3xx': 2.1,
+            '4xx': 2.3,
+            '5xx': 0.4,
+          },
+        }}
+        .proxy=${{
+          httpPort: '80',
+          httpsPort: '443',
+          httpActive: true,
+          httpsActive: true,
+          routeCount: '12',
+        }}
+        .certificates=${{
+          valid: 8,
+          expiring: 2,
+          expired: 0,
+        }}
+      ></sz-status-grid-network>
+    </div>
+  `;
+
+  @property({ type: Object })
+  public accessor traffic: ITrafficData = {
+    requests: 0,
+    errors: 0,
+    errorPercent: 0,
+    avgResponse: 0,
+    reqPerMin: 0,
+    status2xx: 0,
+    status3xx: 0,
+    status4xx: 0,
+    status5xx: 0,
+  };
+
+  @property({ type: Object })
+  public accessor proxy: IProxyStatus = {
+    httpPort: '80',
+    httpsPort: '443',
+    httpActive: false,
+    httpsActive: false,
+    routeCount: '0',
+  };
+
+  @property({ type: Object })
+  public accessor certificates: ICertificateStatus = {
+    valid: 0,
+    expiring: 0,
+    expired: 0,
+  };
+
+  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;
+        }
+      }
+
+      @media (min-width: 1024px) {
+        .grid {
+          grid-template-columns: 2fr 1fr 1fr;
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="grid">
+        <sz-traffic-card
+          .data=${this.traffic}
+        ></sz-traffic-card>
+        <sz-reverse-proxy-card
+          httpPort="${this.proxy.httpPort}"
+          httpsPort="${this.proxy.httpsPort}"
+          ?httpActive=${this.proxy.httpActive}
+          ?httpsActive=${this.proxy.httpsActive}
+          routeCount="${this.proxy.routeCount}"
+        ></sz-reverse-proxy-card>
+        <sz-certificates-card
+          valid="${this.certificates.valid}"
+          expiring="${this.certificates.expiring}"
+          expired="${this.certificates.expired}"
+        ></sz-certificates-card>
+      </div>
+    `;
+  }
+}