catalog/ts_web/elements/sz-status-grid-network.ts

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=${{
          requests: 125420,
          errors: 150,
          errorPercent: 0.12,
          avgResponse: 45,
          reqPerMin: 847,
          status2xx: 95.2,
          status3xx: 2.1,
          status4xx: 2.3,
          status5xx: 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>
  `;

  public static demoGroups = ['Dashboard Grids'];

  @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>
    `;
  }
}