catalog/ts_web/elements/sz-dashboard-view.ts

import {
  DeesElement,
  customElement,
  html,
  css,
  cssManager,
  property,
  type TemplateResult,
} from '@design.estate/dees-element';

import './sz-status-grid-cluster.js';
import './sz-status-grid-services.js';
import './sz-status-grid-network.js';
import './sz-status-grid-infra.js';

import type { IClusterStats } from './sz-status-grid-cluster.js';
import type { IResourceUsage } from './sz-resource-usage-card.js';
import type { IPlatformService } from './sz-platform-services-card.js';
import type { ITrafficData } from './sz-traffic-card.js';
import type { IProxyStatus, ICertificateStatus } from './sz-status-grid-network.js';
import type { IQuickAction } from './sz-quick-actions-card.js';

declare global {
  interface HTMLElementTagNameMap {
    'sz-dashboard-view': SzDashboardView;
  }
}

export interface IDashboardData {
  cluster: IClusterStats;
  resourceUsage: IResourceUsage;
  platformServices: IPlatformService[];
  traffic: ITrafficData;
  proxy: IProxyStatus;
  certificates: ICertificateStatus;
  dnsConfigured: boolean;
  acmeConfigured: boolean;
  quickActions: IQuickAction[];
}

@customElement('sz-dashboard-view')
export class SzDashboardView extends DeesElement {
  public static demo = () => html`
    <div style="padding: 24px; max-width: 1400px;">
      <sz-dashboard-view
        .data=${{
          cluster: {
            totalServices: 7,
            running: 7,
            stopped: 0,
            dockerStatus: 'running',
          },
          resourceUsage: {
            cpu: 0.5,
            memoryUsed: '191 MB',
            memoryTotal: '429.2 GB',
            networkIn: '38.9 KB/s',
            networkOut: '1.7 KB/s',
            topConsumers: [
              { name: 'test-nginx', memory: '32.1 MB' },
              { name: 'test-v2', memory: '31.7 MB' },
            ],
          },
          platformServices: [
            { name: 'MongoDB', status: '1 DB', running: true },
            { name: 'S3 Storage (MinIO)', status: '1 bucket', running: true },
            { name: 'Caddy Reverse Proxy', status: 'Running', running: true },
            { name: 'ClickHouse', status: '1 DB', running: true },
          ],
          traffic: {
            requests: 1250,
            errors: 15,
            errorPercent: 1.2,
            avgResponse: 145,
            reqPerMin: 21,
            status2xx: 85,
            status3xx: 5,
            status4xx: 8,
            status5xx: 2,
          },
          proxy: {
            httpPort: '80',
            httpsPort: '443',
            httpActive: true,
            httpsActive: true,
            routeCount: '12',
          },
          certificates: {
            valid: 8,
            expiring: 2,
            expired: 0,
          },
          dnsConfigured: true,
          acmeConfigured: true,
          quickActions: [
            { label: 'Deploy Service', icon: 'plus', primary: true },
            { label: 'View All Services' },
            { label: 'Platform Services' },
            { label: 'Manage Domains' },
          ],
        }}
      ></sz-dashboard-view>
    </div>
  `;

  public static demoGroups = ['Dashboard'];

  @property({ type: Object })
  public accessor data: IDashboardData = {
    cluster: {
      totalServices: 0,
      running: 0,
      stopped: 0,
      dockerStatus: 'stopped',
    },
    resourceUsage: {
      cpu: 0,
      memoryUsed: '0 MB',
      memoryTotal: '0 GB',
      networkIn: '0 KB/s',
      networkOut: '0 KB/s',
      topConsumers: [],
    },
    platformServices: [],
    traffic: {
      requests: 0,
      errors: 0,
      errorPercent: 0,
      avgResponse: 0,
      reqPerMin: 0,
      status2xx: 0,
      status3xx: 0,
      status4xx: 0,
      status5xx: 0,
    },
    proxy: {
      httpPort: '80',
      httpsPort: '443',
      httpActive: false,
      httpsActive: false,
      routeCount: '0',
    },
    certificates: {
      valid: 0,
      expiring: 0,
      expired: 0,
    },
    dnsConfigured: false,
    acmeConfigured: false,
    quickActions: [],
  };

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
      }

      .dashboard {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        margin-bottom: 12px;
      }

      .section {
        display: flex;
        flex-direction: column;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="dashboard">
        <section class="section">
          <h2 class="section-title">Cluster Overview</h2>
          <sz-status-grid-cluster
            .stats=${this.data.cluster}
          ></sz-status-grid-cluster>
        </section>

        <section class="section">
          <h2 class="section-title">Services & Resources</h2>
          <sz-status-grid-services
            .resourceUsage=${this.data.resourceUsage}
            .platformServices=${this.data.platformServices}
          ></sz-status-grid-services>
        </section>

        <section class="section">
          <h2 class="section-title">Network & Traffic</h2>
          <sz-status-grid-network
            .traffic=${this.data.traffic}
            .proxy=${this.data.proxy}
            .certificates=${this.data.certificates}
          ></sz-status-grid-network>
        </section>

        <section class="section">
          <h2 class="section-title">Infrastructure</h2>
          <sz-status-grid-infra
            ?dnsConfigured=${this.data.dnsConfigured}
            ?acmeConfigured=${this.data.acmeConfigured}
            .actions=${this.data.quickActions}
            @action-click=${(e: CustomEvent) => this.dispatchEvent(new CustomEvent('action-click', { detail: e.detail, bubbles: true, composed: true }))}
          ></sz-status-grid-infra>
        </section>
      </div>
    `;
  }
}