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