From:
{(e.target as HTMLInputElement).showPicker()}}
+ @click=${(e: Event) => {
+ (e.target as HTMLInputElement).showPicker();
+ }}
id="start-date"
type="date"
label="From"
@@ -367,7 +365,9 @@ export class UmbLogSearchWorkspaceElement extends UmbLitElement {
To:
{(e.target as HTMLInputElement).showPicker()}}
+ @click=${(e: Event) => {
+ (e.target as HTMLInputElement).showPicker();
+ }}
id="end-date"
type="date"
@@ -467,10 +467,10 @@ export class UmbLogSearchWorkspaceElement extends UmbLitElement {
}
}
-export default UmbLogSearchWorkspaceElement;
+export default UmbLogViewerOverviewViewElement;
declare global {
interface HTMLElementTagNameMap {
- 'umb-log-search-workspace-overview': UmbLogSearchWorkspaceElement;
+ 'umb-log-viewer-overview-view': UmbLogViewerOverviewViewElement;
}
}
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 cb17d6c9da..7a25cc63ed 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,10 +1,11 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
+import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../logviewer.context';
import { UmbLitElement } from '@umbraco-cms/element';
-@customElement('umb-log-search-workspace-search')
-export class UmbLogSearchWorkspaceElement extends UmbLitElement {
+@customElement('umb-log-viewer-search-view')
+export class UmbLogViewerSearchViewElement extends UmbLitElement {
static styles = [
UUITextStyles,
css`
@@ -22,15 +23,24 @@ export class UmbLogSearchWorkspaceElement extends UmbLitElement {
`,
];
+ #logViewerContext?: UmbLogViewerWorkspaceContext;
+
+ constructor() {
+ super();
+ this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
+ this.#logViewerContext = instance;
+ });
+ }
+
render() {
return html`
Search
`;
}
}
-export default UmbLogSearchWorkspaceElement;
+export default UmbLogViewerSearchViewElement;
declare global {
interface HTMLElementTagNameMap {
- 'umb-log-search-workspace': UmbLogSearchWorkspaceElement;
+ 'umb-log-viewer-search-view': UmbLogViewerSearchViewElement;
}
}
From db2f4da54a95760e4a5bfe47f306cf07efefb93a Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Sat, 25 Feb 2023 10:43:59 +0100
Subject: [PATCH 21/57] add ui-elemnts
---
.../workspace/views/log-overview.element.ts | 3 --
.../workspace/views/log-search.element.ts | 49 ++++++++++++++++---
2 files changed, 43 insertions(+), 9 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts
index 156470c250..3698fd41ae 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts
@@ -22,9 +22,6 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
#logviewer-layout {
margin: 20px;
- }
-
- #logviewer-layout {
height: calc(100vh - 160px);
display: grid;
grid-template-columns: 7fr 2fr;
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 7a25cc63ed..2caaed8776 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
@@ -9,16 +9,32 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
static styles = [
UUITextStyles,
css`
- :host {
- display: block;
+ #layout {
+ margin: 20px;
}
-
- #header {
+ #levels-container,
+ #input-container {
display: flex;
align-items: center;
- padding: 0 var(--uui-size-space-6);
gap: var(--uui-size-space-4);
width: 100%;
+ margin-bottom: 20px;
+ }
+
+ #levels-container {
+ justify-content: space-between;
+ }
+
+ #input-container {
+ justify-content: space-between;
+ }
+
+ #search-input {
+ flex: 1;
+ }
+
+ #saved-searches-button {
+ flex-shrink: 0;
}
`,
];
@@ -33,7 +49,28 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
}
render() {
- return html`
Search
`;
+ return html`
+
+
+ Log level: All
+
+ Polling
+
+
+
+
+
+ Saved searches
+
+ Search
+
+
+ Total items: 234
+
+
+ `;
}
}
From b6faf65b13cb94ba08654c7d00380863ee30f0ea Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Sat, 25 Feb 2023 16:45:30 +0100
Subject: [PATCH 22/57] add saved searches
---
.../logviewer-root-workspace.element.ts | 1 +
.../logviewer/workspace/logviewer.context.ts | 51 ++++++-
.../workspace/views/log-overview.element.ts | 53 ++-----
.../workspace/views/log-search.element.ts | 136 ++++++++++++++++--
4 files changed, 185 insertions(+), 56 deletions(-)
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 6e08da82d8..6437abf570 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
@@ -161,6 +161,7 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement {
connectedCallback() {
super.connectedCallback();
this._observeWorkspaceViews();
+ this.#logViewerContext.init();
this.provideContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, this.#logViewerContext);
}
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 3cf66f8d8f..fed7459a60 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
@@ -14,16 +14,47 @@ const logLevels = {
export type LogLevel = Record
;
+export interface LogViewerDateRange {
+ startDate: string;
+ endDate: string;
+}
+
export class UmbLogViewerWorkspaceContext {
#host: UmbControllerHostInterface;
#repository: UmbLogViewerRepository;
+ get today() {
+ const today = new Date();
+ const dd = String(today.getDate()).padStart(2, '0');
+ const mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+ const yyyy = today.getFullYear();
+
+ return yyyy + '-' + mm + '-' + dd;
+ }
+
+ get yesterday() {
+ const today = new Date();
+ const dd = String(today.getDate() - 1).padStart(2, '0');
+ const mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+ const yyyy = today.getFullYear();
+
+ return yyyy + '-' + mm + '-' + dd;
+ }
+
+ defaultDateRange: LogViewerDateRange = {
+ startDate: this.yesterday,
+ endDate: this.today,
+ };
+
#savedSearches = new DeepState(undefined);
savedSearches = createObservablePart(this.#savedSearches, (data) => data?.items);
#logCount = new DeepState(null);
logCount = createObservablePart(this.#logCount, (data) => data);
+ #dateRange = new DeepState(this.defaultDateRange);
+ dateRange = createObservablePart(this.#dateRange, (data) => data);
+
#messageTemplates = new DeepState(null);
messageTemplates = createObservablePart(this.#messageTemplates, (data) => data);
@@ -32,15 +63,31 @@ export class UmbLogViewerWorkspaceContext {
this.#repository = new UmbLogViewerRepository(this.#host);
}
+ async init() {
+ try {
+ await Promise.all([
+ this.getMessageTemplates(0, 100),
+ this.getLogCount(this.defaultDateRange),
+ this.getSavedSearches(),
+ ]);
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ setDateRange(dateRange: LogViewerDateRange) {
+ this.#dateRange.next(dateRange);
+ this.getLogCount(dateRange);
+ }
+
async getSavedSearches() {
const { data } = await this.#repository.getSavedSearches({ skip: 0, take: 100 });
-
if (data) {
this.#savedSearches.next(data);
}
}
- async getLogCount(startDate: string, endDate: string) {
+ async getLogCount({ startDate, endDate }: LogViewerDateRange) {
const { data } = await this.#repository.getLogCount({ startDate, endDate });
if (data) {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts
index 3698fd41ae..8af48a23e8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts
@@ -1,7 +1,7 @@
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { clamp } from 'lodash-es';
-import { LogLevel, UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../logviewer.context';
+import { LogLevel, LogViewerDateRange, UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../logviewer.context';
import { SavedLogSearchModel, PagedLogTemplateModel } from '@umbraco-cms/backend-api';
import { UmbLitElement } from '@umbraco-cms/element';
@@ -188,24 +188,6 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
`,
];
- get today() {
- const today = new Date();
- const dd = String(today.getDate()).padStart(2, '0');
- const mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
- const yyyy = today.getFullYear();
-
- return yyyy + '-' + mm + '-' + dd;
- }
-
- get yesterday() {
- const today = new Date();
- const dd = String(today.getDate() - 1).padStart(2, '0');
- const mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
- const yyyy = today.getFullYear();
-
- return yyyy + '-' + mm + '-' + dd;
- }
-
@state()
private _savedSearches: SavedLogSearchModel[] = [];
@@ -228,10 +210,10 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
private _logLevelCount: LogLevel | null = null;
@state()
- private _startDate = this.yesterday;
+ private _startDate = '';
@state()
- private _endDate = this.today;
+ private _endDate = '';
#logViewerContext?: UmbLogViewerWorkspaceContext;
@@ -244,20 +226,12 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
: 0;
}
- load(): void {
- // Not relevant for this workspace -added to prevent the error from popping up
- }
-
- create(): void {
- // Not relevant for this workspace
- }
-
constructor() {
super();
this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
this.#logViewerContext = instance;
this.#observeStuff();
- this.getData();
+
});
}
@@ -276,20 +250,11 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
this.observe(this.#logViewerContext.messageTemplates, (templates) => {
this._messageTemplates = templates ?? null;
});
- }
- async getData() {
- if (!this.#logViewerContext) return;
-
- try {
- await Promise.all([
- this.#logViewerContext.getSavedSearches(),
- this.#logViewerContext.getLogCount(this.today, this.yesterday),
- this.#logViewerContext.getMessageTemplates(0, 10),
- ]);
- } catch (e) {
- console.error(e);
- }
+ this.observe(this.#logViewerContext.dateRange, (dateRange: LogViewerDateRange) => {
+ this._startDate = dateRange?.startDate;
+ this._endDate = dateRange?.endDate;
+ })
}
protected willUpdate(_changedProperties: Map): void {
@@ -319,6 +284,8 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
} else if (target.id === 'end-date') {
this._endDate = target.value;
}
+ const newDateRange: LogViewerDateRange = { startDate: this._startDate, endDate: this._endDate };
+ this.#logViewerContext?.setDateRange(newDateRange);
}
#renderSearchItem(searchListItem: SavedLogSearchModel) {
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 2caaed8776..851362a63a 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,8 +1,14 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../logviewer.context';
+import { customElement, state, query } from 'lit/decorators.js';
+import {
+ LogViewerDateRange,
+ UmbLogViewerWorkspaceContext,
+ UMB_APP_LOG_VIEWER_CONTEXT_TOKEN,
+} from '../logviewer.context';
import { UmbLitElement } from '@umbraco-cms/element';
+import { SavedLogSearchModel } from '@umbraco-cms/backend-api';
+import { UUIInputElement, UUIPopoverElement, UUISymbolExpandElement } from '@umbraco-ui/uui';
@customElement('umb-log-viewer-search-view')
export class UmbLogViewerSearchViewElement extends UmbLitElement {
@@ -30,24 +36,139 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
}
#search-input {
- flex: 1;
+ width: 100%;
}
#saved-searches-button {
flex-shrink: 0;
}
+
+ #saved-searches-popover {
+ flex: 1;
+ }
+
+ #saved-searches-container {
+ width: 100%;
+ max-height: 300px;
+ background-color: var(--uui-color-surface);
+ box-shadow: var(--uui-shadow-depth-1);
+ }
+
+ .saved-search-item {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ .saved-search-item-button {
+ flex: 1;
+ }
+
+ .saved-search-item-name {
+ font-weight: 600;
+ }
`,
];
+ @query('#saved-searches-popover')
+ private _savedSearchesPopover!: UUIPopoverElement;
+
+ @query('#saved-search-expand-symbol')
+ private _savedSearchesExpandSymbol!: UUISymbolExpandElement;
+
+ @state()
+ private _savedSearches: SavedLogSearchModel[] = [];
+
+ @state()
+ private _startDate = '';
+
+ @state()
+ private _endDate = '';
+
+ @state()
+ private _inputQuery = '';
+
#logViewerContext?: UmbLogViewerWorkspaceContext;
constructor() {
super();
this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
this.#logViewerContext = instance;
+ this.#observeStuff();
});
}
+ #observeStuff() {
+ if (!this.#logViewerContext) return;
+ this.observe(this.#logViewerContext.savedSearches, (savedSearches) => {
+ this._savedSearches = savedSearches ?? [];
+ });
+
+ this.observe(this.#logViewerContext.dateRange, (dateRange: LogViewerDateRange) => {
+ this._startDate = dateRange?.startDate;
+ this._endDate = dateRange?.endDate;
+ });
+ }
+
+ #toggleSavedSearchesPopover() {
+ this._savedSearchesPopover.open = !this._savedSearchesPopover.open;
+ }
+
+ #toggleSavedSearchesExpandSymbol() {
+ this._savedSearchesExpandSymbol.open = !this._savedSearchesExpandSymbol.open;
+ }
+
+ #openPopover() {
+ this.#toggleSavedSearchesPopover();
+ this.#toggleSavedSearchesExpandSymbol();
+ }
+
+ #setQuery(event: Event) {
+ const target = event.target as UUIInputElement;
+ this._inputQuery = target.value as string;
+ }
+
+ #clearQuery() {
+ this._inputQuery = '';
+ }
+
+ #renderSearchInput() {
+ return html`
+
+ ${this._inputQuery
+ ? html``
+ : html``}
+ Saved searches
+
+
+
+ ${this._savedSearches.map(
+ (search) =>
+ html`
+ ${search.name}${search.query}
+
`
+ )}
+
+
+ Search`;
+ }
+
render() {
return html`
@@ -58,14 +179,7 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
-
-
- Saved searches
-
- Search
-
+ ${this.#renderSearchInput()}
Total items: 234
From e12079e81de26f9666031334bcad4c5cf58835f2 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Sat, 25 Feb 2023 17:10:29 +0100
Subject: [PATCH 23/57] style saved search element
---
src/Umbraco.Web.UI.Client/package-lock.json | 4 +-
.../workspace/views/log-search.element.ts | 38 +++++++++++++++----
2 files changed, 33 insertions(+), 9 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json
index eea87149ae..646bbd3b30 100644
--- a/src/Umbraco.Web.UI.Client/package-lock.json
+++ b/src/Umbraco.Web.UI.Client/package-lock.json
@@ -76,8 +76,8 @@
"web-component-analyzer": "^2.0.0-next.4"
},
"engines": {
- "node": ">=18.14.2 <19",
- "npm": ">=9.5.0 < 10"
+ "node": ">=18.14 <19",
+ "npm": ">=9.5 < 10"
}
},
"node_modules/@ampproject/remapping": {
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 851362a63a..244ab0ba40 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
@@ -57,14 +57,36 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
.saved-search-item {
display: flex;
justify-content: space-between;
+ align-items: stretch;
+ border-bottom: 1px solid #e9e9eb;
}
.saved-search-item-button {
+ display: flex;
+ font-family: inherit;
flex: 1;
+ background: 0 0;
+ padding: 0 0;
+ border: 0;
+ clear: both;
+ cursor: pointer;
+ display: flex;
+ font-weight: 400;
+ line-height: 20px;
+ text-align: left;
+ align-items: center;
+ white-space: nowrap;
+ color: var(--uui-color-interactive);
+ }
+
+ .saved-search-item-button:hover {
+ background-color: var(--uui-color-surface-emphasis, rgb(250, 250, 250));
+ color: var(--color-standalone);
}
.saved-search-item-name {
font-weight: 600;
+ margin: 0 var(--uui-size-space-3);
}
`,
];
@@ -154,15 +176,17 @@ export class UmbLogViewerSearchViewElement extends UmbLitElement {
>
-
+
${this._savedSearches.map(
(search) =>
- html`
- ${search.name}${search.query}
-
`
+ html`
+
+ `
)}
From 041a2bc3228a60202a8a23452630a8d0e812d34a Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Mon, 27 Feb 2023 14:22:09 +0100
Subject: [PATCH 24/57] get logs
---
.../workspace/data/log-viewer.repository.ts | 30 +++++++++++++
.../logviewer/workspace/data/sources/index.ts | 2 +-
.../data/sources/log-viewer.server.data.ts | 2 +-
.../logviewer/workspace/logviewer.context.ts | 42 +++++++++++++++++--
.../workspace/views/log-overview.element.ts | 35 ++++++++++++----
.../workspace/views/log-search.element.ts | 20 ++++++++-
6 files changed, 117 insertions(+), 14 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/data/log-viewer.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/data/log-viewer.repository.ts
index c208be19d9..136deba17e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/data/log-viewer.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/data/log-viewer.repository.ts
@@ -3,6 +3,7 @@ import { UmbLogSearchesStore, UMB_LOG_SEARCHES_STORE_CONTEXT_TOKEN } from './log
import { UmbContextConsumerController } from '@umbraco-cms/context-api';
import { UmbControllerHostInterface } from '@umbraco-cms/controller';
import { UmbNotificationService, UMB_NOTIFICATION_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/notification';
+import { DirectionModel, LogLevelModel } from '@umbraco-cms/backend-api';
// Move to documentation / JSdoc
/* We need to create a new instance of the repository from within the element context. We want the notifications to be displayed in the right context. */
@@ -65,4 +66,33 @@ export class UmbLogViewerRepository {
return this.#messagesDataSource.getLogViewerLevelCount({ startDate, endDate });
}
+ async getLogs({
+ skip = 0,
+ take = 100,
+ orderDirection,
+ filterExpression,
+ logLevel,
+ startDate,
+ endDate,
+ }: {
+ skip?: number;
+ take?: number;
+ orderDirection?: DirectionModel;
+ filterExpression?: string;
+ logLevel?: Array;
+ startDate?: string;
+ endDate?: string;
+ }) {
+ await this.#init();
+
+ return this.#messagesDataSource.getLogViewerLogs({
+ skip,
+ take,
+ orderDirection,
+ filterExpression,
+ logLevel,
+ startDate,
+ endDate,
+ });
+ }
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/data/sources/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/data/sources/index.ts
index 9693dcb0d9..e01b65b3a9 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/data/sources/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/data/sources/index.ts
@@ -43,7 +43,7 @@ export interface LogMessagesDataSource {
startDate?: string;
endDate?: string;
}): Promise>;
- getLogViewerLog({
+ getLogViewerLogs({
skip,
take = 100,
orderDirection,
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/data/sources/log-viewer.server.data.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/data/sources/log-viewer.server.data.ts
index 936501858d..733c20bcfb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/data/sources/log-viewer.server.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/data/sources/log-viewer.server.data.ts
@@ -132,7 +132,7 @@ export class UmbLogMessagesServerDataSource implements LogMessagesDataSource {
* @return {*}
* @memberof UmbLogMessagesServerDataSource
*/
- async getLogViewerLog({
+ async getLogViewerLogs({
skip = 0,
take = 100,
orderDirection,
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 fed7459a60..178c00d510 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
@@ -1,6 +1,14 @@
import { UmbLogViewerRepository } from './data/log-viewer.repository';
-import { createObservablePart, DeepState } from '@umbraco-cms/observable-api';
-import { PagedLogTemplateModel, PagedSavedLogSearchModel } from '@umbraco-cms/backend-api';
+import { ArrayState, createObservablePart, DeepState, StringState } from '@umbraco-cms/observable-api';
+import {
+ DirectionModel,
+ LoggerModel,
+ LogLevelModel,
+ PagedLoggerModel,
+ PagedLogMessageModel,
+ PagedLogTemplateModel,
+ PagedSavedLogSearchModel,
+} from '@umbraco-cms/backend-api';
import { UmbControllerHostInterface } from '@umbraco-cms/controller';
import { UmbContextToken } from '@umbraco-cms/context-api';
@@ -55,9 +63,18 @@ export class UmbLogViewerWorkspaceContext {
#dateRange = new DeepState(this.defaultDateRange);
dateRange = createObservablePart(this.#dateRange, (data) => data);
+ #currentQuery = new StringState('');
+ currentQuery = createObservablePart(this.#currentQuery, (data) => data);
+
#messageTemplates = new DeepState(null);
messageTemplates = createObservablePart(this.#messageTemplates, (data) => data);
+ #logLevel = new ArrayState([]);
+ logLevel = createObservablePart(this.#logLevel, (data) => data);
+
+ #logs = new DeepState(null);
+ logs = createObservablePart(this.#logs, (data) => data?.items);
+
constructor(host: UmbControllerHostInterface) {
this.#host = host;
this.#repository = new UmbLogViewerRepository(this.#host);
@@ -66,7 +83,7 @@ export class UmbLogViewerWorkspaceContext {
async init() {
try {
await Promise.all([
- this.getMessageTemplates(0, 100),
+ this.getMessageTemplates(0, 10),
this.getLogCount(this.defaultDateRange),
this.getSavedSearches(),
]);
@@ -102,6 +119,25 @@ export class UmbLogViewerWorkspaceContext {
this.#messageTemplates.next(data);
}
}
+
+ async getLogs() {
+ const options = {
+ orderDirection: DirectionModel.ASCENDING,
+ filterExpression: this.#currentQuery.getValue(),
+ logLevel: this.#logLevel.getValue(),
+ ...this.#dateRange.getValue(),
+ };
+
+ const { data } = await this.#repository.getLogs(options);
+
+ if (data) {
+ this.#logs.next(data);
+ }
+ }
+
+ setCurrentQuery(query: string) {
+ this.#currentQuery.next(query);
+ }
}
export const UMB_APP_LOG_VIEWER_CONTEXT_TOKEN = new UmbContextToken(
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts
index 8af48a23e8..fe824ccacf 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/logviewer/workspace/views/log-overview.element.ts
@@ -231,7 +231,6 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
this.consumeContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, (instance) => {
this.#logViewerContext = instance;
this.#observeStuff();
-
});
}
@@ -254,7 +253,7 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
this.observe(this.#logViewerContext.dateRange, (dateRange: LogViewerDateRange) => {
this._startDate = dateRange?.startDate;
this._endDate = dateRange?.endDate;
- })
+ });
}
protected willUpdate(_changedProperties: Map): void {
@@ -288,16 +287,19 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
this.#logViewerContext?.setDateRange(newDateRange);
}
- #renderSearchItem(searchListItem: SavedLogSearchModel) {
+ renderSearchItem = (searchListItem: SavedLogSearchModel) => {
return html`
{
+ this.setCurrentQuery(searchListItem.query ?? '');
+ }}
label="${searchListItem.name}"
title="${searchListItem.name}"
href=${'/section/settings/logviewer/search?lq=' + searchListItem.query}
>${searchListItem.name}
`;
- }
+ };
#setCountFilter(level: string) {
if (this._logLevelCountFilter.includes(level)) {
@@ -308,6 +310,10 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
this._logLevelCountFilter = [...this._logLevelCountFilter, level];
}
+ setCurrentQuery(query: string) {
+ this.#logViewerContext?.setCurrentQuery(query);
+ }
+
render() {
return html`
@@ -324,7 +330,7 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
id="start-date"
type="date"
label="From"
- max="${this.today}"
+ .max=${this.#logViewerContext?.today ?? ''}
.value=${this._startDate}>
To:
@@ -336,7 +342,7 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {
id="end-date"
type="date"
label="To"
- max="${this.today}"
+ .max=${this.#logViewerContext?.today ?? ''}
.value=${this._endDate}>
@@ -396,7 +402,19 @@ export class UmbLogViewerOverviewViewElement extends UmbLitElement {