catalog/ts_web/elements/upl-statuspage-assetsselector.demo.ts

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

export const demoFunc = () => html`
  <style>
    .demo-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .demo-section {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      background: #f5f5f5;
    }
    .demo-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 16px;
      color: #333;
    }
    .demo-controls {
      display: flex;
      gap: 10px;
      margin-top: 16px;
      flex-wrap: wrap;
    }
    .demo-button {
      padding: 6px 12px;
      border: 1px solid #ddd;
      background: white;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
    }
    .demo-button:hover {
      background: #f0f0f0;
    }
    .demo-info {
      margin-top: 12px;
      padding: 12px;
      background: white;
      border-radius: 4px;
      font-size: 13px;
    }
    .event-log {
      margin-top: 12px;
      padding: 12px;
      background: #f9f9f9;
      border-radius: 4px;
      font-size: 12px;
      max-height: 150px;
      overflow-y: auto;
      font-family: monospace;
    }
  </style>

  <div class="demo-container">
    <!-- Full Featured Demo -->
    <div class="demo-section">
      <div class="demo-title">Full Featured Service Selector</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
          
          // Comprehensive demo data
          const demoServices: IServiceStatus[] = [
            // Infrastructure
            {
              id: 'api-gateway',
              name: 'api-gateway',
              displayName: 'API Gateway',
              description: 'Main API endpoint for all services',
              currentStatus: 'operational',
              lastChecked: Date.now(),
              uptime30d: 99.95,
              uptime90d: 99.92,
              responseTime: 45,
              category: 'Infrastructure',
              selected: true
            },
            {
              id: 'web-server',
              name: 'web-server',
              displayName: 'Web Server',
              description: 'Frontend web application server',
              currentStatus: 'operational',
              lastChecked: Date.now(),
              uptime30d: 99.99,
              uptime90d: 99.97,
              responseTime: 28,
              category: 'Infrastructure',
              selected: true
            },
            {
              id: 'load-balancer',
              name: 'load-balancer',
              displayName: 'Load Balancer',
              description: 'Traffic distribution system',
              currentStatus: 'operational',
              lastChecked: Date.now(),
              uptime30d: 100,
              uptime90d: 99.99,
              responseTime: 5,
              category: 'Infrastructure',
              selected: false
            },
            {
              id: 'cdn',
              name: 'cdn',
              displayName: 'CDN',
              description: 'Content delivery network',
              currentStatus: 'operational',
              lastChecked: Date.now(),
              uptime30d: 100,
              uptime90d: 99.99,
              responseTime: 12,
              category: 'Infrastructure',
              selected: false
            },
            // Data Services
            {
              id: 'database',
              name: 'database',
              displayName: 'Database Cluster',
              description: 'Primary database cluster with replicas',
              currentStatus: 'degraded',
              lastChecked: Date.now(),
              uptime30d: 98.5,
              uptime90d: 99.1,
              responseTime: 120,
              category: 'Data',
              selected: true
            },
            {
              id: 'redis-cache',
              name: 'redis-cache',
              displayName: 'Redis Cache',
              description: 'In-memory data caching',
              currentStatus: 'operational',
              lastChecked: Date.now(),
              uptime30d: 99.98,
              uptime90d: 99.96,
              responseTime: 5,
              category: 'Data',
              selected: true
            },
            {
              id: 'elasticsearch',
              name: 'elasticsearch',
              displayName: 'Search Engine',
              description: 'Full-text search service',
              currentStatus: 'partial_outage',
              lastChecked: Date.now(),
              uptime30d: 95.2,
              uptime90d: 97.8,
              responseTime: 180,
              category: 'Data',
              selected: false
            },
            {
              id: 'backup-service',
              name: 'backup-service',
              displayName: 'Backup Service',
              description: 'Automated backup and recovery',
              currentStatus: 'operational',
              lastChecked: Date.now(),
              uptime30d: 100,
              uptime90d: 99.99,
              responseTime: 95,
              category: 'Data',
              selected: true
            },
            // Application Services
            {
              id: 'auth-service',
              name: 'auth-service',
              displayName: 'Authentication Service',
              description: 'User authentication and authorization',
              currentStatus: 'operational',
              lastChecked: Date.now(),
              uptime30d: 99.98,
              uptime90d: 99.95,
              responseTime: 65,
              category: 'Services',
              selected: true
            },
            {
              id: 'payment-gateway',
              name: 'payment-gateway',
              displayName: 'Payment Gateway',
              description: 'Payment processing service',
              currentStatus: 'maintenance',
              lastChecked: Date.now(),
              uptime30d: 97.5,
              uptime90d: 98.8,
              responseTime: 250,
              category: 'Services',
              selected: false
            },
            {
              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: 150,
              category: 'Services',
              selected: true
            },
            {
              id: 'notification-service',
              name: 'notification-service',
              displayName: 'Notification Service',
              description: 'Push notifications and alerts',
              currentStatus: 'operational',
              lastChecked: Date.now(),
              uptime30d: 99.7,
              uptime90d: 99.8,
              responseTime: 88,
              category: 'Services',
              selected: false
            },
            {
              id: 'analytics',
              name: 'analytics',
              displayName: 'Analytics Engine',
              description: 'Real-time analytics processing',
              currentStatus: 'major_outage',
              lastChecked: Date.now(),
              uptime30d: 89.5,
              uptime90d: 94.2,
              responseTime: 450,
              category: 'Services',
              selected: false
            },
            // Monitoring
            {
              id: 'monitoring',
              name: 'monitoring',
              displayName: 'Monitoring System',
              description: 'System health and metrics monitoring',
              currentStatus: 'operational',
              lastChecked: Date.now(),
              uptime30d: 99.95,
              uptime90d: 99.93,
              responseTime: 78,
              category: 'Monitoring',
              selected: true
            },
            {
              id: 'logging',
              name: 'logging',
              displayName: 'Logging Service',
              description: 'Centralized log management',
              currentStatus: 'operational',
              lastChecked: Date.now(),
              uptime30d: 99.9,
              uptime90d: 99.88,
              responseTime: 92,
              category: 'Monitoring',
              selected: false
            }
          ];
          
          // Set initial data
          assetsSelector.services = demoServices;
          
          // Demo loading state
          assetsSelector.loading = true;
          setTimeout(() => {
            assetsSelector.loading = false;
          }, 1000);
          
          // Create event log
          const eventLog = document.createElement('div');
          eventLog.className = 'event-log';
          eventLog.innerHTML = '<strong>Event Log:</strong><br>';
          wrapperElement.appendChild(eventLog);
          
          const logEvent = (message: string) => {
            const time = new Date().toLocaleTimeString();
            eventLog.innerHTML += `[${time}] ${message}<br>`;
            eventLog.scrollTop = eventLog.scrollHeight;
          };
          
          // Listen for selection changes
          assetsSelector.addEventListener('selectionChanged', (event: CustomEvent) => {
            const selected = event.detail.selectedServices.length;
            const total = demoServices.length;
            logEvent(`Selection changed: ${selected}/${total} services selected`);
          });
          
          // Simulate status updates
          setInterval(() => {
            const randomService = demoServices[Math.floor(Math.random() * demoServices.length)];
            const statuses: Array<IServiceStatus['currentStatus']> = ['operational', 'degraded', 'partial_outage', 'major_outage', 'maintenance'];
            const newStatus = statuses[Math.floor(Math.random() * statuses.length)];
            
            if (randomService.currentStatus !== newStatus) {
              const oldStatus = randomService.currentStatus;
              randomService.currentStatus = newStatus;
              randomService.lastChecked = Date.now();
              assetsSelector.requestUpdate();
              logEvent(`${randomService.displayName}: ${oldStatus} → ${newStatus}`);
            }
          }, 5000);
        }}
      >
        <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
      </dees-demowrapper>
    </div>

    <!-- Empty State -->
    <div class="demo-section">
      <div class="demo-title">Empty State</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
          
          // No services
          assetsSelector.services = [];
          
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          controls.innerHTML = `
            <button class="demo-button" id="addServices">Add Services</button>
          `;
          wrapperElement.appendChild(controls);
          
          controls.querySelector('#addServices')?.addEventListener('click', () => {
            assetsSelector.services = [
              {
                id: 'new-service-1',
                name: 'new-service-1',
                displayName: 'New Service 1',
                description: 'Just added',
                currentStatus: 'operational',
                lastChecked: Date.now(),
                uptime30d: 100,
                uptime90d: 100,
                responseTime: 50,
                selected: true
              },
              {
                id: 'new-service-2',
                name: 'new-service-2',
                displayName: 'New Service 2',
                description: 'Just added',
                currentStatus: 'operational',
                lastChecked: Date.now(),
                uptime30d: 100,
                uptime90d: 100,
                responseTime: 60,
                selected: false
              }
            ];
          });
        }}
      >
        <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
      </dees-demowrapper>
    </div>

    <!-- Filtering Scenarios -->
    <div class="demo-section">
      <div class="demo-title">Advanced Filtering Demo</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
          
          // Generate many services for filtering
          const generateServices = (): IServiceStatus[] => {
            const services: IServiceStatus[] = [];
            const regions = ['us-east', 'us-west', 'eu-central', 'ap-south'];
            const types = ['api', 'web', 'db', 'cache', 'queue'];
            const statuses: Array<IServiceStatus['currentStatus']> = ['operational', 'degraded', 'partial_outage'];
            
            regions.forEach(region => {
              types.forEach(type => {
                const id = `${region}-${type}`;
                services.push({
                  id,
                  name: id,
                  displayName: `${region.toUpperCase()} ${type.toUpperCase()}`,
                  description: `${type} service in ${region} region`,
                  currentStatus: statuses[Math.floor(Math.random() * statuses.length)],
                  lastChecked: Date.now(),
                  uptime30d: 95 + Math.random() * 5,
                  uptime90d: 94 + Math.random() * 6,
                  responseTime: 20 + Math.random() * 200,
                  category: region,
                  selected: Math.random() > 0.5
                });
              });
            });
            
            return services;
          };
          
          assetsSelector.services = generateServices();
          
          // Demo different filter scenarios
          const scenarios = [
            { 
              name: 'Show All',
              action: () => {
                assetsSelector.filterText = '';
                assetsSelector.filterCategory = 'all';
                assetsSelector.showOnlySelected = false;
              }
            },
            {
              name: 'Filter by Text: "api"',
              action: () => {
                assetsSelector.filterText = 'api';
                assetsSelector.filterCategory = 'all';
                assetsSelector.showOnlySelected = false;
              }
            },
            {
              name: 'Filter by Region: EU',
              action: () => {
                assetsSelector.filterText = '';
                assetsSelector.filterCategory = 'eu-central';
                assetsSelector.showOnlySelected = false;
              }
            },
            {
              name: 'Show Only Selected',
              action: () => {
                assetsSelector.filterText = '';
                assetsSelector.filterCategory = 'all';
                assetsSelector.showOnlySelected = true;
              }
            },
            {
              name: 'Complex: "db" in US regions',
              action: () => {
                assetsSelector.filterText = 'db';
                assetsSelector.filterCategory = 'us-east';
                assetsSelector.showOnlySelected = false;
              }
            }
          ];
          
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          scenarios.forEach(scenario => {
            const button = document.createElement('button');
            button.className = 'demo-button';
            button.textContent = scenario.name;
            button.onclick = scenario.action;
            controls.appendChild(button);
          });
          wrapperElement.appendChild(controls);
          
          const info = document.createElement('div');
          info.className = 'demo-info';
          wrapperElement.appendChild(info);
          
          // Update info on changes
          const updateInfo = () => {
            const filtered = assetsSelector.getFilteredServices();
            const selected = assetsSelector.services.filter((s: any) => s.selected).length;
            info.innerHTML = `
              <strong>Filter Status:</strong><br>
              Total Services: ${assetsSelector.services.length}<br>
              Visible Services: ${filtered.length}<br>
              Selected Services: ${selected}<br>
              Active Filters: ${assetsSelector.filterText ? 'Text="' + assetsSelector.filterText + '" ' : ''}${assetsSelector.filterCategory !== 'all' ? 'Category=' + assetsSelector.filterCategory + ' ' : ''}${assetsSelector.showOnlySelected ? 'Selected Only' : ''}
            `;
          };
          
          // Watch for changes
          assetsSelector.addEventListener('selectionChanged', updateInfo);
          setInterval(updateInfo, 500);
          updateInfo();
        }}
      >
        <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
      </dees-demowrapper>
    </div>

    <!-- Performance Test -->
    <div class="demo-section">
      <div class="demo-title">Performance Test - Many Services</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
          
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          controls.innerHTML = `
            <button class="demo-button" id="load50">Load 50 Services</button>
            <button class="demo-button" id="load100">Load 100 Services</button>
            <button class="demo-button" id="load200">Load 200 Services</button>
            <button class="demo-button" id="clear">Clear All</button>
          `;
          wrapperElement.appendChild(controls);
          
          const loadServices = (count: number) => {
            const services: IServiceStatus[] = [];
            const statuses: Array<IServiceStatus['currentStatus']> = ['operational', 'degraded', 'partial_outage', 'major_outage', 'maintenance'];
            
            for (let i = 0; i < count; i++) {
              services.push({
                id: `service-${i}`,
                name: `service-${i}`,
                displayName: `Service ${i}`,
                description: `Auto-generated service number ${i}`,
                currentStatus: statuses[Math.floor(Math.random() * statuses.length)],
                lastChecked: Date.now() - Math.random() * 3600000,
                uptime30d: 85 + Math.random() * 15,
                uptime90d: 80 + Math.random() * 20,
                responseTime: 10 + Math.random() * 500,
                category: `Category ${Math.floor(i / 10)}`,
                selected: Math.random() > 0.7
              });
            }
            
            assetsSelector.loading = true;
            setTimeout(() => {
              assetsSelector.services = services;
              assetsSelector.loading = false;
            }, 500);
          };
          
          controls.querySelector('#load50')?.addEventListener('click', () => loadServices(50));
          controls.querySelector('#load100')?.addEventListener('click', () => loadServices(100));
          controls.querySelector('#load200')?.addEventListener('click', () => loadServices(200));
          controls.querySelector('#clear')?.addEventListener('click', () => {
            assetsSelector.services = [];
          });
          
          // Start with 50 services
          loadServices(50);
        }}
      >
        <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
      </dees-demowrapper>
    </div>

    <!-- Loading States -->
    <div class="demo-section">
      <div class="demo-title">Loading and Error States</div>
      <dees-demowrapper
        .runAfterRender=${async (wrapperElement: any) => {
          const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
          
          // Start with loading
          assetsSelector.loading = true;
          
          const controls = document.createElement('div');
          controls.className = 'demo-controls';
          controls.innerHTML = `
            <button class="demo-button" id="toggleLoading">Toggle Loading</button>
            <button class="demo-button" id="simulateError">Simulate Error</button>
            <button class="demo-button" id="loadSuccess">Load Successfully</button>
          `;
          wrapperElement.appendChild(controls);
          
          controls.querySelector('#toggleLoading')?.addEventListener('click', () => {
            assetsSelector.loading = !assetsSelector.loading;
          });
          
          controls.querySelector('#simulateError')?.addEventListener('click', () => {
            assetsSelector.loading = true;
            setTimeout(() => {
              assetsSelector.loading = false;
              assetsSelector.services = [];
              // You could add an error message property to the component
              assetsSelector.errorMessage = 'Failed to load services';
            }, 1500);
          });
          
          controls.querySelector('#loadSuccess')?.addEventListener('click', () => {
            assetsSelector.loading = true;
            setTimeout(() => {
              assetsSelector.loading = false;
              assetsSelector.services = [
                {
                  id: 'loaded-1',
                  name: 'loaded-1',
                  displayName: 'Successfully Loaded Service',
                  description: 'This service was loaded after simulated delay',
                  currentStatus: 'operational',
                  lastChecked: Date.now(),
                  uptime30d: 99.9,
                  uptime90d: 99.8,
                  responseTime: 45,
                  selected: true
                }
              ];
            }, 1000);
          });
        }}
      >
        <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
      </dees-demowrapper>
    </div>
  </div>
`;