651 lines
23 KiB
TypeScript
651 lines
23 KiB
TypeScript
|
import { html, cssManager } from "@design.estate/dees-element";
|
||
|
|
import type { IServiceStatus, IOverallStatus, IIncidentDetails, IStatusHistoryPoint, IMonthlyUptime } from '../interfaces/index.js';
|
||
|
|
|
||
|
|
export const statuspageDemo = () => html`
|
||
|
|
<style>
|
||
|
|
.demo-page-wrapper {
|
||
|
|
min-height: 100vh;
|
||
|
|
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-info {
|
||
|
|
padding: 20px;
|
||
|
|
background: #2196F3;
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
font-family: 'Geist Sans', Inter, sans-serif;
|
||
|
|
}
|
||
|
|
.demo-info h3 {
|
||
|
|
margin: 0 0 10px 0;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.demo-info p {
|
||
|
|
margin: 0;
|
||
|
|
opacity: 0.9;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="demo-page-wrapper">
|
||
|
|
<div class="demo-info">
|
||
|
|
<h3>CloudFlow Infrastructure Status Page</h3>
|
||
|
|
<p>This demo shows a comprehensive status page for a cloud infrastructure provider with real-time monitoring.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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 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
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<upl-statuspage-header></upl-statuspage-header>
|
||
|
|
<upl-statuspage-statusbar></upl-statuspage-statusbar>
|
||
|
|
<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>
|
||
|
|
`;
|