From 7b5ce4e98a9e649640c4b134b742f6ea440ba31f Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Wed, 16 Dec 2020 23:28:04 +0100 Subject: [PATCH] web: use colours for icons, move users to separate card --- web/src/elements/cards/AggregateCard.ts | 3 ++- .../pages/admin-overview/AdminOverviewPage.ts | 16 +++------------- .../cards/FlowCacheStatusCard.ts | 4 ++-- .../cards/PolicyCacheStatusCard.ts | 4 ++-- .../cards/PolicyUnboundStatusCard.ts | 4 ++-- .../admin-overview/cards/ProviderStatusCard.ts | 4 ++-- .../cards/UserCountStatusCard.ts | 18 ++++++++++++++++++ .../admin-overview/cards/VersionStatusCard.ts | 4 ++-- .../admin-overview/cards/WorkerStatusCard.ts | 4 ++-- 9 files changed, 35 insertions(+), 26 deletions(-) create mode 100644 web/src/pages/admin-overview/cards/UserCountStatusCard.ts diff --git a/web/src/elements/cards/AggregateCard.ts b/web/src/elements/cards/AggregateCard.ts index 101114df0..4f21daf5f 100644 --- a/web/src/elements/cards/AggregateCard.ts +++ b/web/src/elements/cards/AggregateCard.ts @@ -2,6 +2,7 @@ import { gettext } from "django"; import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { ifDefined } from "lit-html/directives/if-defined"; import { COMMON_STYLES } from "../../common/styles"; +import { ColorStyles } from "../../constants"; @customElement("ak-aggregate-card") export class AggregateCard extends LitElement { @@ -24,7 +25,7 @@ export class AggregateCard extends LitElement { text-align: center; color: var(--pf-global--Color--100); } - `]); + `, ColorStyles]); } renderInner(): TemplateResult { diff --git a/web/src/pages/admin-overview/AdminOverviewPage.ts b/web/src/pages/admin-overview/AdminOverviewPage.ts index d49fa601b..222da610e 100644 --- a/web/src/pages/admin-overview/AdminOverviewPage.ts +++ b/web/src/pages/admin-overview/AdminOverviewPage.ts @@ -1,7 +1,6 @@ import { gettext } from "django"; import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element"; import { DefaultClient } from "../../api/Client"; -import { User } from "../../api/Users"; import { COMMON_STYLES } from "../../common/styles"; import "../../elements/AdminLoginsChart"; @@ -12,22 +11,17 @@ import "./cards/FlowCacheStatusCard"; import "./cards/PolicyCacheStatusCard"; import "./cards/PolicyUnboundStatusCard"; import "./cards/ProviderStatusCard"; +import "./cards/UserCountStatusCard"; import "./cards/VersionStatusCard"; import "./cards/WorkerStatusCard"; @customElement("ak-admin-overview") export class AdminOverviewPage extends LitElement { - @property({attribute: false}) - users?: Promise; static get styles(): CSSResult[] { return COMMON_STYLES; } - firstUpdated(): void { - this.users = User.count(); - } - render(): TemplateResult { return html`
@@ -46,12 +40,8 @@ export class AdminOverviewPage extends LitElement { - - + + diff --git a/web/src/pages/admin-overview/cards/FlowCacheStatusCard.ts b/web/src/pages/admin-overview/cards/FlowCacheStatusCard.ts index ebc5134ae..eb542ca2a 100644 --- a/web/src/pages/admin-overview/cards/FlowCacheStatusCard.ts +++ b/web/src/pages/admin-overview/cards/FlowCacheStatusCard.ts @@ -14,12 +14,12 @@ export class FlowCacheStatusCard extends AdminStatusCard { getStatus(value: number): Promise { if (value < 1) { return Promise.resolve({ - icon: "fa fa-exclamation-triangle", + icon: "fa fa-exclamation-triangle pf-m-warning", message: gettext("No flows cached."), }); } else { return Promise.resolve({ - icon: "fa fa-check-circle" + icon: "fa fa-check-circle pf-m-success" }); } } diff --git a/web/src/pages/admin-overview/cards/PolicyCacheStatusCard.ts b/web/src/pages/admin-overview/cards/PolicyCacheStatusCard.ts index e91a4ddc8..873932a5b 100644 --- a/web/src/pages/admin-overview/cards/PolicyCacheStatusCard.ts +++ b/web/src/pages/admin-overview/cards/PolicyCacheStatusCard.ts @@ -15,12 +15,12 @@ export class PolicyCacheStatusCard extends AdminStatusCard { getStatus(value: number): Promise { if (value < 1) { return Promise.resolve({ - icon: "fa fa-exclamation-triangle", + icon: "fa fa-exclamation-triangle pf-m-warning", message: gettext("No policies cached. Users may experience slow response times."), }); } else { return Promise.resolve({ - icon: "fa fa-check-circle" + icon: "fa fa-check-circle pf-m-success" }); } } diff --git a/web/src/pages/admin-overview/cards/PolicyUnboundStatusCard.ts b/web/src/pages/admin-overview/cards/PolicyUnboundStatusCard.ts index d5b11e9ee..e1422b2db 100644 --- a/web/src/pages/admin-overview/cards/PolicyUnboundStatusCard.ts +++ b/web/src/pages/admin-overview/cards/PolicyUnboundStatusCard.ts @@ -18,12 +18,12 @@ export class PolicyUnboundStatusCard extends AdminStatusCard { getStatus(value: number): Promise { if (value > 0) { return Promise.resolve({ - icon: "fa fa-exclamation-triangle", + icon: "fa fa-exclamation-triangle pf-m-warning", message: gettext("Policies without binding exist."), }); } else { return Promise.resolve({ - icon: "fa fa-check-circle" + icon: "fa fa-check-circle pf-m-success" }); } } diff --git a/web/src/pages/admin-overview/cards/ProviderStatusCard.ts b/web/src/pages/admin-overview/cards/ProviderStatusCard.ts index 26b4f734e..d97eafa2c 100644 --- a/web/src/pages/admin-overview/cards/ProviderStatusCard.ts +++ b/web/src/pages/admin-overview/cards/ProviderStatusCard.ts @@ -17,12 +17,12 @@ export class ProviderStatusCard extends AdminStatusCard { getStatus(value: number): Promise { if (value > 0) { return Promise.resolve({ - icon: "fa fa-exclamation-triangle", + icon: "fa fa-exclamation-triangle pf-m-warning", message: gettext("Warning: At least one Provider has no application assigned."), }); } else { return Promise.resolve({ - icon: "fa fa-check-circle" + icon: "fa fa-check-circle pf-m-success" }); } } diff --git a/web/src/pages/admin-overview/cards/UserCountStatusCard.ts b/web/src/pages/admin-overview/cards/UserCountStatusCard.ts new file mode 100644 index 000000000..6c556b673 --- /dev/null +++ b/web/src/pages/admin-overview/cards/UserCountStatusCard.ts @@ -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 { + + getPrimaryValue(): Promise { + return User.count(); + } + + getStatus(value: number): Promise { + return Promise.resolve({ + icon: "fa fa-check-circle pf-m-success" + }); + } + +} diff --git a/web/src/pages/admin-overview/cards/VersionStatusCard.ts b/web/src/pages/admin-overview/cards/VersionStatusCard.ts index 601518b17..f101ccf17 100644 --- a/web/src/pages/admin-overview/cards/VersionStatusCard.ts +++ b/web/src/pages/admin-overview/cards/VersionStatusCard.ts @@ -13,12 +13,12 @@ export class VersionStatusCard extends AdminStatusCard { getStatus(value: Version): Promise { if (value.outdated) { return Promise.resolve({ - icon: "fa fa-exclamation-triangle", + icon: "fa fa-exclamation-triangle pf-m-warning", message: gettext(`${value.version_latest} is available!`), }); } else { return Promise.resolve({ - icon: "fa fa-check-circle", + icon: "fa fa-check-circle pf-m-success", message: gettext("Up-to-date!") }); } diff --git a/web/src/pages/admin-overview/cards/WorkerStatusCard.ts b/web/src/pages/admin-overview/cards/WorkerStatusCard.ts index 232f3d0ea..1b3dad2ec 100644 --- a/web/src/pages/admin-overview/cards/WorkerStatusCard.ts +++ b/web/src/pages/admin-overview/cards/WorkerStatusCard.ts @@ -15,12 +15,12 @@ export class WorkersStatusCard extends AdminStatusCard { getStatus(value: number): Promise { if (value < 1) { return Promise.resolve({ - icon: "fa fa-exclamation-triangle", + icon: "fa fa-exclamation-triangle pf-m-warning", message: gettext("No workers connected. Background tasks will not run."), }); } else { return Promise.resolve({ - icon: "fa fa-check-circle" + icon: "fa fa-check-circle pf-m-success" }); } }