diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts index 0decf728c9..10ca4d2af0 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/components/log-viewer-date-range-selector.element.ts @@ -11,8 +11,6 @@ import { query as getQuery, path, toQueryString } from '@umbraco-cms/backoffice/ @customElement('umb-log-viewer-date-range-selector') export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement { - - @state() private _startDate = ''; @@ -31,7 +29,6 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement { this.addEventListener('input', this.#setDates); this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => { this.#logViewerContext = instance; - this.#logViewerContext?.getMessageTemplates(0, 10); this.#observeStuff(); }); } @@ -95,7 +92,7 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement { `; } - + static styles = [ UUITextStyles, css` @@ -115,7 +112,6 @@ export class UmbLogViewerDateRangeSelectorElement extends UmbLitElement { border: none; background: none; width: 100%; - height: 100%; outline: none; position: relative; border-bottom: 2px solid transparent; 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 d7b06d7812..d083a3e7b9 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 @@ -35,7 +35,6 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement { constructor() { super(); - this.#logViewerContext.init(); this.provideContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, this.#logViewerContext); } 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 73c793e4dd..1c52da7239 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 @@ -73,6 +73,9 @@ export class UmbLogViewerWorkspaceContext { #canShowLogs = new UmbBasicState(null); canShowLogs = createObservablePart(this.#canShowLogs, (data) => data); + #isLoadingLogs = new UmbBasicState(null); + isLoadingLogs = createObservablePart(this.#isLoadingLogs, (data) => data); + #filterExpression = new UmbStringState(''); filterExpression = createObservablePart(this.#filterExpression, (data) => data); @@ -101,18 +104,7 @@ export class UmbLogViewerWorkspaceContext { this.#repository = new UmbLogViewerRepository(this.#host); } - async init() { - this.validateLogSize(); - } - - reset() { - this.#logs.next({ items: [], total: 0 }); - this.setCurrentPage(1); - } - onChangeState = () => { - this.reset(); - const searchQuery = query(); let sanitizedQuery = ''; if (searchQuery.lq) { @@ -262,10 +254,14 @@ export class UmbLogViewerWorkspaceContext { } getLogs = async () => { - if (!this.#canShowLogs.getValue()) { + if (this.#canShowLogs.getValue() === false) { return; } + const isPollingEnabled = this.#polling.getValue().enabled; + + if (!isPollingEnabled) this.#isLoadingLogs.next(true); + const skip = (this.currentPage - 1) * 100; const take = 100; @@ -279,7 +275,7 @@ export class UmbLogViewerWorkspaceContext { }; const { data } = await this.#repository.getLogs(options); - + this.#isLoadingLogs.next(false); if (data) { this.#logs.next(data); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts index dc9221a549..b093239de7 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.ts @@ -8,8 +8,6 @@ import { SavedLogSearchResponseModel } from '@umbraco-cms/backoffice/backend-api //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 { - - @state() private _savedSearches: SavedLogSearchResponseModel[] = []; @@ -33,12 +31,12 @@ export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement { #renderSearchItem = (searchListItem: SavedLogSearchResponseModel) => { return html`
  • - - ${searchListItem.name} - + ${searchListItem.name} +
  • `; }; @@ -49,7 +47,7 @@ export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement { `; } - + static styles = [ UUITextStyles, css` @@ -75,6 +73,10 @@ export class UmbLogViewerSavedSearchesOverviewElement extends UmbLitElement { li uui-icon { margin-right: 1em; } + + uui-menu-item { + width: 100%; + } `, ]; } 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 afeaf47ad0..2d01b009de 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 @@ -7,8 +7,6 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; //TODO: add a disabled attribute to the show more button when the total number of items is correctly returned from the endpoint @customElement('umb-log-viewer-overview-view') export class UmbLogViewerOverviewViewElement extends UmbLitElement { - - @state() private _errorCount = 0; @@ -58,12 +56,12 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement { href=${`section/settings/workspace/logviewer/search/?lq=${encodeURIComponent( `@Level='Fatal' or @Level='Error' or Has(@Exception)` )}`}> -

    ${this._errorCount}

    ${this._errorCount} -

    +

    @@ -81,7 +79,7 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement { `; } - + static styles = [ css` :host { @@ -106,7 +104,7 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement { align-self: start; display: grid; grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(4, 1fr); + grid-template-rows: repeat(4, max-content); gap: 20px 20px; } @@ -116,15 +114,21 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement { #errors { grid-area: 2 / 1 / 3 / 2; + --uui-box-default-padding: 0; + } + + #errors > uui-button { + width: 100%; } #level { grid-area: 2 / 2 / 3 / 3; } - #log-lever { + #log-level { color: var(--uui-color-positive); text-align: center; + margin: 0; } #types { @@ -152,9 +156,10 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement { } #error-count { - font-size: 4rem; + font-size: 3rem; text-align: center; color: var(--uui-color-danger); + margin: 0; } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts index ff96a79e5f..3841324b7a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-message.element.ts @@ -9,8 +9,6 @@ import { query as getQuery, toQueryString } from '@umbraco-cms/backoffice/router //TODO: check how to display EventId field in the message properties @customElement('umb-log-viewer-message') export class UmbLogViewerMessageElement extends UmbLitElement { - - @query('details') details!: HTMLDetailsElement; @@ -141,7 +139,7 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
    ${this.properties.find((property) => property.name === 'MachineName')?.value}
    -
    ${this.renderedMessage}
    +
    ${this.renderedMessage}
    ${this.exception ? html`
    ${this.exception}
    ` : ''}
      @@ -195,7 +193,7 @@ export class UmbLogViewerMessageElement extends UmbLitElement { `; } - + static styles = [ UUITextStyles, css` @@ -251,6 +249,7 @@ export class UmbLogViewerMessageElement extends UmbLitElement { #message { flex: 6 0 14ch; + word-break: break-all; } .property-name, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts index c9c07dca5d..6bc5e0fba8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts @@ -8,8 +8,6 @@ import { DirectionModel, LogMessageResponseModel } from '@umbraco-cms/backoffice @customElement('umb-log-viewer-messages-list') export class UmbLogViewerMessagesListElement extends UmbLitElement { - - @query('#logs-scroll-container') private _logsScrollContainer!: UUIScrollContainerElement; @@ -22,6 +20,9 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement { @state() private _logsTotal = 0; + @state() + private _isLoading = true; + #logViewerContext?: UmbLogViewerWorkspaceContext; constructor() { @@ -29,7 +30,6 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement { this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => { this.#logViewerContext = instance; this.#observeLogs(); - this.#logViewerContext.getLogs(); }); } @@ -40,6 +40,10 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement { this._logs = logs ?? []; }); + this.observe(this.#logViewerContext.isLoadingLogs, (isLoading) => { + this._isLoading = isLoading === null ? this._isLoading : isLoading; + }); + this.observe(this.#logViewerContext.logsTotal, (total) => { this._logsTotal = total ?? 0; }); @@ -74,6 +78,24 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement { `; } + #renderLogs() { + return html`${this._logs.length > 0 + ? html` ${this._logs.map( + (log) => html`` + )}` + : html` + Sorry, we cannot find what you are looking for. + `}`; + } + render() { return html`

      Total items: ${this._logsTotal}

      @@ -90,25 +112,14 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
      Machine name
      Message
      - ${this._logs.length > 0 - ? html` ${this._logs.map( - (log) => html`` - )}` - : html` - Sorry, we cannot find what you are looking for. - `} - ${this._renderPagination()} + ${this._isLoading + ? html` Loading log messages... ` + : html`${this.#renderLogs()}${this._renderPagination()}`}
      `; } - + static styles = [ UUITextStyles, css` diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts index 62cfe8b83f..7b019c0c64 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-polling-button.element.ts @@ -32,7 +32,6 @@ export class UmbLogViewerPollingButtonElement extends UmbLitElement { this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => { this.#logViewerContext = instance; this.#observePoolingConfig(); - this.#logViewerContext.getLogs(); }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts index 6a4fd30c3d..7d867c4c7e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/search/components/log-viewer-search-input.element.ts @@ -29,8 +29,6 @@ export const UMB_LOG_VIEWER_SAVE_SEARCH_MODAL = new UmbModalToken(); #logViewerContext?: UmbLogViewerWorkspaceContext; @@ -58,7 +59,6 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement { this.#logViewerContext = instance; this.#observeStuff(); this.#logViewerContext?.getSavedSearches(); - this.#logViewerContext.getLogs(); }); this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => { @@ -73,6 +73,7 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement { .subscribe((query) => { this.#logViewerContext?.setFilterExpression(query); this.#persist(query); + this._isQuerySaved = this._savedSearches.some((search) => search.query === query); this._showLoader = false; }); } @@ -81,10 +82,12 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement { if (!this.#logViewerContext) return; this.observe(this.#logViewerContext.savedSearches, (savedSearches) => { this._savedSearches = savedSearches ?? []; + this._isQuerySaved = this._savedSearches.some((search) => search.query === this._inputQuery); }); this.observe(this.#logViewerContext.filterExpression, (query) => { this._inputQuery = query; + this._isQuerySaved = this._savedSearches.some((search) => search.query === query); }); } @@ -112,20 +115,19 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement { } #persist(filter: string) { - let q = getQuery(); + let query = getQuery(); - q = { - ...q, + query = { + ...query, lq: filter, }; - window.history.pushState({}, '', `${path()}?${toQueryString(q)}`); + window.history.pushState({}, '', `${path()}?${toQueryString(query)}`); } #clearQuery() { this.inputQuery$.next(''); this.#logViewerContext?.setFilterExpression(''); - this.#logViewerContext?.getLogs(); } #modalHandler?: UmbModalHandler; @@ -134,9 +136,8 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement { this.#logViewerContext?.saveSearch(savedSearch); } - #removeSearch(event: Event) { - const target = event.target as UUIButtonElement; - this.#logViewerContext?.removeSearch({ name: target.id }); + #removeSearch(name: string) { + this.#logViewerContext?.removeSearch({ name }); } #openSaveSearchDialog() { @@ -144,6 +145,7 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement { this.#modalHandler?.onSubmit().then((savedSearch) => { if (savedSearch) { this.#saveSearch(savedSearch); + this._isQuerySaved = true; } }); } @@ -164,9 +166,11 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement { ` : ''} ${this._inputQuery - ? html`` + : ''}` : html``} @@ -190,7 +194,10 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement { @click=${() => this.#setQueryFromSavedSearch(search.query ?? '')}> ${search.name} ${search.query} this.#removeSearch(search.name ?? '')} > ` @@ -199,7 +206,7 @@ export class UmbLogViewerSearchInputElement extends UmbLitElement { `; } - + static styles = [ UUITextStyles, css` 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 264981edab..7258faf17c 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 @@ -7,10 +7,8 @@ import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-a @customElement('umb-log-viewer-search-view') export class UmbLogViewerSearchViewElement extends UmbLitElement { - - @state() - private _canShowLogs = false; + private _canShowLogs = true; #logViewerContext?: UmbLogViewerWorkspaceContext; @@ -29,7 +27,7 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement { if (!this.#logViewerContext) return; this.#canShowLogsObserver = this.observe(this.#logViewerContext.canShowLogs, (canShowLogs) => { - this._canShowLogs = canShowLogs ?? false; + this._canShowLogs = canShowLogs ?? this._canShowLogs; }); } @@ -52,7 +50,7 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement { `; } - + static styles = [ UUITextStyles, css`