catalog_admin/ts_web/pages/upladmin-app/upladmin-app.demo.ts

import { html } from '@design.estate/dees-element';
import { adminState } from '../../services/admin-state.js';
import type { IServiceStatus, IIncidentDetails, IStatusPageConfig } from '../../interfaces/index.js';
import './upladmin-app.js';

// Initialize demo data
const initDemoData = () => {
  const now = Date.now();

  // Demo monitors
  const monitors: IServiceStatus[] = [
    {
      id: 'api-server',
      name: 'api-server',
      displayName: 'API Server',
      description: 'Main REST API backend',
      category: 'Core Services',
      currentStatus: 'operational',
      lastChecked: now,
      uptime30d: 99.98,
      uptime90d: 99.95,
      responseTime: 45,
      dependencies: [],
    },
    {
      id: 'web-app',
      name: 'web-app',
      displayName: 'Web Application',
      description: 'Frontend web application',
      category: 'Core Services',
      currentStatus: 'operational',
      lastChecked: now,
      uptime30d: 99.95,
      uptime90d: 99.90,
      responseTime: 120,
      dependencies: ['api-server'],
    },
    {
      id: 'database',
      name: 'database',
      displayName: 'Database',
      description: 'Primary PostgreSQL database',
      category: 'Infrastructure',
      currentStatus: 'operational',
      lastChecked: now,
      uptime30d: 99.99,
      uptime90d: 99.98,
      responseTime: 5,
      dependencies: [],
    },
    {
      id: 'cdn',
      name: 'cdn',
      displayName: 'CDN',
      description: 'Content delivery network',
      category: 'Infrastructure',
      currentStatus: 'degraded',
      lastChecked: now,
      uptime30d: 99.85,
      uptime90d: 99.80,
      responseTime: 25,
      dependencies: [],
    },
    {
      id: 'email-service',
      name: 'email-service',
      displayName: 'Email Service',
      description: 'Transactional email delivery',
      category: 'External Services',
      currentStatus: 'operational',
      lastChecked: now,
      uptime30d: 99.90,
      uptime90d: 99.85,
      responseTime: 200,
      dependencies: [],
    },
  ];

  // Demo incidents
  const incidents: IIncidentDetails[] = [
    {
      id: 'incident-1',
      title: 'CDN Performance Degradation',
      impact: 'We are experiencing slower than normal response times from our CDN provider.',
      severity: 'minor',
      status: 'monitoring',
      affectedServices: ['cdn'],
      startTime: now - 2 * 60 * 60 * 1000, // 2 hours ago
      updates: [
        {
          id: 'update-1-1',
          status: 'investigating',
          message: 'We are investigating reports of slow load times.',
          timestamp: now - 2 * 60 * 60 * 1000,
        },
        {
          id: 'update-1-2',
          status: 'identified',
          message: 'The issue has been identified as a CDN edge node problem.',
          timestamp: now - 1 * 60 * 60 * 1000,
        },
        {
          id: 'update-1-3',
          status: 'monitoring',
          message: 'A fix has been deployed. We are monitoring the situation.',
          timestamp: now - 30 * 60 * 1000,
        },
      ],
    },
    {
      id: 'incident-2',
      title: 'Scheduled Database Maintenance',
      impact: 'Routine database maintenance window.',
      severity: 'maintenance',
      status: 'resolved',
      affectedServices: ['database'],
      startTime: now - 24 * 60 * 60 * 1000,
      endTime: now - 23 * 60 * 60 * 1000,
      updates: [
        {
          id: 'update-2-1',
          status: 'investigating',
          message: 'Maintenance has begun.',
          timestamp: now - 24 * 60 * 60 * 1000,
        },
        {
          id: 'update-2-2',
          status: 'resolved',
          message: 'Maintenance completed successfully.',
          timestamp: now - 23 * 60 * 60 * 1000,
        },
      ],
    },
  ];

  // Demo config
  const config: IStatusPageConfig = {
    theme: 'dark',
    companyName: 'uptime.link',
    companyLogo: '',
    supportEmail: 'support@uptime.link',
    showHistoricalDays: 90,
    timeZone: 'UTC',
  };

  // Set demo data in state
  adminState.monitors = monitors;
  adminState.incidents = incidents;
  adminState.config = config;
};

export const demoFunc = () => {
  // Initialize demo data
  initDemoData();

  return html`
    <dees-demowrapper>
      <style>
        .demo-container {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
      </style>
      <div class="demo-container">
        <upladmin-app></upladmin-app>
      </div>
    </dees-demowrapper>
  `;
};