@uptime.link/statuspage 1.0.74 → 1.2.0

package/ts_web/pages/statuspage-demo.ts

@@ -0,0 +1,653 @@
+import { html, cssManager } from "@design.estate/dees-element";
+import type { IServiceStatus, IOverallStatus, IIncidentDetails, IStatusHistoryPoint, IMonthlyUptime } from '../interfaces/index.js';
+
+export const statuspageDemo = () => html`
+  <style>
+    .demo-page-wrapper {
+      min-height: 100vh;
+      background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+    }
+    .demo-page-wrapper > dees-demowrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+  </style>
+  
+  <div class="demo-page-wrapper">
+
+    <dees-demowrapper
+    .runAfterRender=${async (wrapperElement: any) => {
+      const header = wrapperElement.querySelector('upl-statuspage-header') as any;
+      const pageTitle = wrapperElement.querySelector('upl-statuspage-pagetitle') as any;
+      const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') as any;
+      const statsGrid = wrapperElement.querySelector('upl-statuspage-statsgrid') as any;
+      const assetsSelector = wrapperElement.querySelector('upl-statuspage-assetsselector') as any;
+      const statusDetails = wrapperElement.querySelector('upl-statuspage-statusdetails') as any;
+      const statusMonth = wrapperElement.querySelector('upl-statuspage-statusmonth') as any;
+      const incidents = wrapperElement.querySelector('upl-statuspage-incidents') as any;
+      const footer = wrapperElement.querySelector('upl-statuspage-footer') as any;
+      
+      // Configure Header
+      header.pageTitle = 'CloudFlow';
+      header.showReportButton = true;
+      header.showSubscribeButton = true;
+      header.logoUrl = 'https://via.placeholder.com/150x50/2196F3/ffffff?text=CF';
+      
+      // Configure Page Title
+      pageTitle.pageTitle = 'Service Status';
+      pageTitle.pageSubtitle = 'Current operational status of CloudFlow Infrastructure services';
+      
+      // Configure Overall Status
+      statusBar.overallStatus = {
+        status: 'degraded',
+        message: 'Minor service degradation in EU-West region',
+        lastUpdated: Date.now(),
+        affectedServices: 3,
+        totalServices: 18
+      };
+      
+      // Configure Services
+      const services: IServiceStatus[] = [
+        // Core 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: 'Core Services',
+          selected: true
+        },
+        {
+          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: 32,
+          category: 'Core Services',
+          selected: true
+        },
+        {
+          id: 'user-dashboard',
+          name: 'user-dashboard',
+          displayName: 'User Dashboard',
+          description: 'Web application dashboard',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.99,
+          uptime90d: 99.97,
+          responseTime: 128,
+          category: 'Web Services',
+          selected: true
+        },
+        // Regional Services - US
+        {
+          id: 'us-east-compute',
+          name: 'us-east-compute',
+          displayName: 'US-East Compute',
+          description: 'Virtual machine instances',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.94,
+          uptime90d: 99.91,
+          responseTime: 22,
+          category: 'US-East',
+          selected: true
+        },
+        {
+          id: 'us-east-storage',
+          name: 'us-east-storage',
+          displayName: 'US-East Storage',
+          description: 'Object storage service',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 100,
+          uptime90d: 99.99,
+          responseTime: 18,
+          category: 'US-East',
+          selected: true
+        },
+        {
+          id: 'us-east-database',
+          name: 'us-east-database',
+          displayName: 'US-East Database',
+          description: 'Managed database clusters',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.97,
+          uptime90d: 99.95,
+          responseTime: 14,
+          category: 'US-East',
+          selected: false
+        },
+        // Regional Services - EU (Degraded)
+        {
+          id: 'eu-west-compute',
+          name: 'eu-west-compute',
+          displayName: 'EU-West Compute',
+          description: 'Virtual machine instances',
+          currentStatus: 'degraded',
+          lastChecked: Date.now(),
+          uptime30d: 98.2,
+          uptime90d: 99.1,
+          responseTime: 145,
+          category: 'EU-West',
+          selected: true
+        },
+        {
+          id: 'eu-west-storage',
+          name: 'eu-west-storage',
+          displayName: 'EU-West Storage',
+          description: 'Object storage service',
+          currentStatus: 'degraded',
+          lastChecked: Date.now(),
+          uptime30d: 98.5,
+          uptime90d: 99.3,
+          responseTime: 220,
+          category: 'EU-West',
+          selected: true
+        },
+        {
+          id: 'eu-west-database',
+          name: 'eu-west-database',
+          displayName: 'EU-West Database',
+          description: 'Managed database clusters',
+          currentStatus: 'partial_outage',
+          lastChecked: Date.now(),
+          uptime30d: 97.8,
+          uptime90d: 98.9,
+          responseTime: 450,
+          category: 'EU-West',
+          selected: true
+        },
+        // Regional Services - Asia
+        {
+          id: 'ap-south-compute',
+          name: 'ap-south-compute',
+          displayName: 'Asia-Pacific Compute',
+          description: 'Virtual machine instances',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.91,
+          uptime90d: 99.88,
+          responseTime: 38,
+          category: 'Asia-Pacific',
+          selected: false
+        },
+        {
+          id: 'ap-south-storage',
+          name: 'ap-south-storage',
+          displayName: 'Asia-Pacific Storage',
+          description: 'Object storage service',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.95,
+          uptime90d: 99.93,
+          responseTime: 42,
+          category: 'Asia-Pacific',
+          selected: false
+        },
+        // Supporting Services
+        {
+          id: 'cdn',
+          name: 'cdn',
+          displayName: 'Content Delivery Network',
+          description: 'Global CDN for static assets',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 100,
+          uptime90d: 99.99,
+          responseTime: 12,
+          category: 'Network',
+          selected: true
+        },
+        {
+          id: 'dns',
+          name: 'dns',
+          displayName: 'DNS Service',
+          description: 'Managed DNS resolution',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 100,
+          uptime90d: 100,
+          responseTime: 8,
+          category: 'Network',
+          selected: false
+        },
+        {
+          id: 'monitoring',
+          name: 'monitoring',
+          displayName: 'Monitoring Service',
+          description: 'Infrastructure monitoring',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.92,
+          uptime90d: 99.90,
+          responseTime: 65,
+          category: 'Operations',
+          selected: true
+        },
+        {
+          id: 'logging',
+          name: 'logging',
+          displayName: 'Logging Service',
+          description: 'Centralized log management',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.88,
+          uptime90d: 99.85,
+          responseTime: 72,
+          category: 'Operations',
+          selected: false
+        },
+        {
+          id: 'backup-service',
+          name: 'backup-service',
+          displayName: 'Backup Service',
+          description: 'Automated backup system',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 100,
+          uptime90d: 99.98,
+          responseTime: 95,
+          category: 'Operations',
+          selected: false
+        },
+        {
+          id: 'email-service',
+          name: 'email-service',
+          displayName: 'Email Delivery',
+          description: 'Transactional email service',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.94,
+          uptime90d: 99.91,
+          responseTime: 125,
+          category: 'Communication',
+          selected: true
+        },
+        {
+          id: 'sms-service',
+          name: 'sms-service',
+          displayName: 'SMS Gateway',
+          description: 'SMS notification service',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.89,
+          uptime90d: 99.87,
+          responseTime: 180,
+          category: 'Communication',
+          selected: false
+        }
+      ];
+      
+      assetsSelector.services = services;
+      
+      // Configure Status Details (48 hours of data)
+      const generateStatusDetails = (): IStatusHistoryPoint[] => {
+        const details: IStatusHistoryPoint[] = [];
+        const now = new Date();
+        
+        for (let i = 47; i >= 0; i--) {
+          const date = new Date(now);
+          date.setMinutes(0, 0, 0);
+          date.setHours(date.getHours() - i);
+          
+          let status: 'operational' | 'degraded' | 'outage' = 'operational';
+          let value = 100;
+          
+          // Simulate the EU-West issues from 6-3 hours ago
+          if (i >= 3 && i <= 6) {
+            status = 'degraded';
+            value = 85 + Math.random() * 10;
+          } else if (i > 6 && i <= 12) {
+            // Some minor issues earlier
+            if (Math.random() > 0.8) {
+              status = 'degraded';
+              value = 90 + Math.random() * 10;
+            }
+          }
+          
+          details.push({
+            timestamp: date.getTime(),
+            status,
+            responseTime: status === 'operational' ? 20 + Math.random() * 30 : 50 + Math.random() * 100
+          });
+        }
+        
+        return details;
+      };
+      
+      statusDetails.dataPoints = generateStatusDetails();
+      statusDetails.serviceId = 'eu-west-database';
+      statusDetails.serviceName = 'EU-West Database';
+      
+      // Configure Monthly Status
+      const generateMonthlyData = (): IMonthlyUptime[] => {
+        const months: IMonthlyUptime[] = [];
+        const now = new Date();
+        
+        for (let m = 4; m >= 0; m--) {
+          const monthDate = new Date(now.getFullYear(), now.getMonth() - m, 1);
+          const daysInMonth = new Date(monthDate.getFullYear(), monthDate.getMonth() + 1, 0).getDate();
+          const monthKey = monthDate.toISOString().slice(0, 7);
+          
+          const days = [];
+          let totalUptime = 0;
+          let incidents = 0;
+          
+          for (let d = 1; d <= daysInMonth; d++) {
+            const dayDate = new Date(monthDate.getFullYear(), monthDate.getMonth(), d);
+            const isToday = dayDate.toDateString() === now.toDateString();
+            const isFuture = dayDate > now;
+            
+            if (isFuture) continue;
+            
+            let status: 'operational' | 'degraded' | 'partial_outage' | 'major_outage' = 'operational';
+            let uptime = 100;
+            let dayIncidents = 0;
+            
+            // Add some random incidents
+            if (!isToday && Math.random() > 0.92) {
+              status = 'degraded';
+              uptime = 95 + Math.random() * 4;
+              dayIncidents = 1;
+            } else if (!isToday && Math.random() > 0.98) {
+              status = 'partial_outage';
+              uptime = 80 + Math.random() * 15;
+              dayIncidents = 2;
+            }
+            
+            // Today's incident
+            if (isToday) {
+              status = 'degraded';
+              uptime = 96.5;
+              dayIncidents = 1;
+            }
+            
+            days.push({
+              date: dayDate.toISOString().slice(0, 10),
+              status,
+              uptime,
+              incidents: dayIncidents,
+              totalDowntime: Math.round((100 - uptime) * 14.4) // Convert to minutes (1440 minutes per day)
+            });
+            
+            totalUptime += uptime;
+            incidents += dayIncidents;
+          }
+          
+          months.push({
+            month: monthKey,
+            days,
+            overallUptime: totalUptime / days.length,
+            totalIncidents: incidents
+          });
+        }
+        
+        return months;
+      };
+      
+      statusMonth.monthlyData = generateMonthlyData();
+      statusMonth.serviceId = 'all-services';
+      statusMonth.serviceName = 'All Services';
+      
+      // Configure Incidents
+      const currentIncidents: IIncidentDetails[] = [
+        {
+          id: 'inc-2024-001',
+          title: 'EU-West Database Performance Degradation',
+          impact: 'Users in EU-West region may experience slower database queries and occasional timeouts',
+          severity: 'major',
+          status: 'investigating',
+          startTime: Date.now() - 3 * 60 * 60 * 1000, // 3 hours ago
+          affectedServices: ['EU-West Database', 'EU-West Compute', 'EU-West Storage'],
+          updates: [
+            {
+              id: 'update-1',
+              timestamp: Date.now() - 3 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'We are investigating reports of database performance issues in the EU-West region.',
+              author: 'CloudFlow Operations'
+            },
+            {
+              id: 'update-2',
+              timestamp: Date.now() - 2.5 * 60 * 60 * 1000,
+              status: 'identified',
+              message: 'We have identified unusual load patterns on our EU-West database cluster. Our team is working on redistributing the load.',
+              author: 'Database Team'
+            },
+            {
+              id: 'update-3',
+              timestamp: Date.now() - 1 * 60 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Load balancing adjustments have been applied. We are monitoring the situation closely. Performance is gradually improving.',
+              author: 'CloudFlow Operations'
+            }
+          ]
+        }
+      ];
+      
+      const pastIncidents: IIncidentDetails[] = [
+        {
+          id: 'inc-2023-098',
+          title: 'Global Authentication Service Outage',
+          impact: 'Users were unable to log in to their accounts',
+          severity: 'critical',
+          status: 'resolved',
+          startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 7 days ago
+          endTime: Date.now() - 7 * 24 * 60 * 60 * 1000 + 2 * 60 * 60 * 1000, // 2 hour duration
+          affectedServices: ['Authentication Service', 'User Dashboard', 'API Gateway'],
+          rootCause: 'A configuration change in our authentication service caused a cascading failure in the token validation system.',
+          resolution: 'The configuration was rolled back and additional safeguards were implemented to prevent similar issues.',
+          updates: [
+            {
+              id: 'update-4',
+              timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'Multiple reports of login failures across all regions.',
+              author: 'CloudFlow Operations'
+            },
+            {
+              id: 'update-5',
+              timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000,
+              status: 'identified',
+              message: 'Root cause identified as misconfiguration in auth service. Rolling back changes.',
+              author: 'Security Team'
+            },
+            {
+              id: 'update-6',
+              timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000 + 90 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Service restored. Monitoring for any lingering issues.',
+              author: 'CloudFlow Operations'
+            },
+            {
+              id: 'update-7',
+              timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000 + 2 * 60 * 60 * 1000,
+              status: 'resolved',
+              message: 'All systems operating normally. Incident resolved.',
+              author: 'CloudFlow Operations'
+            },
+            {
+              id: 'update-8',
+              timestamp: Date.now() - 6 * 24 * 60 * 60 * 1000,
+              status: 'postmortem',
+              message: 'Postmortem completed. Action items identified and assigned to prevent recurrence.',
+              author: 'Engineering Lead'
+            }
+          ]
+        },
+        {
+          id: 'inc-2023-095',
+          title: 'US-East Storage Service Maintenance',
+          impact: 'Reduced redundancy for stored objects during maintenance window',
+          severity: 'minor',
+          status: 'resolved',
+          startTime: Date.now() - 14 * 24 * 60 * 60 * 1000,
+          endTime: Date.now() - 14 * 24 * 60 * 60 * 1000 + 4 * 60 * 60 * 1000,
+          affectedServices: ['US-East Storage'],
+          rootCause: 'Scheduled maintenance for storage infrastructure upgrade.',
+          resolution: 'Maintenance completed successfully. All systems operating at full redundancy.',
+          updates: [
+            {
+              id: 'update-9',
+              timestamp: Date.now() - 21 * 24 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'Scheduled maintenance announced for US-East Storage service.',
+              author: 'CloudFlow Operations'
+            },
+            {
+              id: 'update-10',
+              timestamp: Date.now() - 14 * 24 * 60 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Maintenance window has begun. No customer impact expected.',
+              author: 'Storage Team'
+            },
+            {
+              id: 'update-11',
+              timestamp: Date.now() - 14 * 24 * 60 * 60 * 1000 + 4 * 60 * 60 * 1000,
+              status: 'resolved',
+              message: 'Maintenance completed successfully.',
+              author: 'Storage Team'
+            }
+          ]
+        },
+        {
+          id: 'inc-2023-089',
+          title: 'API Gateway Rate Limiting Issues',
+          impact: 'Some API requests were incorrectly rate limited',
+          severity: 'major',
+          status: 'resolved',
+          startTime: Date.now() - 30 * 24 * 60 * 60 * 1000,
+          endTime: Date.now() - 30 * 24 * 60 * 60 * 1000 + 45 * 60 * 1000,
+          affectedServices: ['API Gateway'],
+          rootCause: 'A bug in the rate limiting algorithm caused legitimate requests to be blocked.',
+          resolution: 'Hotfix deployed to correct the rate limiting logic.',
+          updates: [
+            {
+              id: 'update-12',
+              timestamp: Date.now() - 30 * 24 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'Reports of API requests being blocked despite being within rate limits.',
+              author: 'API Team'
+            },
+            {
+              id: 'update-13',
+              timestamp: Date.now() - 30 * 24 * 60 * 60 * 1000 + 20 * 60 * 1000,
+              status: 'identified',
+              message: 'Bug identified in rate limiting code. Preparing hotfix.',
+              author: 'API Team'
+            },
+            {
+              id: 'update-14',
+              timestamp: Date.now() - 30 * 24 * 60 * 60 * 1000 + 45 * 60 * 1000,
+              status: 'resolved',
+              message: 'Hotfix deployed. Rate limiting now functioning correctly.',
+              author: 'API Team'
+            }
+          ]
+        }
+      ];
+      
+      incidents.currentIncidents = currentIncidents;
+      incidents.pastIncidents = pastIncidents;
+      
+      // Configure Stats Grid
+      const operationalCount = services.filter(s => s.currentStatus === 'operational').length;
+      const totalIncidents = currentIncidents.length + 3; // Current + recent past
+      const avgResponseTime = services.reduce((sum, s) => sum + (s.responseTime || 0), 0) / services.length;
+      const avgUptime = services.reduce((sum, s) => sum + (s.uptime30d || 0), 0) / services.length;
+      
+      statsGrid.currentStatus = 'degraded';
+      statsGrid.uptime = avgUptime;
+      statsGrid.avgResponseTime = Math.round(avgResponseTime);
+      statsGrid.totalIncidents = totalIncidents;
+      statsGrid.affectedServices = services.filter(s => s.currentStatus !== 'operational').length;
+      statsGrid.totalServices = services.length;
+      statsGrid.timePeriod = '30 days';
+      
+      // Configure Footer
+      footer.companyName = 'CloudFlow Infrastructure';
+      footer.legalUrl = 'https://cloudflow.example.com/legal';
+      footer.supportEmail = 'support@cloudflow.example.com';
+      footer.statusPageUrl = 'https://status.cloudflow.example.com';
+      footer.lastUpdated = Date.now();
+      footer.currentYear = new Date().getFullYear();
+      footer.socialLinks = [
+        { platform: 'twitter', url: 'https://twitter.com/cloudflow' },
+        { platform: 'github', url: 'https://github.com/cloudflow' },
+        { platform: 'linkedin', url: 'https://linkedin.com/company/cloudflow' }
+      ];
+      footer.rssFeedUrl = 'https://status.cloudflow.example.com/rss';
+      footer.apiStatusUrl = 'https://api.cloudflow.example.com/v1/status';
+      footer.enableSubscribe = true;
+      footer.subscriberCount = 2847;
+      footer.additionalLinks = [
+        { label: 'API Documentation', url: 'https://docs.cloudflow.example.com' },
+        { label: 'Service SLA', url: 'https://cloudflow.example.com/sla' },
+        { label: 'Privacy Policy', url: 'https://cloudflow.example.com/privacy' }
+      ];
+      
+      // Add event listeners for interactivity
+      header.addEventListener('reportNewIncident', () => {
+        alert('Report Incident: This would open a form to report a new incident.');
+      });
+      
+      header.addEventListener('statusSubscribe', () => {
+        alert('Subscribe: This would open a subscription form for status updates.');
+      });
+      
+      footer.addEventListener('subscribeClick', () => {
+        alert('Subscribe to updates: Enter your email for status notifications.');
+      });
+      
+      assetsSelector.addEventListener('selectionChanged', (event: CustomEvent) => {
+        console.log('Selected services changed:', event.detail.selectedServices);
+        // In a real app, this would update the other components to show only selected services
+      });
+      
+      statusMonth.addEventListener('dayClick', (event: CustomEvent) => {
+        console.log('Day clicked:', event.detail);
+        alert(`Day details: ${event.detail.date}\nUptime: ${event.detail.uptime}%\nIncidents: ${event.detail.incidents}`);
+      });
+      
+      // Simulate real-time updates
+      setInterval(() => {
+        // Update last checked times
+        services.forEach(service => {
+          service.lastChecked = Date.now();
+          // Randomly change response times
+          service.responseTime = service.responseTime * (0.9 + Math.random() * 0.2);
+        });
+        assetsSelector.requestUpdate();
+        
+        // Update overall status last updated
+        statusBar.overallStatus = { ...statusBar.overallStatus, lastUpdated: Date.now() };
+        
+        // Update footer last updated
+        footer.lastUpdated = Date.now();
+      }, 30000); // Every 30 seconds
+    }}
+  >
+    <upl-statuspage-header></upl-statuspage-header>
+    <upl-statuspage-pagetitle></upl-statuspage-pagetitle>
+    <upl-statuspage-statusbar></upl-statuspage-statusbar>
+    <upl-statuspage-statsgrid></upl-statuspage-statsgrid>
+    <upl-statuspage-assetsselector></upl-statuspage-assetsselector>
+    <upl-statuspage-statusdetails></upl-statuspage-statusdetails>
+    <upl-statuspage-statusmonth></upl-statuspage-statusmonth>
+    <upl-statuspage-incidents></upl-statuspage-incidents>
+    <upl-statuspage-footer></upl-statuspage-footer>
+  </dees-demowrapper>
+  </div>
+`;