add small box timestamps to status history

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()

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;
         }
@@ -99,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 %}
@@ -121,12 +172,13 @@ <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 %}
-                        {% if value.value == "1" %}
-                            ✅
-                        {% else %}
-                            ❌
-                        {% endif %}
+                    {% for value in item.values | reverse %}
+                        <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%}
                             |