714 lines
22 KiB
TypeScript
714 lines
22 KiB
TypeScript
import * as plugins from '../plugins.js';
|
|
import {
|
|
DeesElement,
|
|
property,
|
|
html,
|
|
customElement,
|
|
type TemplateResult,
|
|
css,
|
|
cssManager,
|
|
unsafeCSS,
|
|
} from '@design.estate/dees-element';
|
|
import type { IIncidentDetails } from '../interfaces/index.js';
|
|
import { fonts, colors, shadows, borderRadius, spacing, commonStyles } from '../styles/shared.styles.js';
|
|
import './internal/uplinternal-miniheading.js';
|
|
import { demoFunc } from './upl-statuspage-incidents.demo.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'upl-statuspage-incidents': UplStatuspageIncidents;
|
|
}
|
|
}
|
|
|
|
@customElement('upl-statuspage-incidents')
|
|
export class UplStatuspageIncidents extends DeesElement {
|
|
// STATIC
|
|
public static demo = demoFunc;
|
|
|
|
// INSTANCE
|
|
@property({
|
|
type: Array,
|
|
})
|
|
public currentIncidents: IIncidentDetails[] = [];
|
|
|
|
@property({
|
|
type: Array,
|
|
})
|
|
public pastIncidents: IIncidentDetails[] = [];
|
|
|
|
@property({
|
|
type: Boolean,
|
|
})
|
|
public whitelabel = false;
|
|
|
|
@property({
|
|
type: Boolean,
|
|
})
|
|
public loading = false;
|
|
|
|
@property({
|
|
type: Number,
|
|
})
|
|
public daysToShow = 90;
|
|
|
|
@property({
|
|
type: Array,
|
|
})
|
|
public subscribedIncidentIds: string[] = [];
|
|
|
|
@property({
|
|
type: Object,
|
|
state: true,
|
|
})
|
|
private expandedIncidents: Set<string> = new Set();
|
|
|
|
@property({
|
|
type: Object,
|
|
state: true,
|
|
})
|
|
private subscribedIncidents: Set<string> = new Set();
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
async connectedCallback() {
|
|
await super.connectedCallback();
|
|
// Initialize subscribed incidents from the property
|
|
if (this.subscribedIncidentIds.length > 0) {
|
|
this.subscribedIncidents = new Set(this.subscribedIncidentIds);
|
|
}
|
|
}
|
|
|
|
updated(changedProperties: Map<string, any>) {
|
|
super.updated(changedProperties);
|
|
if (changedProperties.has('subscribedIncidentIds')) {
|
|
this.subscribedIncidents = new Set(this.subscribedIncidentIds);
|
|
}
|
|
}
|
|
|
|
public static styles = [
|
|
plugins.domtools.elementBasic.staticStyles,
|
|
commonStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
background: transparent;
|
|
font-family: ${unsafeCSS(fonts.base)};
|
|
color: ${colors.text.primary};
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
|
|
}
|
|
|
|
.noIncidentBox {
|
|
background: ${colors.background.card};
|
|
padding: ${unsafeCSS(spacing.xl)};
|
|
margin-bottom: ${unsafeCSS(spacing.lg)};
|
|
border-radius: ${unsafeCSS(borderRadius.md)};
|
|
border: 1px solid ${colors.border.default};
|
|
text-align: center;
|
|
color: ${colors.text.secondary};
|
|
box-shadow: ${unsafeCSS(shadows.sm)};
|
|
}
|
|
|
|
.incident-card {
|
|
background: ${colors.background.card};
|
|
border-radius: ${unsafeCSS(borderRadius.md)};
|
|
margin-bottom: ${unsafeCSS(spacing.lg)};
|
|
overflow: hidden;
|
|
box-shadow: ${unsafeCSS(shadows.sm)};
|
|
border: 1px solid ${colors.border.default};
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.incident-card.expanded {
|
|
box-shadow: ${unsafeCSS(shadows.md)};
|
|
}
|
|
|
|
.incident-header {
|
|
padding: ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
|
|
border-left: 4px solid;
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
gap: ${unsafeCSS(spacing.md)};
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.incident-header:hover {
|
|
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.02)')};
|
|
}
|
|
|
|
.incident-header.critical {
|
|
border-left-color: ${colors.status.major};
|
|
}
|
|
|
|
.incident-header.major {
|
|
border-left-color: ${colors.status.partial};
|
|
}
|
|
|
|
.incident-header.minor {
|
|
border-left-color: ${colors.status.degraded};
|
|
}
|
|
|
|
.incident-header.maintenance {
|
|
border-left-color: ${colors.status.maintenance};
|
|
}
|
|
|
|
.incident-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.incident-meta {
|
|
display: flex;
|
|
gap: ${unsafeCSS(spacing.lg)};
|
|
margin-top: ${unsafeCSS(spacing.sm)};
|
|
font-size: 13px;
|
|
color: ${colors.text.secondary};
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.incident-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: ${unsafeCSS(spacing.xs)};
|
|
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
|
|
border-radius: ${unsafeCSS(borderRadius.full)};
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.02em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.incident-status.investigating {
|
|
background: ${cssManager.bdTheme('#fef3c7', '#78350f')};
|
|
color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
|
|
}
|
|
|
|
.incident-status.identified {
|
|
background: ${cssManager.bdTheme('#e9d5ff', '#581c87')};
|
|
color: ${cssManager.bdTheme('#6b21a8', '#d8b4fe')};
|
|
}
|
|
|
|
.incident-status.monitoring {
|
|
background: ${cssManager.bdTheme('#dbeafe', '#1e3a8a')};
|
|
color: ${cssManager.bdTheme('#1e40af', '#93c5fd')};
|
|
}
|
|
|
|
.incident-status.resolved {
|
|
background: ${cssManager.bdTheme('#d1fae5', '#064e3b')};
|
|
color: ${cssManager.bdTheme('#047857', '#6ee7b7')};
|
|
}
|
|
|
|
.incident-status.postmortem {
|
|
background: ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
|
color: ${cssManager.bdTheme('#4b5563', '#d1d5db')};
|
|
}
|
|
|
|
.incident-body {
|
|
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
|
|
}
|
|
|
|
.incident-impact {
|
|
margin: ${unsafeCSS(spacing.md)} 0;
|
|
padding: ${unsafeCSS(spacing.md)};
|
|
background: ${colors.background.secondary};
|
|
border-radius: ${unsafeCSS(borderRadius.base)};
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.affected-services {
|
|
margin-top: ${unsafeCSS(spacing.md)};
|
|
}
|
|
|
|
.affected-services-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
margin-bottom: ${unsafeCSS(spacing.sm)};
|
|
color: ${colors.text.primary};
|
|
}
|
|
|
|
.service-tag {
|
|
display: inline-block;
|
|
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.sm)};
|
|
margin: 2px;
|
|
background: ${colors.background.muted};
|
|
border-radius: ${unsafeCSS(borderRadius.sm)};
|
|
font-size: 12px;
|
|
color: ${colors.text.secondary};
|
|
}
|
|
|
|
.incident-updates {
|
|
margin-top: ${unsafeCSS(spacing.lg)};
|
|
border-top: 1px solid ${colors.border.default};
|
|
padding-top: ${unsafeCSS(spacing.lg)};
|
|
}
|
|
|
|
.update-item {
|
|
position: relative;
|
|
padding-left: ${unsafeCSS(spacing.lg)};
|
|
margin-bottom: ${unsafeCSS(spacing.md)};
|
|
}
|
|
|
|
.update-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 6px;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: ${unsafeCSS(borderRadius.full)};
|
|
background: ${colors.border.muted};
|
|
}
|
|
|
|
.update-time {
|
|
font-size: 12px;
|
|
color: ${colors.text.secondary};
|
|
margin-bottom: ${unsafeCSS(spacing.xs)};
|
|
font-family: ${unsafeCSS(fonts.mono)};
|
|
}
|
|
|
|
.update-message {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: ${colors.text.primary};
|
|
}
|
|
|
|
.update-author {
|
|
font-size: 12px;
|
|
color: ${colors.text.secondary};
|
|
margin-top: ${unsafeCSS(spacing.xs)};
|
|
font-style: italic;
|
|
}
|
|
|
|
.loading-skeleton {
|
|
height: 140px;
|
|
background: ${cssManager.bdTheme(
|
|
'linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)',
|
|
'linear-gradient(90deg, #1f1f1f 25%, #262626 50%, #1f1f1f 75%)'
|
|
)};
|
|
background-size: 200% 100%;
|
|
animation: loading 1.5s infinite;
|
|
border-radius: ${unsafeCSS(borderRadius.md)};
|
|
margin-bottom: ${unsafeCSS(spacing.lg)};
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
.show-more {
|
|
text-align: center;
|
|
margin-top: ${unsafeCSS(spacing.lg)};
|
|
}
|
|
|
|
.show-more-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.lg)};
|
|
background: transparent;
|
|
border: 1px solid ${colors.border.default};
|
|
border-radius: ${unsafeCSS(borderRadius.base)};
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
color: ${colors.text.primary};
|
|
font-family: ${unsafeCSS(fonts.base)};
|
|
}
|
|
|
|
.show-more-button:hover {
|
|
background: ${colors.background.secondary};
|
|
border-color: ${colors.border.muted};
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.show-more-button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.incident-actions {
|
|
display: flex;
|
|
gap: ${unsafeCSS(spacing.md)};
|
|
align-items: center;
|
|
margin-top: ${unsafeCSS(spacing.lg)};
|
|
padding-top: ${unsafeCSS(spacing.lg)};
|
|
border-top: 1px solid ${colors.border.default};
|
|
}
|
|
|
|
.subscribe-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: ${unsafeCSS(spacing.xs)};
|
|
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
|
|
background: transparent;
|
|
border: 1px solid ${colors.border.default};
|
|
border-radius: ${unsafeCSS(borderRadius.base)};
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
transition: all 0.2s ease;
|
|
color: ${colors.text.primary};
|
|
font-family: ${unsafeCSS(fonts.base)};
|
|
}
|
|
|
|
.subscribe-button:hover {
|
|
background: ${colors.background.secondary};
|
|
border-color: ${colors.border.muted};
|
|
}
|
|
|
|
.subscribe-button.subscribed {
|
|
background: ${cssManager.bdTheme('#f0fdf4', '#064e3b')};
|
|
border-color: ${cssManager.bdTheme('#86efac', '#047857')};
|
|
color: ${cssManager.bdTheme('#047857', '#86efac')};
|
|
}
|
|
|
|
.subscribe-button.subscribed:hover {
|
|
background: ${cssManager.bdTheme('#dcfce7', '#065f46')};
|
|
}
|
|
|
|
.collapsed-hint {
|
|
font-size: 12px;
|
|
color: ${colors.text.secondary};
|
|
text-align: center;
|
|
margin-top: ${unsafeCSS(spacing.md)};
|
|
opacity: 0.8;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.container {
|
|
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
|
|
}
|
|
|
|
.incident-header {
|
|
padding: ${unsafeCSS(spacing.md)};
|
|
}
|
|
|
|
.incident-meta {
|
|
flex-direction: column;
|
|
gap: ${unsafeCSS(spacing.xs)};
|
|
}
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="container">
|
|
<uplinternal-miniheading>Current Incidents</uplinternal-miniheading>
|
|
${this.loading ? html`
|
|
<div class="loading-skeleton"></div>
|
|
` : this.currentIncidents.length ? html`
|
|
${this.currentIncidents.map(incident => this.renderIncident(incident, true))}
|
|
` :
|
|
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.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}>
|
|
Show ${this.pastIncidents.length - 5} more incidents
|
|
</button>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderIncident(incident: IIncidentDetails, isCurrent: boolean): TemplateResult {
|
|
const latestUpdate = incident.updates[incident.updates.length - 1];
|
|
const duration = incident.endTime ?
|
|
this.formatDuration(incident.endTime - incident.startTime) :
|
|
this.formatDuration(Date.now() - incident.startTime);
|
|
|
|
return html`
|
|
<div class="incident-card ${this.expandedIncidents.has(incident.id) ? 'expanded' : ''}">
|
|
<div class="incident-header ${incident.severity}" @click=${() => this.toggleIncident(incident.id)}>
|
|
<div>
|
|
<h3 class="incident-title">${incident.title}</h3>
|
|
<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(spacing.sm)};
|
|
font-size: 13px;
|
|
color: ${colors.text.secondary};
|
|
display: flex;
|
|
align-items: center;
|
|
gap: ${unsafeCSS(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(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);' : ''}
|
|
">
|
|
▼
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
${this.expandedIncidents.has(incident.id) ? html`
|
|
<div class="incident-body">
|
|
<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>
|
|
${incident.affectedServices.map(service => html`
|
|
<span class="service-tag">${service}</span>
|
|
`)}
|
|
</div>
|
|
` : ''}
|
|
|
|
${incident.updates.length > 0 ? html`
|
|
<div class="incident-updates">
|
|
<h4 style="font-size: 14px; margin: 0 0 12px 0;">Updates</h4>
|
|
${incident.updates.slice(-3).reverse().map(update => this.renderUpdate(update))}
|
|
</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
|
|
class="subscribe-button ${this.isSubscribedToIncident(incident.id) ? 'subscribed' : ''}"
|
|
@click=${(e: Event) => {
|
|
e.stopPropagation();
|
|
this.handleIncidentSubscribe(incident);
|
|
}}
|
|
>
|
|
${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>
|
|
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>
|
|
Subscribe to updates
|
|
`}
|
|
</button>
|
|
${isCurrent ? html`
|
|
<span style="
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
|
">Get notified when this incident is updated or resolved</span>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderUpdate(update: any): TemplateResult {
|
|
return html`
|
|
<div class="update-item">
|
|
<div class="update-time">${this.formatDate(update.timestamp)}</div>
|
|
<div class="update-message">${update.message}</div>
|
|
${update.author ? html`
|
|
<div class="update-author">— ${update.author}</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private getStatusIcon(status: string): TemplateResult {
|
|
return html`<span style="
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
margin-right: 4px;
|
|
background: ${status === 'resolved' ? colors.status.operational :
|
|
status === 'monitoring' ? colors.status.maintenance :
|
|
status === 'identified' ? colors.status.degraded :
|
|
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',
|
|
day: 'numeric',
|
|
year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined
|
|
});
|
|
}
|
|
|
|
private formatDuration(milliseconds: number): string {
|
|
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) {
|
|
return `${hours}h ${minutes % 60}m`;
|
|
} else {
|
|
return `${minutes}m`;
|
|
}
|
|
}
|
|
|
|
private toggleIncident(incidentId: string) {
|
|
const newExpanded = new Set(this.expandedIncidents);
|
|
if (newExpanded.has(incidentId)) {
|
|
newExpanded.delete(incidentId);
|
|
} else {
|
|
newExpanded.add(incidentId);
|
|
}
|
|
this.expandedIncidents = newExpanded;
|
|
}
|
|
|
|
private handleIncidentClick(incident: IIncidentDetails) {
|
|
this.dispatchEvent(new CustomEvent('incidentClick', {
|
|
detail: { incident },
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
}
|
|
|
|
private handleShowMore() {
|
|
// This would typically load more incidents or navigate to a full list
|
|
console.log('Show more incidents');
|
|
}
|
|
|
|
private isSubscribedToIncident(incidentId: string): boolean {
|
|
return this.subscribedIncidents.has(incidentId);
|
|
}
|
|
|
|
private handleIncidentSubscribe(incident: IIncidentDetails) {
|
|
const newSubscribed = new Set(this.subscribedIncidents);
|
|
if (newSubscribed.has(incident.id)) {
|
|
newSubscribed.delete(incident.id);
|
|
this.dispatchEvent(new CustomEvent('incidentUnsubscribe', {
|
|
detail: {
|
|
incident,
|
|
incidentId: incident.id
|
|
},
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
} else {
|
|
newSubscribed.add(incident.id);
|
|
this.dispatchEvent(new CustomEvent('incidentSubscribe', {
|
|
detail: {
|
|
incident,
|
|
incidentId: incident.id,
|
|
incidentTitle: incident.title,
|
|
affectedServices: incident.affectedServices
|
|
},
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
}
|
|
this.subscribedIncidents = newSubscribed;
|
|
}
|
|
|
|
public dispatchReportNewIncident() {
|
|
this.dispatchEvent(new CustomEvent('reportNewIncident', {
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
}
|
|
|
|
public dispatchStatusSubscribe() {
|
|
this.dispatchEvent(new CustomEvent('statusSubscribe', {
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
}
|
|
}
|