Fix searching in hassio logs (#12560)

src/panels/config/logs/error-log-card.ts

@@ -21,6 +21,7 @@ import { fetchErrorLog } from "../../../data/error_log";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import { fetchHassioLogs } from "../../../data/hassio/supervisor";
 import { HomeAssistant } from "../../../types";
+import { debounce } from "../../../common/util/debounce";
 
 @customElement("error-log-card")
 class ErrorLogCard extends LitElement {
@@ -76,6 +77,12 @@ class ErrorLogCard extends LitElement {
     `;
   }
 
+  private _debounceSearch = debounce(
+    () => (this._isLogLoaded ? this._refreshLogs() : this._debounceSearch()),
+    150,
+    false
+  );
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
@@ -93,11 +100,15 @@ class ErrorLogCard extends LitElement {
     }
 
     if (
-      (changedProps.has("filter") && this._isLogLoaded) ||
       (changedProps.has("show") && this.show) ||
       (changedProps.has("provider") && this.show)
     ) {
       this._refreshLogs();
+      return;
+    }
+
+    if (changedProps.has("filter")) {
+      this._debounceSearch();
     }
   }
 
@@ -116,6 +127,18 @@ class ErrorLogCard extends LitElement {
     if (isComponentLoaded(this.hass, "hassio")) {
       try {
         log = await fetchHassioLogs(this.hass, this.provider);
+        if (this.filter) {
+          log = log
+            .split("\n")
+            .filter((entry) =>
+              entry.toLowerCase().includes(this.filter.toLowerCase())
+            )
+            .join("\n");
+        }
+        if (!log) {
+          this._logHTML = this.hass.localize("ui.panel.config.logs.no_errors");
+          return;
+        }
         this._logHTML = html`<ha-ansi-to-html .content=${log}>
         </ha-ansi-to-html>`;
         this._isLogLoaded = true;
@@ -136,16 +159,18 @@ class ErrorLogCard extends LitElement {
 
     this._isLogLoaded = true;
 
-    this._logHTML = log
+    const split = log && log.split("\n");
-      ? log
+
-          .split("\n")
+    this._logHTML = split
-          .filter((entry) => {
+      ? (this.filter
+          ? split.filter((entry) => {
               if (this.filter) {
                 return entry.toLowerCase().includes(this.filter.toLowerCase());
               }
               return entry;
             })
-          .map((entry) => {
+          : split
+        ).map((entry) => {
           if (entry.includes("INFO"))
             return html`<div class="info">${entry}</div>`;