add log level component

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/log-viewer.repository.ts

@@ -88,4 +88,9 @@ export class UmbLogViewerRepository {
 			endDate,
 		});
 	}
+
+	async getLogLevels({ skip = 0, take = 100 }: { skip: number; take: number }) {
+		await this.#init();
+		return this.#messagesDataSource.getLogViewerLevel({ skip, take });
+	}
 }

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/sources/log-viewer.server.data.ts

@@ -63,14 +63,14 @@ export class UmbLogSearchesServerDataSource implements LogSearchDataSource {
 		return await tryExecuteAndNotify(this.#host, LogViewerResource.deleteLogViewerSavedSearchByName({ name }));
 	}
 }
-/**
- * A data source for the log messages and levels 
- *
- * @export
- * @class UmbLogMessagesServerDataSource
- * @implements {LogMessagesDataSource}
- */
-export class UmbLogMessagesServerDataSource implements LogMessagesDataSource {
+	/**
+	 * A data source for the log messages and levels 
+	 *
+	 * @export
+	 * @class UmbLogMessagesServerDataSource
+	 * @implements {LogMessagesDataSource}
+	 */
+	export class UmbLogMessagesServerDataSource implements LogMessagesDataSource {
 	#host: UmbControllerHostInterface;
 
 	/**

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

@@ -78,7 +78,6 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement {
 
 	load(): void {
 		// Not relevant for this workspace -added to prevent the error from popping up
-		console.log('Loading something from somewhere');
 	}
 
 	private _observeWorkspaceViews() {

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer.context.ts

@@ -4,6 +4,7 @@ import {
 	DirectionModel,
 	LogLevelCountsModel,
 	LogLevelModel,
+	PagedLoggerModel,
 	PagedLogMessageModel,
 	PagedLogTemplateModel,
 	PagedSavedLogSearchModel,
@@ -58,6 +59,9 @@ export class UmbLogViewerWorkspaceContext {
 	#dateRange = new DeepState<LogViewerDateRange>(this.defaultDateRange);
 	dateRange = createObservablePart(this.#dateRange, (data) => data);
 
+	#loggers = new DeepState<PagedLoggerModel | null>(null);
+	loggers = createObservablePart(this.#loggers, (data) => data?.items);
+
 	#filterExpression = new StringState<string>('');
 	filterExpression = createObservablePart(this.#filterExpression, (data) => data);
 
@@ -157,6 +161,14 @@ export class UmbLogViewerWorkspaceContext {
 		}
 	}
 
+	async getLogLevels(skip: number, take: number) {
+		const { data } = await this.#repository.getLogLevels({ skip, take });
+
+		if (data) {
+			this.#loggers.next(data);
+		}
+	}
+
 	setCurrentPage(page: number) {
 		this.currentPage = page;
 	}

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/index.ts

@@ -1,3 +1,4 @@
 export * from './log-viewer-saved-searches-overview.element';
 export * from './log-viewer-message-templates-overview.element';
-export * from './log-viewer-log-types-chart.element';
+export * from './log-viewer-log-types-chart.element';
+export * from './log-viewer-log-level-overview.element';

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

@@ -0,0 +1,48 @@
+import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../../logviewer.context';
+import { UmbLitElement } from '@umbraco-cms/element';
+import { LoggerModel } from '@umbraco-cms/backend-api';
+
+//TODO: implement the saved searches pagination when the API total bug is fixed
+@customElement('umb-log-viewer-log-level-overview')
+export class UmbLogViewerLogLevelOverviewElement extends UmbLitElement {
+	#logViewerContext?: UmbLogViewerWorkspaceContext;
+	constructor() {
+		super();
+		this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
+			this.#logViewerContext = instance;
+			this.#logViewerContext?.getSavedSearches();
+			this.#observeLogLevels();
+		});
+	}
+
+	@state()
+	private _loggers: LoggerModel[] = [];
+	/**
+	 * The name of the logger to get the level for. Defaults to 'Global'.
+	 *
+	 * @memberof UmbLogViewerLogLevelOverviewElement
+	 */
+	@property()
+	loggerName = 'Global';
+
+	#observeLogLevels() {
+		if (!this.#logViewerContext) return;
+		this.observe(this.#logViewerContext.loggers, (loggers) => {
+			this._loggers = loggers ?? [];
+		});
+	}
+
+	render() {
+		return html`${this._loggers.length > 0
+			? this._loggers.find((logger) => logger.name === this.loggerName)?.level
+			: ''}`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-log-viewer-log-level-overview': UmbLogViewerLogLevelOverviewElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/log-overview-view.element.ts

@@ -1,11 +1,6 @@
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { clamp } from 'lodash-es';
-import {
-	LogViewerDateRange,
-	UmbLogViewerWorkspaceContext,
-	UMB_APP_LOG_VIEWER_CONTEXT_TOKEN,
-} from '../../logviewer.context';
+import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../logviewer.context';
 import { LogLevelCountsModel } from '@umbraco-cms/backend-api';
 import { UmbLitElement } from '@umbraco-cms/element';
 
@@ -106,13 +101,14 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 		this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
 			this.#logViewerContext = instance;
 			this.#observeStuff();
+			this.#logViewerContext?.getLogLevels(0, 100);
 		});
 	}
 
 	#observeStuff() {
 		if (!this.#logViewerContext) return;
 
-		this.observe(this.#logViewerContext.logCount, (logLevel) => {
+		this.observe(this.#logViewerContext.logCount, () => {
 			this._errorCount = this._logLevelCount?.error ?? 0;
 		});
 	}
@@ -130,7 +126,7 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 					</uui-box>
 
 					<uui-box id="level" headline="Log level">
-						<h1 id="log-lever">Info</h1>
+						<h1 id="log-lever"><umb-log-viewer-log-level-overview></umb-log-viewer-log-level-overview></h1>
 					</uui-box>
 
 					<umb-log-viewer-log-types-chart id="types"></umb-log-viewer-log-types-chart>