web: Add enterprise / FIPS notification to the AdminOverviewPage (#10090)
Co-authored-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>
This commit is contained in:
Ken Sternberg
@ -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>
|
||||
<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>
|
||||
${this.renderActions()}
|
||||
</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
|
||||
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>
|
||||
${this.renderCards()}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
56
web/src/admin/admin-overview/cards/FipsStatusCard.ts
Normal file
56
web/src/admin/admin-overview/cards/FipsStatusCard.ts
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user