From e7bff8b9c0bfdc3d626076d028a46c28f4182f9d Mon Sep 17 00:00:00 2001
From: zwitschi <zwitschi82@gmail.com>
Date: Sun, 16 Aug 2026 11:12:21 +0200
Subject: [PATCH] fix(admin): render service health details as structured HTML

---
 frontend/src/admin.ts | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/admin.ts b/frontend/src/admin.ts
index a623292..3487455 100644
--- a/frontend/src/admin.ts
+++ b/frontend/src/admin.ts
@@ -562,17 +562,21 @@ async function deleteOverride(id: number) {
 async function renderServiceRow(service: any) {
   const svcDetail = service.detail || "";
 
-  // playout service returns json detail, all others return ISO formatted time string
+  // playout service returns json detail, all others return `local process` or `ping ok`
   if (service.name === "playout" && svcDetail) {
     try {
       // create a list of key-value pairs for each property in the JSON object
       const detailObj = JSON.parse(svcDetail);
-      service.detail = Object.entries(detailObj)
-        .map(([key, value]) => `${key}: ${value}`)
-        .join("\n");
+      // create a list item for each key-value pair in the object
+      const detailList = Object.entries(detailObj)
+        .map(([key, value]) => `<li><strong>${key}:</strong> ${value}</li>`)
+        .join("");
+      service.detail = `<ul>${detailList}</ul>`;
     } catch {
       // ignore JSON parse errors
     }
+  } else {
+    service.detail = `<p>${service.detail}</p>`;
   }
 
   const row = document.createElement("article");
@@ -584,7 +588,7 @@ async function renderServiceRow(service: any) {
     </div>
     <div class="service-row-right">
       <p class="service-status service-status-${service.status}">${service.status}</p>
-      <p>${service.detail}</p>
+      ${service.detail}
     </div>
   `;
   return row;