Merge branch 'main' into feature/more-property-editors-2

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 = '';
 
@@ -31,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();
 		});
 	}
@@ -95,7 +92,7 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
         </div>
         `;
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`
@@ -115,7 +112,6 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
 				border: none;
 				background: none;
 				width: 100%;
-				height: 100%;
 				outline: none;
 				position: relative;
 				border-bottom: 2px solid transparent;

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.ts

@@ -35,7 +35,6 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement {
 
 	constructor() {
 		super();
-		this.#logViewerContext.init();
 		this.provideContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, this.#logViewerContext);
 	}
 

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);
 
@@ -101,18 +104,7 @@ export class UmbLogViewerWorkspaceContext {
 		this.#repository = new UmbLogViewerRepository(this.#host);
 	}
 
-	async init() {
-		this.validateLogSize();
-	}
-
-	reset() {
-		this.#logs.next({ items: [], total: 0 });
-		this.setCurrentPage(1);
-	}
-
 	onChangeState = () => {
-		this.reset();
-
 		const searchQuery = query();
 		let sanitizedQuery = '';
 		if (searchQuery.lq) {
@@ -262,10 +254,14 @@ export class UmbLogViewerWorkspaceContext {
 	}
 
 	getLogs = async () => {
-		if (!this.#canShowLogs.getValue()) {
+		if (this.#canShowLogs.getValue() === false) {
 			return;
 		}
 
+		const isPollingEnabled = this.#polling.getValue().enabled;
+
+		if (!isPollingEnabled) this.#isLoadingLogs.next(true);
+
 		const skip = (this.currentPage - 1) * 100;
 		const take = 100;
 
@@ -279,7 +275,7 @@ export class UmbLogViewerWorkspaceContext {
 		};
 
 		const { data } = await this.#repository.getLogs(options);
-
+		this.#isLoadingLogs.next(false);
 		if (data) {
 			this.#logs.next(data);
 		}

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%;
+			}
 		`,
 	];
 }

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;
 			}
 		`,
 	];

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,

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() {
@@ -29,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();
 		});
 	}
 
@@ -40,6 +40,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 +78,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 +112,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`

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();
 		});
 	}
 

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;
 
@@ -46,6 +44,9 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 	@state()
 	private _showLoader = false;
 
+	@state()
+	private _isQuerySaved = false;
+
 	private inputQuery$ = new Subject<string>();
 
 	#logViewerContext?: UmbLogViewerWorkspaceContext;
@@ -58,7 +59,6 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 			this.#logViewerContext = instance;
 			this.#observeStuff();
 			this.#logViewerContext?.getSavedSearches();
-			this.#logViewerContext.getLogs();
 		});
 
 		this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => {
@@ -73,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;
 			});
 	}
@@ -81,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);
 		});
 	}
 
@@ -112,20 +115,19 @@ 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() {
 		this.inputQuery$.next('');
 		this.#logViewerContext?.setFilterExpression('');
-		this.#logViewerContext?.getLogs();
 	}
 
 	#modalHandler?: UmbModalHandler;
@@ -134,9 +136,8 @@ 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) {
+		this.#logViewerContext?.removeSearch({ name });
 	}
 
 	#openSaveSearchDialog() {
@@ -144,6 +145,7 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 		this.#modalHandler?.onSubmit().then((savedSearch) => {
 			if (savedSearch) {
 				this.#saveSearch(savedSearch);
+				this._isQuerySaved = true;
 			}
 		});
 	}
@@ -164,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``}
@@ -190,7 +194,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" 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>`
@@ -199,7 +206,7 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement {
 			</uui-popover>
 		`;
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`

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`