422 lines
12 KiB
TypeScript
422 lines
12 KiB
TypeScript
import {
|
|
DeesElement,
|
|
property,
|
|
html,
|
|
customElement,
|
|
type TemplateResult,
|
|
css,
|
|
cssManager,
|
|
unsafeCSS
|
|
} from '@design.estate/dees-element';
|
|
import * as domtools from '@design.estate/dees-domtools';
|
|
import type { IMonthlyUptime } 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-statusmonth.demo.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'upl-statuspage-statusmonth': UplStatuspageStatusmonth;
|
|
}
|
|
}
|
|
|
|
@customElement('upl-statuspage-statusmonth')
|
|
export class UplStatuspageStatusmonth extends DeesElement {
|
|
public static demo = demoFunc;
|
|
|
|
@property({ type: Array })
|
|
public monthlyData: IMonthlyUptime[] = [];
|
|
|
|
@property({ type: String })
|
|
public serviceId: string = '';
|
|
|
|
@property({ type: String })
|
|
public serviceName: string = 'Service';
|
|
|
|
@property({ type: Boolean })
|
|
public loading: boolean = false;
|
|
|
|
@property({ type: Boolean })
|
|
public showTooltip: boolean = true;
|
|
|
|
@property({ type: Number })
|
|
public monthsToShow: number = 5;
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public static styles = [
|
|
domtools.elementBasic.staticStyles,
|
|
commonStyles,
|
|
css`
|
|
:host {
|
|
position: relative;
|
|
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)};
|
|
}
|
|
|
|
.mainbox {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: ${unsafeCSS(spacing.md)};
|
|
}
|
|
|
|
.statusMonth {
|
|
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
|
padding: ${unsafeCSS(spacing.lg)};
|
|
border-radius: ${unsafeCSS(borderRadius.base)};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
|
position: relative;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.statusMonth:hover {
|
|
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
|
|
}
|
|
|
|
.month-header {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: ${unsafeCSS(spacing.md)};
|
|
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.days-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 2px;
|
|
}
|
|
|
|
.weekday-label {
|
|
font-size: 11px;
|
|
text-align: center;
|
|
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
|
font-weight: 400;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
margin-bottom: ${unsafeCSS(spacing.sm)};
|
|
}
|
|
|
|
.statusDay {
|
|
aspect-ratio: 1;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
transition: opacity 0.15s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.statusDay:hover:not(.empty) {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.statusDay.operational {
|
|
background: ${colors.status.operational};
|
|
}
|
|
|
|
.statusDay.degraded {
|
|
background: ${colors.status.degraded};
|
|
}
|
|
|
|
.statusDay.partial_outage {
|
|
background: ${colors.status.partial};
|
|
}
|
|
|
|
.statusDay.major_outage {
|
|
background: ${colors.status.major};
|
|
}
|
|
|
|
.statusDay.no-data {
|
|
background: ${colors.border.muted};
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.statusDay.empty {
|
|
background: transparent;
|
|
cursor: default;
|
|
}
|
|
|
|
.statusDay.empty:hover {
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.overall-uptime {
|
|
font-size: 13px;
|
|
margin-top: ${unsafeCSS(spacing.md)};
|
|
padding-top: ${unsafeCSS(spacing.md)};
|
|
border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
|
|
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.uptime-stat {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.uptime-value {
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.loading-skeleton {
|
|
height: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${unsafeCSS(spacing.sm)};
|
|
padding: ${unsafeCSS(spacing.lg)};
|
|
}
|
|
|
|
.skeleton-header {
|
|
height: 20px;
|
|
width: 80px;
|
|
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
|
|
border-radius: 4px;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.skeleton-grid {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 2px;
|
|
}
|
|
|
|
.skeleton-day {
|
|
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
|
|
border-radius: 2px;
|
|
animation: pulse 2s infinite;
|
|
animation-delay: calc(var(--index) * 0.05s);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(200%); }
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
|
color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
z-index: 50;
|
|
white-space: nowrap;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.tooltip.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tooltip-date {
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.tooltip-stat {
|
|
font-size: 11px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.no-data-message {
|
|
grid-column: 1 / -1;
|
|
text-align: center;
|
|
padding: ${unsafeCSS(spacing['2xl'])};
|
|
color: ${colors.text.secondary};
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.container {
|
|
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
|
|
}
|
|
|
|
.mainbox {
|
|
grid-template-columns: 1fr;
|
|
gap: ${unsafeCSS(spacing.md)};
|
|
}
|
|
|
|
.statusMonth {
|
|
padding: ${unsafeCSS(spacing.md)};
|
|
}
|
|
|
|
.loading-skeleton {
|
|
height: 180px;
|
|
padding: ${unsafeCSS(spacing.md)};
|
|
}
|
|
}
|
|
`
|
|
]
|
|
|
|
public render(): TemplateResult {
|
|
const totalDays = this.monthlyData.reduce((sum, month) => sum + month.days.length, 0);
|
|
|
|
return html`
|
|
<div class="container">
|
|
<uplinternal-miniheading>${this.serviceName} - Last ${totalDays} Days</uplinternal-miniheading>
|
|
<div class="mainbox">
|
|
${this.loading ? html`
|
|
${Array(this.monthsToShow).fill(0).map((_, index) => html`
|
|
<div class="statusMonth">
|
|
<div class="loading-skeleton">
|
|
<div class="skeleton-header"></div>
|
|
<div class="skeleton-grid">
|
|
${Array(35).fill(0).map((_, i) => html`
|
|
<div class="skeleton-day" style="--index: ${i}"></div>
|
|
`)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`)}
|
|
` : this.monthlyData.length === 0 ? html`
|
|
<div class="no-data-message">No uptime data available</div>
|
|
` : this.monthlyData.map(month => this.renderMonth(month))}
|
|
</div>
|
|
${this.showTooltip ? html`<div class="tooltip" id="tooltip"></div>` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderMonth(monthData: IMonthlyUptime): TemplateResult {
|
|
const monthDate = new Date(monthData.month + '-01');
|
|
const monthName = monthDate.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
|
|
const firstDayOfWeek = new Date(monthDate.getFullYear(), monthDate.getMonth(), 1).getDay();
|
|
|
|
return html`
|
|
<div class="statusMonth" @mouseleave=${this.hideTooltip}>
|
|
<div class="month-header">${monthName}</div>
|
|
<div class="days-grid">
|
|
${this.renderWeekdayLabels()}
|
|
${this.renderEmptyDays(firstDayOfWeek)}
|
|
${monthData.days.map(day => this.renderDay(day))}
|
|
</div>
|
|
<div class="overall-uptime">
|
|
<div class="uptime-stat">
|
|
<span>Uptime</span>
|
|
<span class="uptime-value">${monthData.overallUptime.toFixed(2)}%</span>
|
|
</div>
|
|
${monthData.totalIncidents > 0 ? html`
|
|
<div class="uptime-stat">
|
|
<span>Incidents</span>
|
|
<span class="uptime-value">${monthData.totalIncidents}</span>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderWeekdayLabels(): TemplateResult[] {
|
|
const weekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
|
|
return weekdays.map(day => html`<div class="weekday-label">${day}</div>`);
|
|
}
|
|
|
|
private renderEmptyDays(count: number): TemplateResult[] {
|
|
return Array(count).fill(0).map(() => html`<div class="statusDay empty"></div>`);
|
|
}
|
|
|
|
private renderDay(day: any): TemplateResult {
|
|
const status = day.status || 'no-data';
|
|
const date = new Date(day.date);
|
|
const dayNumber = date.getDate();
|
|
|
|
return html`
|
|
<div
|
|
class="statusDay ${status}"
|
|
@mouseenter=${(e: MouseEvent) => this.showTooltip && this.showDayTooltip(e, day)}
|
|
@click=${() => this.handleDayClick(day)}
|
|
>
|
|
${status === 'major_outage' || status === 'partial_outage' ? html`
|
|
<div style="
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 8px;
|
|
font-weight: bold;
|
|
color: white;
|
|
">${day.incidents}</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private showDayTooltip(event: MouseEvent, day: any) {
|
|
const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
|
|
if (!tooltip) return;
|
|
|
|
const date = new Date(day.date);
|
|
const dateStr = date.toLocaleDateString('en-US', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
|
|
let statusText = day.status.replace(/_/g, ' ');
|
|
statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1);
|
|
|
|
tooltip.innerHTML = `
|
|
<div class="tooltip-date">${dateStr}</div>
|
|
<div class="tooltip-stat">Status: ${statusText}</div>
|
|
<div class="tooltip-stat">Uptime: ${day.uptime.toFixed(2)}%</div>
|
|
${day.incidents > 0 ? `<div class="tooltip-stat">Incidents: ${day.incidents}</div>` : ''}
|
|
${day.totalDowntime > 0 ? `<div class="tooltip-stat">Downtime: ${day.totalDowntime} min</div>` : ''}
|
|
`;
|
|
|
|
const rect = (event.target as HTMLElement).getBoundingClientRect();
|
|
const containerRect = this.getBoundingClientRect();
|
|
|
|
tooltip.style.left = `${rect.left - containerRect.left + rect.width / 2}px`;
|
|
tooltip.style.top = `${rect.top - containerRect.top - 80}px`;
|
|
tooltip.style.transform = 'translateX(-50%)';
|
|
tooltip.classList.add('visible');
|
|
}
|
|
|
|
private hideTooltip() {
|
|
const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
|
|
if (tooltip) {
|
|
tooltip.classList.remove('visible');
|
|
}
|
|
}
|
|
|
|
private handleDayClick(day: any) {
|
|
this.dispatchEvent(new CustomEvent('dayClick', {
|
|
detail: {
|
|
date: day.date,
|
|
uptime: day.uptime,
|
|
incidents: day.incidents,
|
|
status: day.status,
|
|
serviceId: this.serviceId
|
|
},
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
}
|
|
}
|