@umbraco-cms/backoffice 17.0.2 → 17.1.0

package/dist-cms/packages/log-viewer/components/log-viewer-date-range-selector.element.js

@@ -9,24 +9,26 @@ import { UmbTextStyles } from '../../core/style/index.js';
 import { css, html, customElement, property, state } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import { query as getQuery, path, toQueryString } from '../../core/router/index.js';
+import { consumeContext } from '../../../libs/context-api/index.js';
 let UmbLogViewerDateRangeSelectorElement = class UmbLogViewerDateRangeSelectorElement extends UmbLitElement {
-    #logViewerContext;
     constructor() {
-        super();
+        super(...arguments);
         this._startDate = '';
         this._endDate = '';
         this.horizontal = false;
-        this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT, (instance) => {
-            this.#logViewerContext = instance;
-            this.#observeStuff();
-        });
+    }
+    #logViewerContext;
+    set _logViewerContext(value) {
+        this.#logViewerContext = value;
+        this.#observeStuff();
+    }
+    get _logViewerContext() {
+        return this.#logViewerContext;
     }
     #observeStuff() {
-        if (!this.#logViewerContext)
-            return;
-        this.observe(this.#logViewerContext.dateRange, (dateRange) => {
-            this._startDate = dateRange.startDate;
-            this._endDate = dateRange.endDate;
+        this.observe(this._logViewerContext?.dateRange, (dateRange) => {
+            this._startDate = dateRange?.startDate ?? '';
+            this._endDate = dateRange?.endDate ?? '';
         }, '_observeDateRange');
     }
     #setStartDate(e) {
@@ -38,7 +40,7 @@ let UmbLogViewerDateRangeSelectorElement = class UmbLogViewerDateRangeSelectorEl
         this.#updateFiltered();
     }
     #updateFiltered() {
-        this.#logViewerContext?.setDateRange({ startDate: this._startDate, endDate: this._endDate });
+        this._logViewerContext?.setDateRange({ startDate: this._startDate, endDate: this._endDate });
         const query = getQuery();
         const qs = toQueryString({
             ...query,
@@ -50,24 +52,24 @@ let UmbLogViewerDateRangeSelectorElement = class UmbLogViewerDateRangeSelectorEl
     render() {
         return html `
 			<div class="input-container">
-				<uui-label for="start-date">From:</uui-label>
+				<uui-label for="start-date"><umb-localize key="logViewer_from">From</umb-localize>:</uui-label>
 				<umb-input-date
 					@change=${this.#setStartDate}
 					id="start-date"
 					type="date"
-					label="From"
-					.max=${this.#logViewerContext?.today ?? ''}
+					label=${this.localize.term('logViewer_from')}
+					.max=${this._logViewerContext?.today ?? ''}
 					.value=${this._startDate}></umb-input-date>
 			</div>
 			<div class="input-container">
-				<uui-label for="end-date">To: </uui-label>
+				<uui-label for="end-date"><umb-localize key="logViewer_to">To</umb-localize>: </uui-label>
 				<umb-input-date
 					@change=${this.#setEndDate}
 					id="end-date"
 					type="date"
-					label="To"
+					label=${this.localize.term('logViewer_to')}
 					.min=${this._startDate}
-					.max=${this.#logViewerContext?.today ?? ''}
+					.max=${this._logViewerContext?.today ?? ''}
 					.value=${this._endDate}></umb-input-date>
 			</div>
 		`;
@@ -101,6 +103,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbLogViewerDateRangeSelectorElement.prototype, "horizontal", void 0);
+__decorate([
+    consumeContext({ context: UMB_APP_LOG_VIEWER_CONTEXT })
+], UmbLogViewerDateRangeSelectorElement.prototype, "_logViewerContext", null);
 UmbLogViewerDateRangeSelectorElement = __decorate([
     customElement('umb-log-viewer-date-range-selector')
 ], UmbLogViewerDateRangeSelectorElement);

package/dist-cms/packages/log-viewer/components/log-viewer-too-many-logs-warning.element.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from '../../../external/lit/index.js';
-export declare class UmbLogViewerTooManyLogsWarningElement extends LitElement {
+import { UmbLitElement } from '../../core/lit-element/index.js';
+export declare class UmbLogViewerTooManyLogsWarningElement extends UmbLitElement {
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/log-viewer/components/log-viewer-too-many-logs-warning.element.js

@@ -4,13 +4,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, LitElement, customElement } from '../../../external/lit/index.js';
-let UmbLogViewerTooManyLogsWarningElement = class UmbLogViewerTooManyLogsWarningElement extends LitElement {
+import { css, html, customElement } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+let UmbLogViewerTooManyLogsWarningElement = class UmbLogViewerTooManyLogsWarningElement extends UmbLitElement {
     render() {
         return html `<uui-box id="to-many-logs-warning">
-			<h3>Unable to view logs</h3>
-			<p>Today's log file is too large to be viewed and would cause performance problems.</p>
-			<p>If you need to view the log files, narrow your date range or try opening them manually.</p>
+			<h3><umb-localize key="logViewer_unableToViewLogs">Unable to view logs</umb-localize></h3>
+			<p>
+				<umb-localize key="logViewer_logFileTooLarge"
+					>Today's log file is too large to be viewed and would cause performance problems.</umb-localize
+				>
+			</p>
+			<p>
+				<umb-localize key="logViewer_narrowDateRangeOrOpenManually"
+					>If you need to view the log files, narrow your date range or try opening them manually.</umb-localize
+				>
+			</p>
 		</uui-box>`;
     }
     static { this.styles = [

package/dist-cms/packages/log-viewer/index.d.ts

@@ -2,3 +2,4 @@ export * from './constants.js';
 export * from './repository/index.js';
 export * from './components/donut-chart/donut-chart.element.js';
 export * from './components/donut-chart/donut-slice.element.js';
+export type * from './types.js';

package/dist-cms/packages/log-viewer/repository/log-viewer.repository.d.ts

@@ -36,11 +36,7 @@ export declare class UmbLogViewerRepository {
     getLogCount({ startDate, endDate }: {
         startDate?: string;
         endDate?: string;
-    }): Promise<import("../../core/resources/index.js").UmbApiResponse<{
-        data: import("../../core/backend-api/index.js").LogLevelCountsReponseModel;
-        request: Request;
-        response: Response;
-    }>>;
+    }): Promise<import("../../core/repository/index.js").UmbDataSourceResponse<import("../types.js").UmbLogLevelCounts>>;
     getLogs({ skip, take, orderDirection, filterExpression, logLevel, startDate, endDate, }: {
         skip?: number;
         take?: number;

package/dist-cms/packages/log-viewer/repository/sources/index.d.ts

@@ -1,4 +1,5 @@
-import type { DirectionModel, LogLevelCountsReponseModel, LogLevelModel, PagedLoggerResponseModel, PagedLogMessageResponseModel, PagedLogTemplateResponseModel, PagedSavedLogSearchResponseModel, SavedLogSearchResponseModel } from '../../../core/backend-api/index.js';
+import type { UmbLogLevelCounts } from '../../types.js';
+import type { DirectionModel, LogLevelModel, PagedLoggerResponseModel, PagedLogMessageResponseModel, PagedLogTemplateResponseModel, PagedSavedLogSearchResponseModel, SavedLogSearchResponseModel } from '../../../core/backend-api/index.js';
 import type { UmbDataSourceResponse } from '../../../core/repository/index.js';
 export interface UmbLogSearchDataSource {
     getAllSavedSearches({ skip, take, }: {
@@ -21,7 +22,7 @@ export interface UmbLogMessagesDataSource {
     getLogViewerLevelCount({ startDate, endDate, }: {
         startDate?: string;
         endDate?: string;
-    }): Promise<UmbDataSourceResponse<LogLevelCountsReponseModel>>;
+    }): Promise<UmbDataSourceResponse<UmbLogLevelCounts>>;
     getLogViewerLogs({ skip, take, orderDirection, filterExpression, logLevel, startDate, endDate, }: {
         skip?: number;
         take?: number;

package/dist-cms/packages/log-viewer/repository/sources/log-viewer.server.data.d.ts

@@ -1,6 +1,8 @@
+import type { UmbLogLevelCounts } from '../../types.js';
 import type { UmbLogMessagesDataSource, UmbLogSearchDataSource } from './index.js';
-import type { DirectionModel, LogLevelModel, SavedLogSearchResponseModel } from '../../../core/backend-api/index.js';
+import { LogLevelModel, type DirectionModel, type SavedLogSearchResponseModel } from '../../../core/backend-api/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import type { UmbDataSourceResponse } from '../../../core/repository/index.js';
 /**
  * A data source for the log saved searches
  * @class UmbLogSearchesServerDataSource
@@ -99,14 +101,10 @@ export declare class UmbLogMessagesServerDataSource implements UmbLogMessagesDat
      * @returns {*}
      * @memberof UmbLogMessagesServerDataSource
      */
-    getLogViewerLevelCount({ startDate, endDate }: {
+    getLogViewerLevelCount({ startDate, endDate, }: {
         startDate?: string;
         endDate?: string;
-    }): Promise<import("../../../core/resources/index.js").UmbApiResponse<{
-        data: import("../../../core/backend-api/index.js").LogLevelCountsReponseModel;
-        request: Request;
-        response: Response;
-    }>>;
+    }): Promise<UmbDataSourceResponse<UmbLogLevelCounts>>;
     /**
      *	Grabs all the log messages from the server
      * @param {{

package/dist-cms/packages/log-viewer/repository/sources/log-viewer.server.data.js

@@ -1,3 +1,4 @@
+import { LogLevelModel, } from '../../../core/backend-api/index.js';
 import { LogViewerService } from '../../../core/backend-api/index.js';
 import { tryExecute } from '../../../core/resources/index.js';
 /**
@@ -74,7 +75,7 @@ export class UmbLogMessagesServerDataSource {
      * @memberof UmbLogMessagesServerDataSource
      */
     async getLogViewerLevel({ skip = 0, take = 100 }) {
-        return await tryExecute(this.#host, LogViewerService.getLogViewerLevel({ query: { skip, take } }));
+        return tryExecute(this.#host, LogViewerService.getLogViewerLevel({ query: { skip, take } }));
     }
     /**
      * Grabs all the number of different log messages from the server
@@ -82,10 +83,31 @@ export class UmbLogMessagesServerDataSource {
      * @returns {*}
      * @memberof UmbLogMessagesServerDataSource
      */
-    async getLogViewerLevelCount({ startDate, endDate }) {
-        return await tryExecute(this.#host, LogViewerService.getLogViewerLevelCount({
+    async getLogViewerLevelCount({ startDate, endDate, }) {
+        const data = await tryExecute(this.#host, LogViewerService.getLogViewerLevelCount({
             query: { startDate, endDate },
         }));
+        if (data?.data) {
+            const normalizedData = {
+                [LogLevelModel.VERBOSE]: 0,
+                [LogLevelModel.DEBUG]: 0,
+                [LogLevelModel.INFORMATION]: 0,
+                [LogLevelModel.WARNING]: 0,
+                [LogLevelModel.ERROR]: 0,
+                [LogLevelModel.FATAL]: 0,
+            };
+            // Helper to normalize log level keys to PascalCase
+            const normalizeLogLevel = (level) => {
+                const normalized = level.charAt(0).toUpperCase() + level.slice(1).toLowerCase();
+                return normalized;
+            };
+            // Normalize keys to match LogLevelModel
+            for (const [level, count] of Object.entries(data.data)) {
+                normalizedData[normalizeLogLevel(level)] = count;
+            }
+            return { data: normalizedData };
+        }
+        return {};
     }
     /**
      *	Grabs all the log messages from the server
@@ -110,7 +132,7 @@ export class UmbLogMessagesServerDataSource {
      * @memberof UmbLogMessagesServerDataSource
      */
     async getLogViewerLogs({ skip = 0, take = 100, orderDirection, filterExpression, logLevel, startDate, endDate, }) {
-        return await tryExecute(this.#host, LogViewerService.getLogViewerLog({
+        return tryExecute(this.#host, LogViewerService.getLogViewerLog({
             query: {
                 skip,
                 take,
@@ -139,12 +161,12 @@ export class UmbLogMessagesServerDataSource {
      * @memberof UmbLogMessagesServerDataSource
      */
     async getLogViewerMessageTemplate({ skip, take = 100, startDate, endDate, }) {
-        return await tryExecute(this.#host, LogViewerService.getLogViewerMessageTemplate({
+        return tryExecute(this.#host, LogViewerService.getLogViewerMessageTemplate({
             query: { skip, take, startDate, endDate },
         }));
     }
     async getLogViewerValidateLogsSize({ startDate, endDate }) {
-        return await tryExecute(this.#host, LogViewerService.getLogViewerValidateLogsSize({
+        return tryExecute(this.#host, LogViewerService.getLogViewerValidateLogsSize({
             query: { startDate, endDate },
         }));
     }

package/dist-cms/packages/log-viewer/types.d.ts

@@ -0,0 +1,4 @@
+import type { LogLevelModel } from '../core/backend-api/index.js';
+export type UmbLogLevelCounts = {
+    [level in LogLevelModel]: number;
+};

package/dist-cms/packages/log-viewer/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/log-viewer/workspace/logviewer-workspace.context.d.ts

@@ -1,4 +1,5 @@
-import type { LogLevelCountsReponseModel, PagedLogTemplateResponseModel, PagedSavedLogSearchResponseModel, SavedLogSearchResponseModel } from '../../core/backend-api/index.js';
+import type { UmbLogLevelCounts } from '../types.js';
+import type { PagedLogTemplateResponseModel, PagedSavedLogSearchResponseModel, SavedLogSearchResponseModel } from '../../core/backend-api/index.js';
 import { DirectionModel, LogLevelModel } from '../../core/backend-api/index.js';
 import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
 import { UmbContextBase } from '../../../libs/class-api/index.js';
@@ -18,12 +19,11 @@ export declare class UmbLogViewerWorkspaceContext extends UmbContextBase impleme
     readonly workspaceAlias: string;
     readonly view: UmbViewContext;
     getEntityType(): string;
-    getEntityName(): string;
     get today(): string;
     get yesterday(): string;
     defaultDateRange: UmbLogViewerDateRange;
     savedSearches: import("rxjs").Observable<PagedSavedLogSearchResponseModel | undefined>;
-    logCount: import("rxjs").Observable<LogLevelCountsReponseModel | null>;
+    logCount: import("rxjs").Observable<UmbLogLevelCounts | null>;
     dateRange: import("rxjs").Observable<UmbLogViewerDateRange>;
     loggers: import("rxjs").Observable<import("../../core/backend-api/index.js").LoggerResponseModel[] | undefined>;
     canShowLogs: import("rxjs").Observable<boolean | null>;

package/dist-cms/packages/log-viewer/workspace/logviewer-workspace.context.js

@@ -12,9 +12,6 @@ export class UmbLogViewerWorkspaceContext extends UmbContextBase {
     getEntityType() {
         return 'log-viewer';
     }
-    getEntityName() {
-        return 'Log Viewer';
-    }
     get today() {
         const today = new Date();
         const dd = String(today.getDate()).padStart(2, '0');
@@ -214,9 +211,7 @@ export class UmbLogViewerWorkspaceContext extends UmbContextBase {
     }
     async getLogCount() {
         const { data } = await this.#repository.getLogCount({ ...this.#dateRange.getValue() });
-        if (data) {
-            this.#logCount.setValue(data);
-        }
+        this.#logCount.setValue(data ?? null);
     }
     async getMessageTemplates(skip, take) {
         const { data } = await this.#repository.getMessageTemplates({ skip, take, ...this.#dateRange.getValue() });

package/dist-cms/packages/log-viewer/workspace/views/overview/components/log-viewer-log-level-overview.element.d.ts

@@ -1,7 +1,8 @@
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 export declare class UmbLogViewerLogLevelOverviewElement extends UmbLitElement {
     #private;
-    constructor();
+    private set _logViewerContext(value);
+    private get _logViewerContext();
     private _loggers;
     /**
      * The name of the logger to get the level for. Defaults to 'Global'.

package/dist-cms/packages/log-viewer/workspace/views/overview/components/log-viewer-log-level-overview.element.js

@@ -7,26 +7,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_APP_LOG_VIEWER_CONTEXT } from '../../../logviewer-workspace.context-token.js';
 import { html, nothing, customElement, property, state } from '../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { consumeContext } from '../../../../../../libs/context-api/index.js';
 let UmbLogViewerLogLevelOverviewElement = class UmbLogViewerLogLevelOverviewElement extends UmbLitElement {
-    #logViewerContext;
     constructor() {
-        super();
+        super(...arguments);
         this._loggers = [];
         /**
          * The name of the logger to get the level for. Defaults to 'Global'.
          * @memberof UmbLogViewerLogLevelOverviewElement
          */
         this.loggerName = 'Global';
-        this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT, (instance) => {
-            this.#logViewerContext = instance;
-            this.#logViewerContext?.getSavedSearches();
-            this.#observeLogLevels();
-        });
+    }
+    #logViewerContext;
+    set _logViewerContext(value) {
+        this.#logViewerContext = value;
+        this.#logViewerContext?.getSavedSearches();
+        this.#observeLogLevels();
+    }
+    get _logViewerContext() {
+        return this.#logViewerContext;
     }
     #observeLogLevels() {
-        if (!this.#logViewerContext)
-            return;
-        this.observe(this.#logViewerContext.loggers, (loggers) => {
+        this.observe(this._logViewerContext?.loggers, (loggers) => {
             this._loggers = loggers ?? [];
         });
     }
@@ -36,6 +38,9 @@ let UmbLogViewerLogLevelOverviewElement = class UmbLogViewerLogLevelOverviewElem
             : nothing}`;
     }
 };
+__decorate([
+    consumeContext({ context: UMB_APP_LOG_VIEWER_CONTEXT })
+], UmbLogViewerLogLevelOverviewElement.prototype, "_logViewerContext", null);
 __decorate([
     state()
 ], UmbLogViewerLogLevelOverviewElement.prototype, "_loggers", void 0);

package/dist-cms/packages/log-viewer/workspace/views/overview/components/log-viewer-log-types-chart.element.d.ts

@@ -1,10 +1,13 @@
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 export declare class UmbLogViewerLogTypesChartElement extends UmbLitElement {
     #private;
-    constructor();
-    private _logLevelCountResponse;
+    private set _logViewerContext(value);
+    private get _logViewerContext();
+    private _dateRange;
+    private _logLevelCounts;
     private _logLevelCount;
     private _logLevelCountFilter;
+    private _logLevelKeys;
     protected willUpdate(_changedProperties: Map<PropertyKey, unknown>): void;
     setLogLevelCount(): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/log-viewer/workspace/views/overview/components/log-viewer-log-types-chart.element.js

@@ -5,23 +5,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_APP_LOG_VIEWER_CONTEXT } from '../../../logviewer-workspace.context-token.js';
-import { css, html, customElement, state } from '../../../../../../external/lit/index.js';
+import { css, html, customElement, state, repeat } from '../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { consumeContext } from '../../../../../../libs/context-api/index.js';
 let UmbLogViewerLogTypesChartElement = class UmbLogViewerLogTypesChartElement extends UmbLitElement {
-    #logViewerContext;
     constructor() {
-        super();
-        this._logLevelCountResponse = null;
+        super(...arguments);
+        this._dateRange = { startDate: '', endDate: '' };
+        this._logLevelCounts = null;
         this._logLevelCount = [];
         this._logLevelCountFilter = [];
-        this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT, (instance) => {
-            this.#logViewerContext = instance;
-            this.#logViewerContext?.getLogCount();
-            this.#observeStuff();
-        });
+        this._logLevelKeys = [];
+    }
+    #logViewerContext;
+    set _logViewerContext(value) {
+        this.#logViewerContext = value;
+        this.#logViewerContext?.getLogCount();
+        this.#observeStuff();
+    }
+    get _logViewerContext() {
+        return this.#logViewerContext;
     }
     willUpdate(_changedProperties) {
-        if (_changedProperties.has('_logLevelCountFilter')) {
+        if (_changedProperties.has('_logLevelCountFilter') || _changedProperties.has('_logLevelCounts')) {
             this.setLogLevelCount();
         }
     }
@@ -33,62 +39,127 @@ let UmbLogViewerLogTypesChartElement = class UmbLogViewerLogTypesChartElement ex
         this._logLevelCountFilter = [...this._logLevelCountFilter, level];
     }
     setLogLevelCount() {
-        this._logLevelCount = this._logLevelCountResponse
-            ? Object.entries(this._logLevelCountResponse).filter(([level]) => !this._logLevelCountFilter.includes(level))
-            : [];
+        if (this._logLevelCounts) {
+            const nonZeroEntries = Object.entries(this._logLevelCounts).filter(([, count]) => count > 0);
+            this._logLevelKeys = nonZeroEntries;
+            this._logLevelCount = nonZeroEntries.filter(([level]) => !this._logLevelCountFilter.includes(level));
+        }
+        else {
+            this._logLevelKeys = [];
+            this._logLevelCount = [];
+        }
     }
     #observeStuff() {
-        if (!this.#logViewerContext)
-            return;
-        this.observe(this.#logViewerContext.logCount, (logLevel) => {
-            this._logLevelCountResponse = logLevel ?? null;
+        this.observe(this._logViewerContext?.logCount, (logLevel) => {
+            this._logLevelCounts = logLevel ?? null;
             this.setLogLevelCount();
         });
+        this.observe(this._logViewerContext?.dateRange, (dateRange) => {
+            if (dateRange) {
+                this._dateRange = dateRange;
+            }
+        });
+    }
+    #buildSearchUrl(level) {
+        const params = new URLSearchParams();
+        params.set('loglevels', level);
+        if (this._dateRange.startDate) {
+            params.set('startDate', this._dateRange.startDate);
+        }
+        if (this._dateRange.endDate) {
+            params.set('endDate', this._dateRange.endDate);
+        }
+        return `section/settings/workspace/logviewer/view/search/?${params.toString()}`;
     }
-    // TODO: Stop using this complex code in render methods, instead changes to _logLevelCount should trigger a state prop containing the keys. And then try to make use of the repeat LIT method:
     render() {
         return html `
-			<uui-box id="types" headline="Log types">
+			<uui-box id="types" headline=${this.localize.term('logViewer_logTypes')}>
+				<p id="description">
+					<umb-localize key="logViewer_logTypesChartDescription">
+						In the chosen date range, you have this number of log messages grouped by type:
+					</umb-localize>
+				</p>
 				<div id="log-types-container">
+					<umb-donut-chart>
+						${repeat(this._logLevelCount, ([level]) => level, ([level, number]) => html `<umb-donut-slice
+									.name=${level}
+									.amount=${number}
+									.kind=${this.localize.term('logViewer_messagesCount')}
+									.href=${this.#buildSearchUrl(level)}
+									.color="${`var(--umb-log-viewer-${level.toLowerCase()}-color)`}"></umb-donut-slice>`)}
+					</umb-donut-chart>
 					<div id="legend">
 						<ul>
-							${this._logLevelCountResponse
-            ? Object.keys(this._logLevelCountResponse).map((level) => html `<li>
-												<button
-													@click=${(e) => {
-                e.target?.classList.toggle('active');
-                this.#setCountFilter(level);
-            }}>
-													<uui-icon
-														name="icon-record"
-														style="color: var(--umb-log-viewer-${level.toLowerCase()}-color);"></uui-icon
-													>${level}
-												</button>
-											</li>`)
-            : ''}
+							${repeat(this._logLevelKeys, ([level]) => level, ([level, count]) => html `<li>
+										<button
+											@click=${(e) => {
+            e.target?.classList.toggle('active');
+            this.#setCountFilter(level);
+        }}>
+											<uui-icon
+												name="icon-record"
+												style="color: var(--umb-log-viewer-${level.toLowerCase()}-color);"></uui-icon>
+											${level}
+											<span class="count">
+												(${this.localize.number(count, {
+            notation: 'compact',
+            minimumFractionDigits: count > 1000 ? 1 : 0,
+            maximumFractionDigits: 2,
+        })})
+											</span>
+										</button>
+									</li>`)}
 						</ul>
 					</div>
-					<umb-donut-chart .description=${'In chosen date range you have this number of log message of type:'}>
-						${this._logLevelCountResponse
-            ? this._logLevelCount.map(([level, number]) => html `<umb-donut-slice
-											.name=${level}
-											.amount=${number}
-											.kind=${'messages'}
-											.color="${`var(--umb-log-viewer-${level.toLowerCase()}-color)`}"></umb-donut-slice> `)
-            : ''}
-					</umb-donut-chart>
 				</div>
 			</uui-box>
 		`;
     }
     static { this.styles = [
         css `
+			uui-box {
+				container-type: inline-size;
+			}
+
+			#description {
+				text-align: center;
+				font-size: var(--uui-type-small-size);
+				color: var(--uui-color-text-alt);
+				margin: 0 0 var(--uui-size-space-4) 0;
+			}
+
 			#log-types-container {
-				display: flex;
+				display: grid;
 				gap: var(--uui-size-space-4);
-				flex-direction: column-reverse;
-				align-items: center;
-				justify-content: space-between;
+				grid-template-columns: 1fr;
+				place-items: center;
+			}
+
+			umb-donut-chart {
+				width: 100%;
+				max-width: 200px;
+			}
+
+			#legend {
+				width: 100%;
+				display: flex;
+				justify-content: center;
+			}
+
+			@container (min-width: 312px) {
+				#log-types-container {
+					grid-template-columns: auto 1fr;
+					place-items: start;
+				}
+
+				umb-donut-chart {
+					max-width: 200px;
+				}
+
+				#legend {
+					width: auto;
+					justify-content: flex-start;
+				}
 			}
 
 			button {
@@ -141,18 +212,32 @@ let UmbLogViewerLogTypesChartElement = class UmbLogViewerLogTypesChartElement ex
 			li uui-icon {
 				margin-right: 1em;
 			}
+
+			.count {
+				margin-left: 0.3em;
+				color: var(--uui-color-text-alt);
+			}
 		`,
     ]; }
 };
+__decorate([
+    consumeContext({ context: UMB_APP_LOG_VIEWER_CONTEXT })
+], UmbLogViewerLogTypesChartElement.prototype, "_logViewerContext", null);
 __decorate([
     state()
-], UmbLogViewerLogTypesChartElement.prototype, "_logLevelCountResponse", void 0);
+], UmbLogViewerLogTypesChartElement.prototype, "_dateRange", void 0);
+__decorate([
+    state()
+], UmbLogViewerLogTypesChartElement.prototype, "_logLevelCounts", void 0);
 __decorate([
     state()
 ], UmbLogViewerLogTypesChartElement.prototype, "_logLevelCount", void 0);
 __decorate([
     state()
 ], UmbLogViewerLogTypesChartElement.prototype, "_logLevelCountFilter", void 0);
+__decorate([
+    state()
+], UmbLogViewerLogTypesChartElement.prototype, "_logLevelKeys", void 0);
 UmbLogViewerLogTypesChartElement = __decorate([
     customElement('umb-log-viewer-log-types-chart')
 ], UmbLogViewerLogTypesChartElement);

package/dist-cms/packages/log-viewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.d.ts

@@ -3,7 +3,8 @@ export declare class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitE
     #private;
     private _total;
     private _messageTemplates;
-    constructor();
+    private set _logViewerContext(value);
+    private get _logViewerContext();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }