Simplify admin operator UI

karldns/web/templates_admin_tables.py

@@ -1,32 +1,43 @@
 from __future__ import annotations
 
+from datetime import datetime
+
 from .components import _event_label
 from .html_utils import attr, escape
 
 
 def _account_row(account: dict[str, str | int | None], csrf: str = "", admin_path: str = "/admin") -> str:
-    hostname = escape(account["hostname"])
+    raw_hostname = str(account["hostname"])
+    hostname = escape(raw_hostname)
+    hostname_attr = attr(raw_hostname)
     status = "Active" if account.get("accepted_at") else "Pending"
-    ipv4 = escape(account.get("ipv4") or "-")
-    ipv6 = escape(account.get("ipv6") or "-")
-    updated = escape(account.get("updated_at") or "Never")
+    ipv4_raw = str(account.get("ipv4") or "-")
+    ipv6_raw = str(account.get("ipv6") or "-")
+    updated_raw = str(account.get("updated_at") or "Never")
+    ipv4 = escape(ipv4_raw)
+    ipv6 = escape(ipv6_raw)
+    updated = escape(_short_time(updated_raw, "Never"))
     safe_admin_path = attr(admin_path)
     return f"""
       <tr>
-        <td>{hostname}</td><td>{escape(status)}</td><td>{ipv4}</td><td>{ipv6}</td><td>{updated}</td>
-        <td>
-          <form method="post" action="{safe_admin_path}/hostnames/rotate" class="d-flex gap-2 flex-wrap">
+        <td class="cell-hostname" title="{hostname_attr}">{hostname}</td>
+        <td class="cell-status">{escape(status)}</td>
+        <td class="cell-ip" title="{attr(ipv4_raw)}">{ipv4}</td>
+        <td class="cell-ip" title="{attr(ipv6_raw)}">{ipv6}</td>
+        <td class="cell-time" title="{attr(updated_raw)}">{updated}</td>
+        <td class="cell-actions">
+          <form method="post" action="{safe_admin_path}/hostnames/rotate" class="admin-action-group">
             <input type="hidden" name="csrf" value="{attr(csrf)}">
-            <input type="hidden" name="hostname" value="{hostname}">
-            <button name="action" value="update" class="btn btn-sm btn-light px-3" title="Create a new update URL" aria-label="New update URL for {hostname}">New update URL</button>
-            <button name="action" value="management" class="btn btn-sm btn-light px-3" title="Create a new dashboard link" aria-label="New dashboard link for {hostname}">New dashboard link</button>
+            <input type="hidden" name="hostname" value="{hostname_attr}">
+            <button name="action" value="update" class="btn btn-sm btn-light rounded-pill" title="Create a new update URL" aria-label="New update URL for {hostname_attr}">Update URL</button>
+            <button name="action" value="management" class="btn btn-sm btn-light rounded-pill" title="Create a new dashboard link" aria-label="New dashboard link for {hostname_attr}">Dashboard</button>
           </form>
         </td>
-        <td>
+        <td class="cell-delete">
           <form method="post" action="{safe_admin_path}/hostnames/delete">
             <input type="hidden" name="csrf" value="{attr(csrf)}">
-            <input type="hidden" name="hostname" value="{hostname}">
-            <button class="btn btn-sm btn-outline-danger px-2" title="Delete hostname" aria-label="Delete {hostname}">Delete</button>
+            <input type="hidden" name="hostname" value="{hostname_attr}">
+            <button class="btn btn-sm btn-outline-danger rounded-pill" title="Delete hostname" aria-label="Delete {hostname_attr}">Delete</button>
           </form>
         </td>
       </tr>
@@ -67,11 +78,29 @@ def _admin_table_pagination() -> str:
 
 
 def _event_row(event: dict[str, str | int | None]) -> str:
-    created = escape(event.get("created_at") or "-")
-    hostname = escape(event.get("hostname") or "-")
+    created_raw = str(event.get("created_at") or "-")
+    hostname_raw = str(event.get("hostname") or "-")
+    detail_raw = str(event.get("detail") or "-")
+    created = escape(_short_time(created_raw))
+    hostname = escape(hostname_raw)
     status = escape(_event_label(event.get("status")))
     ipv4 = escape(event.get("ipv4") or "-")
     ipv6 = escape(event.get("ipv6") or "-")
     count = escape(event.get("count") or 1)
-    detail = escape(event.get("detail") or "-")
-    return f"<tr><td>{created}</td><td>{hostname}</td><td>{status}</td><td>{ipv4}</td><td>{ipv6}</td><td>{count}</td><td>{detail}</td></tr>"
+    detail = escape(detail_raw)
+    return (
+        f'<tr><td class="cell-time" title="{attr(created_raw)}">{created}</td>'
+        f'<td class="cell-hostname" title="{attr(hostname_raw)}">{hostname}</td>'
+        f'<td class="cell-status">{status}</td><td class="cell-ip">{ipv4}</td><td class="cell-ip">{ipv6}</td>'
+        f'<td class="cell-count">{count}</td><td class="cell-detail" title="{attr(detail_raw)}">{detail}</td></tr>'
+    )
+
+
+def _short_time(value: str, fallback: str = "-") -> str:
+    if not value or value == fallback:
+        return fallback
+    try:
+        parsed = datetime.fromisoformat(value)
+    except ValueError:
+        return value
+    return parsed.strftime("%Y-%m-%d %H:%M")