From 1c23f3270033f64c608589ead330d3d9647407ba Mon Sep 17 00:00:00 2001
From: pcvantol <pcvantol@hotmail.com>
Date: Mon, 7 Sep 2026 07:56:29 +0200
Subject: [PATCH] Align component section order with status popout

---
 src/engineering_platform/assets/dashboard.js | 22 +++++++++++++++++++-
 tests/engineering/dashboard.spec.mjs         | 10 +++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/engineering_platform/assets/dashboard.js b/src/engineering_platform/assets/dashboard.js
index cff34902..f32157b1 100644
--- a/src/engineering_platform/assets/dashboard.js
+++ b/src/engineering_platform/assets/dashboard.js
@@ -382,6 +382,21 @@ function dashboardHealthPresentation(status = latestStatus, platformHealth = lat
   checks.push(["queue", queueDepth ? "queue_waiting" : "queue_empty", queueDepth ? "warning" : "good", { count: queueDepth }, { section: t("dashboard.health.section.execution") }]);
   return { state, checks };
 }
+function orderedPlatformComponentEntries(components, model = latestPlatformHealth?.component_model) {
+  const known = new Set(), entries = [];
+  if (Array.isArray(model)) {
+    model.forEach((definition) => {
+      const id = definition?.id;
+      if (typeof id !== "string" || !Object.hasOwn(components, id)) return;
+      known.add(id);
+      entries.push([id, components[id]]);
+    });
+  }
+  Object.entries(components).forEach(([id, component]) => {
+    if (!known.has(id)) entries.push([id, component]);
+  });
+  return entries;
+}
 function renderDashboardHealth(status = latestStatus, platformHealth = latestPlatformHealth) {
   const indicator = $("dashboardHealthIndicator"), tooltipTitle = $("dashboardHealthTooltipTitle"), checks = $("dashboardHealthChecks"), accessibleLabel = $("dashboardHealthAccessibleLabel");
   if (!indicator || !tooltipTitle || !checks || !accessibleLabel) return;
@@ -3730,7 +3745,12 @@ function renderPlatformHealth(payload) {
     container.append(message);
     return;
   }
-  for (const [key, component] of Object.entries(components)) {
+  // The popout derives its grouped presentation from component_model. Keep
+  // the component section on that same canonical inventory order as well.
+  for (const [key, component] of orderedPlatformComponentEntries(
+    components,
+    latestPlatformHealth?.component_model,
+  )) {
     const item = document.createElement("article"),
       indicator = document.createElement("span"),
       name = document.createElement("span"),
diff --git a/tests/engineering/dashboard.spec.mjs b/tests/engineering/dashboard.spec.mjs
index 23987cf1..900c2002 100644
--- a/tests/engineering/dashboard.spec.mjs
+++ b/tests/engineering/dashboard.spec.mjs
@@ -10409,6 +10409,16 @@ test.describe("Engineering Status browser smoke", () => {
     const card = page.locator("#platformHealth .platform-health__component").filter({ hasText: "EP-server" });
     await expect(card).toHaveAttribute("data-health", "true");
     await expect(card).not.toContainText("Inbox-watcher");
+    await expect(page.locator("#platformHealth .platform-health__component-name")).toHaveText([
+      "EP-server",
+      "Platformdatabase",
+      "Lifecycle Worker",
+      "Operations Console",
+      "Server Relay↗",
+      "HTTP/API-ingang",
+      "CLI-ingang",
+      "Bestandsinbox-ingang",
+    ]);
   });
 
   test("opens canonical ingress details from the status popout", async ({ page }) => {