web: use colours for icons, move users to separate card
This commit is contained in:
parent
d7fa52ebf3
commit
7b5ce4e98a
|
@ -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 {
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
18
web/src/pages/admin-overview/cards/UserCountStatusCard.ts
Normal file
18
web/src/pages/admin-overview/cards/UserCountStatusCard.ts
Normal 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"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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!")
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue