Add entity filter to history panel (#7401)

src/data/history.ts

@@ -85,11 +85,14 @@ export const fetchRecent = (
 export const fetchDate = (
   hass: HomeAssistant,
   startTime: Date,
-  endTime: Date
+  endTime: Date,
+  entityId
 ): Promise<HassEntity[][]> => {
   return hass.callApi(
     "GET",
-    `history/period/${startTime.toISOString()}?end_time=${endTime.toISOString()}&minimal_response`
+    `history/period/${startTime.toISOString()}?end_time=${endTime.toISOString()}&minimal_response${
+      entityId ? `&filter_entity_id=${entityId}` : ``
+    }`
   );
 };
 

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

@@ -16,6 +16,7 @@ import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
 import "../../components/ha-date-range-picker";
+import "../../components/entity/ha-entity-picker";
 import { fetchDate, computeHistory } from "../../data/history";
 import "../../components/ha-circular-progress";
 
@@ -77,6 +78,16 @@ class HaPanelHistory extends LitElement {
               .ranges=${this._ranges}
               @change=${this._dateRangeChanged}
             ></ha-date-range-picker>
+
+            <ha-entity-picker
+              .hass=${this.hass}
+              .value=${this._entityId}
+              .label=${this.hass.localize(
+                "ui.components.entity.entity-picker.entity"
+              )}
+              .disabled=${this._isLoading}
+              @change=${this._entityPicked}
+            ></ha-entity-picker>
           </div>
           ${this._isLoading
             ? html`<div class="progress-wrapper">
@@ -170,7 +181,8 @@ class HaPanelHistory extends LitElement {
     const dateHistory = await fetchDate(
       this.hass,
       this._startDate,
-      this._endDate
+      this._endDate,
+      this._entityId
     );
     this._stateHistory = computeHistory(
       this.hass,
@@ -191,6 +203,10 @@ class HaPanelHistory extends LitElement {
     this._endDate = endDate;
   }
 
+  private _entityPicked(ev) {
+    this._entityId = ev.target.value;
+  }
+
   static get styles() {
     return [
       haStyle,
@@ -211,12 +227,32 @@ class HaPanelHistory extends LitElement {
           position: relative;
         }
 
+        ha-date-range-picker {
+          margin-right: 16px;
+          max-width: 100%;
+        }
+
+        :host([narrow]) ha-date-range-picker {
+          margin-right: 0;
+        }
+
         ha-circular-progress {
           position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%, -50%);
         }
+
+        ha-entity-picker {
+          display: inline-block;
+          flex-grow: 1;
+          max-width: 400px;
+        }
+
+        :host([narrow]) ha-entity-picker {
+          max-width: none;
+          width: 100%;
+        }
       `,
     ];
   }

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

@@ -327,9 +327,6 @@ export class HaPanelLogbook extends LitElement {
           display: inline-block;
           flex-grow: 1;
           max-width: 400px;
-          --paper-input-suffix: {
-            height: 24px;
-          }
         }
 
         :host([narrow]) ha-entity-picker {