From 9b7383de05981ae9c8337e7dcc36ae6fee66f7eb Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Thu, 2 Mar 2023 17:04:33 +0100
Subject: [PATCH] add debounce to log filters

---
 .../settings/logviewer/workspace/logviewer.context.ts  | 10 +++++-----
 .../logviewer/workspace/views/log-search.element.ts    |  8 ++++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts
index cb3500e148..70c9d1b5f2 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts
@@ -88,7 +88,7 @@ export class UmbLogViewerWorkspaceContext {
 
 	#intervalID: number | null = null;
 
-	#currentPage = 1;
+	currentPage = 1;
 
 	constructor(host: UmbControllerHostInterface) {
 		this.#host = host;
@@ -136,11 +136,11 @@ export class UmbLogViewerWorkspaceContext {
 	}
 
 	setCurrentPage(page: number) {
-		this.#currentPage = page;
+		this.currentPage = page;
 	}
 
-	async getLogs() {
-		const skip = (this.#currentPage - 1) * 100;
+	getLogs = async () => {
+		const skip = (this.currentPage - 1) * 100;
 		const take = 100;
 
 		const options = {
@@ -157,7 +157,7 @@ export class UmbLogViewerWorkspaceContext {
 		if (data) {
 			this.#logs.next(data);
 		}
-	}
+	};
 
 	setFilterExpression(query: string) {
 		this.#filterExpression.next(query);
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-search.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-search.element.ts
index 7b109ff5e2..62a4bfd827 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-search.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-search.element.ts
@@ -18,6 +18,7 @@ import {
 	UUIScrollContainerElement,
 	UUISymbolExpandElement,
 } from '@umbraco-ui/uui';
+import _ from 'lodash';
 
 @customElement('umb-log-viewer-search-view')
 export class UmbLogViewerSearchViewElement extends UmbLitElement {
@@ -377,13 +378,16 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
 	}
 
 	#setLogLevel() {
+		if (!this.#logViewerContext) return;
 		const logLevels = Array.from(this._logLevelSelectorCheckboxes)
 			.filter((checkbox) => checkbox.checked)
 			.map((checkbox) => checkbox.value as LogLevelModel);
 		this.#logViewerContext?.setLogLevels(logLevels);
-		this.#logViewerContext?.getLogs();
+		this.#logViewerContext.getLogs();
 	}
 
+	setLogLevelDebounce = _.debounce(this.#setLogLevel, 300);
+
 	#selectAllLogLevels() {
 		this._logLevelSelectorCheckboxes.forEach((checkbox) => (checkbox.checked = true));
 		this.#setLogLevel();
@@ -396,7 +400,7 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
 
 	#renderLogLevelSelector() {
 		return html`
-			<div slot="dropdown" id="log-level-selector" @change=${this.#setLogLevel}>
+			<div slot="dropdown" id="log-level-selector" @change=${this.setLogLevelDebounce}>
 				${Object.values(LogLevelModel).map(
 					(logLevel) =>
 						html`<uui-checkbox class="log-level-menu-item" .value=${logLevel} label="${logLevel}"