web: use colours for icons, move users to separate card

This commit is contained in:
Jens Langhammer 2020-12-16 23:28:04 +01:00
parent d7fa52ebf3
commit 7b5ce4e98a
9 changed files with 35 additions and 26 deletions

View File

@ -2,6 +2,7 @@ import { gettext } from "django";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import { COMMON_STYLES } from "../../common/styles"; import { COMMON_STYLES } from "../../common/styles";
import { ColorStyles } from "../../constants";
@customElement("ak-aggregate-card") @customElement("ak-aggregate-card")
export class AggregateCard extends LitElement { export class AggregateCard extends LitElement {
@ -24,7 +25,7 @@ export class AggregateCard extends LitElement {
text-align: center; text-align: center;
color: var(--pf-global--Color--100); color: var(--pf-global--Color--100);
} }
`]); `, ColorStyles]);
} }
renderInner(): TemplateResult { renderInner(): TemplateResult {

View File

@ -1,7 +1,6 @@
import { gettext } from "django"; import { gettext } from "django";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { DefaultClient } from "../../api/Client"; import { DefaultClient } from "../../api/Client";
import { User } from "../../api/Users";
import { COMMON_STYLES } from "../../common/styles"; import { COMMON_STYLES } from "../../common/styles";
import "../../elements/AdminLoginsChart"; import "../../elements/AdminLoginsChart";
@ -12,22 +11,17 @@ import "./cards/FlowCacheStatusCard";
import "./cards/PolicyCacheStatusCard"; import "./cards/PolicyCacheStatusCard";
import "./cards/PolicyUnboundStatusCard"; import "./cards/PolicyUnboundStatusCard";
import "./cards/ProviderStatusCard"; import "./cards/ProviderStatusCard";
import "./cards/UserCountStatusCard";
import "./cards/VersionStatusCard"; import "./cards/VersionStatusCard";
import "./cards/WorkerStatusCard"; import "./cards/WorkerStatusCard";
@customElement("ak-admin-overview") @customElement("ak-admin-overview")
export class AdminOverviewPage extends LitElement { export class AdminOverviewPage extends LitElement {
@property({attribute: false})
users?: Promise<number>;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return COMMON_STYLES;
} }
firstUpdated(): void {
this.users = User.count();
}
render(): TemplateResult { render(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light"> return html`<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-c-content">
@ -46,12 +40,8 @@ export class AdminOverviewPage extends LitElement {
</ak-admin-status-card-provider> </ak-admin-status-card-provider>
<ak-admin-status-card-policy-unbound class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-infrastructure" header="Policies" headerLink="#/administration/policies/"> <ak-admin-status-card-policy-unbound class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-infrastructure" header="Policies" headerLink="#/administration/policies/">
</ak-admin-status-card-policy-unbound> </ak-admin-status-card-policy-unbound>
<ak-aggregate-card-promise <ak-admin-status-card-user-count class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-user" header="Users" headerLink="#/administration/users/">
icon="pf-icon pf-icon-user" </ak-admin-status-card-user-count>
header="Users"
headerLink="#/administration/users/"
.promise=${this.users}>
</ak-aggregate-card-promise>
<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 class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-bundle" header="Version">
</ak-admin-status-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 class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Workers">

View File

@ -14,12 +14,12 @@ export class FlowCacheStatusCard extends AdminStatusCard<number> {
getStatus(value: number): Promise<AdminStatus> { getStatus(value: number): Promise<AdminStatus> {
if (value < 1) { if (value < 1) {
return Promise.resolve<AdminStatus>({ return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle", icon: "fa fa-exclamation-triangle pf-m-warning",
message: gettext("No flows cached."), message: gettext("No flows cached."),
}); });
} else { } else {
return Promise.resolve<AdminStatus>({ return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle" icon: "fa fa-check-circle pf-m-success"
}); });
} }
} }

View File

@ -15,12 +15,12 @@ export class PolicyCacheStatusCard extends AdminStatusCard<number> {
getStatus(value: number): Promise<AdminStatus> { getStatus(value: number): Promise<AdminStatus> {
if (value < 1) { if (value < 1) {
return Promise.resolve<AdminStatus>({ return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle", icon: "fa fa-exclamation-triangle pf-m-warning",
message: gettext("No policies cached. Users may experience slow response times."), message: gettext("No policies cached. Users may experience slow response times."),
}); });
} else { } else {
return Promise.resolve<AdminStatus>({ return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle" icon: "fa fa-check-circle pf-m-success"
}); });
} }
} }

View File

@ -18,12 +18,12 @@ export class PolicyUnboundStatusCard extends AdminStatusCard<number> {
getStatus(value: number): Promise<AdminStatus> { getStatus(value: number): Promise<AdminStatus> {
if (value > 0) { if (value > 0) {
return Promise.resolve<AdminStatus>({ return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle", icon: "fa fa-exclamation-triangle pf-m-warning",
message: gettext("Policies without binding exist."), message: gettext("Policies without binding exist."),
}); });
} else { } else {
return Promise.resolve<AdminStatus>({ return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle" icon: "fa fa-check-circle pf-m-success"
}); });
} }
} }

View File

@ -17,12 +17,12 @@ export class ProviderStatusCard extends AdminStatusCard<number> {
getStatus(value: number): Promise<AdminStatus> { getStatus(value: number): Promise<AdminStatus> {
if (value > 0) { if (value > 0) {
return Promise.resolve<AdminStatus>({ return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle", icon: "fa fa-exclamation-triangle pf-m-warning",
message: gettext("Warning: At least one Provider has no application assigned."), message: gettext("Warning: At least one Provider has no application assigned."),
}); });
} else { } else {
return Promise.resolve<AdminStatus>({ return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle" icon: "fa fa-check-circle pf-m-success"
}); });
} }
} }

View File

@ -0,0 +1,18 @@
import { customElement } from "lit-element";
import { User } from "../../../api/Users";
import { AdminStatusCard, AdminStatus } from "./AdminStatusCard";
@customElement("ak-admin-status-card-user-count")
export class UserCountStatusCard extends AdminStatusCard<number> {
getPrimaryValue(): Promise<number> {
return User.count();
}
getStatus(value: number): Promise<AdminStatus> {
return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle pf-m-success"
});
}
}

View File

@ -13,12 +13,12 @@ export class VersionStatusCard extends AdminStatusCard<Version> {
getStatus(value: Version): Promise<AdminStatus> { getStatus(value: Version): Promise<AdminStatus> {
if (value.outdated) { if (value.outdated) {
return Promise.resolve<AdminStatus>({ return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle", icon: "fa fa-exclamation-triangle pf-m-warning",
message: gettext(`${value.version_latest} is available!`), message: gettext(`${value.version_latest} is available!`),
}); });
} else { } else {
return Promise.resolve<AdminStatus>({ return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle", icon: "fa fa-check-circle pf-m-success",
message: gettext("Up-to-date!") message: gettext("Up-to-date!")
}); });
} }

View File

@ -15,12 +15,12 @@ export class WorkersStatusCard extends AdminStatusCard<number> {
getStatus(value: number): Promise<AdminStatus> { getStatus(value: number): Promise<AdminStatus> {
if (value < 1) { if (value < 1) {
return Promise.resolve<AdminStatus>({ return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle", icon: "fa fa-exclamation-triangle pf-m-warning",
message: gettext("No workers connected. Background tasks will not run."), message: gettext("No workers connected. Background tasks will not run."),
}); });
} else { } else {
return Promise.resolve<AdminStatus>({ return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle" icon: "fa fa-check-circle pf-m-success"
}); });
} }
} }