From 3e602d8f13f4f4d67da6a57298d29b7318b43231 Mon Sep 17 00:00:00 2001
From: Thinh Nguyen <mthinhngn@gmail.com>
Date: Sat, 1 Aug 2026 13:59:43 -0700
Subject: [PATCH 1/2] add small box timestamps to status history

---
 system_status/server.py                  | 11 +++--
 system_status/templates/my_template.html | 62 ++++++++++++++++++++++--
 2 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/system_status/server.py b/system_status/server.py
index 49a24c5..2a936a5 100644
--- a/system_status/server.py
+++ b/system_status/server.py
@@ -4,7 +4,6 @@
 import requests
 from dataclasses import dataclass
 from typing import List
-import time
 from zoneinfo import ZoneInfo
 
 from urllib.parse import urljoin
@@ -15,6 +14,9 @@
 from fastapi.staticfiles import StaticFiles
 
 
+DISPLAY_TIMEZONE = ZoneInfo("America/Los_Angeles")
+
+
 @dataclass
 class TimestampAndValuePair:
     timestamp: str
@@ -125,7 +127,10 @@ def get_prometheus_data() -> list[PrometheusData]:
 
             timestamps_and_values = []
             for epoch_time, value in maybe_values:
-                timestamp = time.strftime("%Y-%m-%d %H:%M:%S", time.gmtime(epoch_time))
+                local_timestamp = datetime.datetime.fromtimestamp(
+                    epoch_time, DISPLAY_TIMEZONE
+                )
+                timestamp = local_timestamp.strftime("%Y-%m-%d | %H:%M:%S %Z")
                 timestamps_and_values.append(TimestampAndValuePair(timestamp, value))
 
             # the service is up if the maximum timestamp's value is "1"
@@ -147,7 +152,7 @@ def get_prometheus_data() -> list[PrometheusData]:
 # expects an optional parameter as the target URL
 @app.get("/", response_class=HTMLResponse)
 def page_generator(request: Request):
-    local_datetime = datetime.datetime.now(ZoneInfo("America/Los_Angeles"))
+    local_datetime = datetime.datetime.now(DISPLAY_TIMEZONE)
 
     fetch_time = local_datetime.strftime("%Y-%m-%d %H:%M:%S")
     data = get_prometheus_data()
diff --git a/system_status/templates/my_template.html b/system_status/templates/my_template.html
index 44a2049..9b0ff5b 100644
--- a/system_status/templates/my_template.html
+++ b/system_status/templates/my_template.html
@@ -74,6 +74,57 @@
             margin-right: 2px;
         }
 
+        .history-marker {
+            position: relative;
+            display: inline-block;
+            cursor: help;
+            outline-offset: 2px;
+        }
+
+        .history-marker::before {
+            content: attr(data-tooltip);
+            position: absolute;
+            left: 50%;
+            bottom: calc(100% + 8px);
+            transform: translateX(-50%);
+            visibility: hidden;
+            opacity: 0;
+            z-index: 10;
+            padding: 6px 8px;
+            border-radius: 4px;
+            background-color: #222;
+            color: #fff;
+            font-family: Arial, sans-serif;
+            font-size: 13px;
+            font-weight: normal;
+            line-height: 1;
+            white-space: nowrap;
+            pointer-events: none;
+            transition: opacity 0.15s ease-in-out;
+        }
+
+        .history-marker::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            bottom: calc(100% + 2px);
+            transform: translateX(-50%);
+            visibility: hidden;
+            opacity: 0;
+            border: 4px solid transparent;
+            border-top-color: #222;
+            pointer-events: none;
+            transition: opacity 0.15s ease-in-out;
+        }
+
+        .history-marker:hover::before,
+        .history-marker:hover::after,
+        .history-marker:focus::before,
+        .history-marker:focus::after {
+            visibility: visible;
+            opacity: 1;
+        }
+
         #info_container{
             display: inline-block;
         }
@@ -122,11 +173,12 @@ <h2 id="fetch_time">Fetch Time: {{ fetch_time }}</h2>
                 {# THIS IS THE CORRECTED SECTION for the EMOJI HISTORY #}
                 <td>
                     {% for value in item.values %}
-                        {% if value.value == "1" %}
-                            ✅
-                        {% else %}
-                            ❌
-                        {% endif %}
+                        <span
+                            class="history-marker"
+                            data-tooltip="{{ value.timestamp }}"
+                            aria-label="Status at {{ value.timestamp }}"
+                            tabindex="0"
+                        >{% if value.value == "1" %}✅{% else %}❌{% endif %}</span>
                         {# the below if-statement adds a vertical line for every four entries #}
                         {% if (not loop.index % 4) and loop.index < 24%}
                             |

From 4d4f35e0bbd4b06ac9fde4ca6581bf4bad9e3578 Mon Sep 17 00:00:00 2001
From: Thinh Nguyen <mthinhngn@gmail.com>
Date: Mon, 3 Aug 2026 09:52:30 -0700
Subject: [PATCH 2/2] reverse status history order

---
 system_status/templates/my_template.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/system_status/templates/my_template.html b/system_status/templates/my_template.html
index 9b0ff5b..377f3a1 100644
--- a/system_status/templates/my_template.html
+++ b/system_status/templates/my_template.html
@@ -150,11 +150,11 @@ <h2 id="fetch_time">Fetch Time: {{ fetch_time }}</h2>
                 <th style="text-align: left; padding-right: 2px">Status</th>
                 <th style="text-align: left; padding-right: 2px">Detail</th>
                 <th>
-                    <div style="display: inline">Prev. Day</div>
+                    <div style="display: inline">Most Recent</div>
                     <div style="display: inline"> ◀➖➖➖➖➖➖➖➖ </div>
                     <div style="display: inline">History of past 24 Hours</div>
                     <div style="display: inline"> ➖➖➖➖➖➖➖➖▶ </div>
-                    <div style="display: inline">Now</div>
+                    <div style="display: inline">Earlier</div>
                 </th>
             </tr>
             {% for item in data %}
@@ -172,7 +172,7 @@ <h2 id="fetch_time">Fetch Time: {{ fetch_time }}</h2>
                 <td>{{ detail }}</td>
                 {# THIS IS THE CORRECTED SECTION for the EMOJI HISTORY #}
                 <td>
-                    {% for value in item.values %}
+                    {% for value in item.values | reverse %}
                         <span
                             class="history-marker"
                             data-tooltip="{{ value.timestamp }}"