167 lines
8.4 KiB
TypeScript
167 lines
8.4 KiB
TypeScript
import { html, cssManager } from "@design.estate/dees-element";
|
|
import type { IServiceStatus, IIncidentDetails } from '../interfaces/index.js';
|
|
import '../elements/index.js';
|
|
|
|
export const adminpageIncidents = () => html`
|
|
<style>
|
|
.demo-page-wrapper {
|
|
min-height: 100vh;
|
|
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
|
padding: 24px;
|
|
}
|
|
</style>
|
|
|
|
<div class="demo-page-wrapper">
|
|
<dees-demowrapper
|
|
.runAfterRender=${async (wrapperElement: any) => {
|
|
const incidentList = wrapperElement.querySelector('upladmin-incident-list') as any;
|
|
|
|
const incidents: IIncidentDetails[] = [
|
|
{
|
|
id: 'inc-001',
|
|
title: 'CDN Performance Degradation',
|
|
status: 'monitoring',
|
|
severity: 'minor',
|
|
affectedServices: ['cdn'],
|
|
startTime: Date.now() - 2 * 60 * 60 * 1000,
|
|
impact: 'Some users may experience slower loading times for images and static assets.',
|
|
updates: [
|
|
{ id: 'upd-001', timestamp: Date.now() - 2 * 60 * 60 * 1000, status: 'investigating', message: 'We are investigating reports of slow asset loading.', author: 'Platform Team' },
|
|
{ id: 'upd-002', timestamp: Date.now() - 1 * 60 * 60 * 1000, status: 'identified', message: 'We have identified the issue as a problem with one of our CDN edge nodes.', author: 'Platform Team' },
|
|
{ id: 'upd-003', timestamp: Date.now() - 30 * 60 * 1000, status: 'monitoring', message: 'Traffic has been rerouted to healthy nodes. Monitoring for stability.', author: 'Platform Team' },
|
|
],
|
|
},
|
|
{
|
|
id: 'inc-002',
|
|
title: 'Payment Gateway Scheduled Maintenance',
|
|
status: 'investigating',
|
|
severity: 'maintenance',
|
|
affectedServices: ['payment-gateway'],
|
|
startTime: Date.now() - 30 * 60 * 1000,
|
|
impact: 'Payment processing is temporarily unavailable during the maintenance window.',
|
|
updates: [
|
|
{ id: 'upd-004', timestamp: Date.now() - 30 * 60 * 1000, status: 'investigating', message: 'Scheduled maintenance has begun. Expected duration: 2 hours.', author: 'DevOps Team' },
|
|
],
|
|
},
|
|
{
|
|
id: 'inc-003',
|
|
title: 'Search Engine Partial Outage',
|
|
status: 'identified',
|
|
severity: 'major',
|
|
affectedServices: ['search-engine', 'api-server'],
|
|
startTime: Date.now() - 45 * 60 * 1000,
|
|
impact: 'Search functionality is degraded. Some queries may timeout or return incomplete results.',
|
|
updates: [
|
|
{ id: 'upd-005', timestamp: Date.now() - 45 * 60 * 1000, status: 'investigating', message: 'We are aware of issues with search functionality.', author: 'Engineering Team' },
|
|
{ id: 'upd-006', timestamp: Date.now() - 20 * 60 * 1000, status: 'identified', message: 'Root cause identified: disk space exhaustion on search cluster nodes.', author: 'Engineering Team' },
|
|
],
|
|
},
|
|
{
|
|
id: 'inc-004',
|
|
title: 'API Server Outage',
|
|
status: 'resolved',
|
|
severity: 'critical',
|
|
affectedServices: ['api-server', 'web-app'],
|
|
startTime: Date.now() - 24 * 60 * 60 * 1000,
|
|
endTime: Date.now() - 23 * 60 * 60 * 1000,
|
|
impact: 'Complete service unavailability for all API-dependent services.',
|
|
rootCause: 'Database connection pool exhaustion due to a query performance regression.',
|
|
resolution: 'Rolled back recent deployment and optimized database queries.',
|
|
updates: [
|
|
{ id: 'upd-007', timestamp: Date.now() - 24 * 60 * 60 * 1000, status: 'investigating', message: 'We are aware of service unavailability and actively investigating.', author: 'Platform Team' },
|
|
{ id: 'upd-008', timestamp: Date.now() - 23.5 * 60 * 60 * 1000, status: 'identified', message: 'Root cause identified as database connection pool exhaustion.', author: 'Platform Team' },
|
|
{ id: 'upd-009', timestamp: Date.now() - 23 * 60 * 60 * 1000, status: 'resolved', message: 'Service has been restored. All systems operational.', author: 'Platform Team' },
|
|
],
|
|
},
|
|
{
|
|
id: 'inc-005',
|
|
title: 'Email Delivery Delays',
|
|
status: 'resolved',
|
|
severity: 'minor',
|
|
affectedServices: ['email-service'],
|
|
startTime: Date.now() - 48 * 60 * 60 * 1000,
|
|
endTime: Date.now() - 46 * 60 * 60 * 1000,
|
|
impact: 'Email notifications may be delayed by up to 30 minutes.',
|
|
rootCause: 'Third-party email provider experiencing capacity issues.',
|
|
resolution: 'Provider resolved their capacity issues.',
|
|
updates: [
|
|
{ id: 'upd-010', timestamp: Date.now() - 48 * 60 * 60 * 1000, status: 'investigating', message: 'Investigating reports of delayed email delivery.', author: 'Support Team' },
|
|
{ id: 'upd-011', timestamp: Date.now() - 46 * 60 * 60 * 1000, status: 'resolved', message: 'Email delivery has returned to normal.', author: 'Support Team' },
|
|
],
|
|
},
|
|
];
|
|
|
|
incidentList.incidents = incidents;
|
|
}}
|
|
>
|
|
<upladmin-incident-list></upladmin-incident-list>
|
|
</dees-demowrapper>
|
|
</div>
|
|
`;
|
|
|
|
export const adminpageIncidentForm = () => html`
|
|
<style>
|
|
.demo-page-wrapper {
|
|
min-height: 100vh;
|
|
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
|
padding: 24px;
|
|
}
|
|
</style>
|
|
|
|
<div class="demo-page-wrapper">
|
|
<dees-demowrapper
|
|
.runAfterRender=${async (wrapperElement: any) => {
|
|
const incidentForm = wrapperElement.querySelector('upladmin-incident-form') as any;
|
|
|
|
const services: IServiceStatus[] = [
|
|
{ id: 'api-server', name: 'api-server', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45 },
|
|
{ id: 'web-app', name: 'web-app', displayName: 'Web Application', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.97, responseTime: 120 },
|
|
{ id: 'database-primary', name: 'database-primary', displayName: 'Primary Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.999, uptime90d: 99.998, responseTime: 5 },
|
|
{ id: 'cdn', name: 'cdn', displayName: 'Content Delivery Network', currentStatus: 'degraded', lastChecked: Date.now(), uptime30d: 99.5, uptime90d: 99.8, responseTime: 200 },
|
|
{ id: 'email-service', name: 'email-service', displayName: 'Email Service', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.9, uptime90d: 99.85, responseTime: 500 },
|
|
{ id: 'payment-gateway', name: 'payment-gateway', displayName: 'Payment Gateway', currentStatus: 'maintenance', lastChecked: Date.now(), uptime30d: 99.95, uptime90d: 99.9, responseTime: 350 },
|
|
];
|
|
|
|
incidentForm.availableServices = services;
|
|
}}
|
|
>
|
|
<upladmin-incident-form></upladmin-incident-form>
|
|
</dees-demowrapper>
|
|
</div>
|
|
`;
|
|
|
|
export const adminpageIncidentUpdate = () => html`
|
|
<style>
|
|
.demo-page-wrapper {
|
|
min-height: 100vh;
|
|
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
|
padding: 24px;
|
|
}
|
|
</style>
|
|
|
|
<div class="demo-page-wrapper">
|
|
<dees-demowrapper
|
|
.runAfterRender=${async (wrapperElement: any) => {
|
|
const incidentUpdate = wrapperElement.querySelector('upladmin-incident-update') as any;
|
|
|
|
incidentUpdate.incident = {
|
|
id: 'inc-001',
|
|
title: 'CDN Performance Degradation',
|
|
status: 'monitoring',
|
|
severity: 'minor',
|
|
affectedServices: ['cdn'],
|
|
startTime: Date.now() - 2 * 60 * 60 * 1000,
|
|
impact: 'Some users may experience slower loading times for images and static assets.',
|
|
updates: [
|
|
{ id: 'upd-001', timestamp: Date.now() - 2 * 60 * 60 * 1000, status: 'investigating', message: 'We are investigating reports of slow asset loading.', author: 'Platform Team' },
|
|
{ id: 'upd-002', timestamp: Date.now() - 1 * 60 * 60 * 1000, status: 'identified', message: 'We have identified the issue as a problem with one of our CDN edge nodes.', author: 'Platform Team' },
|
|
{ id: 'upd-003', timestamp: Date.now() - 30 * 60 * 1000, status: 'monitoring', message: 'Traffic has been rerouted to healthy nodes. Monitoring for stability.', author: 'Platform Team' },
|
|
],
|
|
};
|
|
}}
|
|
>
|
|
<upladmin-incident-update></upladmin-incident-update>
|
|
</dees-demowrapper>
|
|
</div>
|
|
`;
|