From 838e67ac2cd5af9f824daa1062df3c3cb49b8dae Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 3 Mar 2023 12:28:44 +0100 Subject: [PATCH] extract log-viewer filter to separate component --- .../logviewer/workspace/logviewer.context.ts | 11 +- .../workspace/views/components/index.ts | 1 + ...og-viewer-log-level-filter-menu.element.ts | 118 ++++++++++++++++++ .../log-viewer-polling-button.element.ts | 4 +- .../workspace/views/log-search.element.ts | 109 ++-------------- 5 files changed, 135 insertions(+), 108 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-log-level-filter-menu.element.ts 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 0d123061a1..782ae76e43 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,8 +73,8 @@ export class UmbLogViewerWorkspaceContext { #messageTemplates = new DeepState(null); messageTemplates = createObservablePart(this.#messageTemplates, (data) => data); - #logLevel = new ArrayState([]); - logLevel = createObservablePart(this.#logLevel, (data) => data); + #logLevelsFilter = new ArrayState([]); + logLevelsFilter = createObservablePart(this.#logLevelsFilter, (data) => data); #logs = new DeepState(null); logs = createObservablePart(this.#logs, (data) => data?.items); @@ -187,7 +187,7 @@ export class UmbLogViewerWorkspaceContext { take, orderDirection: this.#sortingDirection.getValue(), filterExpression: this.#filterExpression.getValue(), - logLevel: this.#logLevel.getValue(), + logLevel: this.#logLevelsFilter.getValue(), ...this.#dateRange.getValue(), }; @@ -202,12 +202,11 @@ export class UmbLogViewerWorkspaceContext { this.#filterExpression.next(query); } - setLogLevels(logLevels: LogLevelModel[]) { - this.#logLevel.next(logLevels); + setLogLevelsFilter(logLevels: LogLevelModel[]) { + this.#logLevelsFilter.next(logLevels); } togglePolling() { - const isEnabled = !this.#polling.getValue().enabled; this.#polling.update({ enabled: isEnabled, diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/index.ts index 14acdff6af..682d1ed887 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/index.ts @@ -1,3 +1,4 @@ export * from './log-viewer-level-tag.element'; +export * from './log-viewer-log-level-filter-menu.element'; export * from './log-viewer-message.element'; export * from './log-viewer-polling-button.element'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-log-level-filter-menu.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-log-level-filter-menu.element.ts new file mode 100644 index 0000000000..3a7cb253dc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-log-level-filter-menu.element.ts @@ -0,0 +1,118 @@ +import { UUICheckboxElement } from '@umbraco-ui/uui'; +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html } from 'lit'; +import { customElement, queryAll, state } from 'lit/decorators.js'; +import _ from 'lodash'; +import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../logviewer.context'; +import { LogLevelModel } from '@umbraco-cms/backend-api'; +import { UmbLitElement } from '@umbraco-cms/element'; + +@customElement('umb-log-viewer-log-level-filter-menu') +export class UmbLogViewerLogLevelFilterMenuElement extends UmbLitElement { + static styles = [ + UUITextStyles, + css` + #log-level-selector { + padding: var(--uui-box-default-padding, var(--uui-size-space-5, 18px)); + width: 150px; + background-color: var(--uui-color-surface); + box-shadow: var(--uui-shadow-depth-3); + display: flex; + flex-direction: column; + gap: var(--uui-size-space-3); + } + + .log-level-button-indicator { + font-weight: 600; + } + + .log-level-button-indicator:not(:last-of-type)::after { + content: ', '; + } + `, + ]; + + @queryAll('#log-level-selector > uui-checkbox') + private _logLevelSelectorCheckboxes!: NodeListOf; + + @state() + private _logLevelFilter: LogLevelModel[] = []; + + #logViewerContext?: UmbLogViewerWorkspaceContext; + + constructor() { + super(); + this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => { + this.#logViewerContext = instance; + this.#observeLogLevelFilter(); + }); + } + + #observeLogLevelFilter() { + if (!this.#logViewerContext) return; + + this.observe(this.#logViewerContext.logLevelsFilter, (levelsFilter) => { + this._logLevelFilter = levelsFilter ?? []; + }); + } + + #setLogLevel() { + if (!this.#logViewerContext) return; + this.#logViewerContext?.setCurrentPage(1); + + const logLevels = Array.from(this._logLevelSelectorCheckboxes) + .filter((checkbox) => checkbox.checked) + .map((checkbox) => checkbox.value as LogLevelModel); + this.#logViewerContext?.setLogLevelsFilter(logLevels); + this.#logViewerContext.getLogs(); + } + + setLogLevelDebounce = _.debounce(this.#setLogLevel, 300); + + #selectAllLogLevels() { + this._logLevelSelectorCheckboxes.forEach((checkbox) => (checkbox.checked = true)); + this.#setLogLevel(); + } + + #deselectAllLogLevels() { + this._logLevelSelectorCheckboxes.forEach((checkbox) => (checkbox.checked = false)); + this.#setLogLevel(); + } + + #renderLogLevelSelector() { + return html` +
+ ${Object.values(LogLevelModel).map( + (logLevel) => + html`` + )} + Select all + Deselect all +
+ `; + } + + render() { + return html` + Log Level: + ${this._logLevelFilter.length > 0 + ? this._logLevelFilter.map((level) => html`${level}`) + : 'All'} + ${this.#renderLogLevelSelector()} + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-log-viewer-log-level-filter-menu': UmbLogViewerLogLevelFilterMenuElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-polling-button.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-polling-button.element.ts index 397dfe28ef..2a579bd1a6 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-polling-button.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-polling-button.element.ts @@ -65,10 +65,10 @@ export class UmbLogViewerPollingButtonElement extends UmbLitElement { @state() private _poolingConfig: PoolingCOnfig = { enabled: false, interval: 0 }; - #logViewerContext?: UmbLogViewerWorkspaceContext; - #pollingIntervals: PoolingInterval[] = [2000, 5000, 10000, 20000, 30000]; + #logViewerContext?: UmbLogViewerWorkspaceContext; + constructor() { super(); this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-search.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-search.element.ts index fbb07ade22..448d418a36 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-search.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-search.element.ts @@ -1,24 +1,20 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html } from 'lit'; -import { customElement, state, query, queryAll } from 'lit/decorators.js'; +import { customElement, state, query } from 'lit/decorators.js'; import { - LogViewerDateRange, - PoolingCOnfig, - PoolingInterval, - UmbLogViewerWorkspaceContext, - UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, -} from '../logviewer.context'; -import { UmbLitElement } from '@umbraco-cms/element'; -import { DirectionModel, LogLevelModel, LogMessageModel, SavedLogSearchModel } from '@umbraco-cms/backend-api'; -import { - UUICheckboxElement, UUIInputElement, UUIPaginationElement, UUIPopoverElement, UUIScrollContainerElement, UUISymbolExpandElement, } from '@umbraco-ui/uui'; -import _ from 'lodash'; +import { + LogViewerDateRange, + UmbLogViewerWorkspaceContext, + UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, +} from '../logviewer.context'; +import { DirectionModel, LogMessageModel, SavedLogSearchModel } from '@umbraco-cms/backend-api'; +import { UmbLitElement } from '@umbraco-cms/element'; @customElement('umb-log-viewer-search-view') export class UmbLogViewerSearchViewElement extends UmbLitElement { @@ -130,24 +126,6 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement { flex: 6 0 14ch; } - #log-level-selector { - padding: var(--uui-box-default-padding, var(--uui-size-space-5, 18px)); - width: 150px; - background-color: var(--uui-color-surface); - box-shadow: var(--uui-shadow-depth-3); - display: flex; - flex-direction: column; - gap: var(--uui-size-space-3); - } - - .log-level-button-indicator { - font-weight: 600; - } - - .log-level-button-indicator:not(:last-of-type)::after { - content: ', '; - } - #empty { display: flex; justify-content: center; @@ -164,21 +142,12 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement { @query('#saved-searches-popover') private _savedSearchesPopover!: UUIPopoverElement; - @query('#polling-popover') - private _pollingPopover!: UUIPopoverElement; - - @query('#polling-expand-symbol') - private _polingExpandSymbol!: UUISymbolExpandElement; - @query('#saved-search-expand-symbol') private _savedSearchesExpandSymbol!: UUISymbolExpandElement; @query('#logs-scroll-container') private _logsScrollContainer!: UUIScrollContainerElement; - @queryAll('#log-level-selector > uui-checkbox') - private _logLevelSelectorCheckboxes!: NodeListOf; - @state() private _savedSearches: SavedLogSearchModel[] = []; @@ -200,11 +169,6 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement { @state() private _logsTotal = 0; - @state() - private _logLevel: LogLevelModel[] = []; - - @state() - private _poolingConfig: PoolingCOnfig = { enabled: false, interval: 0 }; #logViewerContext?: UmbLogViewerWorkspaceContext; @@ -240,14 +204,6 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement { this._logsTotal = total ?? 0; }); - this.observe(this.#logViewerContext.logLevel, (levels) => { - this._logLevel = levels ?? []; - }); - - this.observe(this.#logViewerContext.polling, (poolingConfig) => { - this._poolingConfig = { ...poolingConfig }; - }); - this.observe(this.#logViewerContext.sortingDirection, (direction) => { this._sortingDirection = direction; }); @@ -342,47 +298,6 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement { Search`; } - #setLogLevel() { - if (!this.#logViewerContext) return; - this.#logViewerContext?.setCurrentPage(1); - - const logLevels = Array.from(this._logLevelSelectorCheckboxes) - .filter((checkbox) => checkbox.checked) - .map((checkbox) => checkbox.value as LogLevelModel); - this.#logViewerContext?.setLogLevels(logLevels); - this.#logViewerContext.getLogs(); - } - - setLogLevelDebounce = _.debounce(this.#setLogLevel, 300); - - #selectAllLogLevels() { - this._logLevelSelectorCheckboxes.forEach((checkbox) => (checkbox.checked = true)); - this.#setLogLevel(); - } - - #deselectAllLogLevels() { - this._logLevelSelectorCheckboxes.forEach((checkbox) => (checkbox.checked = false)); - this.#setLogLevel(); - } - - #renderLogLevelSelector() { - return html` -
- ${Object.values(LogLevelModel).map( - (logLevel) => - html`` - )} - Select all - Deselect all -
- `; - } #renderPolingTimeSelector() { return html` `; @@ -398,13 +313,7 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement { return html`
- Log Level: - ${this._logLevel.length > 0 - ? this._logLevel.map((level) => html`${level}`) - : 'All'} - ${this.#renderLogLevelSelector()} - + ${this.#renderPolingTimeSelector()}
${this.#renderSearchInput()}