From 9538ad5710ce8d4ccd89924cc54d3d712ab13757 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Thu, 6 May 2021 13:44:53 +0200 Subject: [PATCH] web/admin: show users and groups as chart Signed-off-by: Jens Langhammer --- .../pages/admin-overview/AdminOverviewPage.ts | 44 ++++++------ .../cards/ProviderStatusCard.ts | 31 --------- .../cards/UserCountStatusCard.ts | 24 ------- .../graphs/GroupCountStatusCard.ts | 68 +++++++++++++++++++ .../graphs/UserCountStatusCard.ts | 68 +++++++++++++++++++ 5 files changed, 161 insertions(+), 74 deletions(-) delete mode 100644 web/src/pages/admin-overview/cards/ProviderStatusCard.ts delete mode 100644 web/src/pages/admin-overview/cards/UserCountStatusCard.ts create mode 100644 web/src/pages/admin-overview/graphs/GroupCountStatusCard.ts create mode 100644 web/src/pages/admin-overview/graphs/UserCountStatusCard.ts diff --git a/web/src/pages/admin-overview/AdminOverviewPage.ts b/web/src/pages/admin-overview/AdminOverviewPage.ts index 734a78cb6..72ba1aa98 100644 --- a/web/src/pages/admin-overview/AdminOverviewPage.ts +++ b/web/src/pages/admin-overview/AdminOverviewPage.ts @@ -7,14 +7,14 @@ import "./TopApplicationsTable"; import "./cards/AdminStatusCard"; import "./cards/BackupStatusCard"; -import "./cards/ProviderStatusCard"; -import "./cards/UserCountStatusCard"; import "./cards/VersionStatusCard"; import "./cards/WorkerStatusCard"; import "./graphs/FlowStatusCard"; import "./graphs/LDAPSyncStatusCard"; import "./graphs/OutpostStatusCard"; +import "./graphs/UserCountStatusCard"; +import "./graphs/GroupCountStatusCard"; import "./graphs/PolicyStatusCard"; import PFPage from "@patternfly/patternfly/components/Page/page.css"; @@ -54,43 +54,49 @@ export class AdminOverviewPage extends LitElement {
-
+
-
+
-
- - - -
-
+
+
+ + + +
+
+ + + +
+
+ + + +
-
+
-
+
-
- - -
-
+
@@ -98,12 +104,12 @@ export class AdminOverviewPage extends LitElement {
-
+
-
+
diff --git a/web/src/pages/admin-overview/cards/ProviderStatusCard.ts b/web/src/pages/admin-overview/cards/ProviderStatusCard.ts deleted file mode 100644 index 6685f5cf7..000000000 --- a/web/src/pages/admin-overview/cards/ProviderStatusCard.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { t } from "@lingui/macro"; -import { customElement } from "lit-element"; -import { ProvidersApi } from "authentik-api"; -import { DEFAULT_CONFIG } from "../../../api/Config"; -import { AdminStatusCard, AdminStatus } from "./AdminStatusCard"; - -@customElement("ak-admin-status-card-provider") -export class ProviderStatusCard extends AdminStatusCard { - - getPrimaryValue(): Promise { - return new ProvidersApi(DEFAULT_CONFIG).providersAllList({ - applicationIsnull: "true" - }).then((value) => { - return value.pagination.count; - }); - } - - getStatus(value: number): Promise { - if (value > 0) { - return Promise.resolve({ - icon: "fa fa-exclamation-triangle pf-m-warning", - message: t`Warning: At least one Provider has no application assigned.`, - }); - } else { - return Promise.resolve({ - 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 deleted file mode 100644 index 2455d6570..000000000 --- a/web/src/pages/admin-overview/cards/UserCountStatusCard.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { customElement } from "lit-element"; -import { CoreApi } from "authentik-api"; -import { DEFAULT_CONFIG } from "../../../api/Config"; -import { AdminStatusCard, AdminStatus } from "./AdminStatusCard"; - -@customElement("ak-admin-status-card-user-count") -export class UserCountStatusCard extends AdminStatusCard { - - getPrimaryValue(): Promise { - return new CoreApi(DEFAULT_CONFIG).coreUsersList({ - pageSize: 1 - }).then((value) => { - return value.pagination.count; - }); - } - - // eslint-disable-next-line @typescript-eslint/no-unused-vars - getStatus(value: number): Promise { - return Promise.resolve({ - icon: "fa fa-check-circle pf-m-success" - }); - } - -} diff --git a/web/src/pages/admin-overview/graphs/GroupCountStatusCard.ts b/web/src/pages/admin-overview/graphs/GroupCountStatusCard.ts new file mode 100644 index 000000000..77964e975 --- /dev/null +++ b/web/src/pages/admin-overview/graphs/GroupCountStatusCard.ts @@ -0,0 +1,68 @@ +import { customElement } from "lit-element"; +import { CoreApi } from "authentik-api"; +import { DEFAULT_CONFIG } from "../../../api/Config"; +import { AKChart } from "../../../elements/charts/Chart"; +import { t } from "@lingui/macro"; +import { ChartOptions, ChartData } from "chart.js"; + +interface GroupMetrics { + count: number; + superusers: number; +} + +@customElement("ak-admin-status-card-group-count") +export class GroupCountStatusCard extends AKChart { + + getChartType(): string { + return "doughnut"; + } + + getOptions(): ChartOptions { + return { + plugins: { + legend: { + display: false, + }, + }, + maintainAspectRatio: false, + }; + } + + async apiRequest(): Promise { + const api = new CoreApi(DEFAULT_CONFIG); + const count = (await api.coreGroupsList({ + pageSize: 1 + })).pagination.count; + const superusers = (await api.coreGroupsList({ + isSuperuser: "true" + })).pagination.count; + this.centerText = count.toString(); + return { + count: count - superusers, + superusers, + }; + } + + getChartData(data: GroupMetrics): ChartData { + return { + labels: [ + t`Total groups`, + t`Superuser-groups`, + ], + datasets: [ + { + backgroundColor: [ + "#2b9af3", + "#3e8635", + ], + spanGaps: true, + data: [ + data.count, + data.superusers, + ], + }, + ] + }; + } + +} diff --git a/web/src/pages/admin-overview/graphs/UserCountStatusCard.ts b/web/src/pages/admin-overview/graphs/UserCountStatusCard.ts new file mode 100644 index 000000000..c88bc95f6 --- /dev/null +++ b/web/src/pages/admin-overview/graphs/UserCountStatusCard.ts @@ -0,0 +1,68 @@ +import { customElement } from "lit-element"; +import { CoreApi } from "authentik-api"; +import { DEFAULT_CONFIG } from "../../../api/Config"; +import { AKChart } from "../../../elements/charts/Chart"; +import { t } from "@lingui/macro"; +import { ChartOptions, ChartData } from "chart.js"; + +interface UserMetrics { + count: number; + superusers: number; +} + +@customElement("ak-admin-status-card-user-count") +export class UserCountStatusCard extends AKChart { + + getChartType(): string { + return "doughnut"; + } + + getOptions(): ChartOptions { + return { + plugins: { + legend: { + display: false, + }, + }, + maintainAspectRatio: false, + }; + } + + async apiRequest(): Promise { + const api = new CoreApi(DEFAULT_CONFIG); + const count = (await api.coreUsersList({ + pageSize: 1 + })).pagination.count; + const superusers = (await api.coreUsersList({ + isSuperuser: "true" + })).pagination.count; + this.centerText = count.toString(); + return { + count: count - superusers, + superusers, + }; + } + + getChartData(data: UserMetrics): ChartData { + return { + labels: [ + t`Total users`, + t`Superusers`, + ], + datasets: [ + { + backgroundColor: [ + "#2b9af3", + "#3e8635", + ], + spanGaps: true, + data: [ + data.count, + data.superusers, + ], + }, + ] + }; + } + +}