From dae175cbbb5ccf528a917b2f644a1596ba6e27f6 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Wed, 26 Apr 2023 09:08:29 +0200
Subject: [PATCH 01/11] fix date input styling

---
 .../components/log-viewer-date-range-selector.element.ts     | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts
index 0decf728c9..6b176d8fe4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts
@@ -11,8 +11,6 @@ import { query as getQuery, path, toQueryString } from '@umbraco-cms/backoffice/
 
 @customElement('umb-log-viewer-date-range-selector')
 export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
-	
-
 	@state()
 	private _startDate = '';
 
@@ -95,7 +93,7 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
         </div>
         `;
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`
@@ -115,7 +113,6 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
 				border: none;
 				background: none;
 				width: 100%;
-				height: 100%;
 				outline: none;
 				position: relative;
 				border-bottom: 2px solid transparent;

From 332a7d46472fbccdeb8dc84545e17ba8c7335810 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Wed, 26 Apr 2023 12:39:10 +0200
Subject: [PATCH 02/11] fir error and level boxes style

---
 .../overview/log-overview-view.element.ts     | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts
index afeaf47ad0..2d01b009de 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts
@@ -7,8 +7,6 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 //TODO: add a disabled attribute to the show more button when the total number of items is correctly returned from the endpoint
 @customElement('umb-log-viewer-overview-view')
 export class UmbLogViewerOverviewViewElement extends UmbLitElement {
-	
-
 	@state()
 	private _errorCount = 0;
 
@@ -58,12 +56,12 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 							href=${`section/settings/workspace/logviewer/search/?lq=${encodeURIComponent(
 								`@Level='Fatal' or @Level='Error' or Has(@Exception)`
 							)}`}>
-							<h1 id="error-count">${this._errorCount}</h1></uui-button
+							<h2 id="error-count">${this._errorCount}</h2></uui-button
 						>
 					</uui-box>
 
 					<uui-box id="level" headline="Log level">
-						<h1 id="log-lever"><umb-log-viewer-log-level-overview></umb-log-viewer-log-level-overview></h1>
+						<h2 id="log-level"><umb-log-viewer-log-level-overview></umb-log-viewer-log-level-overview></h2>
 					</uui-box>
 
 					<umb-log-viewer-log-types-chart id="types"></umb-log-viewer-log-types-chart>
@@ -81,7 +79,7 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 			</div>
 		`;
 	}
-	
+
 	static styles = [
 		css`
 			:host {
@@ -106,7 +104,7 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 				align-self: start;
 				display: grid;
 				grid-template-columns: repeat(2, 1fr);
-				grid-template-rows: repeat(4, 1fr);
+				grid-template-rows: repeat(4, max-content);
 				gap: 20px 20px;
 			}
 
@@ -116,15 +114,21 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 
 			#errors {
 				grid-area: 2 / 1 / 3 / 2;
+				--uui-box-default-padding: 0;
+			}
+
+			#errors > uui-button {
+				width: 100%;
 			}
 
 			#level {
 				grid-area: 2 / 2 / 3 / 3;
 			}
 
-			#log-lever {
+			#log-level {
 				color: var(--uui-color-positive);
 				text-align: center;
+				margin: 0;
 			}
 
 			#types {
@@ -152,9 +156,10 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 			}
 
 			#error-count {
-				font-size: 4rem;
+				font-size: 3rem;
 				text-align: center;
 				color: var(--uui-color-danger);
+				margin: 0;
 			}
 		`,
 	];

From 908fb4da87aa8c0602d8dea3d2c5478497b4dac5 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Wed, 26 Apr 2023 13:15:56 +0200
Subject: [PATCH 03/11] fix blinking show logs

---
 .../logviewer/workspace/logviewer.context.ts  | 17 ++++---
 .../log-viewer-messages-list.element.ts       | 50 ++++++++++++-------
 .../views/search/log-search-view.element.ts   |  8 ++-
 3 files changed, 44 insertions(+), 31 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 73c793e4dd..20a633fa60 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
@@ -73,6 +73,9 @@ export class UmbLogViewerWorkspaceContext {
 	#canShowLogs = new UmbBasicState<boolean | null>(null);
 	canShowLogs = createObservablePart(this.#canShowLogs, (data) => data);
 
+	#isLoadingLogs = new UmbBasicState<boolean | null>(null);
+	isLoadingLogs = createObservablePart(this.#isLoadingLogs, (data) => data);
+
 	#filterExpression = new UmbStringState<string>('');
 	filterExpression = createObservablePart(this.#filterExpression, (data) => data);
 
@@ -86,6 +89,8 @@ export class UmbLogViewerWorkspaceContext {
 	logs = createObservablePart(this.#logs, (data) => data?.items);
 	logsTotal = createObservablePart(this.#logs, (data) => data?.total);
 
+
+
 	#polling = new UmbObjectState<PoolingCOnfig>({ enabled: false, interval: 2000 });
 	polling = createObservablePart(this.#polling, (data) => data);
 
@@ -105,13 +110,7 @@ export class UmbLogViewerWorkspaceContext {
 		this.validateLogSize();
 	}
 
-	reset() {
-		this.#logs.next({ items: [], total: 0 });
-		this.setCurrentPage(1);
-	}
-
 	onChangeState = () => {
-		this.reset();
 
 		const searchQuery = query();
 		let sanitizedQuery = '';
@@ -266,6 +265,9 @@ export class UmbLogViewerWorkspaceContext {
 			return;
 		}
 
+		this.#isLoadingLogs.next(true);
+
+
 		const skip = (this.currentPage - 1) * 100;
 		const take = 100;
 
@@ -279,9 +281,10 @@ export class UmbLogViewerWorkspaceContext {
 		};
 
 		const { data } = await this.#repository.getLogs(options);
-
+		this.#isLoadingLogs.next(false);
 		if (data) {
 			this.#logs.next(data);
+
 		}
 	};
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts
index c9c07dca5d..a69089577c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts
@@ -8,8 +8,6 @@ import { DirectionModel, LogMessageResponseModel } from '@umbraco-cms/backoffice
 
 @customElement('umb-log-viewer-messages-list')
 export class UmbLogViewerMessagesListElement extends UmbLitElement {
-	
-
 	@query('#logs-scroll-container')
 	private _logsScrollContainer!: UUIScrollContainerElement;
 
@@ -22,6 +20,9 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 	@state()
 	private _logsTotal = 0;
 
+	@state()
+	private _isLoading = true;
+
 	#logViewerContext?: UmbLogViewerWorkspaceContext;
 
 	constructor() {
@@ -40,6 +41,10 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 			this._logs = logs ?? [];
 		});
 
+		this.observe(this.#logViewerContext.isLoadingLogs, (isLoading) => {
+			this._isLoading = isLoading === null ? this._isLoading : isLoading;
+		});
+
 		this.observe(this.#logViewerContext.logsTotal, (total) => {
 			this._logsTotal = total ?? 0;
 		});
@@ -74,6 +79,24 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 		</div>`;
 	}
 
+	#renderLogs() {
+		return html`${this._logs.length > 0
+			? html` ${this._logs.map(
+					(log) => html`<umb-log-viewer-message
+						.timestamp=${log.timestamp ?? ''}
+						.level=${log.level ?? ''}
+						.renderedMessage=${log.renderedMessage ?? ''}
+						.properties=${log.properties ?? []}
+						.exception=${log.exception ?? ''}
+						.messageTemplate=${log.messageTemplate ?? ''}></umb-log-viewer-message>`
+			  )}`
+			: html`<umb-empty-state size="small"
+					><span id="empty">
+						<uui-icon name="umb:search"></uui-icon>Sorry, we cannot find what you are looking for.
+					</span></umb-empty-state
+			  >`}`;
+	}
+
 	render() {
 		return html`<uui-box>
 			<p style="font-weight: bold;">Total items: ${this._logsTotal}</p>
@@ -90,25 +113,14 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 				<div id="machine">Machine name</div>
 				<div id="message">Message</div>
 			</div>
-			${this._logs.length > 0
-				? html` ${this._logs.map(
-						(log) => html`<umb-log-viewer-message
-							.timestamp=${log.timestamp ?? ''}
-							.level=${log.level ?? ''}
-							.renderedMessage=${log.renderedMessage ?? ''}
-							.properties=${log.properties ?? []}
-							.exception=${log.exception ?? ''}
-							.messageTemplate=${log.messageTemplate ?? ''}></umb-log-viewer-message>`
-				  )}`
-				: html`<umb-empty-state size="small"
-						><span id="empty">
-							<uui-icon name="umb:search"></uui-icon>Sorry, we cannot find what you are looking for.
-						</span></umb-empty-state
-				  >`}
-			${this._renderPagination()}
+			${this._isLoading
+				? html`<umb-empty-state size="small"
+						><span id="empty"> <uui-loader-circle></uui-loader-circle>Loading log messages... </span></umb-empty-state
+				  >`
+				: html`${this.#renderLogs()}${this._renderPagination()}`}
 		</uui-box>`;
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts
index 264981edab..7258faf17c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts
@@ -7,10 +7,8 @@ import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-a
 
 @customElement('umb-log-viewer-search-view')
 export class UmbLogViewerSearchViewElement extends UmbLitElement {
-	
-
 	@state()
-	private _canShowLogs = false;
+	private _canShowLogs = true;
 
 	#logViewerContext?: UmbLogViewerWorkspaceContext;
 
@@ -29,7 +27,7 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
 		if (!this.#logViewerContext) return;
 
 		this.#canShowLogsObserver = this.observe(this.#logViewerContext.canShowLogs, (canShowLogs) => {
-			this._canShowLogs = canShowLogs ?? false;
+			this._canShowLogs = canShowLogs ?? this._canShowLogs;
 		});
 	}
 
@@ -52,7 +50,7 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
 			</div>
 		`;
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`

From 1e8f4a08fb0d7755d0ea6973942a688679b035b3 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Wed, 26 Apr 2023 13:30:43 +0200
Subject: [PATCH 04/11] remove unnecessary calls

---
 .../log-viewer-date-range-selector.element.ts       |  1 -
 .../logviewer-root-workspace.element.ts             |  1 -
 .../logviewer/workspace/logviewer.context.ts        | 13 +++----------
 .../components/log-viewer-messages-list.element.ts  |  1 -
 .../components/log-viewer-polling-button.element.ts |  1 -
 .../components/log-viewer-search-input.element.ts   |  1 -
 6 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts
index 6b176d8fe4..10ca4d2af0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts
@@ -29,7 +29,6 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
 		this.addEventListener('input', this.#setDates);
 		this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
 			this.#logViewerContext = instance;
-			this.#logViewerContext?.getMessageTemplates(0, 10);
 			this.#observeStuff();
 		});
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts
index c4cb6d4dcf..7fb665c0f0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts
@@ -34,7 +34,6 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement {
 
 	constructor() {
 		super();
-		this.#logViewerContext.init();
 		this.provideContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, this.#logViewerContext);
 	}
 
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 20a633fa60..25d87cd4d6 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
@@ -89,8 +89,6 @@ export class UmbLogViewerWorkspaceContext {
 	logs = createObservablePart(this.#logs, (data) => data?.items);
 	logsTotal = createObservablePart(this.#logs, (data) => data?.total);
 
-
-
 	#polling = new UmbObjectState<PoolingCOnfig>({ enabled: false, interval: 2000 });
 	polling = createObservablePart(this.#polling, (data) => data);
 
@@ -106,12 +104,7 @@ export class UmbLogViewerWorkspaceContext {
 		this.#repository = new UmbLogViewerRepository(this.#host);
 	}
 
-	async init() {
-		this.validateLogSize();
-	}
-
 	onChangeState = () => {
-
 		const searchQuery = query();
 		let sanitizedQuery = '';
 		if (searchQuery.lq) {
@@ -261,13 +254,14 @@ export class UmbLogViewerWorkspaceContext {
 	}
 
 	getLogs = async () => {
-		if (!this.#canShowLogs.getValue()) {
+		console.trace('getLogs');
+
+		if (this.#canShowLogs.getValue() === false) {
 			return;
 		}
 
 		this.#isLoadingLogs.next(true);
 
-
 		const skip = (this.currentPage - 1) * 100;
 		const take = 100;
 
@@ -284,7 +278,6 @@ export class UmbLogViewerWorkspaceContext {
 		this.#isLoadingLogs.next(false);
 		if (data) {
 			this.#logs.next(data);
-
 		}
 	};
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts
index a69089577c..6bc5e0fba8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts
@@ -30,7 +30,6 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 		this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
 			this.#logViewerContext = instance;
 			this.#observeLogs();
-			this.#logViewerContext.getLogs();
 		});
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts
index 62cfe8b83f..7b019c0c64 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts
@@ -32,7 +32,6 @@ export class UmbLogViewerPollingButtonElement extends UmbLitElement {
 		this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
 			this.#logViewerContext = instance;
 			this.#observePoolingConfig();
-			this.#logViewerContext.getLogs();
 		});
 	}
 
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
index 6a4fd30c3d..f73bc43a7c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
@@ -58,7 +58,6 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 			this.#logViewerContext = instance;
 			this.#observeStuff();
 			this.#logViewerContext?.getSavedSearches();
-			this.#logViewerContext.getLogs();
 		});
 
 		this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => {

From 66443ff62eec2bce3de7a81429a7ceed019da14a Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Wed, 26 Apr 2023 14:58:54 +0200
Subject: [PATCH 05/11] fixed saved searches deletion

---
 .../components/log-viewer-search-input.element.ts   | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
index f73bc43a7c..8885f72a45 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
@@ -29,8 +29,6 @@ export const UMB_LOG_VIEWER_SAVE_SEARCH_MODAL = new UmbModalToken<UmbContextSave
 
 @customElement('umb-log-viewer-search-input')
 export class UmbLogViewerSearchInputElement extends UmbLitElement {
-	
-
 	@query('#saved-searches-popover')
 	private _savedSearchesPopover!: UUIPopoverElement;
 
@@ -133,9 +131,10 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 		this.#logViewerContext?.saveSearch(savedSearch);
 	}
 
-	#removeSearch(event: Event) {
-		const target = event.target as UUIButtonElement;
-		this.#logViewerContext?.removeSearch({ name: target.id });
+	#removeSearch(name: string) {
+		debugger;
+
+		this.#logViewerContext?.removeSearch({ name });
 	}
 
 	#openSaveSearchDialog() {
@@ -189,7 +188,7 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 									@click=${() => this.#setQueryFromSavedSearch(search.query ?? '')}>
 									<span class="saved-search-item-name">${search.name}</span>
 									<span class="saved-search-item-query">${search.query}</span></button
-								><uui-button label="Remove saved search" id="${search.name}" color="danger" @click=${this.#removeSearch}
+								><uui-button label="Remove saved search" color="danger" @click=${() => this.#removeSearch(search.name)}
 									><uui-icon name="umb:trash"></uui-icon
 								></uui-button>
 							</li>`
@@ -198,7 +197,7 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 			</uui-popover>
 		`;
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`

From 06d6a1f75ca4a9699d0e853bf919041ad1046e83 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Wed, 26 Apr 2023 15:11:39 +0200
Subject: [PATCH 06/11] remove double call

---
 .../search/components/log-viewer-search-input.element.ts   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
index 8885f72a45..d0606afb7b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
@@ -122,7 +122,6 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 	#clearQuery() {
 		this.inputQuery$.next('');
 		this.#logViewerContext?.setFilterExpression('');
-		this.#logViewerContext?.getLogs();
 	}
 
 	#modalHandler?: UmbModalHandler;
@@ -132,7 +131,6 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 	}
 
 	#removeSearch(name: string) {
-		debugger;
 
 		this.#logViewerContext?.removeSearch({ name });
 	}
@@ -188,7 +186,10 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 									@click=${() => this.#setQueryFromSavedSearch(search.query ?? '')}>
 									<span class="saved-search-item-name">${search.name}</span>
 									<span class="saved-search-item-query">${search.query}</span></button
-								><uui-button label="Remove saved search" color="danger" @click=${() => this.#removeSearch(search.name)}
+								><uui-button
+									label="Remove saved search"
+									color="danger"
+									@click=${() => this.#removeSearch(search.name ?? '')}
 									><uui-icon name="umb:trash"></uui-icon
 								></uui-button>
 							</li>`

From 1dc686b7220a50cf0c2eb387e12ba3e9f0ed9e95 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Wed, 26 Apr 2023 15:39:11 +0200
Subject: [PATCH 07/11] check for filter expression in the saved searches

---
 .../log-viewer-search-input.element.ts        | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
index d0606afb7b..7d867c4c7e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts
@@ -44,6 +44,9 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 	@state()
 	private _showLoader = false;
 
+	@state()
+	private _isQuerySaved = false;
+
 	private inputQuery$ = new Subject<string>();
 
 	#logViewerContext?: UmbLogViewerWorkspaceContext;
@@ -70,6 +73,7 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 			.subscribe((query) => {
 				this.#logViewerContext?.setFilterExpression(query);
 				this.#persist(query);
+				this._isQuerySaved = this._savedSearches.some((search) => search.query === query);
 				this._showLoader = false;
 			});
 	}
@@ -78,10 +82,12 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 		if (!this.#logViewerContext) return;
 		this.observe(this.#logViewerContext.savedSearches, (savedSearches) => {
 			this._savedSearches = savedSearches ?? [];
+			this._isQuerySaved = this._savedSearches.some((search) => search.query === this._inputQuery);
 		});
 
 		this.observe(this.#logViewerContext.filterExpression, (query) => {
 			this._inputQuery = query;
+			this._isQuerySaved = this._savedSearches.some((search) => search.query === query);
 		});
 	}
 
@@ -109,14 +115,14 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 	}
 
 	#persist(filter: string) {
-		let q = getQuery();
+		let query = getQuery();
 
-		q = {
-			...q,
+		query = {
+			...query,
 			lq: filter,
 		};
 
-		window.history.pushState({}, '', `${path()}?${toQueryString(q)}`);
+		window.history.pushState({}, '', `${path()}?${toQueryString(query)}`);
 	}
 
 	#clearQuery() {
@@ -131,7 +137,6 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 	}
 
 	#removeSearch(name: string) {
-
 		this.#logViewerContext?.removeSearch({ name });
 	}
 
@@ -140,6 +145,7 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 		this.#modalHandler?.onSubmit().then((savedSearch) => {
 			if (savedSearch) {
 				this.#saveSearch(savedSearch);
+				this._isQuerySaved = true;
 			}
 		});
 	}
@@ -160,9 +166,11 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 						  </div>`
 						: ''}
 					${this._inputQuery
-						? html`<uui-button compact slot="append" label="Save search" @click=${this.#openSaveSearchDialog}
-									><uui-icon name="umb:favorite"></uui-icon></uui-button
-								><uui-button compact slot="append" label="Clear" @click=${this.#clearQuery}
+						? html`${!this._isQuerySaved
+									? html`<uui-button compact slot="append" label="Save search" @click=${this.#openSaveSearchDialog}
+											><uui-icon name="umb:favorite"></uui-icon
+									  ></uui-button>`
+									: ''}<uui-button compact slot="append" label="Clear" @click=${this.#clearQuery}
 									><uui-icon name="umb:delete"></uui-icon
 								></uui-button>`
 						: html``}

From 64f0f88a938578782014348c3ead388b8aab5367 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Wed, 26 Apr 2023 15:41:50 +0200
Subject: [PATCH 08/11] cleanup

---
 .../settings/logviewer/workspace/logviewer.context.ts           | 2 --
 1 file changed, 2 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 25d87cd4d6..0c64f49d75 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
@@ -254,8 +254,6 @@ export class UmbLogViewerWorkspaceContext {
 	}
 
 	getLogs = async () => {
-		console.trace('getLogs');
-
 		if (this.#canShowLogs.getValue() === false) {
 			return;
 		}

From afc973349667567493fe745c713ced811790a488 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Wed, 26 Apr 2023 15:47:17 +0200
Subject: [PATCH 09/11] turn off loader if polling

---
 .../settings/logviewer/workspace/logviewer.context.ts         | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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 0c64f49d75..1c52da7239 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
@@ -258,7 +258,9 @@ export class UmbLogViewerWorkspaceContext {
 			return;
 		}
 
-		this.#isLoadingLogs.next(true);
+		const isPollingEnabled = this.#polling.getValue().enabled;
+
+		if (!isPollingEnabled) this.#isLoadingLogs.next(true);
 
 		const skip = (this.currentPage - 1) * 100;
 		const take = 100;

From 83ab5e9a3107ef67499efd41612fcf3ef48f494c Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Wed, 3 May 2023 10:17:04 +0200
Subject: [PATCH 10/11] change button to menu item

---
 .../log-viewer-saved-searches-overview.element.ts  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts
index dc9221a549..b093239de7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts
@@ -8,8 +8,6 @@ import { SavedLogSearchResponseModel } from '@umbraco-cms/backoffice/backend-api
 //TODO: implement the saved searches pagination when the API total bug is fixed
 @customElement('umb-log-viewer-saved-searches-overview')
 export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement {
-	
-
 	@state()
 	private _savedSearches: SavedLogSearchResponseModel[] = [];
 
@@ -33,12 +31,12 @@ export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement {
 
 	#renderSearchItem = (searchListItem: SavedLogSearchResponseModel) => {
 		return html` <li>
-			<uui-button
+			<uui-menu-item
 				label="${searchListItem.name ?? ''}"
 				title="${searchListItem.name ?? ''}"
 				href=${`section/settings/workspace/logviewer/search/?lq=${encodeURIComponent(searchListItem.query ?? '')}`}>
-				<uui-icon name="umb:search"></uui-icon>${searchListItem.name}
-			</uui-button>
+				<uui-icon slot="icon" name="umb:search"></uui-icon>${searchListItem.name}
+			</uui-menu-item>
 		</li>`;
 	};
 
@@ -49,7 +47,7 @@ export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement {
 			</ul>
 		</uui-box>`;
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`
@@ -75,6 +73,10 @@ export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement {
 			li uui-icon {
 				margin-right: 1em;
 			}
+
+			uui-menu-item {
+				width: 100%;
+			}
 		`,
 	];
 }

From 7bcc9de6bbcc103c00645b64736b32e118d4f224 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Wed, 3 May 2023 10:44:41 +0200
Subject: [PATCH 11/11] add break word top message

---
 .../views/search/components/log-viewer-message.element.ts  | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts
index ff96a79e5f..3841324b7a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts
@@ -9,8 +9,6 @@ import { query as getQuery, toQueryString } from '@umbraco-cms/backoffice/router
 //TODO: check how to display EventId field in the message properties
 @customElement('umb-log-viewer-message')
 export class UmbLogViewerMessageElement extends UmbLitElement {
-	
-
 	@query('details')
 	details!: HTMLDetailsElement;
 
@@ -141,7 +139,7 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
 						<umb-log-viewer-level-tag .level=${this.level ? this.level : 'Information'}></umb-log-viewer-level-tag>
 					</div>
 					<div id="machine">${this.properties.find((property) => property.name === 'MachineName')?.value}</div>
-					<div id="message">${this.renderedMessage}</div>
+					<div id="message"><uui-scroll-container>${this.renderedMessage}</uui-scroll-container></div>
 				</summary>
 				${this.exception ? html`<pre id="exception">${this.exception}</pre>` : ''}
 				<ul id="properties-list">
@@ -195,7 +193,7 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
 			</details>
 		`;
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`
@@ -251,6 +249,7 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
 
 			#message {
 				flex: 6 0 14ch;
+				word-break: break-all;
 			}
 
 			.property-name,