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

make log-viewer use workspace in the right way

Browse Source
This commit is contained in:
Niels Lyngsø
2023-08-03 13:12:48 +02:00
parent a6240fdb30
commit b2b1f0d3c4
6 changed files with 66 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Umbraco.Web.UI.Client/src/mocks/data/log-viewer.data.ts
View File

@@ -22,7 +22,7 @@ class UmbLogViewerSearchesData extends UmbData<SavedLogSearchResponseModel> {
}
}
class UmbLogviewerTemplatesData extends UmbData<LogTemplateResponseModel> {
class UmbLogViewerTemplatesData extends UmbData<LogTemplateResponseModel> {
constructor(data: LogTemplateResponseModel[]) {
super(data);
}
@@ -33,7 +33,7 @@ class UmbLogviewerTemplatesData extends UmbData<LogTemplateResponseModel> {
}
}
class UmbLogviewerMessagesData extends UmbData<LogMessageResponseModel> {
class UmbLogViewerMessagesData extends UmbData<LogMessageResponseModel> {
constructor(data: LogTemplateResponseModel[]) {
super(data);
}
@@ -411,7 +411,7 @@ export const logLevels = {
export const umbLogViewerData = {
searches: new UmbLogViewerSearchesData(savedSearches),
templates: new UmbLogviewerTemplatesData(messageTemplates),
logs: new UmbLogviewerMessagesData(logs),
templates: new UmbLogViewerTemplatesData(messageTemplates),
logs: new UmbLogViewerMessagesData(logs),
logLevels: logLevels,
};

3
src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-footer/workspace-footer.element.ts
View File

@@ -1,6 +1,5 @@
import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import type { ManifestWorkspaceAction } from '@umbraco-cms/backoffice/extension-registry';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UMB_MODAL_CONTEXT_TOKEN, UmbModalContext } from '@umbraco-cms/backoffice/modal';

36
src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/logviewer.context.ts
View File

@@ -6,6 +6,7 @@ import {
UmbDeepState,
UmbObjectState,
UmbStringState,
UmbBooleanState,
} from '@umbraco-cms/backoffice/observable-api';
import {
DirectionModel,
@@ -20,6 +21,9 @@ import {
import { UmbBaseController, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
import { query } from '@umbraco-cms/backoffice/router';
import { UMB_WORKSPACE_CONTEXT, UmbWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
import { Observable } from '@umbraco-cms/backoffice/external/rxjs';
import type { UmbEntityBase } from '@umbraco-cms/backoffice/models';
export type PoolingInterval = 0 | 2000 | 5000 | 10000 | 20000 | 30000;
export interface PoolingCOnfig {
@@ -31,9 +35,37 @@ export interface LogViewerDateRange {
endDate: string;
}
export class UmbLogViewerWorkspaceContext extends UmbBaseController {
// TODO: Revisit usage of workspace for this case...
export class UmbLogViewerWorkspaceContext
extends UmbBaseController
implements UmbWorkspaceContextInterface<UmbEntityBase>
{
public readonly workspaceAlias: string = 'Umb.Workspace.LogViewer';
#repository: UmbLogViewerRepository;
#isNew = new UmbBooleanState<boolean | undefined>(undefined);
isNew: Observable<boolean | undefined> = this.#isNew.asObservable();
getIsNew(): boolean | undefined {
return false;
}
setIsNew(value: boolean): void {}
getEntityId(): string | undefined {
return undefined;
}
getData(): UmbEntityBase {
return {} as any;
}
repository: any;
getEntityType(): string {
return 'log-viewer';
}
getEntityName(): string {
return 'Log Viewer';
}
save() {
return Promise.resolve();
}
get today() {
const today = new Date();
const dd = String(today.getDate()).padStart(2, '0');
@@ -100,6 +132,8 @@ export class UmbLogViewerWorkspaceContext extends UmbBaseController {
constructor(host: UmbControllerHostElement) {
super(host);
this.provideContext(UMB_WORKSPACE_CONTEXT, this);
// TODO: Revisit usage of workspace for this case... currently no other workspace context provides them self with their own token.
this.provideContext(UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, this);
this.#repository = new UmbLogViewerRepository(host);
}

130
src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/logviewer/logviewer-workspace.element.ts
View File

@@ -1,56 +1,23 @@
// TODO: Niels: I don't feel sure this is good, seems wrong:
import '../../components/index.js';
import { UmbLogViewerWorkspaceContext } from '../logviewer.context.js';
import { map } from '@umbraco-cms/backoffice/external/rxjs';
import {
PropertyValueMap,
css,
html,
nothing,
customElement,
state,
repeat,
} from '@umbraco-cms/backoffice/external/lit';
import { PropertyValueMap, css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { createExtensionElement } from '@umbraco-cms/backoffice/extension-api';
import {
ManifestWorkspaceEditorView,
ManifestWorkspaceViewCollection,
umbExtensionsRegistry,
} from '@umbraco-cms/backoffice/extension-registry';
import type { UmbRouterSlotInitEvent, UmbRouterSlotChangeEvent, UmbRoute } from '@umbraco-cms/backoffice/router';
//TODO make uui-input accept min and max values
@customElement('umb-logviewer-workspace')
export class UmbLogViewerWorkspaceElement extends UmbLitElement {
private _alias = 'Umb.Workspace.LogviewerRoot';
@state()
private _workspaceViews: Array<ManifestWorkspaceEditorView | ManifestWorkspaceViewCollection> = [];
@state()
private _routes: UmbRoute[] = [];
@state()
private _activePath?: string;
@state()
private _routerPath?: string;
#logViewerContext = new UmbLogViewerWorkspaceContext(this);
firstUpdated(props: PropertyValueMap<unknown>) {
super.firstUpdated(props);
// TODO: This should be moved to the log viewer context:
window.addEventListener('changestate', this.#logViewerContext.onChangeState);
this.#logViewerContext.onChangeState();
}
connectedCallback() {
super.connectedCallback();
this._observeWorkspaceViews();
}
disconnectedCallback(): void {
super.disconnectedCallback();
window.removeEventListener('changestate', this.#logViewerContext.onChangeState);
@@ -60,84 +27,11 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement {
// Not relevant for this workspace -added to prevent the error from popping up
}
private _observeWorkspaceViews() {
// TODO: Implement extension controller:
this.observe(
umbExtensionsRegistry.extensionsOfTypes<ManifestWorkspaceEditorView>(['workspaceEditorView']),
(workspaceViews) => {
this._workspaceViews = workspaceViews;
this._createRoutes();
}
);
}
create(): void {
// Not relevant for this workspace
}
private _createRoutes() {
this._routes = [];
if (this._workspaceViews.length > 0) {
this._routes = this._workspaceViews.map((view) => {
return {
path: `${view.meta.pathname}`,
component: () => createExtensionElement(view),
setup: (component) => {
(component as any).manifest = view;
},
};
});
this._routes.push({
path: '',
redirectTo: `${this._workspaceViews[0].meta.pathname}`,
});
}
}
#renderRoutes() {
return html`
${this._routes.length > 0
? html`
<umb-router-slot
id="router-slot"
.routes="${this._routes}"
@init=${(event: UmbRouterSlotInitEvent) => {
this._routerPath = event.target.absoluteRouterPath;
}}
@change=${(event: UmbRouterSlotChangeEvent) => {
this._activePath = event.target.localActiveViewPath;
}}></umb-router-slot>
`
: nothing}
`;
}
#renderViews() {
return html`
${this._workspaceViews.length > 1
? html`
<uui-tab-group slot="navigation">
${repeat(
this._workspaceViews,
(view) => view.alias,
(view) => html`
<uui-tab
.label="${view.meta.label || view.name}"
href="${this._routerPath}/${view.meta.pathname}"
?active="${view.meta.pathname === this._activePath}">
<uui-icon slot="icon" name="${view.meta.icon}"></uui-icon>
${view.meta.label || view.name}
</uui-tab>
`
)}
</uui-tab-group>
`
: nothing}
`;
}
/*
render() {
return html`
<umb-body-layout main-no-padding>
@@ -151,6 +45,22 @@ export class UmbLogViewerWorkspaceElement extends UmbLitElement {
</umb-body-layout>
`;
}
*/
render() {
return html`
<umb-workspace-editor alias="Umb.Workspace.Dictionary" .enforceNoFooter=${true}>
<div id="header" slot="header">
<h3 id="headline">
<!-- TODO: get the state from the context -->
<!-- this._activePath === 'overview' ? 'Log Overview for Selected Time Period' : 'Log search' -->
Log Viewer
</h3>
</div>
<slot></slot>
</umb-workspace-editor>
`;
}
static styles = [
UUITextStyles,

8
src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/logviewer/manifests.ts
View File

@@ -5,13 +5,13 @@ import type {
ManifestWorkspaceEditorView,
} from '@umbraco-cms/backoffice/extension-registry';
const workspaceAlias = 'Umb.Workspace.LogviewerRoot';
const workspaceAlias = 'Umb.Workspace.LogViewer';
const workspace: ManifestWorkspace = {
type: 'workspace',
alias: workspaceAlias,
name: 'LogViewer Root Workspace',
loader: () => import('./logviewer-root-workspace.element.js'),
loader: () => import('./logviewer-workspace.element.js'),
meta: {
entityType: 'logviewer',
},
@@ -20,7 +20,7 @@ const workspace: ManifestWorkspace = {
const workspaceViews: Array<ManifestWorkspaceEditorView> = [
{
type: 'workspaceEditorView',
alias: 'Umb.WorkspaceView.Logviewer.Overview',
alias: 'Umb.WorkspaceView.LogViewer.Overview',
name: 'LogViewer Root Workspace Overview View',
loader: () => import('../views/overview/index.js'),
weight: 300,
@@ -38,7 +38,7 @@ const workspaceViews: Array<ManifestWorkspaceEditorView> = [
},
{
type: 'workspaceEditorView',
alias: 'Umb.WorkspaceView.Logviewer.Search',
alias: 'Umb.WorkspaceView.LogViewer.Search',
name: 'LogViewer Root Workspace Search View',
loader: () => import('../views/search/index.js'),
weight: 200,

4
src/Umbraco.Web.UI.Client/src/packages/settings/logviewer/workspace/manifests.ts
View File

@@ -1,3 +1,3 @@
import { manifests as logviewerRootManifests } from './logviewer-root/manifests.js';
import { manifests as logViewerRootManifests } from './logviewer/manifests.js';
export const manifests = [...logviewerRootManifests];
export const manifests = [...logViewerRootManifests];