add log size validation

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';

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`<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>
+		</uui-box>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-log-viewer-to-many-logs-warning': UmbLogViewerToManyLogsWarningElement;
+	}
+}

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

@@ -62,7 +62,7 @@ export class UmbLogViewerWorkspaceContext {
 	#loggers = new DeepState<PagedLoggerModel | null>(null);
 	loggers = createObservablePart(this.#loggers, (data) => data?.items);
 
-	#canShowLogs = new DeepState<unknown>(null);
+	#canShowLogs = new BasicState<boolean | null>(null);
 	canShowLogs = createObservablePart(this.#canShowLogs, (data) => data);
 
 	#filterExpression = new StringState<string>('');
@@ -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;
 

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();
 		});
 	}

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`
 			<div id="logviewer-layout">
@@ -133,13 +138,15 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
 					<umb-log-viewer-log-types-chart id="types"></umb-log-viewer-log-types-chart>
 				</div>
 
-				<div id="saved-searches-container">
-					<umb-log-viewer-saved-searches-overview></umb-log-viewer-saved-searches-overview>
-				</div>
+				${this._canShowLogs
+					? html`<div id="saved-searches-container">
+								<umb-log-viewer-saved-searches-overview></umb-log-viewer-saved-searches-overview>
+							</div>
 
-				<div id="common-messages-container">
-					<umb-log-viewer-message-templates-overview></umb-log-viewer-message-templates-overview>
-				</div>
+							<div id="common-messages-container">
+								<umb-log-viewer-message-templates-overview></umb-log-viewer-message-templates-overview>
+							</div>`
+					: html`<umb-log-viewer-to-many-logs-warning id="to-many-logs-warning"></umb-log-viewer-to-many-logs-warning>`}
 			</div>
 		`;
 	}

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`
 			<div id="layout">
@@ -52,7 +72,9 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
 				<div id="input-container">
 					<umb-log-viewer-search-input></umb-log-viewer-search-input>
 				</div>
-				<umb-log-viewer-messages-list></umb-log-viewer-messages-list>
+				${this._canShowLogs
+					? html`<umb-log-viewer-messages-list></umb-log-viewer-messages-list>`
+					: html`<umb-log-viewer-to-many-logs-warning id="to-many-logs-warning"></umb-log-viewer-to-many-logs-warning>`}
 			</div>
 		`;
 	}