uptime.link/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jürgen Kunz
2025-06-30 07:54:17 +00:00
parent f9604263e3
commit 891eb04d11
5 changed files with 716 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
ts_web/elements/upl-statuspage-incidents.demo.ts
View File

@@ -521,6 +521,17 @@ export const demoFunc = () => html`
}
});
// Handle incident subscriptions
incidents.addEventListener('incidentSubscribe', (event: CustomEvent) => {
console.log('Subscribed to incident:', event.detail);
logUpdate(`[SUBSCRIBED] User subscribed to incident "${event.detail.incidentTitle}"`);
});
incidents.addEventListener('incidentUnsubscribe', (event: CustomEvent) => {
console.log('Unsubscribed from incident:', event.detail);
logUpdate(`[UNSUBSCRIBED] User unsubscribed from incident "${event.detail.incident.title}"`);
});
// Add update log
const logDiv = document.createElement('div');
logDiv.className = 'incident-log';
@@ -1027,5 +1038,179 @@ export const demoFunc = () => html`
<upl-statuspage-incidents></upl-statuspage-incidents>
</dees-demowrapper>
</div>
<!-- Incident Subscription Demo -->
<div class="demo-section">
<div class="demo-title">Incident Subscription Management</div>
<dees-demowrapper
.runAfterRender=${async (wrapperElement: any) => {
const incidents = wrapperElement.querySelector('upl-statuspage-incidents') as any;
// Sample incidents with subscription
const currentIncidents: IIncidentDetails[] = [
{
id: 'sub-001',
title: 'Payment Gateway Intermittent Failures',
status: 'monitoring',
severity: 'major',
affectedServices: ['payment-gateway', 'checkout'],
startTime: Date.now() - 2 * 60 * 60 * 1000,
impact: 'Some customers may experience payment failures during checkout',
updates: [
{
id: 'sub-u1',
timestamp: Date.now() - 2 * 60 * 60 * 1000,
status: 'investigating',
message: 'We are investigating reports of payment failures',
author: 'Payment Team'
},
{
id: 'sub-u2',
timestamp: Date.now() - 1 * 60 * 60 * 1000,
status: 'identified',
message: 'Issue identified with payment processor API rate limits',
author: 'Payment Team'
},
{
id: 'sub-u3',
timestamp: Date.now() - 30 * 60 * 1000,
status: 'monitoring',
message: 'Temporary fix applied, monitoring for stability',
author: 'Payment Team'
}
]
},
{
id: 'sub-002',
title: 'Email Delivery Delays',
status: 'identified',
severity: 'minor',
affectedServices: ['email-service'],
startTime: Date.now() - 45 * 60 * 1000,
impact: 'Transactional emails may be delayed by 5-10 minutes',
updates: [
{
id: 'sub-u4',
timestamp: Date.now() - 45 * 60 * 1000,
status: 'investigating',
message: 'Investigating email queue backlog',
author: 'Infrastructure Team'
},
{
id: 'sub-u5',
timestamp: Date.now() - 20 * 60 * 1000,
status: 'identified',
message: 'High volume causing queue delays, scaling up workers',
author: 'Infrastructure Team'
}
]
}
];
incidents.currentIncidents = currentIncidents;
incidents.pastIncidents = [];
// Pre-subscribe to first incident
incidents.subscribedIncidentIds = ['sub-001'];
// Create subscription status display
const statusDiv = document.createElement('div');
statusDiv.className = 'subscription-status';
statusDiv.style.cssText = `
margin-top: 16px;
padding: 16px;
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 6px;
font-size: 14px;
`;
const updateStatus = () => {
const subscribed = Array.from(incidents.subscribedIncidents || []);
statusDiv.innerHTML = `
<strong>Subscription Status:</strong><br>
${subscribed.length === 0 ?
'Not subscribed to any incidents' :
`Subscribed to ${subscribed.length} incident(s):<br>` +
subscribed.map(id => {
const incident = currentIncidents.find(i => i.id === id);
return incident ? `• ${incident.title}` : '';
}).filter(Boolean).join('<br>')}
`;
};
updateStatus();
wrapperElement.appendChild(statusDiv);
// Handle subscription events
incidents.addEventListener('incidentSubscribe', (event: CustomEvent) => {
console.log('Subscribed:', event.detail);
updateStatus();
// Show notification
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 16px;
background: #10b981;
color: white;
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 1000;
animation: slideIn 0.3s ease;
`;
notification.textContent = `✓ Subscribed to: ${event.detail.incidentTitle}`;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 3000);
});
incidents.addEventListener('incidentUnsubscribe', (event: CustomEvent) => {
console.log('Unsubscribed:', event.detail);
updateStatus();
// Show notification
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 16px;
background: #6b7280;
color: white;
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 1000;
animation: slideIn 0.3s ease;
`;
notification.textContent = `Unsubscribed from: ${event.detail.incident.title}`;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 3000);
});
// Add info text
const infoDiv = document.createElement('div');
infoDiv.style.cssText = `
margin-top: 12px;
padding: 12px;
background: #f3f4f6;
border-radius: 4px;
font-size: 13px;
color: #6b7280;
`;
infoDiv.innerHTML = `
<strong>How it works:</strong><br>
• Click on an incident to expand it<br>
• Click "Subscribe to updates" to get notifications<br>
• Subscribed incidents show a checkmark<br>
• Click again to unsubscribe
`;
wrapperElement.appendChild(infoDiv);
}}
>
<upl-statuspage-incidents></upl-statuspage-incidents>
</dees-demowrapper>
</div>
</div>
`;