habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: show users and groups as chart

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-05-06 13:44:53 +02:00
parent 49bf82a0a4
commit 9538ad5710
5 changed files with 161 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/src/pages/admin-overview/AdminOverviewPage.ts
View File

@ -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 {
<section class="pf-c-page__main-section">
<div class="pf-l-grid pf-m-gutter">
<!-- row 1 -->
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-3-col-on-xl graph-container">
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-xl pf-m-2-col-on-xl2 graph-container">
<ak-aggregate-card icon="pf-icon pf-icon-infrastructure" header=${t`Policies`} headerLink="#/policy/policies">
<ak-admin-status-card-policy></ak-admin-status-card-policy>
</ak-aggregate-card>
</div>
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-3-col-on-xl graph-container">
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-xl pf-m-2-col-on-xl2 graph-container">
<ak-aggregate-card icon="pf-icon pf-icon-server" header=${t`Flows`} headerLink="#/flow/flows">
<ak-admin-status-card-flow></ak-admin-status-card-flow>
</ak-aggregate-card>
</div>
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-3-col-on-xl graph-container">
<ak-aggregate-card icon="fa fa-sync-alt" header=${t`LDAP Sync status`} headerLink="#/core/sources">
<ak-admin-status-card-ldap-sync></ak-admin-status-card-ldap-sync>
</ak-aggregate-card>
</div>
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-3-col-on-xl graph-container">
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-xl pf-m-2-col-on-xl2 graph-container">
<ak-aggregate-card icon="fa fa-sync-alt" header=${t`Outpost status`} headerLink="#/outpost/outposts">
<ak-admin-status-card-outpost></ak-admin-status-card-outpost>
</ak-aggregate-card>
</div>
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-xl pf-m-2-col-on-xl2 graph-container">
<ak-aggregate-card icon="fa fa-sync-alt" header=${t`Users`} headerLink="#/identity/users">
<ak-admin-status-card-user-count></ak-admin-status-card-user-count>
</ak-aggregate-card>
</div>
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-xl pf-m-2-col-on-xl2 graph-container">
<ak-aggregate-card icon="fa fa-sync-alt" header=${t`Groups`} headerLink="#/identity/groups">
<ak-admin-status-card-group-count></ak-admin-status-card-group-count>
</ak-aggregate-card>
</div>
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-xl pf-m-2-col-on-xl2 graph-container">
<ak-aggregate-card icon="fa fa-sync-alt" header=${t`LDAP Sync status`} headerLink="#/core/sources">
<ak-admin-status-card-ldap-sync></ak-admin-status-card-ldap-sync>
</ak-aggregate-card>
</div>
<div class="pf-l-grid__item pf-m-12-col row-divider">
<hr>
</div>
<!-- row 2 -->
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-3-col-on-xl card-container">
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container">
<ak-admin-status-version icon="pf-icon pf-icon-bundle" header=${t`Version`} headerLink="https://github.com/goauthentik/authentik/releases">
</ak-admin-status-version>
</div>
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-3-col-on-xl card-container">
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container">
<ak-admin-status-card-backup icon="fa fa-database" header=${t`Backup status`} headerLink="#/administration/system-tasks">
</ak-admin-status-card-backup>
</div>
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-3-col-on-xl card-container">
<ak-admin-status-card-user-count icon="pf-icon pf-icon-user" header=${t`Users`} headerLink="#/identity/users">
</ak-admin-status-card-user-count>
</div>
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-3-col-on-xl card-container">
<div class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container">
<ak-admin-status-card-workers icon="pf-icon pf-icon-server" header=${t`Workers`}>
</ak-admin-status-card-workers>
</div>
@ -98,12 +104,12 @@ export class AdminOverviewPage extends LitElement {
<hr>
</div>
<!-- row 3 -->
<div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-md pf-m-6-col-on-xl big-graph-container">
<div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-9-col-on-xl2 big-graph-container">
<ak-aggregate-card icon="pf-icon pf-icon-server" header=${t`Logins over the last 24 hours`}>
<ak-charts-admin-login></ak-charts-admin-login>
</ak-aggregate-card>
</div>
<div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-md pf-m-6-col-on-xl big-graph-container">
<div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-3-col-on-xl2 big-graph-container">
<ak-aggregate-card icon="pf-icon pf-icon-server" header=${t`Apps with most usage`}>
<ak-top-applications-table></ak-top-applications-table>
</ak-aggregate-card>

31
web/src/pages/admin-overview/cards/ProviderStatusCard.ts
View File

@ -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<number> {
getPrimaryValue(): Promise<number> {
return new ProvidersApi(DEFAULT_CONFIG).providersAllList({
applicationIsnull: "true"
}).then((value) => {
return value.pagination.count;
});
}
getStatus(value: number): Promise<AdminStatus> {
if (value > 0) {
return Promise.resolve<AdminStatus>({
icon: "fa fa-exclamation-triangle pf-m-warning",
message: t`Warning: At least one Provider has no application assigned.`,
});
} else {
return Promise.resolve<AdminStatus>({
icon: "fa fa-check-circle pf-m-success"
});
}
}
}

24
web/src/pages/admin-overview/cards/UserCountStatusCard.ts
View File

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

68
web/src/pages/admin-overview/graphs/GroupCountStatusCard.ts Normal file
View File

@ -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<GroupMetrics> {
getChartType(): string {
return "doughnut";
}
getOptions(): ChartOptions {
return {
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
};
}
async apiRequest(): Promise<GroupMetrics> {
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,
],
},
]
};
}
}

68
web/src/pages/admin-overview/graphs/UserCountStatusCard.ts Normal file
View File

@ -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<UserMetrics> {
getChartType(): string {
return "doughnut";
}
getOptions(): ChartOptions {
return {
plugins: {
legend: {
display: false,
},
},
maintainAspectRatio: false,
};
}
async apiRequest(): Promise<UserMetrics> {
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,
],
},
]
};
}
}