diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/performance-profiling/dashboard-performance-profiling.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/performance-profiling/dashboard-performance-profiling.element.ts index a7d4200d28..d04cbfb08c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/performance-profiling/dashboard-performance-profiling.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/performance-profiling/dashboard-performance-profiling.element.ts @@ -1,15 +1,116 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import { customElement, state } from 'lit/decorators.js'; + +import { ApiError, ProblemDetails, ProfilingResource } from '@umbraco-cms/backend-api'; +import { UmbContextConsumerMixin } from '@umbraco-cms/context-api'; +import { UmbNotificationDefaultData, UmbNotificationService } from '@umbraco-cms/services'; @customElement('umb-dashboard-performance-profiling') -export class UmbDashboardPerformanceProfilingElement extends LitElement { - static styles = [UUITextStyles, css``]; +export class UmbDashboardPerformanceProfilingElement extends UmbContextConsumerMixin(LitElement) { + static styles = [ + UUITextStyles, + css` + uui-toggle { + font-weight: bold; + } + + h4 { + margin-bottom: 0; + } + + h4 + p { + margin-top: 0; + } + `, + ]; + + @state() + private _profilingStatus?: boolean; + + @state() + private _profilingPerfomance = false; + + private _notificationService?: UmbNotificationService; + + private async _getProfilingStatus() { + try { + const status = await ProfilingResource.getProfilingStatus(); + this._profilingStatus = status.enabled; + } catch (e) { + if (e instanceof ApiError) { + const error = e as ProblemDetails; + const data: UmbNotificationDefaultData = { message: error.message ?? 'Something went wrong' }; + this._notificationService?.peek('danger', { data }); + } + } + } + + constructor() { + super(); + this.consumeAllContexts(['umbNotificationService'], (instances) => { + this._notificationService = instances['umbNotificationService']; + }); + } + + connectedCallback(): void { + super.connectedCallback(); + this._getProfilingStatus(); + if (localStorage.getItem('profilingPerformance') === 'true') this._profilingPerfomance = true; + else this._profilingPerfomance = false; + } + + private _changeProfilingPerformance() { + this._profilingPerfomance = !this._profilingPerfomance; + this._profilingPerfomance + ? localStorage.setItem('profilingPerformance', 'true') + : localStorage.setItem('profilingPerformance', 'false'); + } render() { return html`

Performance Profiling

+ ${this._profilingStatus + ? html` +

+ Umbraco currently runs in debug mode. This means you can use the built-in performance profiler to assess + the performance when rendering pages. +

+

+ If you want to activate the profiler for a specific page rendering, simply add + umbDebug=true to the querystring when requesting the page. +

+ +

+ If you want the profiler to be activated by default for all page renderings, you can use the toggle + below. It will set a cookie in your browser, which then activates the profiler automatically. In other + words, the profiler will only be active by default in your browser - not everyone else's. +

+ + + +

Friendly reminder

+

+ You should never let a production site run in debug mode. Debug mode is turned off by setting + Umbraco:CMS:Hosting:Debug to false in appsettings.json, appsettings.{Environment}.json or via an + environment variable. +

+ ` + : html` +

+ Umbraco currently does not run in debug mode, so you can't use the built-in profiler. This is how it + should be for a production site. +

+

+ Debug mode is turned on by setting debug="true" on the <compilation /> element in + web.config. +

+ `} `; } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section.element.ts index ecafb69f32..22c9c08c4a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/sections/settings/settings-section.element.ts @@ -65,6 +65,19 @@ export class UmbSectionSettingsElement extends LitElement { pathname: 'published-status', }, }, + { + type: 'dashboard', + alias: 'Umb.Dashboard.Profiling', + name: 'Profiling', + elementName: 'umb-dashboard-performance-profiling', + loader: () => import('../../dashboards/performance-profiling/dashboard-performance-profiling.element'), + weight: 101, + meta: { + label: 'Profiling', + sections: ['Umb.Section.Settings'], + pathname: 'profiling', + }, + }, { type: 'dashboard', alias: 'Umb.Dashboard.Telemetry', diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts index a72c20b0bb..3ab2447f5d 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts @@ -13,6 +13,7 @@ import { handlers as usersHandlers } from './domains/users.handlers'; import { handlers as userGroupsHandlers } from './domains/user-groups.handlers'; import { handlers as examineManagementHandlers } from './domains/examine-management.handlers'; import { handlers as modelsBuilderHandlers } from './domains/modelsbuilder.handlers'; +import { handlers as profilingHandlers } from './domains/performance-profiling.handlers'; const handlers = [ serverHandlers.serverVersionHandler, @@ -30,6 +31,7 @@ const handlers = [ ...userGroupsHandlers, ...examineManagementHandlers, ...modelsBuilderHandlers, + ...profilingHandlers, ]; switch (import.meta.env.VITE_UMBRACO_INSTALL_STATUS) { diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/performance-profiling.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/performance-profiling.handlers.ts new file mode 100644 index 0000000000..1016e922b8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/performance-profiling.handlers.ts @@ -0,0 +1,14 @@ +import { rest } from 'msw'; + +import { umbracoPath } from '@umbraco-cms/utils'; +import { ProfilingStatus } from '@umbraco-cms/backend-api'; + +export const handlers = [ + rest.get(umbracoPath('/profiling/status'), (_req, res, ctx) => { + return res( + // Respond with a 200 status code + ctx.status(200), + ctx.json({ enabled: true }) + ); + }), +]; diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/e2e-handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/e2e-handlers.ts index 6c59964ebe..44df51a73f 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/e2e-handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/e2e-handlers.ts @@ -9,9 +9,9 @@ import { handlers as upgradeHandlers } from './domains/upgrade.handlers'; import { handlers as userHandlers } from './domains/user.handlers'; import { handlers as telemetryHandlers } from './domains/telemetry.handlers'; import { handlers as treeHandlers } from './domains/entity.handlers'; - import { handlers as examineManagementHandlers } from './domains/examine-management.handlers'; import { handlers as modelsBuilderHandlers } from './domains/modelsbuilder.handlers'; +import { handlers as profileHandlers } from './domains/performance-profiling.handlers'; export const handlers = [ serverHandlers.serverRunningHandler, @@ -29,4 +29,5 @@ export const handlers = [ ...treeHandlers, ...examineManagementHandlers, ...modelsBuilderHandlers, + ...profileHandlers, ];