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

exctract polling button to separate component

Browse Source
This commit is contained in:
Julia Gru
2023-03-03 12:14:15 +01:00
parent e540d1c588
commit 2fa8fccd6e
5 changed files with 166 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/.vscode/settings.json vendored
View File

@@ -1,4 +1,5 @@
{
"cssVariables.lookupFiles": ["node_modules/@umbraco-ui/uui-css/dist/custom-properties.css"],
"cSpell.words": ["combobox", "variantable"]
"cSpell.words": ["combobox", "variantable"],
"exportall.config.folderListener": ["/src/backoffice/settings/logviewer/workspace/views/components"]
}

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

@@ -1,2 +1,3 @@
export * from './log-viewer-level-tag.element';
export * from './log-viewer-message.element';
export * from './log-viewer-polling-button.element';

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

@@ -1,6 +1,6 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { css, html, PropertyValueMap } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../logviewer.context';
import { LogLevelModel, LogMessagePropertyModel } from '@umbraco-cms/backend-api';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -113,6 +113,9 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
`,
];
@query('details')
details!: HTMLDetailsElement;
@property()
timestamp = '';
@@ -131,6 +134,9 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
@property({ attribute: false })
properties: Array<LogMessagePropertyModel> = [];
@property({ type: Boolean })
open = false;
@property()
exception = '';
@@ -140,6 +146,12 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
}
}
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
if (_changedProperties.has('open')) {
this.open ? this.details.setAttribute('open', 'true') : this.details.removeAttribute('open');
}
}
#logViewerContext?: UmbLogViewerWorkspaceContext;
constructor() {
super();
@@ -208,12 +220,18 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
}
this.#logViewerContext?.setFilterExpression(queryString);
this.#logViewerContext?.setCurrentPage(1);
this.details.removeAttribute('open');
this.#logViewerContext?.getLogs();
}
#setOpen(event: Event) {
this.open = (event.target as HTMLDetailsElement).open;
}
render() {
return html`
<details>
<details @open=${this.#setOpen}>
<summary>
<div id="timestamp">${this.date?.toLocaleString()}</div>
<div id="level">
@@ -241,7 +259,9 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
${this._propertiesWithSearchMenu.includes(property.name ?? '')
? html`<uui-button
compact
@click=${() => this._findLogsWithProperty(property)}
@click=${() => {
this._findLogsWithProperty(property);
}}
look="secondary"
label="Find logs with ${property.name}"
title="Find logs with ${property.name}"

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

@@ -0,0 +1,138 @@
import { UUIPopoverElement, UUISymbolExpandElement } from '@umbraco-ui/uui';
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, query, state } from 'lit/decorators.js';
import {
PoolingCOnfig,
PoolingInterval,
UmbLogViewerWorkspaceContext,
UMB_APP_LOG_VIEWER_CONTEXT_TOKEN,
} from '../../logviewer.context';
import { UmbLitElement } from '@umbraco-cms/element';
@customElement('umb-log-viewer-polling-button')
export class UmbLogViewerPollingButtonElement extends UmbLitElement {
static styles = [
UUITextStyles,
css`
#polling-interval-menu {
margin: 0;
padding: 0;
width: 20ch;
background-color: var(--uui-color-surface);
box-shadow: var(--uui-shadow-depth-3);
display: flex;
flex-direction: column;
transform: translateX(calc((100% - 33px) * -1));
}
#polling-enabled-icon {
margin-right: var(--uui-size-space-3);
margin-bottom: 1px;
-webkit-animation: rotate-center 0.8s ease-in-out infinite both;
animation: rotate-center 0.8s ease-in-out infinite both;
}
@-webkit-keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
`,
];
@query('#polling-popover')
private _pollingPopover!: UUIPopoverElement;
@query('#polling-expand-symbol')
private _polingExpandSymbol!: UUISymbolExpandElement;
@state()
private _poolingConfig: PoolingCOnfig = { enabled: false, interval: 0 };
#logViewerContext?: UmbLogViewerWorkspaceContext;
#pollingIntervals: PoolingInterval[] = [2000, 5000, 10000, 20000, 30000];
constructor() {
super();
this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
this.#logViewerContext = instance;
this.#observePoolingConfig();
this.#logViewerContext.getLogs();
});
}
#observePoolingConfig() {
if (!this.#logViewerContext) return;
this.observe(this.#logViewerContext.polling, (poolingConfig) => {
this._poolingConfig = { ...poolingConfig };
});
}
#togglePolling() {
this.#logViewerContext?.togglePolling();
}
#setPolingInterval(interval: PoolingInterval) {
this.#logViewerContext?.setPollingInterval(interval);
this.#closePoolingPopover();
}
#openPoolingPopover() {
this._pollingPopover.open = true;
this._polingExpandSymbol.open = true;
}
#closePoolingPopover() {
this._pollingPopover.open = false;
this._polingExpandSymbol.open = false;
}
render() {
return html` <uui-button-group>
<uui-button label="Start pooling" @click=${this.#togglePolling}
>${this._poolingConfig.enabled
? html`<uui-icon name="umb:axis-rotation" id="polling-enabled-icon"></uui-icon>Polling
${this._poolingConfig.interval / 1000} seconds`
: 'Pooling'}</uui-button
>
<uui-popover placement="bottom-end" id="polling-popover" @close=${() => (this._polingExpandSymbol.open = false)}>
<uui-button slot="trigger" compact label="Choose pooling time" @click=${this.#openPoolingPopover}>
<uui-symbol-expand id="polling-expand-symbol"></uui-symbol-expand>
</uui-button>
<ul id="polling-interval-menu" slot="popover">
${this.#pollingIntervals.map(
(interval: PoolingInterval) =>
html`<uui-menu-item
label="Every ${interval / 1000} seconds"
@click-label=${() => this.#setPolingInterval(interval)}></uui-menu-item>`
)}
</ul>
</uui-popover>
</uui-button-group>`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-log-viewer-polling-button': UmbLogViewerPollingButtonElement;
}
}

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

@@ -148,24 +148,6 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
content: ', ';
}
#polling-interval-menu {
margin: 0;
padding: 0;
width: 20ch;
background-color: var(--uui-color-surface);
box-shadow: var(--uui-shadow-depth-3);
display: flex;
flex-direction: column;
transform: translateX(calc((100% - 33px) * -1));
}
#polling-enabled-icon {
margin-right: var(--uui-size-space-3);
margin-bottom: 1px;
-webkit-animation: rotate-center 0.8s ease-in-out infinite both;
animation: rotate-center 0.8s ease-in-out infinite both;
}
#empty {
display: flex;
justify-content: center;
@@ -176,27 +158,6 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
#pagination {
margin: var(--uui-size-space-5, 18px) 0;
}
@-webkit-keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
`,
];
@@ -423,50 +384,8 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
`;
}
#togglePolling() {
this.#logViewerContext?.togglePolling();
}
#setPolingInterval(interval: PoolingInterval) {
this.#logViewerContext?.setPollingInterval(interval);
this.#closePoolingPopover();
}
#openPoolingPopover() {
this._pollingPopover.open = true;
this._polingExpandSymbol.open = true;
}
#closePoolingPopover() {
this._pollingPopover.open = false;
this._polingExpandSymbol.open = false;
}
#pollingIntervals: PoolingInterval[] = [2000, 5000, 10000, 20000, 30000];
#renderPolingTimeSelector() {
return html` <uui-button-group>
<uui-button label="Start pooling" @click=${this.#togglePolling}
>${this._poolingConfig.enabled
? html`<uui-icon name="umb:axis-rotation" id="polling-enabled-icon"></uui-icon>Polling
${this._poolingConfig.interval / 1000} seconds`
: 'Pooling'}</uui-button
>
<uui-popover placement="bottom-end" id="polling-popover" @close=${() => (this._polingExpandSymbol.open = false)}>
<uui-button slot="trigger" compact label="Choose pooling time" @click=${this.#openPoolingPopover}>
<uui-symbol-expand id="polling-expand-symbol"></uui-symbol-expand>
</uui-button>
<ul id="polling-interval-menu" slot="popover">
${this.#pollingIntervals.map(
(interval: PoolingInterval) =>
html`<uui-menu-item
label="Every ${interval / 1000} seconds"
@click-label=${() => this.#setPolingInterval(interval)}></uui-menu-item>`
)}
</ul>
</uui-popover>
</uui-button-group>`;
return html` <umb-log-viewer-polling-button> </umb-log-viewer-polling-button>`;
}
#sortLogs() {