428 lines
12 KiB
TypeScript
428 lines
12 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 { IStatusHistoryPoint } from '../interfaces/index.js';
|
|
import { fonts, colors, shadows, borderRadius, spacing, commonStyles, getStatusColor } from '../styles/shared.styles.js';
|
|
|
|
import './internal/uplinternal-miniheading.js';
|
|
import { demoFunc } from './upl-statuspage-statusdetails.demo.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'upl-statuspage-statusdetails': UplStatuspageStatusdetails;
|
|
}
|
|
}
|
|
|
|
@customElement('upl-statuspage-statusdetails')
|
|
export class UplStatuspageStatusdetails extends DeesElement {
|
|
public static demo = demoFunc;
|
|
|
|
@property({ type: Array })
|
|
public historyData: IStatusHistoryPoint[] = [];
|
|
|
|
@property({ type: Array })
|
|
public dataPoints: IStatusHistoryPoint[] = [];
|
|
|
|
@property({ type: String })
|
|
public serviceId: string = '';
|
|
|
|
@property({ type: String })
|
|
public serviceName: string = 'Service';
|
|
|
|
@property({ type: Boolean })
|
|
public loading: boolean = false;
|
|
|
|
@property({ type: Number })
|
|
public hoursToShow: number = 48;
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public static styles = [
|
|
plugins.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)};
|
|
}
|
|
|
|
.graph-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.graph-container {
|
|
position: relative;
|
|
}
|
|
|
|
.mainbox {
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.mainbox .barContainer {
|
|
position: relative;
|
|
display: flex;
|
|
gap: 1px;
|
|
padding: ${unsafeCSS(spacing.sm)};
|
|
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
|
border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
|
|
border-radius: ${unsafeCSS(borderRadius.base)};
|
|
overflow: hidden;
|
|
height: 40px;
|
|
}
|
|
|
|
.mainbox .barContainer .bar {
|
|
flex: 1;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
transition: opacity 0.15s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.mainbox .barContainer .bar:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.mainbox .barContainer .bar.operational {
|
|
background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
|
|
}
|
|
|
|
.mainbox .barContainer .bar.degraded {
|
|
background: ${cssManager.bdTheme('#fbbf24', '#fbbf24')};
|
|
}
|
|
|
|
.mainbox .barContainer .bar.partial_outage {
|
|
background: ${cssManager.bdTheme('#f87171', '#f87171')};
|
|
}
|
|
|
|
.mainbox .barContainer .bar.major_outage {
|
|
background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
|
|
}
|
|
|
|
.mainbox .barContainer .bar.maintenance {
|
|
background: ${cssManager.bdTheme('#60a5fa', '#60a5fa')};
|
|
}
|
|
|
|
.mainbox .barContainer .bar.no-data {
|
|
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
|
|
}
|
|
|
|
|
|
.time-labels {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0;
|
|
margin-top: ${unsafeCSS(spacing.xs)};
|
|
font-size: 10px;
|
|
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
|
font-family: ${unsafeCSS(fonts.base)};
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
|
color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
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.4;
|
|
}
|
|
|
|
.tooltip.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tooltip-time {
|
|
font-weight: 600;
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.tooltip-stat {
|
|
font-size: 10px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.loading-skeleton {
|
|
display: flex;
|
|
gap: 1px;
|
|
height: 24px;
|
|
}
|
|
|
|
.loading-skeleton .skeleton-bar {
|
|
flex: 1;
|
|
height: 100%;
|
|
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
.stats-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: ${unsafeCSS(spacing.lg)};
|
|
padding: ${unsafeCSS(spacing.sm)} 0;
|
|
border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
|
|
font-size: 12px;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: ${unsafeCSS(spacing.sm)};
|
|
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
|
}
|
|
|
|
.stat-value {
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.container {
|
|
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
|
|
}
|
|
|
|
.graph-container {
|
|
padding: ${unsafeCSS(spacing.sm)};
|
|
}
|
|
|
|
.mainbox .barContainer {
|
|
height: 32px;
|
|
padding: ${unsafeCSS(spacing.xs)};
|
|
}
|
|
|
|
.time-labels {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.stats-row {
|
|
font-size: 11px;
|
|
flex-direction: column;
|
|
gap: ${unsafeCSS(spacing.sm)};
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="container">
|
|
<uplinternal-miniheading>${this.serviceName} - Last ${this.hoursToShow} Hours</uplinternal-miniheading>
|
|
<div class="mainbox">
|
|
${this.loading ? html`
|
|
<div class="graph-container">
|
|
<div class="barContainer" style="background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; border-radius: ${borderRadius.base}; padding: ${spacing.sm}; height: 40px;">
|
|
<div class="loading-skeleton">
|
|
${Array(this.hoursToShow).fill(0).map(() => html`<div class="skeleton-bar"></div>`)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
` : html`
|
|
<div class="graph-container">
|
|
<div class="barContainer" @mouseleave=${this.hideTooltip}>
|
|
${this.renderBars()}
|
|
</div>
|
|
</div>
|
|
<div class="time-labels">
|
|
<span>${this.getTimeLabel(this.hoursToShow - 1)}</span>
|
|
<span>${this.getTimeLabel(Math.floor(this.hoursToShow * 3 / 4))}</span>
|
|
<span>${this.getTimeLabel(Math.floor(this.hoursToShow / 2))}</span>
|
|
<span>${this.getTimeLabel(Math.floor(this.hoursToShow / 4))}</span>
|
|
<span>now</span>
|
|
</div>
|
|
`}
|
|
</div>
|
|
${!this.loading && this.getData().length > 0 ? html`
|
|
<div class="stats-row">
|
|
${this.renderStats()}
|
|
</div>
|
|
` : ''}
|
|
<div class="tooltip" id="tooltip"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderBars(): TemplateResult[] {
|
|
const bars: TemplateResult[] = [];
|
|
const now = Date.now();
|
|
|
|
for (let i = 0; i < this.hoursToShow; i++) {
|
|
const hourIndex = this.hoursToShow - 1 - i;
|
|
const timestamp = now - (hourIndex * 60 * 60 * 1000);
|
|
const dataPoint = this.findDataPointForTime(timestamp);
|
|
|
|
const status = dataPoint?.status || 'no-data';
|
|
const responseTime = dataPoint?.responseTime || 0;
|
|
|
|
bars.push(html`
|
|
<div
|
|
class="bar ${status}"
|
|
@mouseenter=${(e: MouseEvent) => this.showTooltip(e, timestamp, status, responseTime)}
|
|
@click=${() => this.handleBarClick(timestamp, status, responseTime)}
|
|
></div>
|
|
`);
|
|
}
|
|
|
|
return bars;
|
|
}
|
|
|
|
private getData(): IStatusHistoryPoint[] {
|
|
return this.dataPoints?.length > 0 ? this.dataPoints : this.historyData || [];
|
|
}
|
|
|
|
private findDataPointForTime(timestamp: number): IStatusHistoryPoint | undefined {
|
|
const data = this.getData();
|
|
if (!data || data.length === 0) return undefined;
|
|
|
|
// Find the closest data point within the same hour
|
|
const targetHour = new Date(timestamp).getHours();
|
|
const targetDate = new Date(timestamp).toDateString();
|
|
|
|
return data.find(point => {
|
|
const pointDate = new Date(point.timestamp);
|
|
return pointDate.toDateString() === targetDate &&
|
|
pointDate.getHours() === targetHour;
|
|
});
|
|
}
|
|
|
|
|
|
private getTimeLabel(hoursAgo: number): string {
|
|
const date = new Date(Date.now() - (hoursAgo * 60 * 60 * 1000));
|
|
if (hoursAgo >= 24) {
|
|
return `${date.getMonth() + 1}/${date.getDate()}`;
|
|
}
|
|
return `${date.getHours()}h`;
|
|
}
|
|
|
|
private showTooltip(event: MouseEvent, timestamp: number, status: string, responseTime: number) {
|
|
const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
|
|
if (!tooltip) return;
|
|
|
|
const date = new Date(timestamp);
|
|
const timeStr = date.toLocaleString();
|
|
const statusStr = status.replace(/_/g, ' ').replace('no-data', 'No Data');
|
|
|
|
tooltip.innerHTML = `
|
|
<div class="tooltip-time">${timeStr}</div>
|
|
<div class="tooltip-stat">Status: ${statusStr}</div>
|
|
${responseTime > 0 ? `<div class="tooltip-stat">Response Time: ${responseTime.toFixed(0)}ms</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 - 10}px`;
|
|
tooltip.style.transform = 'translate(-50%, -100%)';
|
|
tooltip.classList.add('visible');
|
|
}
|
|
|
|
private hideTooltip() {
|
|
const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
|
|
if (tooltip) {
|
|
tooltip.classList.remove('visible');
|
|
}
|
|
}
|
|
|
|
private handleBarClick(timestamp: number, status: string, responseTime: number) {
|
|
this.dispatchEvent(new CustomEvent('barClick', {
|
|
detail: { timestamp, status, responseTime, serviceId: this.serviceId },
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
}
|
|
|
|
private renderStats(): TemplateResult {
|
|
const data = this.getData();
|
|
const operational = data.filter(d => d.status === 'operational').length;
|
|
const uptime = (operational / data.length) * 100;
|
|
const avgResponseTime = data
|
|
.filter(d => d.responseTime && d.responseTime > 0)
|
|
.reduce((sum, d) => sum + (d.responseTime || 0), 0) / data.length || 0;
|
|
|
|
const currentStatus = data[data.length - 1]?.status || 'no-data';
|
|
|
|
return html`
|
|
<div class="stat-item">
|
|
<span class="status-indicator" style="background: ${this.getStatusColor(currentStatus)}"></span>
|
|
<span class="stat-value">${this.formatStatus(currentStatus)}</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span>${uptime.toFixed(1)}%</span>
|
|
<span style="color: ${cssManager.bdTheme('#9ca3af', '#71717a')}">uptime</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span>${avgResponseTime.toFixed(0)}ms</span>
|
|
<span style="color: ${cssManager.bdTheme('#9ca3af', '#71717a')}">avg response</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private getStatusColor(status: string): string {
|
|
const colors: Record<string, string> = {
|
|
operational: '#22c55e',
|
|
degraded: '#fbbf24',
|
|
partial_outage: '#f87171',
|
|
major_outage: '#ef4444',
|
|
maintenance: '#60a5fa',
|
|
'no-data': '#e5e7eb'
|
|
};
|
|
return colors[status] || '#e5e7eb';
|
|
}
|
|
|
|
private formatStatus(status: string): string {
|
|
return status.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
|
|
}
|
|
}
|