Add logbook to device info page (#12714)

src/panels/config/devices/ha-config-device-page.ts

@@ -63,6 +63,7 @@ import {
   loadDeviceRegistryDetailDialog,
   showDeviceRegistryDetailDialog,
 } from "./device-registry-detail/show-dialog-device-registry-detail";
+import "../../logbook/ha-logbook";
 
 export interface EntityRegistryStateEntry extends EntityRegistryEntry {
   stateName?: string | null;
@@ -99,6 +100,8 @@ export class HaConfigDevicePage extends LitElement {
 
   @state() private _deleteButtons?: (TemplateResult | string)[];
 
+  private _logbookTime = { recent: 86400 };
+
   private _device = memoizeOne(
     (
       deviceId: string,
@@ -131,6 +134,11 @@ export class HaConfigDevicePage extends LitElement {
         )
   );
 
+  private _entityIds = memoizeOne(
+    (entries: EntityRegistryStateEntry[]): string[] =>
+      entries.map((entry) => entry.entity_id)
+  );
+
   private _entitiesByCategory = memoizeOne(
     (entities: EntityRegistryEntry[]) => {
       const result = groupBy(entities, (entry) =>
@@ -574,6 +582,25 @@ export class HaConfigDevicePage extends LitElement {
                   `
                 : ""
             )}
+            ${
+              isComponentLoaded(this.hass, "logbook")
+                ? html`
+                    <ha-card outlined>
+                      <h1 class="card-header">
+                        ${this.hass.localize("panel.logbook")}
+                      </h1>
+                      <ha-logbook
+                        .hass=${this.hass}
+                        .time=${this._logbookTime}
+                        .entityId=${this._entityIds(entities)}
+                        virtualize
+                        narrow
+                        no-icon
+                      ></ha-logbook>
+                    </ha-card>
+                  `
+                : ""
+            }
           </div>
           <div class="column">
             ${
@@ -1228,6 +1255,13 @@ export class HaConfigDevicePage extends LitElement {
         .items {
           padding-bottom: 16px;
         }
+
+        ha-logbook {
+          height: 400px;
+        }
+        :host([narrow]) ha-logbook {
+          height: 235px;
+        }
       `,
     ];
   }

src/panels/logbook/ha-logbook.ts

@@ -173,25 +173,34 @@ export class HaLogbook extends LitElement {
       endTime = new Date();
     }
 
-    this._updateUsers();
+    const entityIdFilter = this.entityId
-    if (this.hass.user?.is_admin) {
+      ? ensureArray(this.entityId)
-      this._updateTraceContexts();
+      : undefined;
-    }
 
     let newEntries: LogbookEntry[];
 
-    try {
+    if (entityIdFilter?.length === 0) {
-      newEntries = await getLogbookData(
+      // filtering by 0 entities, means we never can have any results
-        this.hass,
+      newEntries = [];
-        startTime.toISOString(),
+    } else {
-        endTime.toISOString(),
+      this._updateUsers();
-        this.entityId ? ensureArray(this.entityId).toString() : undefined
+      if (this.hass.user?.is_admin) {
-      );
+        this._updateTraceContexts();
-    } catch (err: any) {
+      }
-      if (renderId === this._renderId) {
+
-        this._error = err.message;
+      try {
+        newEntries = await getLogbookData(
+          this.hass,
+          startTime.toISOString(),
+          endTime.toISOString(),
+          entityIdFilter ? entityIdFilter.toString() : undefined
+        );
+      } catch (err: any) {
+        if (renderId === this._renderId) {
+          this._error = err.message;
+        }
+        return;
       }
-      return;
     }
 
     // New render happening.
@@ -243,8 +252,11 @@ export class HaLogbook extends LitElement {
   static get styles() {
     return [
       css`
-        :host([virtualize]) {
+        :host {
           display: block;
+        }
+
+        :host([virtualize]) {
           height: 100%;
         }