157 lines
4.9 KiB
TypeScript
157 lines
4.9 KiB
TypeScript
import { html, cssManager } from "@design.estate/dees-element";
|
|
import type { IServiceStatus, IIncidentDetails } from '../interfaces/index.js';
|
|
import '../elements/index.js';
|
|
|
|
export const adminpageDashboard = () => 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 dashboard = wrapperElement.querySelector('upladmin-dashboard') as any;
|
|
|
|
// Demo monitors
|
|
const monitors: IServiceStatus[] = [
|
|
{
|
|
id: 'api-server',
|
|
name: 'api-server',
|
|
displayName: 'API Server',
|
|
description: 'Main REST API endpoint',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.98,
|
|
uptime90d: 99.95,
|
|
responseTime: 45,
|
|
category: 'Core Services',
|
|
},
|
|
{
|
|
id: 'web-app',
|
|
name: 'web-app',
|
|
displayName: 'Web Application',
|
|
description: 'Customer-facing web application',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.99,
|
|
uptime90d: 99.97,
|
|
responseTime: 120,
|
|
category: 'Core Services',
|
|
},
|
|
{
|
|
id: 'database-primary',
|
|
name: 'database-primary',
|
|
displayName: 'Primary Database',
|
|
description: 'PostgreSQL primary node',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.999,
|
|
uptime90d: 99.998,
|
|
responseTime: 5,
|
|
category: 'Infrastructure',
|
|
},
|
|
{
|
|
id: 'cdn',
|
|
name: 'cdn',
|
|
displayName: 'Content Delivery Network',
|
|
description: 'Global CDN for static assets',
|
|
currentStatus: 'degraded',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.5,
|
|
uptime90d: 99.8,
|
|
responseTime: 200,
|
|
category: 'Infrastructure',
|
|
},
|
|
{
|
|
id: 'email-service',
|
|
name: 'email-service',
|
|
displayName: 'Email Service',
|
|
description: 'Transactional email delivery',
|
|
currentStatus: 'operational',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.9,
|
|
uptime90d: 99.85,
|
|
responseTime: 500,
|
|
category: 'External Services',
|
|
},
|
|
{
|
|
id: 'payment-gateway',
|
|
name: 'payment-gateway',
|
|
displayName: 'Payment Gateway',
|
|
description: 'Payment processing integration',
|
|
currentStatus: 'maintenance',
|
|
lastChecked: Date.now(),
|
|
uptime30d: 99.95,
|
|
uptime90d: 99.9,
|
|
responseTime: 350,
|
|
category: 'External Services',
|
|
},
|
|
];
|
|
|
|
// Demo incidents
|
|
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',
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
dashboard.monitors = monitors;
|
|
dashboard.incidents = incidents;
|
|
}}
|
|
>
|
|
<upladmin-dashboard></upladmin-dashboard>
|
|
</dees-demowrapper>
|
|
</div>
|
|
`;
|