58 lines
3.3 KiB
TypeScript
58 lines
3.3 KiB
TypeScript
|
import { html, css, cssManager } from '@design.estate/dees-element';
|
||
|
|
import type { IServiceStatus, IIncidentDetails } from '../../interfaces/index.js';
|
||
|
|
import './upladmin-dashboard.js';
|
||
|
|
|
||
|
|
export const demoFunc = () => html`
|
||
|
|
<style>
|
||
|
|
${css`
|
||
|
|
.demo-container {
|
||
|
|
padding: 24px;
|
||
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="demo-container">
|
||
|
|
<upladmin-dashboard
|
||
|
|
.monitors=${[
|
||
|
|
{ id: 'api', name: 'api', displayName: 'API Server', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.98, uptime90d: 99.95, responseTime: 45, category: 'Core' },
|
||
|
|
{ id: 'web', name: 'web', displayName: 'Web App', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.97, responseTime: 120, category: 'Core' },
|
||
|
|
{ id: 'db', name: 'db', displayName: 'Database', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.999, uptime90d: 99.998, responseTime: 5, category: 'Infrastructure' },
|
||
|
|
{ id: 'cdn', name: 'cdn', displayName: 'CDN', currentStatus: 'degraded', lastChecked: Date.now(), uptime30d: 99.5, uptime90d: 99.8, responseTime: 200, category: 'Infrastructure' },
|
||
|
|
{ id: 'cache', name: 'cache', displayName: 'Redis Cache', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.99, uptime90d: 99.98, responseTime: 2, category: 'Infrastructure' },
|
||
|
|
{ id: 'email', name: 'email', displayName: 'Email Service', currentStatus: 'operational', lastChecked: Date.now(), uptime30d: 99.9, uptime90d: 99.85, responseTime: 500, category: 'External' },
|
||
|
|
{ id: 'payment', name: 'payment', displayName: 'Payment Gateway', currentStatus: 'maintenance', lastChecked: Date.now(), uptime30d: 99.95, uptime90d: 99.9, responseTime: 350, category: 'External' },
|
||
|
|
{ id: 'search', name: 'search', displayName: 'Search Engine', currentStatus: 'partial_outage', lastChecked: Date.now(), uptime30d: 98.5, uptime90d: 99.2, responseTime: 150, category: 'Core' },
|
||
|
|
] as IServiceStatus[]}
|
||
|
|
.activeIncidents=${[
|
||
|
|
{
|
||
|
|
id: 'inc-1',
|
||
|
|
title: 'CDN Performance Degradation',
|
||
|
|
status: 'identified',
|
||
|
|
severity: 'minor',
|
||
|
|
affectedServices: ['cdn'],
|
||
|
|
startTime: Date.now() - 2 * 60 * 60 * 1000,
|
||
|
|
impact: 'Some users may experience slower page loads',
|
||
|
|
updates: [
|
||
|
|
{ id: 'u1', timestamp: Date.now() - 1 * 60 * 60 * 1000, status: 'identified', message: 'Root cause identified as network congestion' },
|
||
|
|
{ id: 'u2', timestamp: Date.now() - 2 * 60 * 60 * 1000, status: 'investigating', message: 'We are investigating reports of slow content delivery' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'inc-2',
|
||
|
|
title: 'Search Cluster Partial Failure',
|
||
|
|
status: 'investigating',
|
||
|
|
severity: 'major',
|
||
|
|
affectedServices: ['search'],
|
||
|
|
startTime: Date.now() - 30 * 60 * 1000,
|
||
|
|
impact: 'Search functionality may return incomplete results',
|
||
|
|
updates: [
|
||
|
|
{ id: 'u3', timestamp: Date.now() - 30 * 60 * 1000, status: 'investigating', message: 'We are investigating issues with the search cluster' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
] as IIncidentDetails[]}
|
||
|
|
></upladmin-dashboard>
|
||
|
|
</div>
|
||
|
|
`;
|