create manifest from server response

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/health-check-group-two.element.ts

@@ -1,91 +0,0 @@
-import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import type { ManifestHealthCheck } from '@umbraco-cms/models';
-import { StatusResultType } from '@umbraco-cms/backend-api';
-
-@customElement('umb-health-check-group-two')
-export class UmbSecurityHealthCheckGroupTwoElement extends LitElement {
-	static styles = [UUITextStyles, css``];
-
-	@property({ type: Object })
-	manifest?: ManifestHealthCheck;
-
-	@state()
-	private _checkResponse? = [];
-
-	private async checkGroup() {
-		console.log('group checked');
-
-		// Default options are marked with *
-		const url = '/umbraco/management/api/v1/health-check/Security/';
-		const response = await fetch(url, {
-			method: 'GET', // *GET, POST, PUT, DELETE, etc.
-			mode: 'cors', // no-cors, *cors, same-origin
-			cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-			credentials: 'same-origin', // include, *same-origin, omit
-			headers: {
-				'Content-Type': 'application/json',
-				// 'Content-Type': 'application/x-www-form-urlencoded',
-			},
-		});
-
-		this._checkResponse = await response.json(); // parses JSON response into native JavaScript objects
-		console.log(this._checkResponse);
-	}
-
-	render() {
-		return html`
-			<uui-box>
-				<div slot="headline" class="flex">
-					<span>${this.manifest?.meta.label}</span>
-					<uui-button color="positive" look="primary" @click="${this.checkGroup}"> Check group </uui-button>
-				</div>
-				<div class="checks-wrapper">
-					${this.manifest?.meta.checks.map((check) => {
-						return html`<uui-box headline="${check.name || '?'}">
-							<p>${check.description}</p>
-							${this.renderCheckResults(check.alias)}
-						</uui-box>`;
-					})}
-				</div>
-			</uui-box>
-		`;
-	}
-
-	renderCheckResults(alias: string) {
-		const checkResults = this._checkResponse?.find((result: any) => result.alias === alias);
-		return html`<uui-icon-registry-essential>
-			<div class="data">
-				${checkResults?.results.map((result: any) => {
-					return html`<div class="result-wrapper">
-						<p>${this.renderIcon(result.resultType)} ${result.message}</p>
-						${result.readMoreLink ? html`<uui-button color="default" look="primary">Read more</uui-button>` : nothing}
-					</div>`;
-				})}
-			</div>
-		</uui-icon-registry-essential>`;
-	}
-
-	private renderIcon(type?: StatusResultType) {
-		switch (type) {
-			case 'Success':
-				return html`<uui-icon style="color: var(--uui-color-positive);" name="check"></uui-icon>`;
-			case 'Warning':
-				return html`<uui-icon style="color: var(--uui-color-warning);" name="alert"></uui-icon>`;
-			case 'Error':
-				return html`<uui-icon style="color: var(--uui-color-danger);" name="remove"></uui-icon>`;
-			case 'Info':
-				return html`<uui-icon style="color:black;" name="info"></uui-icon>`;
-			default:
-				return nothing;
-		}
-	}
-}
-
-export default UmbSecurityHealthCheckGroupTwoElement;
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-health-check-group-two': UmbSecurityHealthCheckGroupTwoElement;
-	}
-}

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/health-check-overview-group.element.ts

@@ -0,0 +1,67 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { UmbHealthCheckContext } from './health-check.context';
+import type { ManifestHealthCheck } from '@umbraco-cms/models';
+import { StatusResultType } from '@umbraco-cms/backend-api';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+@customElement('umb-health-check-overview-group')
+export class UmbHealthCheckOverviewGroupElement extends UmbLitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			.group-box {
+				position: relative;
+			}
+
+			.group-box:hover::after {
+				content: '';
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				border-radius: var(--uui-border-radius);
+				transition: opacity 100ms ease-out 0s;
+				opacity: 0.33;
+				outline-color: var(--uui-color-selected);
+				outline-width: 4px;
+				outline-style: solid;
+			}
+
+			a {
+				text-align: center;
+				font-weight: bold;
+				cursor: pointer;
+				text-decoration: none;
+				color: var(--uui-color-text);
+				margin-bottom: 10px;
+				display: block;
+			}
+		`,
+	];
+
+	@property({ type: Object })
+	manifest?: ManifestHealthCheck;
+
+	@state()
+	private _checkResponse? = [];
+
+	private _healthCheckContext?: UmbHealthCheckContext;
+
+	render() {
+		return html`<a href="${window.location.href + '/' + this.manifest?.meta.label}">
+			<uui-box class="group-box"> ${this.manifest?.meta.label} </uui-box>
+		</a> `;
+	}
+}
+
+export default UmbHealthCheckOverviewGroupElement;
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-health-check-overview-group': UmbHealthCheckOverviewGroupElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/health-check.context.ts

@@ -0,0 +1,29 @@
+import { HealthCheckResource } from '@umbraco-cms/backend-api';
+import { UmbControllerHostInterface } from 'src/core/controller/controller-host.mixin';
+
+export class UmbHealthCheckContext {
+	host = null;
+	constructor(host: any) {
+		this.host = host;
+	}
+	async checkGroup(name: string) {
+		const response = await HealthCheckResource.getHealthCheckGroupByName({ name });
+
+		const results = response.checks?.map((check) => {
+			return {
+				key: check.key,
+				results: check.results,
+			};
+		});
+
+		if (response) return results;
+	}
+
+	async getGroupChecks(name: string) {
+		const response = await HealthCheckResource.getHealthCheckGroupByName({ name });
+		response.checks?.forEach((check) => {
+			delete check.results;
+		});
+		if (response) return response.checks;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/manifests.ts

@@ -1,5 +1,30 @@
+import { HealthCheckGroup, HealthCheckResource } from '@umbraco-cms/backend-api';
 import type { ManifestHealthCheck } from '@umbraco-cms/models';
 
+const _getAllGroups = async () => {
+	const response = await HealthCheckResource.getHealthCheckGroup({ skip: 0, take: 9999 });
+	return response.items;
+};
+const groups: HealthCheckGroup[] = await _getAllGroups();
+
+const _createManifests = (groups: HealthCheckGroup[]) => {
+	return groups.map((group) => {
+		return {
+			type: 'healthCheck',
+			alias: `Umb.HealthCheck.${group.name}`,
+			name: `${group.name} Health Check`,
+			weight: 500,
+			meta: {
+				label: group.name,
+				checks: [],
+			},
+		};
+	});
+};
+
+const healthChecks = _createManifests(groups);
+
+/*
 const healthchecks: Array<ManifestHealthCheck> = [
 	{
 		type: 'healthCheck',
@@ -76,6 +101,6 @@ const healthchecks: Array<ManifestHealthCheck> = [
 			],
 		},
 	},
-];
+];*/
 
-export const manifests = [...healthchecks];
+export const manifests = [...healthChecks];

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.ts

@@ -15,6 +15,7 @@ import {
 
 import { UmbLitElement } from '@umbraco-cms/element';
 import { tryExecuteAndNotify } from '@umbraco-cms/resources';
+import { UmbHealthCheckContext } from '../health-check.context';
 
 @customElement('umb-dashboard-health-check-group')
 export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
@@ -108,9 +109,13 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 	@state()
 	private _group?: HealthCheckGroupWithResult;
 
-	constructor() {
-		super();
-	}
+	private _healthCheckContext = new UmbHealthCheckContext(this);
+
+	@state()
+	private _checks?: HealthCheckWithResult[] | null;
+
+	@state()
+	private _keyResults?: any;
 
 	connectedCallback(): void {
 		super.connectedCallback();
@@ -118,18 +123,13 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 	}
 
 	private async _getGroup(name: string) {
-		const { data } = await tryExecuteAndNotify(this, HealthCheckResource.getHealthCheckGroupByName({ name }));
-		if (data) this._group = data;
+		this._checks = await this._healthCheckContext.getGroupChecks(name);
+		this._group = { name: this.groupName, checks: this._checks };
 	}
 
 	private async _buttonHandler() {
 		this._buttonState = 'waiting';
-		this._getChecks(decodeURI(this.groupName));
-	}
-	private async _getChecks(name: string) {
-		await new Promise((resolve) => setTimeout(resolve, (Math.random() + 1) * 1000));
-		const { data } = await tryExecuteAndNotify(this, HealthCheckResource.getHealthCheckGroupByName({ name }));
-		if (data) this._group = data;
+		this._keyResults = await this._healthCheckContext.checkGroup(decodeURI(this.groupName));
 		this._buttonState = 'success';
 	}
 
@@ -147,7 +147,7 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 						${this._group.checks?.map((check) => {
 							return html`<uui-box headline="${check.name || '?'}">
 								<p>${check.description}</p>
-								${check.results ? this.renderCheckResults(check.results) : nothing}
+								${check.key ? this.renderCheckResults(check.key) : nothing}
 							</uui-box>`;
 						})}
 					</div>
@@ -156,14 +156,14 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement {
 		} else return nothing;
 	}
 
-	renderCheckResults(results: HealthCheckResult[]) {
+	renderCheckResults(key: string) {
+		const checkResults = this._keyResults?.find((result: any) => result.key === key);
 		return html`<uui-icon-registry-essential>
 			<div class="data">
-				${results.map((result) => {
+				${checkResults?.results.map((result: any) => {
 					return html`<div class="result-wrapper">
 						<p>${this.renderIcon(result.resultType)} ${result.message}</p>
 						${result.readMoreLink ? html`<uui-button color="default" look="primary">Read more</uui-button>` : nothing}
-						${result.actions ? this.renderActions(result.actions) : nothing}
 					</div>`;
 				})}
 			</div>

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-overview.ts

@@ -10,7 +10,7 @@ import { tryExecuteAndNotify } from '@umbraco-cms/resources';
 
 import { HealthCheckGroup, HealthCheckGroupWithResult, HealthCheckResource } from '@umbraco-cms/backend-api';
 
-import '../health-check-group-two.element';
+import '../health-check-overview-group.element';
 
 @customElement('umb-dashboard-health-check-overview')
 export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
@@ -92,18 +92,6 @@ export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
 		});
 	}
 
-	connectedCallback() {
-		super.connectedCallback();
-		this._getAllGroups();
-	}
-
-	private async _getAllGroups() {
-		const { data } = await tryExecuteAndNotify(this, HealthCheckResource.getHealthCheckGroup({ skip: 0, take: 9999 }));
-		if (data) {
-			this._groups = data.items;
-		}
-	}
-
 	private async _onHealthCheckHandler() {
 		this._groups?.forEach((group) => {
 			group.name ? this._getGroup(group.name) : nothing;
@@ -130,18 +118,9 @@ export class UmbDashboardHealthCheckOverviewElement extends UmbLitElement {
 						Check all groups
 					</uui-button>
 				</div>
-				<div class="group-wrapper">
-					${this._groups?.map((group) => {
-						if (group.name)
-							return html` <a href="${window.location.href + '/' + group.name}">
-								<uui-box class="group-box"> ${group.name} ${this.renderChecks(group.name)} </uui-box>
-							</a>`;
-						else return nothing;
-					})}
-				</div>
+				<!--//TODO: i want to wrap my extension container in a grid wrapper -->
+				<umb-extension-slot type="healthCheck" default-element="umb-health-check-overview-group"></umb-extension-slot>
 			</uui-box>
-			<br />
-			<umb-extension-slot type="healthCheck" default-element="umb-health-check-group-two"></umb-extension-slot>
 		`;
 	}
 

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/extension-slot/extension-slot.element.ts

@@ -58,7 +58,7 @@ export class UmbExtensionSlotElement extends UmbLitElement {
 						};
 						this._extensions.push(extensionObject);
 						let component;
-						if (extension.type === 'healthCheck') debugger;
+
 						if (isManifestElementableType(extension)) {
 							component = await createExtensionElement(extension);
 						} else {