@uptime.link/statuspage 1.0.73 → 1.1.0

package/ts_web/pages/statuspage-maintenance.ts

@@ -0,0 +1,570 @@
+import { html, cssManager } from "@design.estate/dees-element";
+import type { IServiceStatus, IOverallStatus, IIncidentDetails, IStatusHistoryPoint, IMonthlyUptime } from '../interfaces/index.js';
+
+export const statuspageMaintenance = () => 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 = 'SecureVault';
+      header.showReportButton = true;
+      header.showSubscribeButton = true;
+      header.logoUrl = 'https://via.placeholder.com/150x50/2196F3/ffffff?text=SV';
+      
+      // Configure Overall Status - Maintenance
+      statusBar.overallStatus = {
+        status: 'maintenance',
+        message: 'Scheduled maintenance in progress - Expected completion: 2:00 AM UTC',
+        lastUpdated: Date.now(),
+        affectedServices: 5,
+        totalServices: 14
+      };
+      
+      // Configure Services - Mix of maintenance and operational
+      const services: IServiceStatus[] = [
+        // Core Services - Some under maintenance
+        {
+          id: 'web-app',
+          name: 'web-app',
+          displayName: 'Web Application',
+          description: 'Customer portal',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.92,
+          uptime90d: 99.89,
+          responseTime: 45,
+          category: 'Frontend',
+          selected: true
+        },
+        {
+          id: 'mobile-api',
+          name: 'mobile-api',
+          displayName: 'Mobile API',
+          description: 'Mobile app backend',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.88,
+          uptime90d: 99.85,
+          responseTime: 62,
+          category: 'Frontend',
+          selected: true
+        },
+        {
+          id: 'auth-service',
+          name: 'auth-service',
+          displayName: 'Authentication Service',
+          description: 'User authentication',
+          currentStatus: 'maintenance',
+          lastChecked: Date.now(),
+          uptime30d: 99.5,
+          uptime90d: 99.7,
+          responseTime: 0,
+          category: 'Core Services',
+          selected: true
+        },
+        {
+          id: 'api-gateway',
+          name: 'api-gateway',
+          displayName: 'API Gateway',
+          description: 'Main API endpoint',
+          currentStatus: 'degraded',
+          lastChecked: Date.now(),
+          uptime30d: 99.2,
+          uptime90d: 99.4,
+          responseTime: 125,
+          category: 'Core Services',
+          selected: true
+        },
+        // Database Services
+        {
+          id: 'primary-db',
+          name: 'primary-db',
+          displayName: 'Primary Database',
+          description: 'Main database cluster',
+          currentStatus: 'maintenance',
+          lastChecked: Date.now(),
+          uptime30d: 99.6,
+          uptime90d: 99.7,
+          responseTime: 0,
+          category: 'Data Storage',
+          selected: true
+        },
+        {
+          id: 'replica-db',
+          name: 'replica-db',
+          displayName: 'Database Replicas',
+          description: 'Read replicas (read-only mode)',
+          currentStatus: 'degraded',
+          lastChecked: Date.now(),
+          uptime30d: 99.7,
+          uptime90d: 99.8,
+          responseTime: 85,
+          category: 'Data Storage',
+          selected: true
+        },
+        {
+          id: 'cache',
+          name: 'cache',
+          displayName: 'Cache Service',
+          description: 'Redis cache layer',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.95,
+          uptime90d: 99.93,
+          responseTime: 8,
+          category: 'Data Storage',
+          selected: false
+        },
+        // Backup and Storage
+        {
+          id: 'backup-service',
+          name: 'backup-service',
+          displayName: 'Backup Service',
+          description: 'Automated backups',
+          currentStatus: 'maintenance',
+          lastChecked: Date.now(),
+          uptime30d: 99.8,
+          uptime90d: 99.85,
+          responseTime: 0,
+          category: 'Operations',
+          selected: true
+        },
+        {
+          id: 'file-storage',
+          name: 'file-storage',
+          displayName: 'File Storage',
+          description: 'Object storage service',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.99,
+          uptime90d: 99.98,
+          responseTime: 42,
+          category: 'Operations',
+          selected: false
+        },
+        // Monitoring and Support
+        {
+          id: 'monitoring',
+          name: 'monitoring',
+          displayName: 'Monitoring System',
+          description: 'System monitoring',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.9,
+          uptime90d: 99.88,
+          responseTime: 32,
+          category: 'Support',
+          selected: true
+        },
+        {
+          id: 'logging',
+          name: 'logging',
+          displayName: 'Logging Service',
+          description: 'Centralized logs',
+          currentStatus: 'maintenance',
+          lastChecked: Date.now(),
+          uptime30d: 99.7,
+          uptime90d: 99.75,
+          responseTime: 0,
+          category: 'Support',
+          selected: false
+        },
+        {
+          id: 'alerting',
+          name: 'alerting',
+          displayName: 'Alerting System',
+          description: 'Alert notifications',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.85,
+          uptime90d: 99.82,
+          responseTime: 28,
+          category: 'Support',
+          selected: false
+        },
+        // Communication Services
+        {
+          id: 'email',
+          name: 'email',
+          displayName: 'Email Service',
+          description: 'Transactional emails',
+          currentStatus: 'operational',
+          lastChecked: Date.now(),
+          uptime30d: 99.6,
+          uptime90d: 99.55,
+          responseTime: 142,
+          category: 'Communication',
+          selected: true
+        },
+        {
+          id: 'webhooks',
+          name: 'webhooks',
+          displayName: 'Webhook Delivery',
+          description: 'Webhook notifications',
+          currentStatus: 'maintenance',
+          lastChecked: Date.now(),
+          uptime30d: 99.4,
+          uptime90d: 99.45,
+          responseTime: 0,
+          category: 'Communication',
+          selected: false
+        }
+      ];
+      
+      assetsSelector.services = services;
+      
+      // Configure Stats Grid - Maintenance mode 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 = 'maintenance';
+      statsGrid.uptime = avgUptime;
+      statsGrid.avgResponseTime = Math.round(avgResponseTime);
+      statsGrid.totalIncidents = 1; // Just the maintenance
+      statsGrid.affectedServices = services.filter(s => s.currentStatus === 'maintenance').length;
+      statsGrid.totalServices = services.length;
+      statsGrid.timePeriod = '30 days';
+      
+      // Configure Status Details - Showing maintenance period
+      const generateStatusDetails = (): IStatusHistoryPoint[] => {
+        const details: IStatusHistoryPoint[] = [];
+        const now = new Date();
+        const maintenanceStarted = 2; // 2 hours ago
+        
+        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;
+          let responseTime = 25;
+          
+          // Maintenance window
+          if (i <= maintenanceStarted) {
+            status = 'degraded';
+            value = 60;
+            responseTime = 0;
+          } else if (i <= maintenanceStarted + 2) {
+            // Pre-maintenance prep
+            status = 'degraded';
+            value = 85;
+            responseTime = 80;
+          }
+          
+          details.push({
+            timestamp: date.getTime(),
+            status,
+            responseTime
+          });
+        }
+        
+        return details;
+      };
+      
+      statusDetails.dataPoints = generateStatusDetails();
+      statusDetails.serviceId = 'primary-db';
+      statusDetails.serviceName = 'Primary Database';
+      
+      // Configure Monthly Status - Good uptime with scheduled maintenance windows
+      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;
+            const isFirstSunday = dayDate.getDay() === 0 && d <= 7;
+            
+            if (isFuture) continue;
+            
+            let status: 'operational' | 'degraded' | 'partial_outage' | 'major_outage' = 'operational';
+            let uptime = 100;
+            let dayIncidents = 0;
+            
+            // Today - maintenance
+            if (isToday) {
+              status = 'degraded';
+              uptime = 92; // 2 hours of maintenance = 8% downtime
+              dayIncidents = 0; // Maintenance is not an incident
+            } else if (isFirstSunday) {
+              // Monthly maintenance on first Sunday
+              status = 'degraded';
+              uptime = 96; // 1 hour maintenance
+              dayIncidents = 0;
+            } else if (Math.random() > 0.95) {
+              // Occasional issues
+              status = 'degraded';
+              uptime = 98 + Math.random() * 2;
+              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 - Current maintenance
+      const currentIncidents: IIncidentDetails[] = [
+        {
+          id: 'maint-2024-001',
+          title: 'Scheduled Database Maintenance',
+          impact: 'Database will be in read-only mode. Some features may be temporarily unavailable.',
+          severity: 'minor',
+          status: 'monitoring',
+          startTime: Date.now() - 2 * 60 * 60 * 1000,
+          affectedServices: ['Primary Database', 'Authentication Service', 'Backup Service', 'Logging Service', 'Webhook Delivery'],
+          updates: [
+            {
+              id: 'update-1',
+              timestamp: Date.now() - 7 * 24 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'Scheduled maintenance has been announced for database upgrades and security patches.',
+              author: 'Operations Team'
+            },
+            {
+              id: 'update-2',
+              timestamp: Date.now() - 24 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'Reminder: Database maintenance scheduled for tomorrow at 12:00 AM UTC.',
+              author: 'Operations Team'
+            },
+            {
+              id: 'update-3',
+              timestamp: Date.now() - 2 * 60 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Maintenance window has begun. Database is now in read-only mode.',
+              author: 'Database Team'
+            },
+            {
+              id: 'update-4',
+              timestamp: Date.now() - 1.5 * 60 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Security patches applied successfully. Beginning database schema updates.',
+              author: 'Database Team'
+            },
+            {
+              id: 'update-5',
+              timestamp: Date.now() - 1 * 60 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Schema updates 50% complete. Everything proceeding as planned.',
+              author: 'Database Team'
+            },
+            {
+              id: 'update-6',
+              timestamp: Date.now() - 30 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Final testing phase. Services will begin coming back online shortly.',
+              author: 'Operations Team'
+            }
+          ]
+        }
+      ];
+      
+      const pastIncidents: IIncidentDetails[] = [
+        {
+          id: 'maint-2024-prev-001',
+          title: 'Previous Monthly Maintenance',
+          impact: 'Services were in maintenance mode for 1 hour',
+          severity: 'minor',
+          status: 'resolved',
+          startTime: Date.now() - 30 * 24 * 60 * 60 * 1000,
+          endTime: Date.now() - 30 * 24 * 60 * 60 * 1000 + 60 * 60 * 1000,
+          affectedServices: ['Primary Database', 'Backup Service'],
+          rootCause: 'Scheduled monthly maintenance for security updates.',
+          resolution: 'Maintenance completed successfully with all updates applied.',
+          updates: [
+            {
+              id: 'update-7',
+              timestamp: Date.now() - 30 * 24 * 60 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Monthly maintenance started.',
+              author: 'Operations Team'
+            },
+            {
+              id: 'update-8',
+              timestamp: Date.now() - 30 * 24 * 60 * 60 * 1000 + 60 * 60 * 1000,
+              status: 'resolved',
+              message: 'Maintenance completed successfully.',
+              author: 'Operations Team'
+            }
+          ]
+        },
+        {
+          id: 'inc-2024-001',
+          title: 'API Gateway Performance Issues',
+          impact: 'Slow API responses for some users',
+          severity: 'minor',
+          status: 'resolved',
+          startTime: Date.now() - 15 * 24 * 60 * 60 * 1000,
+          endTime: Date.now() - 15 * 24 * 60 * 60 * 1000 + 45 * 60 * 1000,
+          affectedServices: ['API Gateway'],
+          rootCause: 'Memory leak in API Gateway service.',
+          resolution: 'Service restarted and patch applied.',
+          updates: [
+            {
+              id: 'update-9',
+              timestamp: Date.now() - 15 * 24 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'Investigating reports of slow API responses.',
+              author: 'API Team'
+            },
+            {
+              id: 'update-10',
+              timestamp: Date.now() - 15 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000,
+              status: 'identified',
+              message: 'Memory leak identified. Preparing fix.',
+              author: 'API Team'
+            },
+            {
+              id: 'update-11',
+              timestamp: Date.now() - 15 * 24 * 60 * 60 * 1000 + 45 * 60 * 1000,
+              status: 'resolved',
+              message: 'Fix applied. Performance back to normal.',
+              author: 'API Team'
+            }
+          ]
+        },
+        {
+          id: 'maint-2023-012',
+          title: 'Year-End Infrastructure Upgrade',
+          impact: 'Planned downtime for major infrastructure improvements',
+          severity: 'major',
+          status: 'resolved',
+          startTime: Date.now() - 60 * 24 * 60 * 60 * 1000,
+          endTime: Date.now() - 60 * 24 * 60 * 60 * 1000 + 4 * 60 * 60 * 1000,
+          affectedServices: ['All Services'],
+          rootCause: 'Annual infrastructure upgrade and capacity expansion.',
+          resolution: 'All upgrades completed successfully. System capacity increased by 50%.',
+          updates: [
+            {
+              id: 'update-12',
+              timestamp: Date.now() - 67 * 24 * 60 * 60 * 1000,
+              status: 'investigating',
+              message: 'Year-end maintenance scheduled for next week.',
+              author: 'CTO'
+            },
+            {
+              id: 'update-13',
+              timestamp: Date.now() - 60 * 24 * 60 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Maintenance window started. All services going offline.',
+              author: 'Operations Team'
+            },
+            {
+              id: 'update-14',
+              timestamp: Date.now() - 60 * 24 * 60 * 60 * 1000 + 2 * 60 * 60 * 1000,
+              status: 'monitoring',
+              message: 'Hardware upgrades complete. Software updates in progress.',
+              author: 'Infrastructure Team'
+            },
+            {
+              id: 'update-15',
+              timestamp: Date.now() - 60 * 24 * 60 * 60 * 1000 + 4 * 60 * 60 * 1000,
+              status: 'resolved',
+              message: 'All systems back online. Performance improvements confirmed.',
+              author: 'Operations Team'
+            },
+            {
+              id: 'update-16',
+              timestamp: Date.now() - 59 * 24 * 60 * 60 * 1000,
+              status: 'postmortem',
+              message: 'Maintenance report published. 50% capacity increase achieved.',
+              author: 'Engineering Team'
+            }
+          ]
+        }
+      ];
+      
+      incidents.currentIncidents = currentIncidents;
+      incidents.pastIncidents = pastIncidents;
+      
+      // Configure Footer
+      footer.companyName = 'SecureVault Infrastructure';
+      footer.legalUrl = 'https://securevault.example.com/legal';
+      footer.supportEmail = 'support@securevault.example.com';
+      footer.statusPageUrl = 'https://status.securevault.example.com';
+      footer.lastUpdated = Date.now();
+      footer.currentYear = new Date().getFullYear();
+      footer.socialLinks = [
+        { platform: 'twitter', url: 'https://twitter.com/securevault' },
+        { platform: 'linkedin', url: 'https://linkedin.com/company/securevault' }
+      ];
+      footer.rssFeedUrl = 'https://status.securevault.example.com/rss';
+      footer.apiStatusUrl = 'https://api.securevault.example.com/v1/status';
+      footer.enableSubscribe = true;
+      footer.subscriberCount = 3892;
+      footer.additionalLinks = [
+        { label: 'Maintenance Schedule', url: 'https://securevault.example.com/maintenance' },
+        { label: 'API Documentation', url: 'https://docs.securevault.example.com' },
+        { label: 'Support Portal', url: 'https://support.securevault.example.com' }
+      ];
+      footer.latestStatusUpdate = 'Database maintenance 50% complete - On track for 2:00 AM UTC completion';
+    }}
+  >
+    <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>
+`;