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

feat(statuspage-incidents): Add status icons/labels and revamp incident header layout; replace left border with internal severity bar and clean up formatting

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-24 10:12:29 +00:00
parent 8e3ec4e671
commit 2e942df522
3 changed files with 189 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@uptime.link/statuspage',
version: '1.3.1',
version: '1.4.0',
description: 'A catalog of web components for the UptimeLink dashboard.'
}

364
ts_web/elements/upl-statuspage-incidents.ts
View File

@@ -20,6 +20,8 @@ declare global {
}
}
type TIncidentStatus = 'investigating' | 'identified' | 'monitoring' | 'resolved' | 'postmortem';
@customElement('upl-statuspage-incidents')
export class UplStatuspageIncidents extends DeesElement {
// STATIC
@@ -68,6 +70,22 @@ export class UplStatuspageIncidents extends DeesElement {
})
private accessor subscribedIncidents: Set<string> = new Set();
private statusIcons: Record<TIncidentStatus, string> = {
investigating: 'lucide:Search',
identified: 'lucide:Target',
monitoring: 'lucide:Eye',
resolved: 'lucide:CheckCircle',
postmortem: 'lucide:FileText',
};
private statusLabels: Record<TIncidentStatus, string> = {
investigating: 'Investigating',
identified: 'Identified',
monitoring: 'Monitoring',
resolved: 'Resolved',
postmortem: 'Postmortem',
};
constructor() {
super();
}
@@ -171,112 +189,151 @@ export class UplStatuspageIncidents extends DeesElement {
}
}
/* New header layout matching admin catalog */
.incident-header {
padding: ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.xl)};
border-left: 4px solid;
display: flex;
align-items: start;
justify-content: space-between;
gap: ${unsafeCSS(sharedStyles.spacing.md)};
align-items: flex-start;
gap: 16px;
padding: 16px;
cursor: pointer;
transition: background-color ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
position: relative;
}
.incident-header:hover {
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.02)')};
}
.incident-header.critical {
border-left-color: ${sharedStyles.colors.status.major};
/* Internal severity bar (replacing border-left) */
.incident-severity {
width: 4px;
align-self: stretch;
border-radius: 2px;
flex-shrink: 0;
}
.incident-header.major {
border-left-color: ${sharedStyles.colors.status.partial};
.incident-severity.critical { background: ${sharedStyles.colors.status.major}; }
.incident-severity.major { background: ${sharedStyles.colors.status.partial}; }
.incident-severity.minor { background: ${sharedStyles.colors.status.degraded}; }
.incident-severity.maintenance { background: ${sharedStyles.colors.status.maintenance}; }
.incident-main {
flex: 1;
min-width: 0;
}
.incident-header.minor {
border-left-color: ${sharedStyles.colors.status.degraded};
}
.incident-header.maintenance {
border-left-color: ${sharedStyles.colors.status.maintenance};
}
.incident-title {
font-size: 17px;
font-weight: 600;
margin: 0;
line-height: 1.4;
letter-spacing: -0.01em;
}
.incident-meta {
.incident-title-row {
display: flex;
gap: ${unsafeCSS(sharedStyles.spacing.lg)};
margin-top: ${unsafeCSS(sharedStyles.spacing.sm)};
font-size: 13px;
color: ${sharedStyles.colors.text.secondary};
align-items: center;
gap: 8px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.incident-meta span {
display: flex;
align-items: center;
gap: 4px;
.incident-title {
font-size: 15px;
font-weight: 600;
margin: 0;
color: ${sharedStyles.colors.text.primary};
}
/* Status badge inline with title */
.incident-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
font-weight: 500;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.04em;
flex-shrink: 0;
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
}
.incident-status dees-icon {
--icon-size: 12px;
}
.incident-status.investigating {
background: ${cssManager.bdTheme('#fef3c7', '#78350f')};
color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
background: ${cssManager.bdTheme('rgba(249, 115, 22, 0.1)', 'rgba(249, 115, 22, 0.2)')};
color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
--icon-color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
}
.incident-status.identified {
background: ${cssManager.bdTheme('#e9d5ff', '#581c87')};
color: ${cssManager.bdTheme('#6b21a8', '#d8b4fe')};
background: ${cssManager.bdTheme('rgba(234, 179, 8, 0.1)', 'rgba(234, 179, 8, 0.2)')};
color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
--icon-color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
}
.incident-status.monitoring {
background: ${cssManager.bdTheme('#dbeafe', '#1e3a8a')};
color: ${cssManager.bdTheme('#1e40af', '#93c5fd')};
background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.2)')};
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
--icon-color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
}
.incident-status.resolved {
background: ${cssManager.bdTheme('#d1fae5', '#064e3b')};
color: ${cssManager.bdTheme('#047857', '#6ee7b7')};
background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.1)', 'rgba(34, 197, 94, 0.2)')};
color: ${cssManager.bdTheme('#16a34a', '#4ade80')};
--icon-color: ${cssManager.bdTheme('#16a34a', '#4ade80')};
}
.incident-status.postmortem {
background: ${cssManager.bdTheme('#e5e7eb', '#374151')};
color: ${cssManager.bdTheme('#4b5563', '#d1d5db')};
background: ${cssManager.bdTheme('rgba(168, 85, 247, 0.1)', 'rgba(168, 85, 247, 0.2)')};
color: ${cssManager.bdTheme('#9333ea', '#c084fc')};
--icon-color: ${cssManager.bdTheme('#9333ea', '#c084fc')};
}
/* Pulse for investigating status */
.incident-status.investigating .status-dot {
animation: status-pulse 1.5s ease-in-out infinite;
.incident-meta {
display: flex;
align-items: center;
gap: 16px;
font-size: 12px;
color: ${sharedStyles.colors.text.secondary};
flex-wrap: wrap;
}
@keyframes status-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.2); }
.incident-meta-item {
display: flex;
align-items: center;
gap: 6px;
}
.incident-meta-item dees-icon {
--icon-size: 12px;
--icon-color: ${sharedStyles.colors.text.muted};
}
.incident-expand {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
color: ${sharedStyles.colors.text.muted};
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
flex-shrink: 0;
}
.incident-expand:hover {
background: ${sharedStyles.colors.background.muted};
color: ${sharedStyles.colors.text.primary};
}
.incident-expand dees-icon {
--icon-size: 16px;
transition: transform ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
}
.incident-expand.expanded dees-icon {
transform: rotate(180deg);
}
.incident-body {
padding: 0 ${unsafeCSS(sharedStyles.spacing.xl)} ${unsafeCSS(sharedStyles.spacing.xl)} ${unsafeCSS(sharedStyles.spacing.xl)};
padding: 0 16px 16px 36px;
animation: slideDown 0.3s ${unsafeCSS(sharedStyles.easings.default)};
}
@@ -362,8 +419,6 @@ export class UplStatuspageIncidents extends DeesElement {
padding-bottom: 0;
}
/* Vertical connector line from each dot to the next */
/* Dot: left -22px, width 12px + border 2px*2 = 16px total, center at -14px */
.update-item:not(:last-child)::after {
content: '';
position: absolute;
@@ -374,7 +429,6 @@ export class UplStatuspageIncidents extends DeesElement {
background: ${sharedStyles.colors.border.default};
}
/* Timeline dot */
.update-item::before {
content: '';
position: absolute;
@@ -528,39 +582,23 @@ export class UplStatuspageIncidents extends DeesElement {
background: ${cssManager.bdTheme('#dcfce7', '#065f46')};
}
.collapsed-hint {
font-size: 12px;
color: ${sharedStyles.colors.text.secondary};
text-align: center;
margin-top: ${unsafeCSS(sharedStyles.spacing.md)};
opacity: 0.8;
}
/* Expand icon animation */
.expand-icon {
transition: transform ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
}
.expand-icon.rotated {
transform: rotate(180deg);
}
@media (max-width: 640px) {
.container {
padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
}
.incident-header {
padding: ${unsafeCSS(sharedStyles.spacing.md)};
padding: 12px;
}
.incident-body {
padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
padding: 0 12px 12px 24px;
}
.incident-meta {
flex-direction: column;
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
align-items: flex-start;
gap: 8px;
}
.timeline {
@@ -573,7 +611,6 @@ export class UplStatuspageIncidents extends DeesElement {
height: 10px;
}
/* Mobile dot: left -18px, width 10px + border 2px*2 = 14px, center at -11px */
.update-item:not(:last-child)::after {
left: -12px;
top: 16px;
@@ -593,16 +630,16 @@ export class UplStatuspageIncidents extends DeesElement {
` :
html`<div class="noIncidentBox">No incidents ongoing.</div>`
}
<uplinternal-miniheading>Past Incidents</uplinternal-miniheading>
${this.loading ? html`
<div class="loading-skeleton"></div>
<div class="loading-skeleton"></div>
` : this.pastIncidents.length ?
` : this.pastIncidents.length ?
this.pastIncidents.slice(0, 5).map(incident => this.renderIncident(incident, false)) :
html`<div class="noIncidentBox">No past incidents in the last ${this.daysToShow} days.</div>`
}
${this.pastIncidents.length > 5 && !this.loading ? html`
<div class="show-more">
<button class="show-more-button" @click=${this.handleShowMore}>
@@ -621,74 +658,54 @@ export class UplStatuspageIncidents extends DeesElement {
this.formatDuration(Date.now() - incident.startTime);
const isActive = isCurrent && latestUpdate?.status !== 'resolved';
const isExpanded = this.expandedIncidents.has(incident.id);
return html`
<div class="incident-card ${this.expandedIncidents.has(incident.id) ? 'expanded' : ''} ${isActive ? 'active-incident' : ''}">
<div class="incident-header ${incident.severity}" @click=${() => this.toggleIncident(incident.id)}>
<div>
<h3 class="incident-title">${incident.title}</h3>
<div class="incident-card ${isExpanded ? 'expanded' : ''} ${isActive ? 'active-incident' : ''}">
<div class="incident-header" @click=${() => this.toggleIncident(incident.id)}>
<div class="incident-severity ${incident.severity}"></div>
<div class="incident-main">
<div class="incident-title-row">
<h3 class="incident-title">${incident.title}</h3>
<span class="incident-status ${latestUpdate.status}">
<dees-icon .icon=${this.statusIcons[latestUpdate.status as TIncidentStatus]} .iconSize=${12}></dees-icon>
${this.statusLabels[latestUpdate.status as TIncidentStatus] || latestUpdate.status}
</span>
</div>
<div class="incident-meta">
<span>Started: ${this.formatDate(incident.startTime)}</span>
<span>Duration: ${duration}</span>
${incident.endTime ? html`
<span>Ended: ${this.formatDate(incident.endTime)}</span>
` : ''}
</div>
${!this.expandedIncidents.has(incident.id) ? html`
<div style="
margin-top: ${unsafeCSS(sharedStyles.spacing.sm)};
font-size: 13px;
color: ${sharedStyles.colors.text.secondary};
display: flex;
align-items: center;
gap: ${unsafeCSS(sharedStyles.spacing.md)};
">
${incident.impact ? html`
<span style="
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 500px;
">${incident.impact}</span>
` : ''}
<span style="
font-size: 12px;
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
">
${incident.updates.length} update${incident.updates.length !== 1 ? 's' : ''}
</span>
</div>
` : ''}
</div>
<div style="display: flex; align-items: center; gap: ${unsafeCSS(sharedStyles.spacing.md)};">
<div class="incident-status ${latestUpdate.status}">
${this.getStatusIcon(latestUpdate.status)}
${latestUpdate.status.replace(/_/g, ' ')}
</div>
<div class="expand-icon" style="
font-size: 10px;
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
transition: transform 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 4px;
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
${this.expandedIncidents.has(incident.id) ? 'transform: rotate(180deg);' : ''}
">
▼
<span class="incident-meta-item">
<dees-icon .icon=${'lucide:Calendar'} .iconSize=${12}></dees-icon>
${this.formatDate(incident.startTime)}
</span>
<span class="incident-meta-item">
<dees-icon .icon=${'lucide:Clock'} .iconSize=${12}></dees-icon>
${duration}
</span>
<span class="incident-meta-item">
<dees-icon .icon=${'lucide:Server'} .iconSize=${12}></dees-icon>
${incident.affectedServices.length} service${incident.affectedServices.length !== 1 ? 's' : ''}
</span>
<span class="incident-meta-item">
<dees-icon .icon=${'lucide:MessageSquare'} .iconSize=${12}></dees-icon>
${incident.updates.length} update${incident.updates.length !== 1 ? 's' : ''}
</span>
</div>
</div>
<button class="incident-expand ${isExpanded ? 'expanded' : ''}">
<dees-icon .icon=${'lucide:ChevronDown'} .iconSize=${16}></dees-icon>
</button>
</div>
${this.expandedIncidents.has(incident.id) ? html`
${isExpanded ? html`
<div class="incident-body">
<div class="incident-impact">
<strong>Impact:</strong> ${incident.impact}
</div>
${incident.impact ? html`
<div class="incident-impact">
<strong>Impact:</strong> ${incident.impact}
</div>
` : ''}
${incident.affectedServices.length > 0 ? html`
<div class="affected-services">
<div class="affected-services-title">Affected Services:</div>
@@ -697,7 +714,7 @@ export class UplStatuspageIncidents extends DeesElement {
`)}
</div>
` : ''}
${incident.updates.length > 0 ? html`
<div class="incident-updates">
<h4 class="updates-title">Updates</h4>
@@ -706,21 +723,21 @@ export class UplStatuspageIncidents extends DeesElement {
</div>
</div>
` : ''}
${incident.rootCause && isCurrent === false ? html`
<div class="incident-impact" style="margin-top: 12px;">
<strong>Root Cause:</strong> ${incident.rootCause}
</div>
` : ''}
${incident.resolution && isCurrent === false ? html`
<div class="incident-impact" style="margin-top: 12px;">
<strong>Resolution:</strong> ${incident.resolution}
</div>
` : ''}
<div class="incident-actions">
<button
<button
class="subscribe-button ${this.isSubscribedToIncident(incident.id) ? 'subscribed' : ''}"
@click=${(e: Event) => {
e.stopPropagation();
@@ -728,15 +745,10 @@ export class UplStatuspageIncidents extends DeesElement {
}}
>
${this.isSubscribedToIncident(incident.id) ? html`
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6667 3.5L5.25 9.91667L2.33334 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<dees-icon .icon=${'lucide:Check'} .iconSize=${14}></dees-icon>
Subscribed to updates
` : html`
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 5.25V8.75C10.5 9.34674 10.2629 9.91903 9.84099 10.341C9.41903 10.7629 8.84674 11 8.25 11L3.75 11C3.15326 11 2.58097 10.7629 2.15901 10.341C1.73705 9.91903 1.5 9.34674 1.5 8.75V4.25C1.5 3.65326 1.73705 3.08097 2.15901 2.65901C2.58097 2.23705 3.15326 2 3.75 2H7.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 1.5H12.5M12.5 1.5V5M12.5 1.5L6 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<dees-icon .icon=${'lucide:Bell'} .iconSize=${14}></dees-icon>
Subscribe to updates
`}
</button>
@@ -763,10 +775,7 @@ export class UplStatuspageIncidents extends DeesElement {
<div class="update-message">${update.message}</div>
${update.author ? html`
<div class="update-author">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<dees-icon .icon=${'lucide:User'} .iconSize=${12}></dees-icon>
${update.author}
</div>
` : ''}
@@ -774,45 +783,32 @@ export class UplStatuspageIncidents extends DeesElement {
`;
}
private getStatusIcon(status: string): TemplateResult {
return html`<span class="status-dot" style="
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: ${status === 'resolved' ? sharedStyles.colors.status.operational :
status === 'monitoring' ? sharedStyles.colors.status.maintenance :
status === 'identified' ? sharedStyles.colors.status.degraded :
sharedStyles.colors.status.partial};
"></span>`;
}
private formatDate(timestamp: number): string {
const date = new Date(timestamp);
const now = Date.now();
const diff = now - timestamp;
// Less than 1 hour ago
if (diff < 60 * 60 * 1000) {
const minutes = Math.floor(diff / (60 * 1000));
return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
}
// Less than 24 hours ago
if (diff < 24 * 60 * 60 * 1000) {
const hours = Math.floor(diff / (60 * 60 * 1000));
return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
}
// Less than 7 days ago
if (diff < 7 * 24 * 60 * 60 * 1000) {
const days = Math.floor(diff / (24 * 60 * 60 * 1000));
return `${days} day${days !== 1 ? 's' : ''} ago`;
}
// Default to full date
return date.toLocaleDateString('en-US', {
month: 'short',
return date.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined
});
@@ -822,7 +818,7 @@ export class UplStatuspageIncidents extends DeesElement {
const minutes = Math.floor(milliseconds / (60 * 1000));
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
if (days > 0) {
return `${days}d ${hours % 24}h`;
} else if (hours > 0) {
@@ -864,9 +860,9 @@ export class UplStatuspageIncidents extends DeesElement {
if (newSubscribed.has(incident.id)) {
newSubscribed.delete(incident.id);
this.dispatchEvent(new CustomEvent('incidentUnsubscribe', {
detail: {
detail: {
incident,
incidentId: incident.id
incidentId: incident.id
},
bubbles: true,
composed: true
@@ -874,7 +870,7 @@ export class UplStatuspageIncidents extends DeesElement {
} else {
newSubscribed.add(incident.id);
this.dispatchEvent(new CustomEvent('incidentSubscribe', {
detail: {
detail: {
incident,
incidentId: incident.id,
incidentTitle: incident.title,