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

extract log-viewer filter to separate component

Browse Source
This commit is contained in:
Julia Gru
2023-03-03 12:28:44 +01:00
parent 2fa8fccd6e
commit 838e67ac2c
5 changed files with 135 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,8 +73,8 @@ export class UmbLogViewerWorkspaceContext {
#messageTemplates = new DeepState<PagedLogTemplateModel | null>(null);
messageTemplates = createObservablePart(this.#messageTemplates, (data) => data);
#logLevel = new ArrayState<LogLevelModel>([]);
logLevel = createObservablePart(this.#logLevel, (data) => data);
#logLevelsFilter = new ArrayState<LogLevelModel>([]);
logLevelsFilter = createObservablePart(this.#logLevelsFilter, (data) => data);
#logs = new DeepState<PagedLogMessageModel | null>(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,

1
src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/index.ts
View File

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

118
src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-log-level-filter-menu.element.ts Normal file
View File

@@ -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<UUICheckboxElement>;
@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`
<div slot="dropdown" id="log-level-selector" @change=${this.setLogLevelDebounce}>
${Object.values(LogLevelModel).map(
(logLevel) =>
html`<uui-checkbox class="log-level-menu-item" .value=${logLevel} label="${logLevel}"
><umb-log-viewer-level-tag .level=${logLevel}></umb-log-viewer-level-tag
></uui-checkbox>`
)}
<uui-button class="log-level-menu-item" @click=${this.#selectAllLogLevels} label="Select all"
>Select all</uui-button
>
<uui-button class="log-level-menu-item" @click=${this.#deselectAllLogLevels} label="Deselect all"
>Deselect all</uui-button
>
</div>
`;
}
render() {
return html`
<umb-button-with-dropdown label="Select log levels"
>Log Level:
${this._logLevelFilter.length > 0
? this._logLevelFilter.map((level) => html`<span class="log-level-button-indicator">${level}</span>`)
: 'All'}
${this.#renderLogLevelSelector()}
</umb-button-with-dropdown>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-log-viewer-log-level-filter-menu': UmbLogViewerLogLevelFilterMenuElement;
}
}

4
src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-polling-button.element.ts
View File

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

109
src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-search.element.ts
View File

@@ -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<UUICheckboxElement>;
@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 {
<uui-button look="primary" @click=${this.#search} label="Search">Search</uui-button>`;
}
#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`
<div slot="dropdown" id="log-level-selector" @change=${this.setLogLevelDebounce}>
${Object.values(LogLevelModel).map(
(logLevel) =>
html`<uui-checkbox class="log-level-menu-item" .value=${logLevel} label="${logLevel}"
><umb-log-viewer-level-tag .level=${logLevel}></umb-log-viewer-level-tag
></uui-checkbox>`
)}
<uui-button class="log-level-menu-item" @click=${this.#selectAllLogLevels} label="Select all"
>Select all</uui-button
>
<uui-button class="log-level-menu-item" @click=${this.#deselectAllLogLevels} label="Deselect all"
>Deselect all</uui-button
>
</div>
`;
}
#renderPolingTimeSelector() {
return html` <umb-log-viewer-polling-button> </umb-log-viewer-polling-button>`;
@@ -398,13 +313,7 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
return html`
<div id="layout">
<div id="levels-container">
<umb-button-with-dropdown label="Select log levels"
>Log Level:
${this._logLevel.length > 0
? this._logLevel.map((level) => html`<span class="log-level-button-indicator">${level}</span>`)
: 'All'}
${this.#renderLogLevelSelector()}
</umb-button-with-dropdown>
<umb-log-viewer-log-level-filter-menu></umb-log-viewer-log-level-filter-menu>
${this.#renderPolingTimeSelector()}
</div>
<div id="input-container">${this.#renderSearchInput()}</div>