init

src/Umbraco.Web.UI.Client/src/backoffice/dashboards/performance-profiling/dashboard-performance-profiling.element.ts

@@ -1,15 +1,85 @@
 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 = false;
+
+	private _notificationService?: UmbNotificationService;
+
+	private async _getProfilingStatus() {
+		try {
+			const status = await ProfilingResource.getProfilingStatus();
+			status.enabled === true ? (this._profilingStatus = status.enabled) : (this._profilingStatus = false);
+		} 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._getProfilingStatus();
+		this.consumeAllContexts(['umbNotificationService'], (instances) => {
+			this._notificationService = instances['umbNotificationService'];
+		});
+	}
 
 	render() {
 		return html`
 			<uui-box>
 				<h1>Performance Profiling</h1>
+				<p>
+					Umbraco currently runs in debug mode. This means you can use the built-in performance profiler to assess the
+					performance when rendering pages.
+				</p>
+				<p>
+					If you want to activate the profiler for a specific page rendering, simply add
+					<strong>umbDebug=true</strong> to the querystring when requesting the page.
+				</p>
+
+				<p>
+					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.
+				</p>
+
+				<uui-toggle
+					label="Activate the profiler by default"
+					label-position="left"
+					.checked="${this._profilingStatus}"></uui-toggle>
+				<h4>Friendly reminder</h4>
+				<p>
+					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.
+				</p>
 			</uui-box>
 		`;
 	}

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',

src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts

@@ -12,6 +12,7 @@ import { handlers as telemetryHandlers } from './domains/telemetry.handlers';
 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 profilingHandlers } from './domains/performance-profiling.handlers';
 
 const handlers = [
 	serverHandlers.serverVersionHandler,
@@ -28,6 +29,7 @@ const handlers = [
 	...usersHandlers,
 	...userGroupsHandlers,
 	...examineManagementHandlers,
+	...profilingHandlers,
 ];
 
 switch (import.meta.env.VITE_UMBRACO_INSTALL_STATUS) {

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<ProfilingStatus>({ enabled: true })
+		);
+	}),
+];

src/Umbraco.Web.UI.Client/src/core/mocks/e2e-handlers.ts

@@ -11,6 +11,7 @@ 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 profileHandlers } from './domains/performance-profiling.handlers';
 
 export const handlers = [
 	serverHandlers.serverRunningHandler,
@@ -27,4 +28,5 @@ export const handlers = [
 	...publishedStatusHandlers,
 	...treeHandlers,
 	...examineManagementHandlers,
+	...profileHandlers,
 ];