Add energy validation UI

src/common/util/group-by.ts

@@ -0,0 +1,15 @@
+export const groupBy = <T>(
+  list: T[],
+  keySelector: (item: T) => string
+): { [key: string]: T[] } => {
+  const result = {};
+  for (const item of list) {
+    const key = keySelector(item);
+    if (key in result) {
+      result[key].push(item);
+    } else {
+      result[key] = [item];
+    }
+  }
+  return result;
+};

src/data/energy.ts

@@ -6,6 +6,7 @@ import {
   startOfYesterday,
 } from "date-fns";
 import { Collection, getCollection } from "home-assistant-js-websocket";
+import { groupBy } from "../common/util/group-by";
 import { subscribeOne } from "../common/util/subscribe-one";
 import { HomeAssistant } from "../types";
 import { ConfigEntry, getConfigEntries } from "./config_entries";
@@ -144,11 +145,27 @@ export interface EnergyInfo {
   cost_sensors: Record<string, string>;
 }
 
+export interface EnergyValidationIssue {
+  type: string;
+  identifier: string;
+  value?: unknown;
+}
+
+export interface EnergyPreferencesValidation {
+  energy_sources: EnergyValidationIssue[][];
+  device_consumption: EnergyValidationIssue[][];
+}
+
 export const getEnergyInfo = (hass: HomeAssistant) =>
   hass.callWS<EnergyInfo>({
     type: "energy/info",
   });
 
+export const getEnergyPreferenceValidation = (hass: HomeAssistant) =>
+  hass.callWS<EnergyPreferencesValidation>({
+    type: "energy/validate",
+  });
+
 export const getEnergyPreferences = (hass: HomeAssistant) =>
   hass.callWS<EnergyPreferences>({
     type: "energy/get_prefs",
@@ -173,17 +190,8 @@ interface EnergySourceByType {
   gas?: GasSourceTypeEnergyPreference[];
 }
 
-export const energySourcesByType = (prefs: EnergyPreferences) => {
-  const types: EnergySourceByType = {};
-  for (const source of prefs.energy_sources) {
-    if (source.type in types) {
-      types[source.type]!.push(source as any);
-    } else {
-      types[source.type] = [source as any];
-    }
-  }
-  return types;
-};
+export const energySourcesByType = (prefs: EnergyPreferences) =>
+  groupBy(prefs.energy_sources, (item) => item.type) as EnergySourceByType;
 
 export interface EnergyData {
   start: Date;

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

@@ -10,7 +10,8 @@ import "../../../../components/ha-settings-row";
 import {
   BatterySourceTypeEnergyPreference,
   EnergyPreferences,
-  energySourcesByType,
+  EnergyPreferencesValidation,
+  EnergyValidationIssue,
   saveEnergyPreferences,
 } from "../../../../data/energy";
 import {
@@ -21,6 +22,7 @@ import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { documentationUrl } from "../../../../util/documentation-url";
 import { showEnergySettingsBatteryDialog } from "../dialogs/show-dialogs-energy";
+import "./ha-energy-validation-result";
 import { energyCardStyles } from "./styles";
 
 @customElement("ha-energy-battery-settings")
@@ -30,10 +32,23 @@ export class EnergyBatterySettings extends LitElement {
   @property({ attribute: false })
   public preferences!: EnergyPreferences;
 
+  @property({ attribute: false })
+  public validationResult?: EnergyPreferencesValidation;
+
   protected render(): TemplateResult {
-    const types = energySourcesByType(this.preferences);
+    const batterySources: BatterySourceTypeEnergyPreference[] = [];
+    const batteryValidation: EnergyValidationIssue[][] = [];
 
-    const batterySources = types.battery || [];
+    this.preferences.energy_sources.forEach((source, idx) => {
+      if (source.type !== "battery") {
+        return;
+      }
+      batterySources.push(source);
+
+      if (this.validationResult) {
+        batteryValidation.push(this.validationResult.energy_sources[idx]);
+      }
+    });
 
     return html`
       <ha-card>
@@ -54,6 +69,16 @@ export class EnergyBatterySettings extends LitElement {
               )}</a
             >
           </p>
+          ${batteryValidation.map(
+            (result) =>
+              html`
+                <ha-energy-validation-result
+                  .hass=${this.hass}
+                  .issues=${result}
+                ></ha-energy-validation-result>
+              `
+          )}
+
           <h3>Battery systems</h3>
           ${batterySources.map((source) => {
             const fromEntityState = this.hass.states[source.stat_energy_from];

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

@@ -9,6 +9,7 @@ import "../../../../components/ha-card";
 import {
   DeviceConsumptionEnergyPreference,
   EnergyPreferences,
+  EnergyPreferencesValidation,
   saveEnergyPreferences,
 } from "../../../../data/energy";
 import {
@@ -19,6 +20,7 @@ import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { documentationUrl } from "../../../../util/documentation-url";
 import { showEnergySettingsDeviceDialog } from "../dialogs/show-dialogs-energy";
+import "./ha-energy-validation-result";
 import { energyCardStyles } from "./styles";
 
 @customElement("ha-energy-device-settings")
@@ -28,6 +30,9 @@ export class EnergyDeviceSettings extends LitElement {
   @property({ attribute: false })
   public preferences!: EnergyPreferences;
 
+  @property({ attribute: false })
+  public validationResult?: EnergyPreferencesValidation;
+
   protected render(): TemplateResult {
     return html`
       <ha-card>
@@ -55,6 +60,15 @@ export class EnergyDeviceSettings extends LitElement {
               )}</a
             >
           </p>
+          ${this.validationResult?.device_consumption.map(
+            (result) =>
+              html`
+                <ha-energy-validation-result
+                  .hass=${this.hass}
+                  .issues=${result}
+                ></ha-energy-validation-result>
+              `
+          )}
           <h3>Devices</h3>
           ${this.preferences.device_consumption.map((device) => {
             const entityState = this.hass.states[device.stat_consumption];

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

@@ -7,9 +7,10 @@ import { computeStateName } from "../../../../common/entity/compute_state_name";
 import "../../../../components/ha-card";
 import {
   EnergyPreferences,
-  energySourcesByType,
   saveEnergyPreferences,
   GasSourceTypeEnergyPreference,
+  EnergyPreferencesValidation,
+  EnergyValidationIssue,
 } from "../../../../data/energy";
 import {
   showConfirmationDialog,
@@ -19,6 +20,7 @@ import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { documentationUrl } from "../../../../util/documentation-url";
 import { showEnergySettingsGasDialog } from "../dialogs/show-dialogs-energy";
+import "./ha-energy-validation-result";
 import { energyCardStyles } from "./styles";
 
 @customElement("ha-energy-gas-settings")
@@ -28,10 +30,23 @@ export class EnergyGasSettings extends LitElement {
   @property({ attribute: false })
   public preferences!: EnergyPreferences;
 
+  @property({ attribute: false })
+  public validationResult?: EnergyPreferencesValidation;
+
   protected render(): TemplateResult {
-    const types = energySourcesByType(this.preferences);
+    const gasSources: GasSourceTypeEnergyPreference[] = [];
+    const gasValidation: EnergyValidationIssue[][] = [];
 
-    const gasSources = types.gas || [];
+    this.preferences.energy_sources.forEach((source, idx) => {
+      if (source.type !== "gas") {
+        return;
+      }
+      gasSources.push(source);
+
+      if (this.validationResult) {
+        gasValidation.push(this.validationResult.energy_sources[idx]);
+      }
+    });
 
     return html`
       <ha-card>
@@ -50,6 +65,15 @@ export class EnergyGasSettings extends LitElement {
               >${this.hass.localize("ui.panel.config.energy.gas.learn_more")}</a
             >
           </p>
+          ${gasValidation.map(
+            (result) =>
+              html`
+                <ha-energy-validation-result
+                  .hass=${this.hass}
+                  .issues=${result}
+                ></ha-energy-validation-result>
+              `
+          )}
           <h3>Gas consumption</h3>
           ${gasSources.map((source) => {
             const entityState = this.hass.states[source.stat_energy_from];

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

@@ -19,7 +19,9 @@ import {
 import {
   emptyGridSourceEnergyPreference,
   EnergyPreferences,
+  EnergyPreferencesValidation,
   energySourcesByType,
+  EnergyValidationIssue,
   FlowFromGridSourceEnergyPreference,
   FlowToGridSourceEnergyPreference,
   GridSourceTypeEnergyPreference,
@@ -38,6 +40,7 @@ import {
   showEnergySettingsGridFlowFromDialog,
   showEnergySettingsGridFlowToDialog,
 } from "../dialogs/show-dialogs-energy";
+import "./ha-energy-validation-result";
 import { energyCardStyles } from "./styles";
 
 @customElement("ha-energy-grid-settings")
@@ -47,18 +50,33 @@ export class EnergyGridSettings extends LitElement {
   @property({ attribute: false })
   public preferences!: EnergyPreferences;
 
+  @property({ attribute: false })
+  public validationResult?: EnergyPreferencesValidation;
+
   @state() private _configEntries?: ConfigEntry[];
 
   protected firstUpdated() {
     this._fetchCO2SignalConfigEntries();
   }
 
   protected render(): TemplateResult {
-    const types = energySourcesByType(this.preferences);
+    const gridIdx = this.preferences.energy_sources.findIndex(
+      (source) => source.type === "grid"
+    );
 
-    const gridSource = types.grid
-      ? types.grid[0]
-      : emptyGridSourceEnergyPreference();
+    let gridSource: GridSourceTypeEnergyPreference;
+    let gridValidation: EnergyValidationIssue[] | undefined;
+
+    if (gridIdx === -1) {
+      gridSource = emptyGridSourceEnergyPreference();
+    } else {
+      gridSource = this.preferences.energy_sources[
+        gridIdx
+      ] as GridSourceTypeEnergyPreference;
+      if (this.validationResult) {
+        gridValidation = this.validationResult.energy_sources[gridIdx];
+      }
+    }
 
     return html`
       <ha-card>
@@ -82,6 +100,15 @@ export class EnergyGridSettings extends LitElement {
               )}</a
             >
           </p>
+          ${gridValidation
+            ? html`
+                <ha-energy-validation-result
+                  .hass=${this.hass}
+                  .issues=${gridValidation}
+                ></ha-energy-validation-result>
+              `
+            : ""}
+
           <h3>Grid consumption</h3>
           ${gridSource.flow_from.map((flow) => {
             const entityState = this.hass.states[flow.stat_energy_from];

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

@@ -7,7 +7,8 @@ import { computeStateName } from "../../../../common/entity/compute_state_name";
 import "../../../../components/ha-card";
 import {
   EnergyPreferences,
-  energySourcesByType,
+  EnergyPreferencesValidation,
+  EnergyValidationIssue,
   saveEnergyPreferences,
   SolarSourceTypeEnergyPreference,
 } from "../../../../data/energy";
@@ -19,6 +20,7 @@ import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { documentationUrl } from "../../../../util/documentation-url";
 import { showEnergySettingsSolarDialog } from "../dialogs/show-dialogs-energy";
+import "./ha-energy-validation-result";
 import { energyCardStyles } from "./styles";
 
 @customElement("ha-energy-solar-settings")
@@ -28,10 +30,23 @@ export class EnergySolarSettings extends LitElement {
   @property({ attribute: false })
   public preferences!: EnergyPreferences;
 
+  @property({ attribute: false })
+  public validationResult?: EnergyPreferencesValidation;
+
   protected render(): TemplateResult {
-    const types = energySourcesByType(this.preferences);
+    const solarSources: SolarSourceTypeEnergyPreference[] = [];
+    const solarValidation: EnergyValidationIssue[][] = [];
 
-    const solarSources = types.solar || [];
+    this.preferences.energy_sources.forEach((source, idx) => {
+      if (source.type !== "solar") {
+        return;
+      }
+      solarSources.push(source);
+
+      if (this.validationResult) {
+        solarValidation.push(this.validationResult.energy_sources[idx]);
+      }
+    });
 
     return html`
       <ha-card>
@@ -55,6 +70,16 @@ export class EnergySolarSettings extends LitElement {
               )}</a
             >
           </p>
+          ${solarValidation.map(
+            (result) =>
+              html`
+                <ha-energy-validation-result
+                  .hass=${this.hass}
+                  .issues=${result}
+                ></ha-energy-validation-result>
+              `
+          )}
+
           <h3>Solar production</h3>
           ${solarSources.map((source) => {
             const entityState = this.hass.states[source.stat_energy_from];