419 lines
14 KiB
TypeScript
419 lines
14 KiB
TypeScript
import { html, cssManager } from "@design.estate/dees-element";
|
|
import type { IServiceStatus, IOverallStatus, IIncidentDetails, IStatusHistoryPoint, IMonthlyUptime } from '../interfaces/index.js';
|
|
|
|
export const statuspageAllgreen = () => html`
|
|
<style>
|
|
.demo-page-wrapper {
|
|
min-height: 100vh;
|
|
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
|
}
|
|
|
|
.demo-info {
|
|
padding: 20px;
|
|
background: #4CAF50;
|
|
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>All Systems Operational</h3>
|
|
<p>This demo shows a status page where everything is running perfectly with no issues.</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 = 'TechVault';
|
|
header.showReportButton = true;
|
|
header.showSubscribeButton = true;
|
|
header.logoUrl = 'https://via.placeholder.com/150x50/4CAF50/ffffff?text=TV';
|
|
|
|
// 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' }
|
|
];
|
|
}}
|
|
>
|
|
<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>
|
|
`; |