update
This commit is contained in:
575
ts_web/pages/statuspage-maintenance.ts
Normal file
575
ts_web/pages/statuspage-maintenance.ts
Normal file
@@ -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`
|
||||
<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, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.demo-info h3 {
|
||||
margin: 0 0 10px 0;
|
||||
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>Scheduled Maintenance</h3>
|
||||
<p>This demo shows a status page during a scheduled maintenance window with some services offline.</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 = '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';
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
`;
|
||||
Reference in New Issue
Block a user