Add refresh button to history panel (#9958)

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

@@ -1,23 +1,24 @@
+import { mdiRefresh } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
+import {
+  addDays,
+  endOfToday,
+  endOfWeek,
+  endOfYesterday,
+  startOfToday,
+  startOfWeek,
+  startOfYesterday,
+} from "date-fns";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { property, state } from "lit/decorators";
-import {
-  startOfWeek,
-  endOfWeek,
-  startOfToday,
-  endOfToday,
-  startOfYesterday,
-  endOfYesterday,
-  addDays,
-} from "date-fns";
 import { computeRTL } from "../../common/util/compute_rtl";
+import "../../components/chart/state-history-charts";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-circular-progress";
 import "../../components/ha-date-range-picker";
 import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
 import "../../components/ha-menu-button";
-import "../../components/chart/state-history-charts";
 import { computeHistory, fetchDate } from "../../data/history";
 import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
@@ -64,6 +65,12 @@ class HaPanelHistory extends LitElement {
               .narrow=${this.narrow}
             ></ha-menu-button>
             <div main-title>${this.hass.localize("panel.history")}</div>
+            <mwc-icon-button
+              @click=${this._refreshHistory}
+              .disabled=${this._isLoading}
+            >
+              <ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
+            </mwc-icon-button>
           </app-toolbar>
         </app-header>
 
@@ -147,6 +154,10 @@ class HaPanelHistory extends LitElement {
     }
   }
 
+  private _refreshHistory() {
+    this._getHistory();
+  }
+
   private async _getHistory() {
     this._isLoading = true;
     const dateHistory = await fetchDate(