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

feat(statuspage): use dynamic status-based accent colors and computed card statuses; update stat card markup and incident/response displays

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-23 20:18:47 +00:00
parent 883648579e
commit 37b9f4e895
4 changed files with 43 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
ts_web/elements/upl-statuspage-statsgrid.ts
View File

@@ -114,38 +114,27 @@ export class UplStatuspageStatsgrid extends DeesElement {
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
}
.stat-card.status-card::before {
/* Dynamic status-based accent colors for all stat cards */
.stat-card.operational::before {
background: ${sharedStyles.colors.status.operational};
}
.stat-card.status-card.degraded::before {
.stat-card.degraded::before {
background: ${sharedStyles.colors.status.degraded};
}
.stat-card.status-card.partial_outage::before {
.stat-card.partial_outage::before {
background: ${sharedStyles.colors.status.partial};
}
.stat-card.status-card.major_outage::before {
.stat-card.major_outage::before {
background: ${sharedStyles.colors.status.major};
}
.stat-card.status-card.maintenance::before {
.stat-card.maintenance::before {
background: ${sharedStyles.colors.status.maintenance};
}
.stat-card.uptime-card::before {
background: ${sharedStyles.colors.status.operational};
}
.stat-card.response-card::before {
background: ${sharedStyles.colors.status.maintenance};
}
.stat-card.incident-card::before {
background: ${sharedStyles.colors.status.partial};
}
.stat-card:hover {
border-color: ${sharedStyles.colors.border.muted};
box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
@@ -391,7 +380,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
</div>
` : html`
<div class="stats-grid">
<div class="stat-card status-card ${this.currentStatus}">
<div class="stat-card ${this.currentStatus}">
<div class="stat-label">
<span class="status-indicator ${this.currentStatus}"></span>
Current Status
@@ -401,7 +390,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
</div>
</div>
<div class="stat-card uptime-card">
<div class="stat-card ${this.getUptimeCardStatus()}">
<div class="stat-label">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
@@ -416,7 +405,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
</div>
</div>
<div class="stat-card response-card">
<div class="stat-card ${this.getResponseCardStatus()}">
<div class="stat-label">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
@@ -430,7 +419,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
${this.renderResponseChange()}
</div>
<div class="stat-card incident-card">
<div class="stat-card ${this.getIncidentCardStatus()}">
<div class="stat-label">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
@@ -442,8 +431,8 @@ export class UplStatuspageStatsgrid extends DeesElement {
<div class="stat-value">
${this.totalIncidents}
</div>
<div class="stat-change neutral">
${this.affectedServices} of ${this.totalServices} services
<div class="stat-change ${this.affectedServices === 0 ? 'positive' : 'negative'}">
${this.affectedServices === 0 ? 'All services ok.' : `${this.affectedServices} of ${this.totalServices} services affected`}
</div>
</div>
</div>
@@ -467,7 +456,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
// This could be enhanced with actual trend data
const trend = this.avgResponseTime < 200 ? 'positive' : this.avgResponseTime > 500 ? 'negative' : 'neutral';
const icon = trend === 'positive' ? '↓' : trend === 'negative' ? '↑' : '→';
return html`
<div class="stat-change ${trend}">
<span>${icon}</span>
@@ -475,4 +464,23 @@ export class UplStatuspageStatsgrid extends DeesElement {
</div>
`;
}
private getUptimeCardStatus(): string {
if (this.uptime >= 99.9) return 'operational';
if (this.uptime >= 99.0) return 'degraded';
return 'partial_outage';
}
private getResponseCardStatus(): string {
if (this.avgResponseTime < 200) return 'operational';
if (this.avgResponseTime < 500) return 'degraded';
return 'partial_outage';
}
private getIncidentCardStatus(): string {
if (this.affectedServices === 0) return 'operational';
if (this.currentStatus === 'major_outage') return 'major_outage';
if (this.currentStatus === 'partial_outage') return 'partial_outage';
return 'degraded';
}
}