90 lines
5.5 KiB
JavaScript
90 lines
5.5 KiB
JavaScript
|
import { html, css, cssManager } from '@design.estate/dees-element';
|
||
|
|
import './upladmin-incident-update.js';
|
||
|
|
export const demoFunc = () => html `
|
||
|
|
<style>
|
||
|
|
${css `
|
||
|
|
.demo-container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 32px;
|
||
|
|
padding: 24px;
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto;
|
||
|
|
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-section {
|
||
|
|
margin-bottom: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-section h3 {
|
||
|
|
margin: 0 0 16px 0;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="demo-container">
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Update Active Incident (Critical)</h3>
|
||
|
|
<upladmin-incident-update
|
||
|
|
.incident=${{
|
||
|
|
id: 'inc-1',
|
||
|
|
title: 'Database Connection Pool Exhaustion',
|
||
|
|
status: 'investigating',
|
||
|
|
severity: 'critical',
|
||
|
|
affectedServices: ['db', 'api', 'web'],
|
||
|
|
startTime: Date.now() - 30 * 60 * 1000,
|
||
|
|
impact: 'All database-dependent services are experiencing failures.',
|
||
|
|
updates: [
|
||
|
|
{ id: 'u1', timestamp: Date.now() - 30 * 60 * 1000, status: 'investigating', message: 'We are investigating reports of service failures.' },
|
||
|
|
],
|
||
|
|
}}
|
||
|
|
></upladmin-incident-update>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Update Active Incident (Minor)</h3>
|
||
|
|
<upladmin-incident-update
|
||
|
|
.incident=${{
|
||
|
|
id: 'inc-2',
|
||
|
|
title: 'Elevated API Response Times',
|
||
|
|
status: 'identified',
|
||
|
|
severity: 'minor',
|
||
|
|
affectedServices: ['api'],
|
||
|
|
startTime: Date.now() - 2 * 60 * 60 * 1000,
|
||
|
|
impact: 'API responses may be slower than usual.',
|
||
|
|
updates: [
|
||
|
|
{ id: 'u2', timestamp: Date.now() - 1 * 60 * 60 * 1000, status: 'identified', message: 'Issue identified as increased traffic from a specific client.' },
|
||
|
|
{ id: 'u3', timestamp: Date.now() - 2 * 60 * 60 * 1000, status: 'investigating', message: 'We are investigating elevated response times.' },
|
||
|
|
],
|
||
|
|
}}
|
||
|
|
></upladmin-incident-update>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Update Maintenance Window</h3>
|
||
|
|
<upladmin-incident-update
|
||
|
|
.incident=${{
|
||
|
|
id: 'inc-3',
|
||
|
|
title: 'Scheduled Infrastructure Upgrade',
|
||
|
|
status: 'monitoring',
|
||
|
|
severity: 'maintenance',
|
||
|
|
affectedServices: ['api', 'web', 'cdn'],
|
||
|
|
startTime: Date.now() - 45 * 60 * 1000,
|
||
|
|
impact: 'Brief interruptions may occur during the upgrade.',
|
||
|
|
updates: [
|
||
|
|
{ id: 'u4', timestamp: Date.now() - 30 * 60 * 1000, status: 'monitoring', message: 'Upgrade complete. Monitoring for any issues.' },
|
||
|
|
{ id: 'u5', timestamp: Date.now() - 45 * 60 * 1000, status: 'investigating', message: 'Starting scheduled infrastructure upgrade.' },
|
||
|
|
],
|
||
|
|
}}
|
||
|
|
></upladmin-incident-update>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXBsYWRtaW4taW5jaWRlbnQtdXBkYXRlLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvdXBsYWRtaW4taW5jaWRlbnQtdXBkYXRlL3VwbGFkbWluLWluY2lkZW50LXVwZGF0ZS5kZW1vLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRXBFLE9BQU8sK0JBQStCLENBQUM7QUFFdkMsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7TUFFNUIsR0FBRyxDQUFBOzs7Ozs7OztzQkFRYSxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7Ozs7Ozs7OztpQkFZN0MsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDOzs7O0tBSXBEOzs7Ozs7O29CQU9lO0lBQ1YsRUFBRSxFQUFFLE9BQU87SUFDWCxLQUFLLEVBQUUscUNBQXFDO0lBQzVDLE1BQU0sRUFBRSxlQUFlO0lBQ3ZCLFFBQVEsRUFBRSxVQUFVO0lBQ3BCLGdCQUFnQixFQUFFLENBQUMsSUFBSSxFQUFFLEtBQUssRUFBRSxLQUFLLENBQUM7SUFDdEMsU0FBUyxFQUFFLElBQUksQ0FBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLElBQUk7SUFDdEMsTUFBTSxFQUFFLDREQUE0RDtJQUNwRSxPQUFPLEVBQUU7UUFDUCxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLElBQUksQ0FBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLElBQUksRUFBRSxNQUFNLEVBQUUsZUFBZSxFQUFFLE9BQU8sRUFBRSxtREFBbUQsRUFBRTtLQUM1STtDQUNrQjs7Ozs7OztvQkFPVDtJQUNWLEVBQUUsRUFBRSxPQUFPO0lBQ1gsS0FBSyxFQUFFLDZCQUE2QjtJQUNwQyxNQUFNLEVBQUUsWUFBWTtJQUNwQixRQUFRLEVBQUUsT0FBTztJQUNqQixnQkFBZ0IsRUFBRSxDQUFDLEtBQUssQ0FBQztJQUN6QixTQUFTLEVBQUUsSUFBSSxDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUMsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLElBQUk7SUFDMUMsTUFBTSxFQUFFLHlDQUF5QztJQUNqRCxPQUFPLEVBQUU7UUFDUCxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLElBQUksQ0FBQyxHQUFHLEVBQUUsR0FBRyxDQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxJQUFJLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxPQUFPLEVBQUUsK0RBQStELEVBQUU7UUFDeEosRUFBRSxFQUFFLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRSxJQUFJLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsSUFBSSxFQUFFLE1BQU0sRUFBRSxlQUFlLEVBQUUsT0FBTyxFQUFFLCtDQUErQyxFQUFFO0tBQzVJO0NBQ2tCOzs7Ozs7O29CQU9UO0lBQ1YsRUFBRSxFQUFFLE9BQU87SUFDWCxLQUFLLEVBQUUsa0NBQWtDO0lBQ3pDLE1BQU0sRUFBRSxZQUFZO0lBQ3BCLFFBQVEsRUFBRSxhQUFhO0lBQ3ZCLGdCQUFnQixFQUFFLENBQUMsS0FBSyxFQUFFLEtBQUssRUFBRSxLQUFLLENBQUM7SUFDdkMsU0FBUyxFQUFFLElBQUksQ0FBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLElBQUk7SUFDdEMsTUFBTSxFQUFFLG1EQUFtRDtJQUMzRCxPQUFPLEVBQUU7UUFDUCxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLElBQUksQ0FBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLElBQUksRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE9BQU8sRUFBRSw4Q0FBOEMsRUFBRTtRQUNuSSxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLElBQUksQ0FBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLElBQUksRUFBRSxNQUFNLEVBQUUsZUFBZSxFQUFFLE9BQU8sRUFBRSw0Q0FBNEMsRUFBRTtLQUNySTtDQUNrQjs7OztDQUk1QixDQUFDIn0=
|