From 8c8151be9273b339fc5f804e7f1593af1d4eebaf Mon Sep 17 00:00:00 2001
From: Philip Allgaier <mail@spacegaier.de>
Date: Tue, 20 Oct 2020 23:02:59 +0200
Subject: [PATCH] Add entity filter to history panel (#7401)

---
 src/data/history.ts                    |  7 +++--
 src/panels/history/ha-panel-history.ts | 38 +++++++++++++++++++++++++-
 src/panels/logbook/ha-panel-logbook.ts |  3 --
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/data/history.ts b/src/data/history.ts
index c5df270404..16bb07c782 100644
--- a/src/data/history.ts
+++ b/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}` : ``
+    }`
   );
 };
 
diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts
index 8b59281ad6..566aa3c0da 100644
--- a/src/panels/history/ha-panel-history.ts
+++ b/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%;
+        }
       `,
     ];
   }
diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts
index 0ac80b1cd9..87e1b1f519 100644
--- a/src/panels/logbook/ha-panel-logbook.ts
+++ b/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 {