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

log viewer search

Browse Source
This commit is contained in:
Jesper Møller Jensen
2023-06-05 19:12:55 +12:00
parent fb876cae53
commit a6404805c7
3 changed files with 107 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,14 @@
import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../../logviewer.context.js';
import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
import { css, html, PropertyValueMap , customElement, property, query, state } from '@umbraco-cms/backoffice/external/lit';
import {
css,
html,
PropertyValueMap,
customElement,
property,
query,
state,
} from '@umbraco-cms/backoffice/external/lit';
import { LogLevelModel, LogMessagePropertyPresentationModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { query as getQuery, toQueryString } from '@umbraco-cms/backoffice/router';
@@ -212,16 +220,14 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
margin-bottom: var(--uui-size-space-3);
}
summary:hover,
#properties-list {
background-color: var(--uui-color-background);
summary:hover {
background-color: var(--uui-color-surface-emphasis);
color: var(--uui-color-interactive-emphasis);
}
#properties-list {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: var(--uui-size-space-3);
}
.property {
@@ -230,6 +236,30 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
border-top: 1px solid var(--uui-color-border);
}
.property:first-child {
border-top: transparent;
}
#properties-list,
pre {
margin: 0 var(--uui-size-layout-1);
border: 1px solid var(--uui-color-border);
border-radius: var(--uui-border-radius);
background-color: var(--uui-color-background);
margin-bottom: var(--uui-size-space-3);
}
pre {
border-left: 4px solid #d42054;
color: #303033;
display: block;
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
line-height: 20px;
overflow-x: auto;
padding: 9.5px;
white-space: pre-wrap;
}
summary > div {
box-sizing: border-box;
padding: 10px 20px;
@@ -250,6 +280,9 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
flex: 6 0 14ch;
word-break: break-all;
}
#search-button {
margin-left: var(--uui-size-layout-1);
}
.property-name,
.property-value {
@@ -282,20 +315,6 @@ export class UmbLogViewerMessageElement extends UmbLitElement {
.search-item {
width: 100%;
}
pre {
background-color: var(--uui-color-background);
border-top: 1px solid #d8d7d9;
border-left: 4px solid #d42054;
color: #303033;
display: block;
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
line-height: 20px;
margin: 0;
overflow-x: auto;
padding: 9.5px;
white-space: pre-wrap;
}
`,
];
}

39
src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/views/search/components/log-viewer-messages-list.element.ts
View File

@@ -1,6 +1,6 @@
import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../../logviewer.context.js';
import { UUIScrollContainerElement, UUIPaginationElement , UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
import { css, html , customElement, query, state } from '@umbraco-cms/backoffice/external/lit';
import { UUIScrollContainerElement, UUIPaginationElement, UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
import { css, html, customElement, query, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { DirectionModel, LogMessageResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -95,9 +95,9 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
}
render() {
return html`<uui-box>
<p style="font-weight: bold;">Total items: ${this._logsTotal}</p>
<div id="message-list-header">
// TODO: the table should scroll instead of the whole main div
return html`
<div id="header" slot="header">
<div id="timestamp">
Timestamp
<uui-button compact @click=${this.#sortLogs} label="Sort logs">
@@ -110,32 +110,43 @@ export class UmbLogViewerMessagesListElement extends UmbLitElement {
<div id="machine">Machine name</div>
<div id="message">Message</div>
</div>
${this._isLoading
? html`<umb-empty-state size="small"
><span id="empty"> <uui-loader-circle></uui-loader-circle>Loading log messages... </span></umb-empty-state
>`
: html`${this.#renderLogs()}${this._renderPagination()}`}
</uui-box>`;
<div id="main">
${this._isLoading
? html`<umb-empty-state size="small"
><span id="empty"> <uui-loader-circle></uui-loader-circle>Loading log messages... </span></umb-empty-state
>`
: html`${this.#renderLogs()}${this._renderPagination()}`}
</div>
`;
}
static styles = [
UUITextStyles,
css`
:host {
display: block;
height: 100%;
display: flex;
flex-direction: column;
}
#message-list-header {
#header {
display: flex;
font-weight: 600;
width: 100%;
}
#message-list-header > div {
#header > div {
box-sizing: border-box;
padding: 10px 20px;
display: flex;
align-items: center;
}
#main {
display: flex;
flex-direction: column;
width: 100%;
}
#timestamp {
flex: 1 0 14ch;
}

60
src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/views/search/log-search-view.element.ts
View File

@@ -1,6 +1,6 @@
import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../logviewer.context.js';
import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
import { css, html , customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
@@ -32,38 +32,64 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
render() {
return html`
<div id="layout">
<div id="levels-container">
<umb-log-viewer-log-level-filter-menu></umb-log-viewer-log-level-filter-menu>
<div id="dates-polling-container">
<umb-log-viewer-date-range-selector horizontal></umb-log-viewer-date-range-selector>
<umb-log-viewer-polling-button> </umb-log-viewer-polling-button>
<umb-body-layout clear-header scroll-shadow>
<div id="header" slot="header">
<div id="levels-container">
<umb-log-viewer-log-level-filter-menu></umb-log-viewer-log-level-filter-menu>
<div id="dates-polling-container">
<umb-log-viewer-date-range-selector horizontal></umb-log-viewer-date-range-selector>
<umb-log-viewer-polling-button> </umb-log-viewer-polling-button>
</div>
</div>
<div id="input-container">
<umb-log-viewer-search-input></umb-log-viewer-search-input>
</div>
</div>
<div id="input-container">
<umb-log-viewer-search-input></umb-log-viewer-search-input>
<div id="main">
<uui-box>
${this._canShowLogs
? html`<umb-log-viewer-messages-list></umb-log-viewer-messages-list>`
: html`<umb-log-viewer-to-many-logs-warning
id="to-many-logs-warning"></umb-log-viewer-to-many-logs-warning>`}
</uui-box>
</div>
${this._canShowLogs
? html`<umb-log-viewer-messages-list></umb-log-viewer-messages-list>`
: html`<umb-log-viewer-to-many-logs-warning id="to-many-logs-warning"></umb-log-viewer-to-many-logs-warning>`}
</div>
</umb-body-layout>
`;
}
static styles = [
UUITextStyles,
css`
#layout {
margin: 20px;
padding-bottom: 20px;
umb-body-layout {
--umb-header-layout-height: fit-content;
}
uui-box {
--uui-box-default-padding: 0;
}
#header {
display: flex;
flex-direction: column;
gap: var(--uui-size-space-4);
width: 100%;
padding: var(--uui-size-layout-1);
padding-bottom: var(--uui-size-layout-1);
}
#main {
display: flex;
flex-direction: column;
padding: var(--uui-size-layout-1);
padding-top: var(--uui-size-1);
}
#levels-container,
#input-container {
display: flex;
align-items: center;
gap: var(--uui-size-space-4);
width: 100%;
margin-bottom: 20px;
}
#levels-container {