@uptime.link/statuspage 1.0.74 → 1.1.0

package/ts_web/pages/statuspage-outage.ts

@@ -0,0 +1,568 @@
+import { html, cssManager } from "@design.estate/dees-element";
+import type { IServiceStatus, IOverallStatus, IIncidentDetails, IStatusHistoryPoint, IMonthlyUptime } from '../interfaces/index.js';
+
+export const statuspageOutage = () => 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 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 = 'DataStream';
+      header.showReportButton = true;
+      header.showSubscribeButton = true;
+      header.logoUrl = 'https://via.placeholder.com/150x50/F44336/ffffff?text=DS';
+      
+      // Configure Overall Status - Major Outage
+      statusBar.overallStatus = {
+        status: 'major_outage',
+        message: 'Major service disruption affecting multiple regions',
+        lastUpdated: Date.now(),
+        affectedServices: 8,
+        totalServices: 15
+      };
+      
+      // Configure Services - Multiple Outages
+      const services: IServiceStatus[] = [
+        // Core Services - Major Outage
+        {
+          id: 'api-gateway',
+          name: 'api-gateway',
+          displayName: 'API Gateway',
+          description: 'Main API endpoint',
+          currentStatus: 'major_outage',
+          lastChecked: Date.now(),
+          uptime30d: 85.2,
+          uptime90d: 92.5,
+          responseTime: 2500,
+          category: 'Core Infrastructure',
+          selected: true
+        },
+        {
+          id: 'auth-service',
+          name: 'auth-service',
+          displayName: 'Authentication',
+          description: 'Login and authorization',
+          currentStatus: 'major_outage',
+          lastChecked: Date.now(),
+          uptime30d: 84.8,
+          uptime90d: 91.2,
+          responseTime: 3200,
+          category: 'Core Infrastructure',
+          selected: true
+        },
+        {
+          id: 'web-portal',
+          name: 'web-portal',
+          displayName: 'Web Portal',
+          description: 'Customer web interface',
+          currentStatus: 'partial_outage',
+          lastChecked: Date.now(),
+          uptime30d: 88.5,
+          uptime90d: 94.2,
+          responseTime: 1800,
+          category: 'Frontend',
+          selected: true
+        },
+        // Database Services - Critical
+        {
+          id: 'primary-db',
+          name: 'primary-db',
+          displayName: 'Primary Database',
+          description: 'Main data storage',
+          currentStatus: 'major_outage',
+          lastChecked: Date.now(),
+          uptime30d: 82.1,
+          uptime90d: 90.5,
+          responseTime: 5000,
+          category: 'Data Layer',
+          selected: true
+        },
+        {
+          id: 'replica-db',
+          name: 'replica-db',
+          displayName: 'Database Replicas',
+          description: 'Read replicas',
+          currentStatus: 'partial_outage',
+          lastChecked: Date.now(),
+          uptime30d: 86.7,
+          uptime90d: 93.1,
+          responseTime: 2200,
+          category: 'Data Layer',
+          selected: true
+        },
+        {
+          id: 'cache-layer',
+          name: 'cache-layer',
+          displayName: 'Cache Layer',
+          description: 'Redis cache',
+          currentStatus: 'degraded',
+          lastChecked: Date.now(),
+          uptime30d: 92.3,
+          uptime90d: 95.8,
+          responseTime: 450,
+          category: 'Data Layer',
+          selected: true
+        },
+        // Regional Services
+        {
+          id: 'us-east',
+          name: 'us-east',
+          displayName: 'US East Region',
+          description: 'Primary US datacenter',
+          currentStatus: 'major_outage',
+          lastChecked: Date.now(),
+          uptime30d: 81.5,
+          uptime90d: 89.2,
+          responseTime: 4500,
+          category: 'Regional',
+          selected: true
+        },
+        {
+          id: 'us-west',
+          name: 'us-west',
+          displayName: 'US West Region',
+          description: 'Secondary US datacenter',
+          currentStatus: 'degraded',
+          lastChecked: Date.now(),
+          uptime30d: 94.2,
+          uptime90d: 96.8,
+          responseTime: 180,
+          category: 'Regional',
+          selected: true
+        },
+        {
+          id: 'eu-central',
+          name: 'eu-central',
+          displayName: 'EU Central Region',
+          description: 'European datacenter',
+          currentStatus: 'major_outage',
+          lastChecked: Date.now(),
+          uptime30d: 83.7,
+          uptime90d: 91.2,
+          responseTime: 3800,
+          category: 'Regional',
+          selected: true
+        },
+        // Some operational services
+        {
+          id: 'status-page',
+          name: 'status-page',
+          displayName: 'Status Page',
+          description: 'This status page',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.9,
+          uptime90d: 99.8,
+          responseTime: 45,
+          category: 'Support',
+          selected: false
+        },
+        {
+          id: 'support-portal',
+          name: 'support-portal',
+          displayName: 'Support Portal',
+          description: 'Customer support system',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 98.5,
+          uptime90d: 99.1,
+          responseTime: 120,
+          category: 'Support',
+          selected: false
+        },
+        // Degraded services
+        {
+          id: 'email-service',
+          name: 'email-service',
+          displayName: 'Email Notifications',
+          description: 'Automated emails',
+          currentStatus: 'degraded',
+          lastChecked: Date.now(),
+          uptime30d: 91.2,
+          uptime90d: 94.5,
+          responseTime: 850,
+          category: 'Communication',
+          selected: true
+        },
+        {
+          id: 'analytics',
+          name: 'analytics',
+          displayName: 'Analytics Platform',
+          description: 'Usage analytics',
+          currentStatus: 'partial_outage',
+          lastChecked: Date.now(),
+          uptime30d: 87.3,
+          uptime90d: 92.8,
+          responseTime: 1200,
+          category: 'Services',
+          selected: false
+        },
+        {
+          id: 'backup-system',
+          name: 'backup-system',
+          displayName: 'Backup System',
+          description: 'Data backups',
+          currentStatus: 'degraded',
+          lastChecked: Date.now(),
+          uptime30d: 95.2,
+          uptime90d: 97.1,
+          responseTime: 320,
+          category: 'Services',
+          selected: false
+        },
+        {
+          id: 'monitoring',
+          name: 'monitoring',
+          displayName: 'Monitoring System',
+          description: 'Infrastructure monitoring',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 98.7,
+          uptime90d: 99.2,
+          responseTime: 65,
+          category: 'Services',
+          selected: true
+        }
+      ];
+      
+      assetsSelector.services = services;
+      
+      // Configure Stats Grid - Major outage metrics
+      const operationalCount = services.filter(s => s.currentStatus === 'operational').length;
+      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 = 'major_outage';
+      statsGrid.uptime = avgUptime;
+      statsGrid.avgResponseTime = Math.round(avgResponseTime);
+      statsGrid.totalIncidents = 15; // High number of incidents
+      statsGrid.affectedServices = services.filter(s => s.currentStatus !== 'operational').length;
+      statsGrid.totalServices = services.length;
+      statsGrid.timePeriod = '30 days';
+      
+      // Configure Status Details - Showing the outage timeline
+      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' | 'major_outage' = 'operational';
+          let value = 100;
+          let responseTime = 30;
+          
+          // Outage started 8 hours ago
+          if (i <= 8) {
+            status = 'major_outage';
+            value = 15 + Math.random() * 20;
+            responseTime = 2000 + Math.random() * 3000;
+          } else if (i <= 12) {
+            // Degradation before the outage
+            status = 'degraded';
+            value = 70 + Math.random() * 20;
+            responseTime = 200 + Math.random() * 800;
+          } else if (i <= 24) {
+            // Some issues yesterday
+            if (Math.random() > 0.7) {
+              status = 'degraded';
+              value = 85 + Math.random() * 10;
+              responseTime = 100 + Math.random() * 200;
+            }
+          }
+          
+          details.push({
+            timestamp: date.getTime(),
+            status,
+            responseTime
+          });
+        }
+        
+        return details;
+      };
+      
+      statusDetails.dataPoints = generateStatusDetails();
+      statusDetails.serviceId = 'primary-db';
+      statusDetails.serviceName = 'Primary Database';
+      
+      // Configure Monthly Status - Poor performance
+      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;
+            
+            // Today - major outage
+            if (isToday) {
+              status = 'major_outage';
+              uptime = 45;
+              dayIncidents = 3;
+            } else if (Math.random() > 0.7) {
+              // Frequent issues
+              if (Math.random() > 0.5) {
+                status = 'partial_outage';
+                uptime = 75 + Math.random() * 15;
+                dayIncidents = 2;
+              } else {
+                status = 'degraded';
+                uptime = 85 + Math.random() * 10;
+                dayIncidents = 1;
+              }
+            }
+            
+            days.push({
+              date: dayDate.toISOString().slice(0, 10),
+              status,
+              uptime,
+              incidents: dayIncidents,
+              totalDowntime: Math.round((100 - uptime) * 14.4)
+            });
+            
+            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 - Multiple current incidents
+      const currentIncidents: IIncidentDetails[] = [
+        {
+          id: 'inc-2024-crit-001',
+          title: 'Complete Database Failure in Multiple Regions',
+          impact: 'Users unable to access any services. Complete system outage.',
+          severity: 'critical',
+          status: 'investigating',
+          startTime: Date.now() - 8 * 60 * 60 * 1000,
+          affectedServices: ['Primary Database', 'Database Replicas', 'API Gateway', 'Authentication', 'US East Region', 'EU Central Region'],
+          updates: [
+            {
+              id: 'update-1',
+              timestamp: Date.now() - 8 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'Multiple alerts triggered. Complete service failure detected across regions.',
+              author: 'Automated Monitoring'
+            },
+            {
+              id: 'update-2',
+              timestamp: Date.now() - 7.5 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'All hands on deck. Engineering teams mobilized. Initial investigation points to cascading database failure.',
+              author: 'Incident Commander'
+            },
+            {
+              id: 'update-3',
+              timestamp: Date.now() - 6 * 60 * 60 * 1000,
+              status: 'identified',
+              message: 'Root cause identified: Corrupted replication logs causing database cluster failures. Working on recovery.',
+              author: 'Database Team'
+            },
+            {
+              id: 'update-4',
+              timestamp: Date.now() - 4 * 60 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Attempting to restore from backups. This is a complex operation and will take time.',
+              author: 'Infrastructure Team'
+            },
+            {
+              id: 'update-5',
+              timestamp: Date.now() - 2 * 60 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Partial recovery in progress. Some read-only operations may become available soon.',
+              author: 'Database Team'
+            },
+            {
+              id: 'update-6',
+              timestamp: Date.now() - 30 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Critical update: Recovery is taking longer than expected. We are exploring all options including failover to disaster recovery site.',
+              author: 'CTO'
+            }
+          ]
+        },
+        {
+          id: 'inc-2024-maj-002',
+          title: 'API Gateway Overload',
+          impact: 'API requests failing or timing out',
+          severity: 'major',
+          status: 'monitoring',
+          startTime: Date.now() - 6 * 60 * 60 * 1000,
+          affectedServices: ['API Gateway', 'Web Portal'],
+          updates: [
+            {
+              id: 'update-7',
+              timestamp: Date.now() - 6 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'API Gateway experiencing extreme load due to retry storms from database failures.',
+              author: 'API Team'
+            },
+            {
+              id: 'update-8',
+              timestamp: Date.now() - 5 * 60 * 60 * 1000,
+              status: 'identified',
+              message: 'Implementing rate limiting and circuit breakers to prevent cascade failures.',
+              author: 'API Team'
+            },
+            {
+              id: 'update-9',
+              timestamp: Date.now() - 3 * 60 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Rate limiting in place. Load is stabilizing but service remains degraded.',
+              author: 'API Team'
+            }
+          ]
+        },
+        {
+          id: 'inc-2024-maj-003',
+          title: 'Email Service Delays',
+          impact: 'Notification emails delayed by up to 2 hours',
+          severity: 'major',
+          status: 'monitoring',
+          startTime: Date.now() - 5 * 60 * 60 * 1000,
+          affectedServices: ['Email Notifications'],
+          updates: [
+            {
+              id: 'update-10',
+              timestamp: Date.now() - 5 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'Email queue backing up due to system outages.',
+              author: 'Communications Team'
+            },
+            {
+              id: 'update-11',
+              timestamp: Date.now() - 3 * 60 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Processing backlog slowly. Prioritizing critical notifications.',
+              author: 'Communications Team'
+            }
+          ]
+        }
+      ];
+      
+      const pastIncidents: IIncidentDetails[] = [
+        {
+          id: 'inc-2024-prev-001',
+          title: 'Previous Major Outage',
+          impact: 'Services unavailable for 4 hours',
+          severity: 'critical',
+          status: 'resolved',
+          startTime: Date.now() - 30 * 24 * 60 * 60 * 1000,
+          endTime: Date.now() - 30 * 24 * 60 * 60 * 1000 + 4 * 60 * 60 * 1000,
+          affectedServices: ['All Services'],
+          rootCause: 'Power failure at primary datacenter with UPS failure.',
+          resolution: 'Power restored. UPS systems replaced and tested.',
+          updates: [
+            {
+              id: 'update-12',
+              timestamp: Date.now() - 30 * 24 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'Complete datacenter power loss.',
+              author: 'Operations'
+            },
+            {
+              id: 'update-13',
+              timestamp: Date.now() - 30 * 24 * 60 * 60 * 1000 + 4 * 60 * 60 * 1000,
+              status: 'resolved',
+              message: 'Power restored. Services coming back online.',
+              author: 'Operations'
+            },
+            {
+              id: 'update-14',
+              timestamp: Date.now() - 29 * 24 * 60 * 60 * 1000,
+              status: 'postmortem',
+              message: 'Postmortem published. Multiple redundancy improvements implemented.',
+              author: 'Engineering'
+            }
+          ]
+        }
+      ];
+      
+      incidents.currentIncidents = currentIncidents;
+      incidents.pastIncidents = pastIncidents;
+      
+      // Configure Footer
+      footer.companyName = 'DataStream Platform';
+      footer.legalUrl = 'https://datastream.example.com/legal';
+      footer.supportEmail = 'emergency@datastream.example.com';
+      footer.statusPageUrl = 'https://status.datastream.example.com';
+      footer.lastUpdated = Date.now();
+      footer.currentYear = new Date().getFullYear();
+      footer.socialLinks = [
+        { platform: 'twitter', url: 'https://twitter.com/datastream' }
+      ];
+      footer.rssFeedUrl = 'https://status.datastream.example.com/rss';
+      footer.apiStatusUrl = 'https://api.datastream.example.com/v1/status';
+      footer.enableSubscribe = true;
+      footer.enableReportIssue = true;
+      footer.subscriberCount = 15234;
+      footer.errorMessage = 'Critical: Multiple services experiencing major outages';
+      footer.additionalLinks = [
+        { label: 'Emergency Support', url: 'tel:+1-800-HELP-NOW' },
+        { label: 'Incident Updates', url: 'https://datastream.example.com/incidents' }
+      ];
+    }}
+  >
+    <upl-statuspage-header></upl-statuspage-header>
+    <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>
+`;