From 792a736e4893bca332f36384e8ea7b47979909d2 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Sat, 2 Oct 2021 17:05:30 +0200
Subject: [PATCH] Fix `fix stats` callback (#10123)

* Fix `fix stats` callback

* memoize
---
 .../ha-panel-developer-tools.ts               |   2 +-
 .../statistics/developer-tools-statistics.ts  | 114 ++++++++++--------
 2 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index c8c4609515..1a218e9a24 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -102,7 +102,7 @@ class PanelDeveloperTools extends LitElement {
         }
         developer-tools-router {
           display: block;
-          height: calc(100vh - 112px);
+          height: calc(100vh - 104px);
         }
         ha-tabs {
           margin-left: max(env(safe-area-inset-left), 24px);
diff --git a/src/panels/developer-tools/statistics/developer-tools-statistics.ts b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
index ca06e42441..a8121343c4 100644
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@@ -2,6 +2,7 @@ import "@material/mwc-button/mwc-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/data-table/ha-data-table";
@@ -32,63 +33,70 @@ class HaPanelDevStatistics extends LitElement {
     this._validateStatistics();
   }
 
-  private _columns: DataTableColumnContainer = {
-    state: {
-      title: "Entity",
-      sortable: true,
-      filterable: true,
-      grows: true,
-      template: (entityState, data: any) =>
-        html`${entityState
-          ? computeStateName(entityState)
-          : data.statistic_id}`,
-    },
-    statistic_id: {
-      title: "Statistic id",
-      sortable: true,
-      filterable: true,
-      hidden: this.narrow,
-      width: "30%",
-    },
-    unit_of_measurement: {
-      title: "Unit",
-      sortable: true,
-      filterable: true,
-      width: "10%",
-    },
-    issues: {
-      title: "Issue",
-      sortable: true,
-      filterable: true,
-      direction: "asc",
-      width: "30%",
-      template: (issues) =>
-        html`${issues
-          ? issues.map(
-              (issue) =>
-                this.hass.localize(
-                  `ui.panel.developer-tools.tabs.statistics.issues.${issue.type}`,
-                  issue.data
-                ) || issue.type
-            )
-          : ""}`,
-    },
-    fix: {
-      title: "",
-      template: (_, data: any) =>
-        html`${data.issues
-          ? html`<mwc-button @click=${this._fixIssue} .data=${data.issues}
-              >Fix issue</mwc-button
-            >`
-          : ""}`,
-      width: "113px",
-    },
-  };
+  /* eslint-disable lit/no-template-arrow */
+  private _columns = memoizeOne(
+    (localize): DataTableColumnContainer => ({
+      state: {
+        title: "Entity",
+        sortable: true,
+        filterable: true,
+        grows: true,
+        template: (entityState, data: any) =>
+          html`${entityState
+            ? computeStateName(entityState)
+            : data.statistic_id}`,
+      },
+      statistic_id: {
+        title: "Statistic id",
+        sortable: true,
+        filterable: true,
+        hidden: this.narrow,
+        width: "30%",
+      },
+      unit_of_measurement: {
+        title: "Unit",
+        sortable: true,
+        filterable: true,
+        width: "10%",
+      },
+      issues: {
+        title: "Issue",
+        sortable: true,
+        filterable: true,
+        direction: "asc",
+        width: "30%",
+        template: (issues) =>
+          html`${issues
+            ? issues.map(
+                (issue) =>
+                  localize(
+                    `ui.panel.developer-tools.tabs.statistics.issues.${issue.type}`,
+                    issue.data
+                  ) || issue.type
+              )
+            : ""}`,
+      },
+      fix: {
+        title: "",
+        template: (_, data: any) =>
+          html`${data.issues
+            ? html`<mwc-button
+                @click=${(ev) => this._fixIssue(ev)}
+                .data=${data.issues}
+              >
+                Fix issue
+              </mwc-button>`
+            : ""}`,
+        width: "113px",
+      },
+    })
+  );
+  /* eslint-enable lit/no-template-arrow */
 
   protected render() {
     return html`
       <ha-data-table
-        .columns=${this._columns}
+        .columns=${this._columns(this.hass.localize)}
         .data=${this._data}
         noDataText="No issues found!"
         id="statistic_id"