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

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 {

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<number>;
 
     static get styles(): CSSResult[] {
         return COMMON_STYLES;
     }
 
-    firstUpdated(): void {
-        this.users = User.count();
-    }
-
     render(): TemplateResult {
         return html`<section class="pf-c-page__main-section pf-m-light">
             <div class="pf-c-content">
@@ -46,12 +40,8 @@ export class AdminOverviewPage extends LitElement {
                 </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>
-                <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>
                 <ak-admin-status-card-workers class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Workers">

web/src/pages/admin-overview/cards/FlowCacheStatusCard.ts

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

web/src/pages/admin-overview/cards/PolicyCacheStatusCard.ts

@@ -15,12 +15,12 @@ export class PolicyCacheStatusCard extends AdminStatusCard<number> {
     getStatus(value: number): Promise<AdminStatus> {
         if (value < 1) {
             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."),
             });
         } else {
             return Promise.resolve<AdminStatus>({
-                icon: "fa fa-check-circle"
+                icon: "fa fa-check-circle pf-m-success"
             });
         }
     }

web/src/pages/admin-overview/cards/PolicyUnboundStatusCard.ts

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

web/src/pages/admin-overview/cards/ProviderStatusCard.ts

@@ -17,12 +17,12 @@ export class ProviderStatusCard extends AdminStatusCard<number> {
     getStatus(value: number): Promise<AdminStatus> {
         if (value > 0) {
             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."),
             });
         } else {
             return Promise.resolve<AdminStatus>({
-                icon: "fa fa-check-circle"
+                icon: "fa fa-check-circle pf-m-success"
             });
         }
     }

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<number> {
+
+    getPrimaryValue(): Promise<number> {
+        return User.count();
+    }
+
+    getStatus(value: number): Promise<AdminStatus> {
+        return Promise.resolve<AdminStatus>({
+            icon: "fa fa-check-circle pf-m-success"
+        });
+    }
+
+}

web/src/pages/admin-overview/cards/VersionStatusCard.ts

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

web/src/pages/admin-overview/cards/WorkerStatusCard.ts

@@ -15,12 +15,12 @@ export class WorkersStatusCard extends AdminStatusCard<number> {
     getStatus(value: number): Promise<AdminStatus> {
         if (value < 1) {
             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."),
             });
         } else {
             return Promise.resolve<AdminStatus>({
-                icon: "fa fa-check-circle"
+                icon: "fa fa-check-circle pf-m-success"
             });
         }
     }