Feature: LogViewer pagination

src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/logviewer.context.ts

@@ -67,7 +67,7 @@ export class UmbLogViewerWorkspaceContext extends UmbControllerBase implements U
 	};
 
 	#savedSearches = new UmbObjectState<PagedSavedLogSearchResponseModel | undefined>(undefined);
-	savedSearches = this.#savedSearches.asObservablePart((data) => data?.items);
+	savedSearches = this.#savedSearches.asObservablePart((data) => data);
 
 	#logCount = new UmbObjectState<LogLevelCountsReponseModel | null>(null);
 	logCount = this.#logCount.asObservable();
@@ -168,8 +168,8 @@ export class UmbLogViewerWorkspaceContext extends UmbControllerBase implements U
 		return this.#dateRange.getValue();
 	}
 
-	async getSavedSearches() {
-		const { data } = await this.#repository.getSavedSearches({ skip: 0, take: 100 });
+	async getSavedSearches({ skip = 0, take = 15 }: { skip?: number; take?: number } = {}) {
+		const { data } = await this.#repository.getSavedSearches({ skip, take });
 		if (data) {
 			this.#savedSearches.setValue(data);
 		} else {

src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/logviewer/logviewer-workspace.element.ts

@@ -33,7 +33,11 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement {
 	}
 
 	render() {
-		return html` <umb-workspace-editor headline="Log Viewer" .enforceNoFooter=${true}> </umb-workspace-editor> `;
+		return html`
+			<umb-workspace-editor
+				headline=${this.localize.term('treeHeaders_logViewer')}
+				.enforceNoFooter=${true}></umb-workspace-editor>
+		`;
 	}
 
 	static styles = [

src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.ts

@@ -1,25 +1,31 @@
 import type { UmbLogViewerWorkspaceContext } from '../../../logviewer.context.js';
 import { UMB_APP_LOG_VIEWER_CONTEXT } from '../../../logviewer.context.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type {
-	PagedLogTemplateResponseModel,
+	LogTemplateResponseModel,
 	SavedLogSearchResponseModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
+import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
 
-//TODO: fix pagination bug when API is fixed
 @customElement('umb-log-viewer-message-templates-overview')
 export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement {
+	#itemsPerPage = 10;
+	#currentPage = 1;
+
 	@state()
-	private _messageTemplates: PagedLogTemplateResponseModel | null = null;
+	private _total = 0;
+
+	@state()
+	private _messageTemplates: Array<LogTemplateResponseModel> = [];
 
 	#logViewerContext?: UmbLogViewerWorkspaceContext;
 	constructor() {
 		super();
 		this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT, (instance) => {
 			this.#logViewerContext = instance;
-			this.#logViewerContext?.getMessageTemplates(0, 10);
+			this.#logViewerContext?.getMessageTemplates(0, this.#itemsPerPage);
 			this.#observeStuff();
 		});
 	}
@@ -27,13 +33,20 @@ export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement {
 	#observeStuff() {
 		if (!this.#logViewerContext) return;
 		this.observe(this.#logViewerContext.messageTemplates, (templates) => {
-			this._messageTemplates = templates ?? null;
+			this._messageTemplates = templates?.items ?? [];
+			this._total = templates?.total ?? 0;
 		});
 	}
 
 	#getMessageTemplates() {
-		const take = this._messageTemplates?.items?.length ?? 0;
-		this.#logViewerContext?.getMessageTemplates(0, take + 10);
+		//const take = this._messageTemplates?.length ?? 0;
+		const skip = this.#currentPage * this.#itemsPerPage - this.#itemsPerPage;
+		this.#logViewerContext?.getMessageTemplates(skip, this.#itemsPerPage);
+	}
+
+	#onChangePage(event: UUIPaginationEvent) {
+		this.#currentPage = event.target.current;
+		this.#getMessageTemplates();
 	}
 
 	#renderSearchItem = (searchListItem: SavedLogSearchResponseModel) => {
@@ -54,11 +67,11 @@ export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement {
 	render() {
 		return html`
 			<uui-box headline="Common Log Messages" id="saved-searches">
-				<p style="font-style: italic;">Total Unique Message types: ${this._messageTemplates?.total}</p>
+				<p style="font-style: italic;">Total Unique Message types: ${this._total}</p>
 
 				<uui-table>
 					${this._messageTemplates
-						? this._messageTemplates.items.map(
+						? this._messageTemplates.map(
 								(template) =>
 									html`<uui-table-row>
 										<uui-table-cell>
@@ -70,17 +83,15 @@ export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement {
 											</a>
 										</uui-table-cell>
 									</uui-table-row>`,
-						  )
+							)
 						: ''}
 				</uui-table>
-
-				<uui-button
-					id="show-more-templates-btn"
-					look="primary"
-					@click=${this.#getMessageTemplates}
-					label="Show more templates">
-					Show more
-				</uui-button>
+				${this._total > this.#itemsPerPage
+					? html`<uui-pagination
+							.current=${this.#currentPage}
+							.total=${Math.ceil(this._total / this.#itemsPerPage)}
+							@change=${this.#onChangePage}></uui-pagination>`
+					: nothing}
 			</uui-box>
 		`;
 	}
@@ -88,6 +99,10 @@ export class UmbLogViewerMessageTemplatesOverviewElement extends UmbLitElement {
 	static styles = [
 		UmbTextStyles,
 		css`
+			uui-pagination {
+				margin-top: var(--uui-size-layout-1);
+			}
+
 			#show-more-templates-btn {
 				margin-top: var(--uui-size-space-5);
 			}

src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts

@@ -1,23 +1,30 @@
 import type { UmbLogViewerWorkspaceContext } from '../../../logviewer.context.js';
 import { UMB_APP_LOG_VIEWER_CONTEXT } from '../../../logviewer.context.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { SavedLogSearchResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+import type { UUIPaginationEvent } from '@umbraco-cms/backoffice/external/uui';
 
 //TODO: implement the saved searches pagination when the API total bug is fixed
 @customElement('umb-log-viewer-saved-searches-overview')
 export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement {
+	#itemsPerPage = 15;
+	#currentPage = 1;
+
 	@state()
 	private _savedSearches: SavedLogSearchResponseModel[] = [];
 
+	@state()
+	private _total = 0;
+
 	#logViewerContext?: UmbLogViewerWorkspaceContext;
 
 	constructor() {
 		super();
 		this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT, (instance) => {
 			this.#logViewerContext = instance;
-			this.#logViewerContext?.getSavedSearches();
+			this.#logViewerContext?.getSavedSearches({ skip: 0, take: this.#itemsPerPage });
 			this.#observeStuff();
 		});
 	}
@@ -25,10 +32,21 @@ export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement {
 	#observeStuff() {
 		if (!this.#logViewerContext) return;
 		this.observe(this.#logViewerContext.savedSearches, (savedSearches) => {
-			this._savedSearches = savedSearches ?? [];
+			this._savedSearches = savedSearches?.items ?? [];
+			this._total = savedSearches?.total ?? 0;
 		});
 	}
 
+	#getSavedSearches() {
+		const skip = this.#currentPage * this.#itemsPerPage - this.#itemsPerPage;
+		this.#logViewerContext?.getSavedSearches({ skip, take: this.#itemsPerPage });
+	}
+
+	#onChangePage(event: UUIPaginationEvent) {
+		this.#currentPage = event.target.current;
+		this.#getSavedSearches();
+	}
+
 	#renderSearchItem = (searchListItem: SavedLogSearchResponseModel) => {
 		return html` <li>
 			<uui-menu-item
@@ -47,6 +65,12 @@ export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement {
 			<ul>
 				${this.#renderSearchItem({ name: 'All logs', query: '' })} ${this._savedSearches.map(this.#renderSearchItem)}
 			</ul>
+			${this._total > this.#itemsPerPage
+				? html`<uui-pagination
+						.current=${this.#currentPage}
+						.total=${Math.ceil(this._total / this.#itemsPerPage)}
+						@change=${this.#onChangePage}></uui-pagination>`
+				: nothing}
 		</uui-box>`;
 	}
 

src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/components/log-viewer-messages-list.element.ts

@@ -89,12 +89,12 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 							.properties=${log.properties ?? []}
 							.exception=${log.exception ?? ''}
 							.messageTemplate=${log.messageTemplate ?? ''}></umb-log-viewer-message>`,
-			  )}`
+				)}`
 			: html`
 					<span id="empty">
 						<uui-icon name="icon-search"></uui-icon>Sorry, we cannot find what you are looking for.
 					</span>
-			  `}`;
+				`}`;
 	}
 
 	render() {
@@ -124,6 +124,10 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
 
 	static styles = [
 		css`
+			uui-pagination {
+				display: block;
+				margin-bottom: var(--uui-size-layout-1);
+			}
 			uui-box {
 				--uui-box-default-padding: 0;
 			}

src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/search/log-search-view.element.ts

@@ -57,6 +57,10 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
 	static styles = [
 		UmbTextStyles,
 		css`
+			:host {
+				margin-bottom: var(--uui-size-space-2);
+			}
+
 			uui-box {
 				--uui-box-default-padding: 0;
 			}