From 90a2fe6422c1b80c7a6ca5a0a9a4bea2cc6bbd37 Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Tue, 7 Mar 2023 10:20:35 +0100 Subject: [PATCH] add log size validation --- .../logviewer-root/components/index.ts | 1 + ...log-viewer-to-many-logs-warning.element.ts | 27 +++++++++++++ .../logviewer/workspace/logviewer.context.ts | 17 +++++--- .../log-viewer-log-types-chart.element.ts | 4 +- .../overview/log-overview-view.element.ts | 39 +++++++++++-------- .../views/search/log-search-view.element.ts | 26 ++++++++++++- 6 files changed, 88 insertions(+), 26 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-to-many-logs-warning.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/index.ts index 07f569571e..e204c32424 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/index.ts @@ -1,2 +1,3 @@ export * from './log-viewer-date-range-selector.element'; export * from './log-viewer-level-tag.element'; +export * from './log-viewer-to-many-logs-warning.element'; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-to-many-logs-warning.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-to-many-logs-warning.element.ts new file mode 100644 index 0000000000..b0bdb0c1ce --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-to-many-logs-warning.element.ts @@ -0,0 +1,27 @@ +import { css, html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators.js'; + +@customElement('umb-log-viewer-to-many-logs-warning') +export class UmbLogViewerToManyLogsWarningElement extends LitElement { + static styles = [ + css` + :host { + text-align: center; + } + `, + ]; + + render() { + return html` +

Unable to view logs

+

Today's log file is too large to be viewed and would cause performance problems.

+

If you need to view the log files, narrow your date range or try opening them manually.

+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-log-viewer-to-many-logs-warning': UmbLogViewerToManyLogsWarningElement; + } +} 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 36d778dac7..93d7896cc6 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 @@ -62,7 +62,7 @@ export class UmbLogViewerWorkspaceContext { #loggers = new DeepState(null); loggers = createObservablePart(this.#loggers, (data) => data?.items); - #canShowLogs = new DeepState(null); + #canShowLogs = new BasicState(null); canShowLogs = createObservablePart(this.#canShowLogs, (data) => data); #filterExpression = new StringState(''); @@ -94,7 +94,7 @@ export class UmbLogViewerWorkspaceContext { } async init() { - this.getLogCount(this.defaultDateRange); + this.validateLogSize(); } setDateRange(dateRange: LogViewerDateRange) { @@ -107,7 +107,8 @@ export class UmbLogViewerWorkspaceContext { } this.#dateRange.next(dateRange); - this.getLogCount(dateRange); + this.validateLogSize(); + this.getLogCount(); } async getSavedSearches() { @@ -148,8 +149,8 @@ export class UmbLogViewerWorkspaceContext { } } - async getLogCount({ startDate, endDate }: LogViewerDateRange) { - const { data } = await this.#repository.getLogCount({ startDate, endDate }); + async getLogCount() { + const { data } = await this.#repository.getLogCount({ ...this.#dateRange.getValue() }); if (data) { this.#logCount.next(data); @@ -176,9 +177,11 @@ export class UmbLogViewerWorkspaceContext { const { data, error } = await this.#repository.getLogViewerValidateLogsSize({ ...this.#dateRange.getValue() }); if (error) { this.#canShowLogs.next(false); + console.info('LogViewer: ', error); return; } this.#canShowLogs.next(true); + console.info('LogViewer:showinfg logs'); } setCurrentPage(page: number) { @@ -186,6 +189,10 @@ export class UmbLogViewerWorkspaceContext { } getLogs = async () => { + if (!this.#canShowLogs.getValue()) { + return; + } + const skip = (this.currentPage - 1) * 100; const take = 100; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts index c7e9c26450..1c7ec7a927 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts @@ -1,7 +1,6 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { clamp } from 'lodash-es'; import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../../logviewer.context'; import { UmbLitElement } from '@umbraco-cms/element'; import { LogLevelCountsModel } from '@umbraco-cms/backend-api'; @@ -9,7 +8,6 @@ import { LogLevelCountsModel } from '@umbraco-cms/backend-api'; @customElement('umb-log-viewer-log-types-chart') export class UmbLogViewerLogTypesChartElement extends UmbLitElement { static styles = [ - UUITextStyles, css` #log-types-container { display: flex; @@ -76,7 +74,7 @@ export class UmbLogViewerLogTypesChartElement extends UmbLitElement { super(); this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => { this.#logViewerContext = instance; - this.#logViewerContext?.getMessageTemplates(0, 10); + this.#logViewerContext?.getLogCount(); this.#observeStuff(); }); } 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 98da8e9a41..38191cf274 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 @@ -56,7 +56,8 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement { grid-area: 3 / 1 / 5 / 3; } - #saved-searches-container { + #saved-searches-container, + to-many-logs-warning { grid-area: saved-searches; } @@ -86,27 +87,24 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement { @state() private _errorCount = 0; - @state() - private _logLevelCountFilter: string[] = []; - - @state() - private logLevelCount: [string, number][] = []; - @state() private _logLevelCount: LogLevelCountsModel | null = null; + @state() + private _canShowLogs = false; + #logViewerContext?: UmbLogViewerWorkspaceContext; constructor() { super(); this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => { this.#logViewerContext = instance; - this.#observeStuff(); + this.#observeErrorCount(); + this.#observeCanShowLogs(); this.#logViewerContext?.getLogLevels(0, 100); - this.#logViewerContext?.validateLogSize(); }); } - #observeStuff() { + #observeErrorCount() { if (!this.#logViewerContext) return; this.observe(this.#logViewerContext.logCount, () => { @@ -114,6 +112,13 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement { }); } + #observeCanShowLogs() { + if (!this.#logViewerContext) return; + this.observe(this.#logViewerContext.canShowLogs, (canShowLogs) => { + this._canShowLogs = canShowLogs ?? false; + }); + } + render() { return html`
@@ -133,13 +138,15 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
-
- -
+ ${this._canShowLogs + ? html`
+ +
-
- -
+
+ +
` + : html``} `; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts index 2696aab4cf..91d032a69e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/log-search-view.element.ts @@ -1,7 +1,8 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import { customElement, state } from 'lit/decorators.js'; import { UmbLitElement } from '@umbraco-cms/element'; +import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../logviewer.context'; @customElement('umb-log-viewer-search-view') export class UmbLogViewerSearchViewElement extends UmbLitElement { @@ -39,6 +40,25 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement { `, ]; + @state() + private _canShowLogs = false; + + #logViewerContext?: UmbLogViewerWorkspaceContext; + constructor() { + super(); + this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => { + this.#logViewerContext = instance; + this.#observeCanShowLogs(); + }); + } + + #observeCanShowLogs() { + if (!this.#logViewerContext) return; + this.observe(this.#logViewerContext.canShowLogs, (canShowLogs) => { + this._canShowLogs = canShowLogs ?? false; + }); + } + render() { return html`
@@ -52,7 +72,9 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
- + ${this._canShowLogs + ? html`` + : html``}
`; }