Highlight problematic devices in Energy Dashboard list (#52088)

Author: MindFreeze

src/panels/config/energy/components/ha-energy-device-settings-water.ts

@@ -1,12 +1,13 @@
 import {
+  mdiAlertCircle,
   mdiDelete,
   mdiWater,
   mdiDragHorizontalVariant,
   mdiPencil,
   mdiPlus,
 } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { repeat } from "lit/directives/repeat";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -15,10 +16,12 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-tooltip";
 import type {
   DeviceConsumptionEnergyPreference,
   EnergyPreferences,
   EnergyPreferencesValidation,
+  EnergyValidationIssue,
 } from "../../../../data/energy";
 import { saveEnergyPreferences } from "../../../../data/energy";
 import type { StatisticsMetaData } from "../../../../data/recorder";
@@ -93,7 +96,7 @@ export class EnergyDeviceSettingsWater extends LitElement {
                       ${repeat(
                         this.preferences.device_consumption_water,
                         (device) => device.stat_consumption,
-                        (device) => html`
+                        (device, index) => html`
                           <div class="row" .device=${device}>
                             <div class="handle">
                               <ha-svg-icon
@@ -108,6 +111,12 @@ export class EnergyDeviceSettingsWater extends LitElement {
                                 this.statsMetadata?.[device.stat_consumption]
                               )}</span
                             >
+                            ${this._renderIssueIndicator(
+                              this.validationResult?.device_consumption_water[
+                                index
+                              ],
+                              index
+                            )}
                             <ha-icon-button
                               .label=${this.hass.localize("ui.common.edit")}
                               @click=${this._editDevice}
@@ -144,6 +153,31 @@ export class EnergyDeviceSettingsWater extends LitElement {
     `;
   }
 
+  private _renderIssueIndicator(
+    issues: EnergyValidationIssue[] | undefined,
+    index: number
+  ) {
+    if (!issues?.length) {
+      return nothing;
+    }
+    const titles = issues.map(
+      (issue) =>
+        this.hass.localize(`component.energy.issues.${issue.type}.title`) ||
+        issue.type
+    );
+    const label = titles.join("\n");
+    const id = `issue-icon-${index}`;
+    return html`
+      <ha-svg-icon
+        id=${id}
+        class="issue-icon"
+        .path=${mdiAlertCircle}
+        aria-label=${label}
+      ></ha-svg-icon>
+      <ha-tooltip .for=${id} placement="top">${label}</ha-tooltip>
+    `;
+  }
+
   private _itemMoved(ev: CustomEvent): void {
     ev.stopPropagation();
     const { oldIndex, newIndex } = ev.detail;
@@ -248,6 +282,9 @@ export class EnergyDeviceSettingsWater extends LitElement {
           cursor: move; /* fallback if grab cursor is unsupported */
           cursor: grab;
         }
+        .issue-icon {
+          color: var(--warning-color);
+        }
       `,
     ];
   }

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -1,12 +1,13 @@
 import {
+  mdiAlertCircle,
   mdiDelete,
   mdiDevices,
   mdiDragHorizontalVariant,
   mdiPencil,
   mdiPlus,
 } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { repeat } from "lit/directives/repeat";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -15,10 +16,12 @@ import "../../../../components/ha-button";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-tooltip";
 import type {
   DeviceConsumptionEnergyPreference,
   EnergyPreferences,
   EnergyPreferencesValidation,
+  EnergyValidationIssue,
 } from "../../../../data/energy";
 import { saveEnergyPreferences } from "../../../../data/energy";
 import type { StatisticsMetaData } from "../../../../data/recorder";
@@ -93,7 +96,7 @@ export class EnergyDeviceSettings extends LitElement {
                       ${repeat(
                         this.preferences.device_consumption,
                         (device) => device.stat_consumption,
-                        (device) => html`
+                        (device, index) => html`
                           <div class="row" .device=${device}>
                             <div class="handle">
                               <ha-svg-icon
@@ -108,6 +111,10 @@ export class EnergyDeviceSettings extends LitElement {
                                 this.statsMetadata?.[device.stat_consumption]
                               )}</span
                             >
+                            ${this._renderIssueIndicator(
+                              this.validationResult?.device_consumption[index],
+                              index
+                            )}
                             <ha-icon-button
                               .label=${this.hass.localize("ui.common.edit")}
                               @click=${this._editDevice}
@@ -144,6 +151,31 @@ export class EnergyDeviceSettings extends LitElement {
     `;
   }
 
+  private _renderIssueIndicator(
+    issues: EnergyValidationIssue[] | undefined,
+    index: number
+  ) {
+    if (!issues?.length) {
+      return nothing;
+    }
+    const titles = issues.map(
+      (issue) =>
+        this.hass.localize(`component.energy.issues.${issue.type}.title`) ||
+        issue.type
+    );
+    const label = titles.join("\n");
+    const id = `issue-icon-${index}`;
+    return html`
+      <ha-svg-icon
+        id=${id}
+        class="issue-icon"
+        .path=${mdiAlertCircle}
+        aria-label=${label}
+      ></ha-svg-icon>
+      <ha-tooltip .for=${id} placement="top">${label}</ha-tooltip>
+    `;
+  }
+
   private _itemMoved(ev: CustomEvent): void {
     ev.stopPropagation();
     const { oldIndex, newIndex } = ev.detail;
@@ -244,6 +276,9 @@ export class EnergyDeviceSettings extends LitElement {
           cursor: move; /* fallback if grab cursor is unsupported */
           cursor: grab;
         }
+        .issue-icon {
+          color: var(--warning-color);
+        }
       `,
     ];
   }