habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: rewrite aggregate cards to separate components

Browse Source
This commit is contained in:
Jens Langhammer
2020-12-16 22:00:40 +01:00
parent 1179ba4ef2
commit 9e33b49d29
5 changed files with 128 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
web/src/pages/admin-overview/AdminOverviewPage.ts
View File

@ -4,50 +4,11 @@ import { AdminOverview } from "../../api/admin_overview";
import { DefaultClient } from "../../api/client";
import { User } from "../../api/user";
import { COMMON_STYLES } from "../../common/styles";
import { AggregatePromiseCard } from "../../elements/cards/AggregatePromiseCard";
import { SpinnerSize } from "../../elements/Spinner";
import "../../elements/AdminLoginsChart";
import "./TopApplicationsTable";
@customElement("ak-admin-status-card")
export class AdminStatusCard extends AggregatePromiseCard {
@property({type: Number})
value?: number;
@property()
warningText?: string;
@property({type: Number})
lessThanThreshold?: number;
renderNone(): TemplateResult {
return html`<ak-spinner size=${SpinnerSize.Large}></ak-spinner>`;
}
renderGood(): TemplateResult {
return html`<p class="ak-aggregate-card">
<i class="fa fa-check-circle"></i> ${this.value}
</p>`;
}
renderBad(): TemplateResult {
return html`<p class="ak-aggregate-card">
<i class="fa fa-exclamation-triangle"></i> ${this.value}
</p>
<p class="subtext">${this.warningText ? gettext(this.warningText) : ""}</p>`;
}
renderInner(): TemplateResult {
if (!this.value) {
return this.renderNone();
}
return html``;
}
}
import "./OverviewCards";
@customElement("ak-admin-overview")
export class AdminOverviewPage extends LitElement {
@ -92,30 +53,10 @@ export class AdminOverviewPage extends LitElement {
</p>`
: html`<ak-spinner size=${SpinnerSize.Large}></ak-spinner>`}
</ak-aggregate-card>
<ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-plugged" header="Providers" headerLink="#/administration/providers/">
${this.data ?
this.data?.providers_without_application > 1 ?
html`<p class="ak-aggregate-card">
<i class="fa fa-exclamation-triangle"></i> 0
</p>
<p class="subtext">${gettext("At least one Provider has no application assigned.")}</p>` :
html`<p class="ak-aggregate-card">
<i class="fa fa-check-circle"></i> 0
</p>`
: html`<ak-spinner size=${SpinnerSize.Large}></ak-spinner>`}
</ak-aggregate-card>
<ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-plugged" header="Policies" headerLink="#/administration/policies/">
${this.data ?
this.data?.policies_without_binding > 1 ?
html`<p class="ak-aggregate-card">
<i class="fa fa-exclamation-triangle"></i> 0
</p>
<p class="subtext">${gettext("Policies without binding exist.")}</p>` :
html`<p class="ak-aggregate-card">
<i class="fa fa-check-circle"></i> 0
</p>`
: html`<ak-spinner size=${SpinnerSize.Large}></ak-spinner>`}
</ak-aggregate-card>
<ak-admin-status-card-provider class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-plugged" header="Providers" headerLink="#/administration/providers/">
</ak-admin-status-card-provider>
<ak-admin-status-card-policy class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-plugged" header="Policies" headerLink="#/administration/policies/">
</ak-admin-status-card-policy>
<ak-aggregate-card-promise
icon="pf-icon pf-icon-user"
header="Users"