Fix the issue that logbook card doesn't translate context.user_id to name if it's a user's id. (#9383)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/dialogs/more-info/ha-more-info-logbook.ts

@@ -5,6 +5,7 @@ import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { throttle } from "../../common/util/throttle";
 import "../../components/ha-circular-progress";
 import "../../components/state-history-charts";
+import { fetchUsers } from "../../data/user";
 import { getLogbookData, LogbookEntry } from "../../data/logbook";
 import { loadTraceContexts, TraceContexts } from "../../data/trace";
 import "../../panels/logbook/ha-logbook";
@@ -22,10 +23,12 @@ export class MoreInfoLogbook extends LitElement {
 
   @state() private _traceContexts?: TraceContexts;
 
-  @state() private _persons = {};
+  @state() private _userIdToName = {};
 
   private _lastLogbookDate?: Date;
 
+  private _fetchUserPromise?: Promise<void>;
+
   private _throttleGetLogbookEntries = throttle(() => {
     this._getLogBookData();
   }, 10000);
@@ -59,7 +62,7 @@ export class MoreInfoLogbook extends LitElement {
                 .hass=${this.hass}
                 .entries=${this._logbookEntries}
                 .traceContexts=${this._traceContexts}
-                .userIdToName=${this._persons}
+                .userIdToName=${this._userIdToName}
               ></ha-logbook>
             `
           : html`<div class="no-entries">
@@ -70,7 +73,7 @@ export class MoreInfoLogbook extends LitElement {
   }
 
   protected firstUpdated(): void {
-    this._fetchPersonNames();
+    this._fetchUserPromise = this._fetchUserNames();
     this.addEventListener("click", (ev) => {
       if ((ev.composedPath()[0] as HTMLElement).tagName === "A") {
         setTimeout(() => closeDialog("ha-more-info-dialog"), 500);
@@ -125,6 +128,7 @@ export class MoreInfoLogbook extends LitElement {
         true
       ),
       loadTraceContexts(this.hass),
+      this._fetchUserPromise,
     ]);
     this._logbookEntries = this._logbookEntries
       ? [...newEntries, ...this._logbookEntries]
@@ -133,16 +137,34 @@ export class MoreInfoLogbook extends LitElement {
     this._traceContexts = traceContexts;
   }
 
-  private _fetchPersonNames() {
+  private async _fetchUserNames() {
+    const userIdToName = {};
+
+    // Start loading users
+    const userProm = this.hass.user?.is_admin && fetchUsers(this.hass);
+
+    // Process persons
     Object.values(this.hass.states).forEach((entity) => {
       if (
         entity.attributes.user_id &&
         computeStateDomain(entity) === "person"
       ) {
-        this._persons[entity.attributes.user_id] =
+        this._userIdToName[entity.attributes.user_id] =
           entity.attributes.friendly_name;
       }
     });
+
+    // Process users
+    if (userProm) {
+      const users = await userProm;
+      for (const user of users) {
+        if (!(user.id in userIdToName)) {
+          userIdToName[user.id] = user.name;
+        }
+      }
+    }
+
+    this._userIdToName = userIdToName;
   }
 
   static get styles() {

src/panels/logbook/ha-panel-logbook.ts

@@ -5,6 +5,7 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-circular-progress";
@@ -16,7 +17,6 @@ import {
   getLogbookData,
   LogbookEntry,
 } from "../../data/logbook";
-import { fetchPersons } from "../../data/person";
 import { loadTraceContexts, TraceContexts } from "../../data/trace";
 import { fetchUsers } from "../../data/user";
 import "../../layouts/ha-app-layout";
@@ -44,7 +44,7 @@ export class HaPanelLogbook extends LitElement {
 
   @state() private _ranges?: DateRangePickerRanges;
 
-  private _fetchUserDone?: Promise<unknown>;
+  private _fetchUserPromise?: Promise<void>;
 
   @state() private _userIdToName = {};
 
@@ -136,7 +136,7 @@ export class HaPanelLogbook extends LitElement {
     super.firstUpdated(changedProps);
     this.hass.loadBackendTranslation("title");
 
-    this._fetchUserDone = this._fetchUserNames();
+    this._fetchUserPromise = this._fetchUserNames();
 
     const today = new Date();
     today.setHours(0, 0, 0, 0);
@@ -198,23 +198,19 @@ export class HaPanelLogbook extends LitElement {
   private async _fetchUserNames() {
     const userIdToName = {};
 
-    // Start loading all the data
+    // Start loading users
-    const personProm = fetchPersons(this.hass);
+    const userProm = this.hass.user?.is_admin && fetchUsers(this.hass);
-    const userProm = this.hass.user!.is_admin && fetchUsers(this.hass);
 
     // Process persons
-    const persons = await personProm;
+    Object.values(this.hass.states).forEach((entity) => {
-
+      if (
-    for (const person of persons.storage) {
+        entity.attributes.user_id &&
-      if (person.user_id) {
+        computeStateDomain(entity) === "person"
-        userIdToName[person.user_id] = person.name;
+      ) {
+        this._userIdToName[entity.attributes.user_id] =
+          entity.attributes.friendly_name;
       }
-    }
+    });
-    for (const person of persons.config) {
-      if (person.user_id) {
-        userIdToName[person.user_id] = person.name;
-      }
-    }
 
     // Process users
     if (userProm) {
@@ -262,7 +258,7 @@ export class HaPanelLogbook extends LitElement {
         this._entityId
       ),
       isComponentLoaded(this.hass, "trace") ? loadTraceContexts(this.hass) : {},
-      this._fetchUserDone,
+      this._fetchUserPromise,
     ]);
 
     this._entries = entries;

src/panels/lovelace/cards/hui-logbook-card.ts

@@ -9,11 +9,12 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { throttle } from "../../../common/util/throttle";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
+import { fetchUsers } from "../../../data/user";
 import { getLogbookData, LogbookEntry } from "../../../data/logbook";
 import type { HomeAssistant } from "../../../types";
 import "../../logbook/ha-logbook";
@@ -51,18 +52,20 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
     };
   }
 
-  @property({ attribute: false }) public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _config?: LogbookCardConfig;
 
   @state() private _logbookEntries?: LogbookEntry[];
 
-  @state() private _persons = {};
-
   @state() private _configEntities?: EntityConfig[];
 
+  @state() private _userIdToName = {};
+
   private _lastLogbookDate?: Date;
 
+  private _fetchUserPromise?: Promise<void>;
+
   private _throttleGetLogbookEntries = throttle(() => {
     this._getLogBookData();
   }, 10000);
@@ -114,7 +117,7 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
   }
 
   protected firstUpdated(): void {
-    this._fetchPersonNames();
+    this._fetchUserPromise = this._fetchUserNames();
   }
 
   protected updated(changedProperties: PropertyValues) {
@@ -199,7 +202,7 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
                   virtualize
                   .hass=${this.hass}
                   .entries=${this._logbookEntries}
-                  .userIdToName=${this._persons}
+                  .userIdToName=${this._userIdToName}
                 ></ha-logbook>
               `
             : html`
@@ -229,13 +232,16 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
     const lastDate = this._lastLogbookDate || hoursToShowDate;
     const now = new Date();
 
-    const newEntries = await getLogbookData(
+    const [newEntries] = await Promise.all([
-      this.hass,
+      getLogbookData(
-      lastDate.toISOString(),
+        this.hass,
-      now.toISOString(),
+        lastDate.toISOString(),
-      this._configEntities!.map((entity) => entity.entity).toString(),
+        now.toISOString(),
-      true
+        this._configEntities!.map((entity) => entity.entity).toString(),
-    );
+        true
+      ),
+      this._fetchUserPromise,
+    ]);
 
     const logbookEntries = this._logbookEntries
       ? [...newEntries, ...this._logbookEntries]
@@ -248,20 +254,34 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
     this._lastLogbookDate = now;
   }
 
-  private _fetchPersonNames() {
+  private async _fetchUserNames() {
-    if (!this.hass) {
+    const userIdToName = {};
-      return;
-    }
 
+    // Start loading users
+    const userProm = this.hass.user?.is_admin && fetchUsers(this.hass);
+
+    // Process persons
     Object.values(this.hass!.states).forEach((entity) => {
       if (
         entity.attributes.user_id &&
         computeStateDomain(entity) === "person"
       ) {
-        this._persons[entity.attributes.user_id] =
+        this._userIdToName[entity.attributes.user_id] =
           entity.attributes.friendly_name;
       }
     });
+
+    // Process users
+    if (userProm) {
+      const users = await userProm;
+      for (const user of users) {
+        if (!(user.id in userIdToName)) {
+          userIdToName[user.id] = user.name;
+        }
+      }
+    }
+
+    this._userIdToName = userIdToName;
   }
 
   static get styles(): CSSResultGroup {