catalog_admin/ts_web/pages/adminpage-monitors.ts

import { html, cssManager } from "@design.estate/dees-element";
import type { IServiceStatus } from '../interfaces/index.js';
import '../elements/index.js';

export const adminpageMonitors = () => html`
  <style>
    .demo-page-wrapper {
      min-height: 100vh;
      background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
      padding: 24px;
    }
  </style>

  <div class="demo-page-wrapper">
    <dees-demowrapper
    .runAfterRender=${async (wrapperElement: any) => {
      const monitorList = wrapperElement.querySelector('upladmin-monitor-list') as any;

      const monitors: IServiceStatus[] = [
        {
          id: 'api-server',
          name: 'api-server',
          displayName: 'API Server',
          description: 'Main REST API endpoint',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.98,
          uptime90d: 99.95,
          responseTime: 45,
          category: 'Core Services',
        },
        {
          id: 'web-app',
          name: 'web-app',
          displayName: 'Web Application',
          description: 'Customer-facing web application',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.99,
          uptime90d: 99.97,
          responseTime: 120,
          category: 'Core Services',
        },
        {
          id: 'database-primary',
          name: 'database-primary',
          displayName: 'Primary Database',
          description: 'PostgreSQL primary node',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.999,
          uptime90d: 99.998,
          responseTime: 5,
          category: 'Infrastructure',
        },
        {
          id: 'database-replica',
          name: 'database-replica',
          displayName: 'Database Replica',
          description: 'PostgreSQL read replica',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.99,
          uptime90d: 99.95,
          responseTime: 8,
          category: 'Infrastructure',
        },
        {
          id: 'cdn',
          name: 'cdn',
          displayName: 'Content Delivery Network',
          description: 'Global CDN for static assets',
          currentStatus: 'degraded',
          lastChecked: Date.now(),
          uptime30d: 99.5,
          uptime90d: 99.8,
          responseTime: 200,
          category: 'Infrastructure',
        },
        {
          id: 'redis-cache',
          name: 'redis-cache',
          displayName: 'Redis Cache',
          description: 'In-memory caching layer',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.99,
          uptime90d: 99.98,
          responseTime: 2,
          category: 'Infrastructure',
        },
        {
          id: 'email-service',
          name: 'email-service',
          displayName: 'Email Service',
          description: 'Transactional email delivery',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.9,
          uptime90d: 99.85,
          responseTime: 500,
          category: 'External Services',
        },
        {
          id: 'payment-gateway',
          name: 'payment-gateway',
          displayName: 'Payment Gateway',
          description: 'Payment processing integration',
          currentStatus: 'maintenance',
          lastChecked: Date.now(),
          uptime30d: 99.95,
          uptime90d: 99.9,
          responseTime: 350,
          category: 'External Services',
        },
        {
          id: 'sms-service',
          name: 'sms-service',
          displayName: 'SMS Service',
          description: 'SMS notifications and 2FA',
          currentStatus: 'operational',
          lastChecked: Date.now(),
          uptime30d: 99.8,
          uptime90d: 99.75,
          responseTime: 800,
          category: 'External Services',
        },
        {
          id: 'search-engine',
          name: 'search-engine',
          displayName: 'Search Engine',
          description: 'Elasticsearch cluster',
          currentStatus: 'partial_outage',
          lastChecked: Date.now(),
          uptime30d: 98.5,
          uptime90d: 99.2,
          responseTime: 150,
          category: 'Core Services',
        },
      ];

      monitorList.monitors = monitors;
    }}
    >
      <upladmin-monitor-list></upladmin-monitor-list>
    </dees-demowrapper>
  </div>
`;

export const adminpageMonitorForm = () => html`
  <style>
    .demo-page-wrapper {
      min-height: 100vh;
      background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
      padding: 24px;
    }
  </style>

  <div class="demo-page-wrapper">
    <dees-demowrapper
    .runAfterRender=${async (wrapperElement: any) => {
      const monitorForm = wrapperElement.querySelector('upladmin-monitor-form') as any;

      const availableMonitors: IServiceStatus[] = [
        { id: 'api-server', name: 'api-server', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45 },
        { id: 'database-primary', name: 'database-primary', displayName: 'Primary Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.999, uptime90d: 99.998, responseTime: 5 },
      ];

      monitorForm.availableMonitors = availableMonitors;
      monitorForm.categories = ['Core Services', 'Infrastructure', 'External Services', 'Web Services'];
    }}
    >
      <upladmin-monitor-form></upladmin-monitor-form>
    </dees-demowrapper>
  </div>
`;

export const adminpageMonitorFormEdit = () => html`
  <style>
    .demo-page-wrapper {
      min-height: 100vh;
      background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
      padding: 24px;
    }
  </style>

  <div class="demo-page-wrapper">
    <dees-demowrapper
    .runAfterRender=${async (wrapperElement: any) => {
      const monitorForm = wrapperElement.querySelector('upladmin-monitor-form') as any;

      const availableMonitors: IServiceStatus[] = [
        { id: 'api-server', name: 'api-server', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45 },
        { id: 'database-primary', name: 'database-primary', displayName: 'Primary Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.999, uptime90d: 99.998, responseTime: 5 },
      ];

      monitorForm.availableMonitors = availableMonitors;
      monitorForm.categories = ['Core Services', 'Infrastructure', 'External Services', 'Web Services'];
      monitorForm.monitor = {
        id: 'cdn',
        name: 'cdn',
        displayName: 'Content Delivery Network',
        description: 'Global CDN for static assets and media files',
        category: 'Infrastructure',
        dependencies: ['api-server'],
        currentStatus: 'degraded',
      };
    }}
    >
      <upladmin-monitor-form></upladmin-monitor-form>
    </dees-demowrapper>
  </div>
`;