feat: enhance status history visualization with flapping indicators and tooltips

Author: tazlin

src/app/pages/status/status.component.html

@@ -364,16 +364,41 @@ <h2 class="heading-section-lg">
                     [attr.aria-label]="'status.history_label' | transloco"
                   >
                     @for (day of historyFor(svc.id); track day.date) {
+                      @let bar = dayBar(day);
                       <span
-                        class="status-history__bar status-history__bar--{{
-                          historyLevelModifier(day.status_level)
-                        }}"
+                        class="status-history__cell"
                         [title]="
                           day.date +
                           ' — ' +
-                          (historyLevelLabelKey(day.status_level) | transloco)
+                          (bar.labelKey | transloco) +
+                          (day.down_seconds > 0
+                            ? '  ·  ' +
+                              formatDuration(day.down_seconds) +
+                              ' ' +
+                              ('status.history_tooltip.down' | transloco)
+                            : '') +
+                          (day.degraded_seconds > 0
+                            ? '  ·  ' +
+                              formatDuration(day.degraded_seconds) +
+                              ' ' +
+                              ('status.history_tooltip.degraded' | transloco)
+                            : '') +
+                          (bar.flapping
+                            ? '  ·  ' + ('status.history_flapping' | transloco)
+                            : '')
                         "
-                      ></span>
+                      >
+                        <span
+                          class="status-history__bar status-history__bar--{{
+                            bar.modifier
+                          }}"
+                        ></span>
+                        <span
+                          class="status-history__flap"
+                          [class.status-history__flap--on]="bar.flapping"
+                          aria-hidden="true"
+                        ></span>
+                      </span>
                     }
                   </div>
                 }

src/app/pages/status/status.component.ts

@@ -24,6 +24,33 @@ import {
   PublicMaintenance,
 } from '../../types/status';
 
+/**
+ * Duration thresholds for the 90-day history bars, mirroring the backend's
+ * `BucketThresholds`. A day goes major only when hard-down time crosses an
+ * absolute floor OR a fraction of the day's observed signal (whichever is
+ * larger), and minor likewise for degraded time. Kept in lockstep with
+ * `ai-horde-service-alerts`'s defaults so the client- and server-side
+ * classifications agree.
+ */
+const BAR_MAJOR_DOWN_FLOOR_S = 300;
+const BAR_MAJOR_DOWN_FRACTION = 0.01;
+const BAR_MINOR_DEGRADED_FLOOR_S = 600;
+const BAR_MINOR_DEGRADED_FRACTION = 0.05;
+
+/** A history day's rendered bar: its colour modifier, label, and flap marker. */
+interface DayBar {
+  /** BEM modifier suffix for the bar: `ok` | `minor` | `major` | `maintenance`. */
+  modifier: 'ok' | 'minor' | 'major' | 'maintenance';
+  /** transloco key for the bar's status label, e.g. `status.history_level.ok`. */
+  labelKey: string;
+  /**
+   * True when the day stayed green but still saw some down/degraded time below
+   * the colouring threshold — rendered as a small marker under the tick so brief
+   * instability is visible without being escalated to a full outage.
+   */
+  flapping: boolean;
+}
+
 /** How a status value reads in the UI: a translation key and a CSS modifier. */
 interface StatusView {
   /** transloco key for the human label, e.g. `status.state.operational`. */
@@ -188,13 +215,66 @@ export class StatusComponent {
     return this.histories()[componentId] ?? [];
   }
 
-  /** A day's bar modifier: `ok` | `minor` | `major` | `maintenance`. */
-  public historyLevelModifier(level: number): string {
-    return ['ok', 'minor', 'major', 'maintenance'][level] ?? 'ok';
+  /**
+   * Classify a day's bar from its raw per-day seconds, mirroring the backend's
+   * duration-weighted thresholds ({@link BAR_MAJOR_DOWN_FLOOR_S} et al).
+   *
+   * This is deliberately independent of the backend's `status_level`: if the
+   * backend ever regresses to a worst-observed rollup again, the page still
+   * refuses to paint a whole day red over a few seconds of blip. Sub-threshold
+   * down/degraded time surfaces as {@link DayBar.flapping} (a small marker)
+   * rather than a coloured bar.
+   */
+  public dayBar(day: PublicHistoryDay): DayBar {
+    const signal =
+      day.operational_seconds + day.degraded_seconds + day.down_seconds;
+    if (signal === 0) {
+      const modifier = day.maintenance_seconds > 0 ? 'maintenance' : 'ok';
+      return {
+        modifier,
+        labelKey: `status.history_level.${modifier}`,
+        flapping: false,
+      };
+    }
+    const majorCut = Math.max(
+      BAR_MAJOR_DOWN_FLOOR_S,
+      BAR_MAJOR_DOWN_FRACTION * signal,
+    );
+    if (day.down_seconds >= majorCut) {
+      return {
+        modifier: 'major',
+        labelKey: 'status.history_level.major',
+        flapping: false,
+      };
+    }
+    const minorCut = Math.max(
+      BAR_MINOR_DEGRADED_FLOOR_S,
+      BAR_MINOR_DEGRADED_FRACTION * signal,
+    );
+    if (day.degraded_seconds >= minorCut) {
+      return {
+        modifier: 'minor',
+        labelKey: 'status.history_level.minor',
+        flapping: false,
+      };
+    }
+    return {
+      modifier: 'ok',
+      labelKey: 'status.history_level.ok',
+      flapping: day.down_seconds > 0 || day.degraded_seconds > 0,
+    };
   }
 
-  /** transloco key for a history bar's status, e.g. `status.history_level.ok`. */
-  public historyLevelLabelKey(level: number): string {
-    return `status.history_level.${this.historyLevelModifier(level)}`;
+  /** Compact human duration for tooltips: `15s`, `4m`, `1h 32m`. */
+  public formatDuration(seconds: number): string {
+    if (seconds >= 3600) {
+      const hours = Math.floor(seconds / 3600);
+      const minutes = Math.round((seconds % 3600) / 60);
+      return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+    }
+    if (seconds >= 60) {
+      return `${Math.round(seconds / 60)}m`;
+    }
+    return `${Math.max(0, Math.round(seconds))}s`;
   }
 }

src/assets/i18n/en.json

@@ -231,6 +231,9 @@
   "status.history_level.minor": "Minor issues",
   "status.history_level.major": "Major outage",
   "status.history_level.maintenance": "Maintenance",
+  "status.history_tooltip.down": "down",
+  "status.history_tooltip.degraded": "degraded",
+  "status.history_flapping": "Brief instability",
   "status.tbd_note": "Live worker and queue figures are sourced from the AI Horde performance API. Per-incident subscriptions, an RSS feed, and the internal operations view are not yet available (TBD).",
   "status.summary.operational": "All systems operational",
   "status.summary.degraded": "Some systems are experiencing degraded performance",

src/styles/_status.css

@@ -605,16 +605,41 @@
   display: flex;
   gap: 2px;
   align-items: stretch;
-  height: 1.75rem;
 }
 
-.status-history__bar {
+/* Each day is a column: the uptime bar, plus a reserved strip below it for the
+   "flapping" marker so all bars stay vertically aligned whether or not a given
+   day carries a marker. */
+.status-history__cell {
   flex: 1;
   min-width: 2px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.status-history__bar {
+  height: 1.75rem;
   border-radius: 1.5px;
   background: var(--color-success-500);
 }
 
+/* Sub-threshold instability marker: a small dot under the tick, hidden (but
+   space-reserved) on clean days. */
+.status-history__flap {
+  align-self: center;
+  width: 5px;
+  height: 5px;
+  margin-top: 2px;
+  border-radius: 50%;
+  background: var(--color-warning-500);
+  opacity: 0;
+}
+
+.status-history__flap--on {
+  opacity: 0.9;
+}
+
 .status-history__bar--ok {
   background: var(--color-success-500);
   opacity: 0.85;