Merge remote-tracking branch 'origin/main' into feature/dashboard-models-builder

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`
 			<uui-box>
 				<h1>Performance Profiling</h1>
+				${this._profilingStatus
+					? html`
+							<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._profilingPerfomance}"
+								@change="${this._changeProfilingPerformance}"></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>
+					  `
+					: html`
+							<p>
+								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.
+							</p>
+							<p>
+								Debug mode is turned on by setting <b>debug="true"</b> on the <b>&lt;compilation /&gt;</b> element in
+								web.config.
+							</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

@@ -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) {

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

@@ -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,
 ];