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
}}
>
`;