- ${Array(this.hoursToShow).fill(0).map(() => html``)}
+
+
` : html`
-
- ${!this.loading ? html`
-
- = {
+ 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());
+ }
}
-
- Operational
-
-
-
- Degraded
-
-
-
- Partial Outage
-
-
-
- Major Outage
-
-
-
- Maintenance
-
+ ${!this.loading && this.getData().length > 0 ? html`
+
+ ${this.renderStats()}
` : ''}
@@ -322,14 +317,19 @@ export class UplStatuspageStatusdetails extends DeesElement {
return bars;
}
+ private getData(): IStatusHistoryPoint[] {
+ return this.dataPoints?.length > 0 ? this.dataPoints : this.historyData || [];
+ }
+
private findDataPointForTime(timestamp: number): IStatusHistoryPoint | undefined {
- if (!this.historyData || this.historyData.length === 0) return 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 this.historyData.find(point => {
+ return data.find(point => {
const pointDate = new Date(point.timestamp);
return pointDate.toDateString() === targetDate &&
pointDate.getHours() === targetHour;
@@ -340,9 +340,9 @@ export class UplStatuspageStatusdetails extends DeesElement {
private getTimeLabel(hoursAgo: number): string {
const date = new Date(Date.now() - (hoursAgo * 60 * 60 * 1000));
if (hoursAgo >= 24) {
- return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:00`;
+ return `${date.getMonth() + 1}/${date.getDate()}`;
}
- return `${date.getHours()}:00`;
+ return `${date.getHours()}h`;
}
private showTooltip(event: MouseEvent, timestamp: number, status: string, responseTime: number) {
@@ -354,17 +354,17 @@ export class UplStatuspageStatusdetails extends DeesElement {
const statusStr = status.replace(/_/g, ' ').replace('no-data', 'No Data');
tooltip.innerHTML = `
- ${timeStr}
- Status: ${statusStr}
- ${responseTime > 0 ? `Response Time: ${responseTime.toFixed(0)}ms
` : ''}
+ ${timeStr}
+ Status: ${statusStr}
+ ${responseTime > 0 ? `Response Time: ${responseTime.toFixed(0)}ms
` : ''}
`;
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 - 60}px`;
- tooltip.style.transform = 'translateX(-50%)';
+ tooltip.style.top = `${rect.top - containerRect.top - 10}px`;
+ tooltip.style.transform = 'translate(-50%, -100%)';
tooltip.classList.add('visible');
}
@@ -382,4 +382,46 @@ export class UplStatuspageStatusdetails extends DeesElement {
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`
+
+
+ ${this.formatStatus(currentStatus)}
+
+
+ ${uptime.toFixed(1)}%
+ uptime
+
+
+ ${avgResponseTime.toFixed(0)}ms
+ avg response
+
+ `;
+ }
+
+ private getStatusColor(status: string): string {
+ const colors: Record