save log message query to url

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts

@@ -4,6 +4,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../../logviewer.context';
 import { LogLevelModel, LogMessagePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+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')
@@ -211,15 +212,23 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
 	private _propertiesWithSearchMenu: Array<string> = ['HttpRequestNumber', 'SourceContext', 'MachineName'];
 
 	private _findLogsWithProperty({ name, value }: LogMessagePropertyPresentationModel) {
-		let queryString = '';
+		if (!name) return '';
+
+		let query = getQuery();
+		let sanitizedValue = value ?? '';
 
 		if (isNaN(+(value ?? ''))) {
-			queryString = name + "='" + value + "'";
-		} else {
-			queryString = name + '=' + value;
+			sanitizedValue = "'" + value + "'";
 		}
 
-		return encodeURIComponent(queryString);
+		query = {
+			...query,
+			lq: encodeURIComponent(`${name}=${sanitizedValue}`),
+		};
+
+		const queryString = toQueryString(query);
+
+		return queryString;
 	}
 
 	#setOpen(event: Event) {
@@ -259,9 +268,7 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
 												look="secondary"
 												label="Find logs with ${property.name}"
 												title="Find logs with ${property.name}"
-												href=${`section/settings/workspace/logviewer/search/?lq=${this._findLogsWithProperty(
-													property
-												)}`}>
+												href=${`section/settings/workspace/logviewer/search/?${this._findLogsWithProperty(property)}`}>
 												<uui-icon name="umb:search"></uui-icon>
 										  </uui-button>`
 										: ''}