Use logbook for trace logbook items (#8773)

src/data/logbook.ts

@@ -35,14 +35,17 @@ export const getLogbookDataForContext = async (
   hass: HomeAssistant,
   startDate: string,
   contextId?: string
-) =>
-  getLogbookDataFromServer(
+): Promise<LogbookEntry[]> =>
+  addLogbookMessage(
     hass,
-    startDate,
-    undefined,
-    undefined,
-    undefined,
-    contextId
+    await getLogbookDataFromServer(
+      hass,
+      startDate,
+      undefined,
+      undefined,
+      undefined,
+      contextId
+    )
   );
 
 export const getLogbookData = async (
@@ -51,15 +54,22 @@ export const getLogbookData = async (
   endDate: string,
   entityId?: string,
   entity_matches_only?: boolean
-) => {
-  const logbookData = await getLogbookDataCache(
+): Promise<LogbookEntry[]> =>
+  addLogbookMessage(
     hass,
-    startDate,
-    endDate,
-    entityId,
-    entity_matches_only
+    await getLogbookDataCache(
+      hass,
+      startDate,
+      endDate,
+      entityId,
+      entity_matches_only
+    )
   );
 
+export const addLogbookMessage = (
+  hass: HomeAssistant,
+  logbookData: LogbookEntry[]
+): LogbookEntry[] => {
   for (const entry of logbookData) {
     const stateObj = hass!.states[entry.entity_id!];
     if (entry.state && stateObj) {
@@ -71,7 +81,6 @@ export const getLogbookData = async (
       );
     }
   }
-
   return logbookData;
 };
 

src/panels/config/automation/trace/ha-automation-trace-path-details.ts

@@ -23,6 +23,7 @@ import { formatDateTimeWithSeconds } from "../../../../common/datetime/format_da
 import { LogbookEntry } from "../../../../data/logbook";
 import { traceTabStyles } from "./styles";
 import { classMap } from "lit-html/directives/class-map";
+import "../../../logbook/ha-logbook";
 
 @customElement("ha-automation-trace-path-details")
 export class HaAutomationTracePathDetails extends LitElement {
@@ -200,13 +201,16 @@ ${safeDump(trace.changed_variables).trimRight()}</pre
       }
     }
 
-    return html`<div class="padded-box">
-      ${entries.map(
-        (entry) =>
-          html`${entry.name} (${entry.entity_id})
-            ${entry.message || `turned ${entry.state}`}<br />`
-      )}
-    </div>`;
+    return entries.length
+      ? html`<ha-logbook
+          relative-time
+          .hass=${this.hass}
+          .entries=${entries}
+          .narrow=${this.narrow}
+        ></ha-logbook>`
+      : html`<div class="padded-box">
+          No Logbook entries found for this step.
+        </div>`;
   }
 
   private _showTab(ev) {