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

web: migrate admin overview cards to separate files

Browse Source
This commit is contained in:
Jens Langhammer
2020-12-16 22:57:43 +01:00
parent 48438e28fd
commit 2d9efe035e
12 changed files with 257 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,20 +1,22 @@
import { gettext } from "django";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { AdminOverview } from "../../api/admin_overview";
import { DefaultClient } from "../../api/client";
import { User } from "../../api/user";
import { COMMON_STYLES } from "../../common/styles";
import { SpinnerSize } from "../../elements/Spinner";
import "../../elements/AdminLoginsChart";
import "../../elements/cards/AggregatePromiseCard";
import "./TopApplicationsTable";
import "./OverviewCards";
import "./cards/AdminStatusCard";
import "./cards/FlowCacheStatusCard";
import "./cards/PolicyCacheStatusCard";
import "./cards/PolicyUnboundStatusCard";
import "./cards/ProviderStatusCard";
import "./cards/VersionStatusCard";
import "./cards/WorkerStatusCard";
@customElement("ak-admin-overview")
export class AdminOverviewPage extends LitElement {
@property({attribute: false})
data?: AdminOverview;
@property({attribute: false})
users?: Promise<number>;
@ -23,7 +25,6 @@ export class AdminOverviewPage extends LitElement {
}
firstUpdated(): void {
AdminOverview.get().then(value => this.data = value);
this.users = User.count();
}
@ -51,19 +52,10 @@ export class AdminOverviewPage extends LitElement {
headerLink="#/administration/users/"
.promise=${this.users}>
</ak-aggregate-card-promise>
<!-- Version card -->
<ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Workers">
${this.data ?
this.data?.worker_count < 1 ?
html`<p class="ak-aggregate-card">
<i class="fa fa-exclamation-triangle"></i> ${this.data?.worker_count}
</p>
<p class="subtext">${gettext("No workers connected.")}</p>` :
html`<p class="ak-aggregate-card">
<i class="fa fa-check-circle"></i> ${this.data?.worker_count}
</p>`
: html`<ak-spinner size=${SpinnerSize.Large}></ak-spinner>`}
</ak-aggregate-card>
<ak-admin-status-version class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-bundle" header="Version">
</ak-admin-status-version>
<ak-admin-status-card-workers class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Workers">
</ak-admin-status-card-workers>
<ak-admin-status-card-policy-cache class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Cached Policies">
</ak-admin-status-card-policy-cache>
<ak-admin-status-card-flow-cache class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Cached Flows">