@uptime.link/statuspage 1.0.74 → 1.2.0

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

@@ -0,0 +1,607 @@
+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>
+`;