yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: LogViewer pagination

Browse Source
This commit is contained in:
Lone Iversen
2024-03-11 15:45:46 +01:00
parent ce02e764a1
commit 6c9619a1e5
6 changed files with 79 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 {

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

@@ -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 = [

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

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

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

@@ -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>`;
}

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

@@ -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;
}

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

@@ -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;
}