From 37b9f4e895846a6891f97303c9c72a934ba7820c Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Tue, 23 Dec 2025 20:18:47 +0000 Subject: [PATCH] feat(statuspage): use dynamic status-based accent colors and computed card statuses; update stat card markup and incident/response displays --- changelog.md | 9 ++++ ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/upl-statuspage-incidents.ts | 2 +- ts_web/elements/upl-statuspage-statsgrid.ts | 56 ++++++++++++--------- 4 files changed, 43 insertions(+), 26 deletions(-) diff --git a/changelog.md b/changelog.md index 7b0aede..6ba3ae9 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,14 @@ # Changelog +## 2025-12-23 - 1.3.0 - feat(statuspage) +use dynamic status-based accent colors and computed card statuses; update stat card markup and incident/response displays + +- Replace hardcoded stat-card type selectors with status-based classes (.operational, .degraded, .partial_outage, .major_outage, .maintenance) so accent colors are applied centrally. +- Introduce getUptimeCardStatus, getResponseCardStatus, and getIncidentCardStatus helper methods to compute and apply per-card status classes based on uptime, response time, and affected services. +- Update stat card markup to use computed status classes instead of dedicated uptime/response/incident class names. +- Change incident summary text to show 'All services ok.' when no services are affected, otherwise display 'X of Y services affected'. +- Minor layout tweak: adjust timeline connector left offset from 5px to 7px for improved alignment. + ## 2025-12-23 - 1.2.0 - feat(statuspage-ui) improve styling and animations across status page components diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 756b1c8..4180d43 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@uptime.link/statuspage', - version: '1.2.0', + version: '1.3.0', description: 'A catalog of web components for the UptimeLink dashboard.' } diff --git a/ts_web/elements/upl-statuspage-incidents.ts b/ts_web/elements/upl-statuspage-incidents.ts index 8fb6604..df0bd19 100644 --- a/ts_web/elements/upl-statuspage-incidents.ts +++ b/ts_web/elements/upl-statuspage-incidents.ts @@ -355,7 +355,7 @@ export class UplStatuspageIncidents extends DeesElement { .timeline::before { content: ''; position: absolute; - left: 5px; + left: 7px; top: 8px; bottom: 8px; width: 2px; diff --git a/ts_web/elements/upl-statuspage-statsgrid.ts b/ts_web/elements/upl-statuspage-statsgrid.ts index 62862a9..5c53ee2 100644 --- a/ts_web/elements/upl-statuspage-statsgrid.ts +++ b/ts_web/elements/upl-statuspage-statsgrid.ts @@ -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 { ` : html`
-
+
Current Status @@ -401,7 +390,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
-
+
@@ -416,7 +405,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
-
+
@@ -430,7 +419,7 @@ export class UplStatuspageStatsgrid extends DeesElement { ${this.renderResponseChange()}
-
+
@@ -442,8 +431,8 @@ export class UplStatuspageStatsgrid extends DeesElement {
${this.totalIncidents}
-
- ${this.affectedServices} of ${this.totalServices} services +
+ ${this.affectedServices === 0 ? 'All services ok.' : `${this.affectedServices} of ${this.totalServices} services affected`}
@@ -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`
${icon} @@ -475,4 +464,23 @@ export class UplStatuspageStatsgrid extends DeesElement {
`; } + + 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'; + } } \ No newline at end of file