From 91fcd24278843ae37795cb0acc2d070c4aa1e59f Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Fri, 3 Mar 2023 14:18:14 +0100 Subject: [PATCH] add view tabs --- .../.vscode/settings.json | 3 +- .../logviewer-root-workspace.element.ts | 41 ++++- .../workspace/logviewer-root/manifests.ts | 8 +- .../workspace/views/components/index.ts | 1 + .../log-viewer-level-tag.element.ts | 2 +- .../log-viewer-messages-list.element.ts | 158 ++++++++++++++++++ .../workspace/views/log-search.element.ts | 149 +---------------- 7 files changed, 203 insertions(+), 159 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-messages-list.element.ts diff --git a/src/Umbraco.Web.UI.Client/.vscode/settings.json b/src/Umbraco.Web.UI.Client/.vscode/settings.json index 30aabc0572..196b1d2b83 100644 --- a/src/Umbraco.Web.UI.Client/.vscode/settings.json +++ b/src/Umbraco.Web.UI.Client/.vscode/settings.json @@ -1,5 +1,6 @@ { "cssVariables.lookupFiles": ["node_modules/@umbraco-ui/uui-css/dist/custom-properties.css"], "cSpell.words": ["combobox", "variantable"], - "exportall.config.folderListener": ["/src/backoffice/settings/logviewer/workspace/views/components"] + "exportall.config.folderListener": [], + "exportall.config.relExclusion": [] } 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 017d04f418..189d98490f 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 @@ -10,6 +10,7 @@ import { umbExtensionsRegistry, createExtensionElement } from '@umbraco-cms/exte import { ManifestWorkspaceView, ManifestWorkspaceViewCollection } from '@umbraco-cms/extensions-registry'; import { UmbRouterSlotInitEvent, UmbRouterSlotChangeEvent } from '@umbraco-cms/router'; import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../logviewer.context'; +import { repeat } from 'lit-html/directives/repeat.js'; //TODO make uui-input accept min and max values @customElement('umb-logviewer-workspace') @@ -34,13 +35,18 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement { display: flex; padding: 0 var(--uui-size-space-6); gap: var(--uui-size-space-4); - width: 100%; align-items: center; } #router-slot { height: 100%; } + + uui-tab-group { + --uui-tab-divider: var(--uui-color-border); + border-left: 1px solid var(--uui-color-border); + border-right: 1px solid var(--uui-color-border); + } `, ]; @@ -137,22 +143,39 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement { `; } + #renderViews() { + return html` + ${this._workspaceViews.length > 1 + ? html` + + ${repeat( + this._workspaceViews, + (view) => view.alias, + (view) => html` + + + ${view.meta.label || view.name} + + ` + )} + + ` + : nothing} + `; + } + render() { return html` - ${this.#renderRoutes()} + ${this.#renderViews()} ${this.#renderRoutes()} `; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/manifests.ts index 635b8058a4..375a230dff 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/logviewer-root/manifests.ts @@ -21,9 +21,9 @@ const workspaceViews: Array = [ weight: 300, meta: { workspaces: [workspaceAlias], - label: '', + label: 'Overview', pathname: 'overview', - icon: '', + icon: 'umb:box-alt', }, }, { @@ -34,9 +34,9 @@ const workspaceViews: Array = [ weight: 200, meta: { workspaces: [workspaceAlias], - label: '', + label: 'Search', pathname: 'search', - icon: '', + icon: 'umb:search', }, }, ]; 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 e08b412420..16a3e7076f 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-messages-list.element'; export * from './log-viewer-level-tag.element'; export * from './log-viewer-log-level-filter-menu.element'; export * from './log-viewer-message.element'; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-level-tag.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-level-tag.element.ts index 958a291f2d..d0fc55eb86 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-level-tag.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-level-tag.element.ts @@ -1,9 +1,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { LogLevelModel } from '@umbraco-cms/backend-api'; import { ifDefined } from 'lit-html/directives/if-defined.js'; import { InterfaceColor, InterfaceLook } from '@umbraco-ui/uui-base/lib/types'; +import { LogLevelModel } from '@umbraco-cms/backend-api'; interface LevelMapStyles { look?: InterfaceLook; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-messages-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-messages-list.element.ts new file mode 100644 index 0000000000..48efa35bfe --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/components/log-viewer-messages-list.element.ts @@ -0,0 +1,158 @@ +import { DirectionModel, LogMessageModel } from '@umbraco-cms/backend-api'; +import { UmbLitElement } from '@umbraco-cms/element'; +import { UUIScrollContainerElement, UUIPaginationElement } from '@umbraco-ui/uui'; +import { UUITextStyles } from '@umbraco-ui/uui-css'; +import { css, html, LitElement } from 'lit'; +import { customElement, query, state } from 'lit/decorators.js'; +import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../logviewer.context'; + +@customElement('umb-log-viewer-messages-list') +export class UmbLogViewerMessagesListElement extends UmbLitElement { + static styles = [ + UUITextStyles, + css` + #message-list-header { + display: flex; + font-weight: 600; + } + + #message-list-header > div { + box-sizing: border-box; + padding: 10px 20px; + display: flex; + align-items: center; + } + + #timestamp { + flex: 1 0 14ch; + } + + #level, + #machine { + flex: 1 0 14ch; + } + + #message { + flex: 6 0 14ch; + } + + #empty { + display: flex; + justify-content: center; + align-items: center; + gap: var(--uui-size-space-3); + } + + #pagination { + margin: var(--uui-size-space-5, 18px) 0; + } + `, + ]; + + @query('#logs-scroll-container') + private _logsScrollContainer!: UUIScrollContainerElement; + + @state() + private _sortingDirection: DirectionModel = DirectionModel.ASCENDING; + + @state() + private _logs: LogMessageModel[] = []; + + @state() + private _logsTotal = 0; + + #logViewerContext?: UmbLogViewerWorkspaceContext; + + constructor() { + super(); + this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => { + this.#logViewerContext = instance; + this.#observeLogs(); + this.#logViewerContext.getLogs(); + }); + } + + #observeLogs() { + if (!this.#logViewerContext) return; + + this.observe(this.#logViewerContext.logs, (logs) => { + this._logs = logs ?? []; + }); + + this.observe(this.#logViewerContext.logsTotal, (total) => { + this._logsTotal = total ?? 0; + }); + + this.observe(this.#logViewerContext.sortingDirection, (direction) => { + this._sortingDirection = direction; + }); + } + + #sortLogs() { + this.#logViewerContext?.toggleSortOrder(); + this.#logViewerContext?.setCurrentPage(1); + this.#logViewerContext?.getLogs(); + } + + _onPageChange(event: Event): void { + const current = (event.target as UUIPaginationElement).current; + this.#logViewerContext?.setCurrentPage(current); + this.#logViewerContext?.getLogs(); + this._logsScrollContainer.scrollTop = 0; + } + + private _renderPagination() { + if (!this._logsTotal) return ''; + + const totalPages = Math.ceil(this._logsTotal / 100); + + if (totalPages <= 1) return ''; + + return html``; + } + + render() { + return html` +

Total items: ${this._logsTotal}

+
+
+ Timestamp + + + +
+
Level
+
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()} + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-log-viewer-messages-list': UmbLogViewerMessagesListElement; + } +} 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 180a338044..13841fbbf3 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 @@ -40,162 +40,23 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement { umb-log-viewer-search-input { flex: 1; } - - #message-list-header { - display: flex; - font-weight: 600; - } - - #message-list-header > div { - box-sizing: border-box; - padding: 10px 20px; - display: flex; - align-items: center; - } - - #timestamp { - flex: 1 0 14ch; - } - - #level, - #machine { - flex: 1 0 14ch; - } - - #message { - flex: 6 0 14ch; - } - - #empty { - display: flex; - justify-content: center; - align-items: center; - gap: var(--uui-size-space-3); - } - - #pagination { - margin: var(--uui-size-space-5, 18px) 0; - } `, ]; - @query('#logs-scroll-container') - private _logsScrollContainer!: UUIScrollContainerElement; - - @state() - private _sortingDirection: DirectionModel = DirectionModel.ASCENDING; - - @state() - private _logs: LogMessageModel[] = []; - - @state() - private _logsTotal = 0; - - #logViewerContext?: UmbLogViewerWorkspaceContext; - - constructor() { - super(); - this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => { - this.#logViewerContext = instance; - this.#observeStuff(); - this.#logViewerContext.getLogs(); - }); - } - - #observeStuff() { - if (!this.#logViewerContext) return; - - this.observe(this.#logViewerContext.logs, (logs) => { - this._logs = logs ?? []; - }); - - this.observe(this.#logViewerContext.logsTotal, (total) => { - this._logsTotal = total ?? 0; - }); - - this.observe(this.#logViewerContext.sortingDirection, (direction) => { - this._sortingDirection = direction; - }); - } - - #renderSearchInput() { - return html``; - } - - #renderPolingTimeSelector() { - return html` `; - } - - #sortLogs() { - this.#logViewerContext?.toggleSortOrder(); - this.#logViewerContext?.setCurrentPage(1); - this.#logViewerContext?.getLogs(); - } - render() { return html`
- ${this.#renderPolingTimeSelector()} +
-
${this.#renderSearchInput()}
- -

Total items: ${this._logsTotal}

-
-
- Timestamp - - - -
-
Level
-
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()} - +
+ +
+
`; } - - _onPageChange(event: Event): void { - const current = (event.target as UUIPaginationElement).current; - this.#logViewerContext?.setCurrentPage(current); - this.#logViewerContext?.getLogs(); - this._logsScrollContainer.scrollTop = 0; - } - - private _renderPagination() { - if (!this._logsTotal) return ''; - - const totalPages = Math.ceil(this._logsTotal / 100); - - if (totalPages <= 1) return ''; - - return html``; - } } export default UmbLogViewerSearchViewElement;