web: Add enterprise / FIPS notification to the AdminOverviewPage (#10090)

Co-authored-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>

web/package.json

@@ -15,7 +15,7 @@
         "build-proxy": "run-s build-locales esbuild:build-proxy",
         "watch": "run-s build-locales esbuild:watch",
         "lint": "cross-env NODE_OPTIONS='--max_old_space_size=65536' eslint . --max-warnings 0 --fix",
-        "lint:precommit": "cross-env NODE_OPTIONS='--max_old_space_size=65536' node scripts/eslint-precommit.mjs",
+        "lint:precommit": "bun scripts/eslint-precommit.mjs",
         "lint:spelling": "node scripts/check-spelling.mjs",
         "lit-analyse": "lit-analyzer src",
         "precommit": "npm-run-all --parallel tsc lit-analyse lint:spelling --sequential lint:precommit prettier",

web/src/admin/admin-overview/AdminOverviewPage.ts

@@ -1,5 +1,6 @@
 import "@goauthentik/admin/admin-overview/TopApplicationsTable";
 import "@goauthentik/admin/admin-overview/cards/AdminStatusCard";
+import "@goauthentik/admin/admin-overview/cards/FipsStatusCard";
 import "@goauthentik/admin/admin-overview/cards/RecentEventsCard";
 import "@goauthentik/admin/admin-overview/cards/SystemStatusCard";
 import "@goauthentik/admin/admin-overview/cards/VersionStatusCard";
@@ -10,13 +11,17 @@ import "@goauthentik/admin/admin-overview/charts/SyncStatusChart";
 import { VERSION } from "@goauthentik/common/constants";
 import { me } from "@goauthentik/common/users";
 import { AKElement } from "@goauthentik/elements/Base";
+import { WithLicenseSummary } from "@goauthentik/elements/Interface/licenseSummaryProvider.js";
 import "@goauthentik/elements/PageHeader";
 import "@goauthentik/elements/cards/AggregatePromiseCard";
 import { paramURL } from "@goauthentik/elements/router/RouterOutlet";
 
 import { msg, str } from "@lit/localize";
-import { CSSResult, TemplateResult, css, html } from "lit";
+import { CSSResult, TemplateResult, css, html, nothing } from "lit";
 import { customElement, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { map } from "lit/directives/map.js";
+import { when } from "lit/directives/when.js";
 
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDivider from "@patternfly/patternfly/components/Divider/divider.css";
@@ -33,8 +38,12 @@ export function versionFamily(): string {
     return parts.join(".");
 }
 
+const AdminOverviewBase = WithLicenseSummary(AKElement);
+
+type Renderer = () => TemplateResult | typeof nothing;
+
 @customElement("ak-admin-overview")
-export class AdminOverviewPage extends AKElement {
+export class AdminOverviewPage extends AdminOverviewBase {
     static get styles(): CSSResult[] {
         return [
             PFBase,
@@ -73,6 +82,7 @@ export class AdminOverviewPage extends AKElement {
 
     render(): TemplateResult {
         const name = this.user?.user.name ?? this.user?.user.username;
+
         return html`<ak-page-header icon="" header="" description=${msg("General system status")}>
                 <span slot="header"> ${msg(str`Welcome, ${name}.`)} </span>
             </ak-page-header>
@@ -89,48 +99,7 @@ export class AdminOverviewPage extends AKElement {
                                 .isCenter=${false}
                             >
                                 <ul class="pf-c-list">
-                                    <li>
+                                    ${this.renderActions()}
-                                        <a
-                                            class="pf-u-mb-xl"
-                                            href=${paramURL("/core/applications", {
-                                                createForm: true,
-                                            })}
-                                            >${msg("Create a new application")}</a
-                                        >
-                                    </li>
-                                    <li>
-                                        <a class="pf-u-mb-xl" href=${paramURL("/events/log")}
-                                            >${msg("Check the logs")}</a
-                                        >
-                                    </li>
-                                    <li>
-                                        <a
-                                            class="pf-u-mb-xl"
-                                            target="_blank"
-                                            href="https://goauthentik.io/integrations/"
-                                            >${msg("Explore integrations")}<i
-                                                class="fas fa-external-link-alt ak-external-link"
-                                            ></i
-                                        ></a>
-                                    </li>
-                                    <li>
-                                        <a class="pf-u-mb-xl" href=${paramURL("/identity/users")}
-                                            >${msg("Manage users")}</a
-                                        >
-                                    </li>
-                                    <li>
-                                        <a
-                                            class="pf-u-mb-xl"
-                                            target="_blank"
-                                            href="https://goauthentik.io/docs/releases/${versionFamily()}#fixed-in-${VERSION.replaceAll(
-                                                ".",
-                                                "",
-                                            )}"
-                                            >${msg("Check the release notes")}<i
-                                                class="fas fa-external-link-alt ak-external-link"
-                                            ></i
-                                        ></a>
-                                    </li>
                                 </ul>
                             </ak-aggregate-card>
                         </div>
@@ -153,21 +122,7 @@ export class AdminOverviewPage extends AKElement {
                         <div class="pf-l-grid__item pf-m-12-col">
                             <hr class="pf-c-divider" />
                         </div>
-                        <div
+                        ${this.renderCards()}
-                            class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container"
-                        >
-                            <ak-admin-status-system> </ak-admin-status-system>
-                        </div>
-                        <div
-                            class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container"
-                        >
-                            <ak-admin-status-version> </ak-admin-status-version>
-                        </div>
-                        <div
-                            class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container"
-                        >
-                            <ak-admin-status-card-workers> </ak-admin-status-card-workers>
-                        </div>
                     </div>
                     <div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl">
                         <ak-recent-events pageSize="6"></ak-recent-events>
@@ -201,4 +156,70 @@ export class AdminOverviewPage extends AKElement {
                 </div>
             </section>`;
     }
+
+    renderCards() {
+        const isEnterprise = this.hasEnterpriseLicense;
+        const classes = {
+            "card-container": true,
+            "pf-l-grid__item": true,
+            "pf-m-6-col": true,
+            "pf-m-4-col-on-md": !isEnterprise,
+            "pf-m-4-col-on-xl": !isEnterprise,
+            "pf-m-3-col-on-md": isEnterprise,
+            "pf-m-3-col-on-xl": isEnterprise,
+        };
+
+        return html`<div class=${classMap(classes)}>
+                <ak-admin-status-system> </ak-admin-status-system>
+            </div>
+            <div class=${classMap(classes)}>
+                <ak-admin-status-version> </ak-admin-status-version>
+            </div>
+            <div class=${classMap(classes)}>
+                <ak-admin-status-card-workers> </ak-admin-status-card-workers>
+            </div>
+            ${isEnterprise
+                ? html` <div class=${classMap(classes)}>
+                      <ak-admin-fips-status-system> </ak-admin-fips-status-system>
+                  </div>`
+                : nothing} `;
+    }
+
+    renderActions() {
+        const release = `${versionFamily()}#fixed-in-${VERSION.replaceAll(".", "")}`;
+
+        const quickActions: [string, string][] = [
+            [msg("Create a new application"), paramURL("/core/applications", { createForm: true })],
+            [msg("Check the logs"), paramURL("/events/log")],
+            [msg("Explore integrations"), "https://goauthentik.io/integrations/"],
+            [msg("Manage users"), paramURL("/identity/users")],
+            [msg("Check the release notes"), `https://goauthentik.io/docs/releases/${release}`],
+        ];
+
+        const action = ([label, url]: [string, string]) => {
+            const isExternal = url.startsWith("https://");
+            const ex = (truecase: Renderer, falsecase: Renderer) =>
+                when(isExternal, truecase, falsecase);
+
+            const content = html`${label}${ex(
+                () => html`<i class="fas fa-external-link-alt ak-external-link"></i>`,
+                () => nothing,
+            )}`;
+
+            return html`<li>
+                ${ex(
+                    () => html`<a href="${url}" class="pf-u-mb-xl" target="_blank">${content}</a>`,
+                    () => html`<a href="${url}" class="pf-u-mb-xl" )>${content}</a>`,
+                )}
+            </li>`;
+        };
+
+        return html`${map(quickActions, action)}`;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-admin-overview": AdminOverviewPage;
+    }
 }

web/src/admin/admin-overview/cards/FipsStatusCard.ts

@@ -0,0 +1,56 @@
+import {
+    AdminStatus,
+    AdminStatusCard,
+} from "@goauthentik/admin/admin-overview/cards/AdminStatusCard";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+
+import { msg } from "@lit/localize";
+import { TemplateResult, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+import { AdminApi, SystemInfo } from "@goauthentik/api";
+
+type StatusContent = { icon: string; message: TemplateResult };
+
+@customElement("ak-admin-fips-status-system")
+export class FipsStatusCard extends AdminStatusCard<SystemInfo> {
+    icon = "pf-icon pf-icon-server";
+
+    @state()
+    statusSummary?: string;
+
+    async getPrimaryValue(): Promise<SystemInfo> {
+        return await new AdminApi(DEFAULT_CONFIG).adminSystemRetrieve();
+    }
+
+    setStatus(summary: string, content: StatusContent): Promise<AdminStatus> {
+        this.statusSummary = summary;
+        return Promise.resolve<AdminStatus>(content);
+    }
+
+    getStatus(value: SystemInfo): Promise<AdminStatus> {
+        return value.runtime.opensslFipsMode
+            ? this.setStatus(msg("OK"), {
+                  icon: "fa fa-check-circle pf-m-success",
+                  message: html`${msg("FIPS compliance: passing")}`,
+              })
+            : this.setStatus(msg("Unverified"), {
+                  icon: "fa fa-info-circle pf-m-warning",
+                  message: html`${msg("FIPS compliance: unverified")}`,
+              });
+    }
+
+    renderHeader(): TemplateResult {
+        return html`${msg("FIPS Status")}`;
+    }
+
+    renderValue(): TemplateResult {
+        return html`${this.statusSummary}`;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-admin-fips-status-system": FipsStatusCard;
+    }
+}