Fix Zwave Alerts on device page (#12785)

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

src/panels/config/devices/device-detail/integration-elements/zwave_js/device-alerts.ts

@@ -0,0 +1,20 @@
+import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
+import { fetchZwaveNodeComments } from "../../../../../../data/zwave_js";
+import { HomeAssistant } from "../../../../../../types";
+import { DeviceAlert } from "../../../ha-config-device-page";
+
+export const getZwaveDeviceAlerts = async (
+  hass: HomeAssistant,
+  device: DeviceRegistryEntry
+): Promise<DeviceAlert[]> => {
+  const nodeComments = await fetchZwaveNodeComments(hass, device.id);
+
+  if (!nodeComments?.comments?.length) {
+    return [];
+  }
+
+  return nodeComments.comments.map((comment) => ({
+    level: comment.level,
+    text: comment.text,
+  }));
+};

src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-alerts-zwave_js.ts

@@ -1,52 +0,0 @@
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
-import {
-  ZwaveJSNodeComments,
-  fetchZwaveNodeComments,
-} from "../../../../../../data/zwave_js";
-import { HomeAssistant } from "../../../../../../types";
-
-@customElement("ha-device-alerts-zwave_js")
-export class HaDeviceAlertsZWaveJS extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public device!: DeviceRegistryEntry;
-
-  @state() private _nodeComments?: ZwaveJSNodeComments;
-
-  protected willUpdate(changedProperties: PropertyValues) {
-    super.willUpdate(changedProperties);
-    if (changedProperties.has("device")) {
-      this._fetchNodeDetails();
-    }
-  }
-
-  private async _fetchNodeDetails() {
-    this._nodeComments = await fetchZwaveNodeComments(
-      this.hass,
-      this.device.id
-    );
-  }
-
-  protected render(): TemplateResult {
-    if (this._nodeComments && this._nodeComments.comments?.length > 0) {
-      return html`
-        <div>
-          ${this._nodeComments.comments.map(
-            (comment) => html`<ha-alert .alertType=${comment.level}>
-              ${comment.text}
-            </ha-alert>`
-          )}
-        </div>
-      `;
-    }
-    return html``;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-device-alerts-zwave_js": HaDeviceAlertsZWaveJS;
-  }
-}

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

@@ -83,6 +83,11 @@ export interface DeviceAction {
   classes?: string;
 }
 
+export interface DeviceAlert {
+  level: "warning" | "error" | "info";
+  text: string;
+}
+
 @customElement("ha-config-device-page")
 export class HaConfigDevicePage extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -114,6 +119,8 @@ export class HaConfigDevicePage extends LitElement {
 
   @state() private _deviceActions?: DeviceAction[];
 
+  @state() private _deviceAlerts?: DeviceAlert[];
+
   private _logbookTime = { recent: 86400 };
 
   private _device = memoizeOne(
@@ -215,12 +222,14 @@ export class HaConfigDevicePage extends LitElement {
       this._diagnosticDownloadLinks = undefined;
       this._deleteButtons = undefined;
       this._deviceActions = undefined;
+      this._deviceAlerts = undefined;
     }
 
     if (
       (this._diagnosticDownloadLinks &&
         this._deleteButtons &&
-        this._deviceActions) ||
+        this._deviceActions &&
+        this._deviceAlerts) ||
       !this.devices ||
       !this.deviceId ||
       !this.entries
@@ -231,9 +240,11 @@ export class HaConfigDevicePage extends LitElement {
     this._diagnosticDownloadLinks = Math.random();
     this._deleteButtons = []; // To prevent re-rendering if no delete buttons
     this._deviceActions = [];
+    this._deviceAlerts = [];
     this._getDiagnosticButtons(this._diagnosticDownloadLinks);
     this._getDeleteActions();
     this._getDeviceActions();
+    this._getDeviceAlerts();
   }
 
   protected firstUpdated(changedProps) {
@@ -279,7 +290,6 @@ export class HaConfigDevicePage extends LitElement {
     const area = this._computeArea(this.areas, device);
 
     const deviceInfo: TemplateResult[] = [];
-    const deviceAlerts: TemplateResult[] = [];
 
     const actions = [...(this._deviceActions || [])];
     if (Array.isArray(this._diagnosticDownloadLinks)) {
@@ -320,7 +330,7 @@ export class HaConfigDevicePage extends LitElement {
       );
     }
 
-    this._renderIntegrationInfo(device, integrations, deviceInfo, deviceAlerts);
+    this._renderIntegrationInfo(device, integrations, deviceInfo);
 
     return html`
       <hass-tabs-subpage
@@ -411,8 +421,19 @@ export class HaConfigDevicePage extends LitElement {
           </div>
           <div class="column">
               ${
-                deviceAlerts.length
+                this._deviceAlerts?.length
-                  ? html` <div class="fullwidth">${deviceAlerts}</div> `
+                  ? html`
+                      <div>
+                        ${this._deviceAlerts.map(
+                          (alert) =>
+                            html`
+                              <ha-alert .alertType=${alert.level}>
+                                ${alert.text}
+                              </ha-alert>
+                            `
+                        )}
+                      </div>
+                    `
                   : ""
               }
               <ha-device-info-card
@@ -976,6 +997,33 @@ export class HaConfigDevicePage extends LitElement {
     this._deviceActions = deviceActions;
   }
 
+  private async _getDeviceAlerts() {
+    const device = this._device(this.deviceId, this.devices);
+
+    if (!device) {
+      return;
+    }
+
+    const deviceAlerts: DeviceAlert[] = [];
+
+    const domains = this._integrations(device, this.entries).map(
+      (int) => int.domain
+    );
+
+    if (domains.includes("zwave_js")) {
+      const zwave = await import(
+        "./device-detail/integration-elements/zwave_js/device-alerts"
+      );
+
+      const alerts = await zwave.getZwaveDeviceAlerts(this.hass, device);
+      deviceAlerts.push(...alerts);
+    }
+
+    if (deviceAlerts.length) {
+      this._deviceAlerts = deviceAlerts;
+    }
+  }
+
   private _computeEntityName(entity: EntityRegistryEntry) {
     if (entity.name) {
       return entity.name;
@@ -1023,8 +1071,7 @@ export class HaConfigDevicePage extends LitElement {
   private _renderIntegrationInfo(
     device: DeviceRegistryEntry,
     integrations: ConfigEntry[],
-    deviceInfo: TemplateResult[],
+    deviceInfo: TemplateResult[]
-    deviceAlerts: TemplateResult[]
   ) {
     const domains = integrations.map((int) => int.domain);
     if (domains.includes("zha")) {
@@ -1037,18 +1084,9 @@ export class HaConfigDevicePage extends LitElement {
       `);
     }
     if (domains.includes("zwave_js")) {
-      import(
-        "./device-detail/integration-elements/zwave_js/ha-device-alerts-zwave_js"
-      );
       import(
         "./device-detail/integration-elements/zwave_js/ha-device-info-zwave_js"
       );
-      deviceAlerts.push(html`
-        <ha-device-alerts-zwave_js
-          .hass=${this.hass}
-          .device=${device}
-        ></ha-device-alerts-zwave_js>
-      `);
       deviceInfo.push(html`
         <ha-device-info-zwave_js
           .hass=${this.hass}