From f6bf598481f98bba2ab8c6c24a7f6fd59d6adcb7 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Sun, 29 Jun 2025 22:46:45 +0000 Subject: [PATCH] update --- .gitignore | 1 - ts_web/pages/index.ts | 4 + ts_web/pages/statuspage-allgreen.ts | 421 ++++++++++++++++ ts_web/pages/statuspage-demo.ts | 650 +++++++++++++++++++++++++ ts_web/pages/statuspage-maintenance.ts | 575 ++++++++++++++++++++++ ts_web/pages/statuspage-outage.ts | 573 ++++++++++++++++++++++ 6 files changed, 2223 insertions(+), 1 deletion(-) create mode 100644 ts_web/pages/index.ts create mode 100644 ts_web/pages/statuspage-allgreen.ts create mode 100644 ts_web/pages/statuspage-demo.ts create mode 100644 ts_web/pages/statuspage-maintenance.ts create mode 100644 ts_web/pages/statuspage-outage.ts diff --git a/.gitignore b/.gitignore index ef13c79..352c177 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,6 @@ # artifacts coverage/ public/ -pages/ # installs node_modules/ diff --git a/ts_web/pages/index.ts b/ts_web/pages/index.ts new file mode 100644 index 0000000..c28e4e8 --- /dev/null +++ b/ts_web/pages/index.ts @@ -0,0 +1,4 @@ +export * from './statuspage-demo.js'; +export * from './statuspage-allgreen.js'; +export * from './statuspage-outage.js'; +export * from './statuspage-maintenance.js'; diff --git a/ts_web/pages/statuspage-allgreen.ts b/ts_web/pages/statuspage-allgreen.ts new file mode 100644 index 0000000..eff94af --- /dev/null +++ b/ts_web/pages/statuspage-allgreen.ts @@ -0,0 +1,421 @@ +import { html, cssManager } from "@design.estate/dees-element"; +import type { IServiceStatus, IOverallStatus, IIncidentDetails, IStatusHistoryPoint, IMonthlyUptime } from '../interfaces/index.js'; + +export const statuspageAllgreen = () => html` + + +
+
+

All Systems Operational

+

This demo shows a status page where everything is running perfectly with no issues.

+
+ + { + const header = wrapperElement.querySelector('upl-statuspage-header') as any; + const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') 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 = 'TechVault Services Status'; + header.showReportButton = true; + header.showSubscribeButton = true; + header.logoUrl = 'https://via.placeholder.com/150x50/4CAF50/ffffff?text=TechVault'; + header.customStyles = true; + header.brandColor = '#4CAF50'; + + // Configure Overall Status - All Green + statusBar.overallStatus = { + status: 'operational', + message: 'All Systems Operational', + lastUpdated: Date.now(), + affectedServices: 0, + totalServices: 12 + }; + + // Configure Services - All Operational + const services: IServiceStatus[] = [ + { + id: 'web-app', + name: 'web-app', + displayName: 'Web Application', + description: 'Main customer-facing application', + currentStatus: 'operational', + lastChecked: Date.now(), + uptime30d: 99.99, + uptime90d: 99.98, + responseTime: 32, + category: 'Frontend', + selected: true + }, + { + id: 'mobile-app', + name: 'mobile-app', + displayName: 'Mobile Applications', + description: 'iOS and Android apps', + currentStatus: 'operational', + lastChecked: Date.now(), + uptime30d: 100, + uptime90d: 99.99, + responseTime: 45, + category: 'Frontend', + selected: true + }, + { + id: 'api', + name: 'api', + displayName: 'API Services', + description: 'RESTful and GraphQL APIs', + currentStatus: 'operational', + lastChecked: Date.now(), + uptime30d: 99.97, + uptime90d: 99.96, + responseTime: 28, + category: 'Backend', + selected: true + }, + { + id: 'auth', + name: 'auth', + displayName: 'Authentication', + description: 'OAuth and SSO services', + currentStatus: 'operational', + lastChecked: Date.now(), + uptime30d: 100, + uptime90d: 99.99, + responseTime: 22, + category: 'Backend', + selected: true + }, + { + id: 'database', + name: 'database', + displayName: 'Database Cluster', + description: 'Primary data storage', + currentStatus: 'operational', + lastChecked: Date.now(), + uptime30d: 100, + uptime90d: 99.99, + responseTime: 15, + category: 'Infrastructure', + selected: true + }, + { + id: 'cache', + name: 'cache', + displayName: 'Cache Layer', + description: 'Redis cache clusters', + currentStatus: 'operational', + lastChecked: Date.now(), + uptime30d: 100, + uptime90d: 100, + responseTime: 3, + category: 'Infrastructure', + selected: false + }, + { + id: 'search', + name: 'search', + displayName: 'Search Service', + description: 'Elasticsearch clusters', + currentStatus: 'operational', + lastChecked: Date.now(), + uptime30d: 99.98, + uptime90d: 99.97, + responseTime: 42, + category: 'Infrastructure', + selected: true + }, + { + id: 'cdn', + name: 'cdn', + displayName: 'CDN', + description: 'Global content delivery', + currentStatus: 'operational', + lastChecked: Date.now(), + uptime30d: 100, + uptime90d: 100, + responseTime: 8, + category: 'Network', + selected: true + }, + { + id: 'email', + name: 'email', + displayName: 'Email Service', + description: 'Transactional emails', + currentStatus: 'operational', + lastChecked: Date.now(), + uptime30d: 99.95, + uptime90d: 99.94, + responseTime: 125, + category: 'Communication', + selected: false + }, + { + id: 'sms', + name: 'sms', + displayName: 'SMS Service', + description: 'SMS notifications', + currentStatus: 'operational', + lastChecked: Date.now(), + uptime30d: 99.92, + uptime90d: 99.90, + responseTime: 180, + category: 'Communication', + selected: false + }, + { + id: 'payments', + name: 'payments', + displayName: 'Payment Processing', + description: 'Payment gateway integration', + currentStatus: 'operational', + lastChecked: Date.now(), + uptime30d: 100, + uptime90d: 99.99, + responseTime: 95, + category: 'Services', + selected: true + }, + { + id: 'analytics', + name: 'analytics', + displayName: 'Analytics Engine', + description: 'Real-time analytics', + currentStatus: 'operational', + lastChecked: Date.now(), + uptime30d: 99.96, + uptime90d: 99.95, + responseTime: 55, + category: 'Services', + selected: true + } + ]; + + assetsSelector.services = services; + + // Configure Status Details - All operational for 48 hours + 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); + + details.push({ + timestamp: date.getTime(), + status: 'operational', + responseTime: 20 + Math.random() * 10 // Very consistent response times + }); + } + + return details; + }; + + statusDetails.dataPoints = generateStatusDetails(); + statusDetails.serviceId = 'api'; + statusDetails.serviceName = 'API Services'; + + // Configure Monthly Status - Near perfect uptime + 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 isFuture = dayDate > now; + + if (isFuture) continue; + + // Almost all days are perfect + let status: 'operational' | 'degraded' | 'partial_outage' | 'major_outage' = 'operational'; + let uptime = 100; + let dayIncidents = 0; + + // Very rare minor issues + if (Math.random() > 0.98) { + status = 'degraded'; + uptime = 99.5 + Math.random() * 0.5; + 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 - None current, few past + const currentIncidents: IIncidentDetails[] = []; + + const pastIncidents: IIncidentDetails[] = [ + { + id: 'inc-2024-001', + title: 'Brief API Response Time Increase', + impact: 'API responses were slightly slower than usual', + severity: 'minor', + status: 'resolved', + startTime: Date.now() - 45 * 24 * 60 * 60 * 1000, + endTime: Date.now() - 45 * 24 * 60 * 60 * 1000 + 15 * 60 * 1000, + affectedServices: ['API Services'], + rootCause: 'Temporary increase in traffic due to a viral marketing campaign.', + resolution: 'Auto-scaling handled the load increase. No manual intervention required.', + updates: [ + { + id: 'update-1', + timestamp: Date.now() - 45 * 24 * 60 * 60 * 1000, + status: 'investigating', + message: 'Monitoring increased API response times.', + author: 'Automated Monitoring' + }, + { + id: 'update-2', + timestamp: Date.now() - 45 * 24 * 60 * 60 * 1000 + 5 * 60 * 1000, + status: 'identified', + message: 'Traffic spike identified. Auto-scaling in progress.', + author: 'DevOps Team' + }, + { + id: 'update-3', + timestamp: Date.now() - 45 * 24 * 60 * 60 * 1000 + 15 * 60 * 1000, + status: 'resolved', + message: 'Response times back to normal. Incident resolved.', + author: 'Automated Monitoring' + } + ] + }, + { + id: 'inc-2023-089', + title: 'Scheduled Database Maintenance', + impact: 'Database was in read-only mode for 30 minutes', + severity: 'minor', + status: 'resolved', + startTime: Date.now() - 90 * 24 * 60 * 60 * 1000, + endTime: Date.now() - 90 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000, + affectedServices: ['Database Cluster'], + rootCause: 'Scheduled maintenance for security patches.', + resolution: 'Maintenance completed successfully as planned.', + updates: [ + { + id: 'update-4', + timestamp: Date.now() - 97 * 24 * 60 * 60 * 1000, + status: 'investigating', + message: 'Scheduled maintenance announced.', + author: 'Database Team' + }, + { + id: 'update-5', + timestamp: Date.now() - 90 * 24 * 60 * 60 * 1000, + status: 'monitoring', + message: 'Maintenance started. Database in read-only mode.', + author: 'Database Team' + }, + { + id: 'update-6', + timestamp: Date.now() - 90 * 24 * 60 * 60 * 1000 + 30 * 60 * 1000, + status: 'resolved', + message: 'Maintenance completed. All systems operational.', + author: 'Database Team' + } + ] + } + ]; + + incidents.currentIncidents = currentIncidents; + incidents.pastIncidents = pastIncidents; + + // Configure Footer + footer.companyName = 'TechVault Services'; + footer.legalUrl = 'https://techvault.example.com/legal'; + footer.supportEmail = 'support@techvault.example.com'; + footer.statusPageUrl = 'https://status.techvault.example.com'; + footer.lastUpdated = Date.now(); + footer.currentYear = new Date().getFullYear(); + footer.socialLinks = [ + { platform: 'twitter', url: 'https://twitter.com/techvault' }, + { platform: 'github', url: 'https://github.com/techvault' }, + { platform: 'linkedin', url: 'https://linkedin.com/company/techvault' }, + { platform: 'youtube', url: 'https://youtube.com/techvault' } + ]; + footer.rssFeedUrl = 'https://status.techvault.example.com/rss'; + footer.apiStatusUrl = 'https://api.techvault.example.com/v1/status'; + footer.enableSubscribe = true; + footer.subscriberCount = 5421; + footer.additionalLinks = [ + { label: 'API Documentation', url: 'https://docs.techvault.example.com' }, + { label: 'System Architecture', url: 'https://techvault.example.com/architecture' }, + { label: 'Security', url: 'https://techvault.example.com/security' } + ]; + }} + > + + + + + + + + +
+`; \ No newline at end of file diff --git a/ts_web/pages/statuspage-demo.ts b/ts_web/pages/statuspage-demo.ts new file mode 100644 index 0000000..8cb5245 --- /dev/null +++ b/ts_web/pages/statuspage-demo.ts @@ -0,0 +1,650 @@ +import { html, cssManager } from "@design.estate/dees-element"; +import type { IServiceStatus, IOverallStatus, IIncidentDetails, IStatusHistoryPoint, IMonthlyUptime } from '../interfaces/index.js'; + +export const statuspageDemo = () => html` + + +
+
+

CloudFlow Infrastructure Status Page

+

This demo shows a comprehensive status page for a cloud infrastructure provider with real-time monitoring.

+
+ + { + const header = wrapperElement.querySelector('upl-statuspage-header') as any; + const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') 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 Infrastructure Status'; + header.showReportButton = true; + header.showSubscribeButton = true; + header.logoUrl = 'https://via.placeholder.com/150x50/2196F3/ffffff?text=CloudFlow'; + header.customStyles = true; + header.brandColor = '#2196F3'; + + // 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 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 + }} + > + + + + + + + + +
+`; diff --git a/ts_web/pages/statuspage-maintenance.ts b/ts_web/pages/statuspage-maintenance.ts new file mode 100644 index 0000000..af33801 --- /dev/null +++ b/ts_web/pages/statuspage-maintenance.ts @@ -0,0 +1,575 @@ +import { html, cssManager } from "@design.estate/dees-element"; +import type { IServiceStatus, IOverallStatus, IIncidentDetails, IStatusHistoryPoint, IMonthlyUptime } from '../interfaces/index.js'; + +export const statuspageMaintenance = () => html` + + +
+
+

Scheduled Maintenance

+

This demo shows a status page during a scheduled maintenance window with some services offline.

+
+ + { + const header = wrapperElement.querySelector('upl-statuspage-header') as any; + const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') 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 Infrastructure Status'; + header.showReportButton = true; + header.showSubscribeButton = true; + header.logoUrl = 'https://via.placeholder.com/150x50/2196F3/ffffff?text=SecureVault'; + header.customStyles = true; + header.brandColor = '#2196F3'; + + // 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 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'; + }} + > + + + + + + + + +
+`; \ No newline at end of file diff --git a/ts_web/pages/statuspage-outage.ts b/ts_web/pages/statuspage-outage.ts new file mode 100644 index 0000000..379a958 --- /dev/null +++ b/ts_web/pages/statuspage-outage.ts @@ -0,0 +1,573 @@ +import { html, cssManager } from "@design.estate/dees-element"; +import type { IServiceStatus, IOverallStatus, IIncidentDetails, IStatusHistoryPoint, IMonthlyUptime } from '../interfaces/index.js'; + +export const statuspageOutage = () => html` + + +
+
+

Major Outage Scenario

+

This demo shows a critical situation with multiple services experiencing major outages.

+
+ + { + const header = wrapperElement.querySelector('upl-statuspage-header') as any; + const statusBar = wrapperElement.querySelector('upl-statuspage-statusbar') 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 Platform Status'; + header.showReportButton = true; + header.showSubscribeButton = true; + header.logoUrl = 'https://via.placeholder.com/150x50/F44336/ffffff?text=DataStream'; + header.customStyles = true; + header.brandColor = '#F44336'; + + // 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 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' } + ]; + }} + > + + + + + + + + +
+`; \ No newline at end of file