From 6a91fd33c0ce385abbd488f9ac38dab5de6cf638 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Mon, 6 Mar 2023 09:47:40 +0100 Subject: [PATCH] add log level component --- .../repository/log-viewer.repository.ts | 5 ++ .../sources/log-viewer.server.data.ts | 16 +++---- .../logviewer-root-workspace.element.ts | 1 - .../logviewer/workspace/logviewer.context.ts | 12 +++++ .../views/overview/components/index.ts | 3 +- .../log-viewer-log-level-overview.element.ts | 48 +++++++++++++++++++ .../overview/log-overview-view.element.ts | 12 ++--- 7 files changed, 79 insertions(+), 18 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-log-level-overview.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/log-viewer.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/log-viewer.repository.ts index 4b2c334529..5878734a15 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/log-viewer.repository.ts +++ b/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 }); + } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/sources/log-viewer.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/sources/log-viewer.server.data.ts index 733c20bcfb..727b529835 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/repository/sources/log-viewer.server.data.ts +++ b/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; /** 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 1e4bac4de6..fc2f769528 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 @@ -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() { 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 949118bf6a..c201f5c2af 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 @@ -4,6 +4,7 @@ import { DirectionModel, LogLevelCountsModel, LogLevelModel, + PagedLoggerModel, PagedLogMessageModel, PagedLogTemplateModel, PagedSavedLogSearchModel, @@ -58,6 +59,9 @@ export class UmbLogViewerWorkspaceContext { #dateRange = new DeepState(this.defaultDateRange); dateRange = createObservablePart(this.#dateRange, (data) => data); + #loggers = new DeepState(null); + loggers = createObservablePart(this.#loggers, (data) => data?.items); + #filterExpression = new StringState(''); 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; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/index.ts index 95f7c15a2c..926372cc6e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/index.ts +++ b/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'; \ No newline at end of file +export * from './log-viewer-log-types-chart.element'; +export * from './log-viewer-log-level-overview.element'; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-log-level-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-log-level-overview.element.ts new file mode 100644 index 0000000000..2aeafb27fa --- /dev/null +++ b/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; + } +} 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 6f26d8fc7a..2be52cbde2 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 @@ -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 { -

Info

+