web: show user metrics

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-20 17:30:10 +01:00
parent 4c49209f71
commit d0529e76ba
3 changed files with 56 additions and 2 deletions

View File

@ -8,7 +8,7 @@ import { DEFAULT_CONFIG } from "../../api/Config";
export class AdminLoginsChart extends AKChart<LoginMetrics> {
apiRequest(): Promise<LoginMetrics> {
return new AdminApi(DEFAULT_CONFIG).adminMetricsList();
return new AdminApi(DEFAULT_CONFIG).adminMetricsList({});
}
getDatasets(data: LoginMetrics): Chart.ChartDataSets[] {

View File

@ -0,0 +1,52 @@
import { customElement } from "lit-element";
import Chart from "chart.js";
import { CoreApi, UserMetrics } from "authentik-api";
import { AKChart } from "./Chart";
import { DEFAULT_CONFIG } from "../../api/Config";
@customElement("ak-charts-user")
export class UserChart extends AKChart<UserMetrics> {
apiRequest(): Promise<UserMetrics> {
return new CoreApi(DEFAULT_CONFIG).coreUsersMetrics({});
}
getDatasets(data: UserMetrics): Chart.ChartDataSets[] {
return [
{
label: "Failed Logins",
backgroundColor: "rgba(201, 25, 11, .5)",
spanGaps: true,
data: data.loginsFailedPer1h?.map((cord) => {
return {
x: cord.xCord,
y: cord.yCord,
};
}),
},
{
label: "Successful Logins",
backgroundColor: "rgba(189, 229, 184, .5)",
spanGaps: true,
data: data.loginsPer1h?.map((cord) => {
return {
x: cord.xCord,
y: cord.yCord,
};
}),
},
{
label: "Application authorizations",
backgroundColor: "rgba(43, 154, 243, .5)",
spanGaps: true,
data: data.loginsPer1h?.map((cord) => {
return {
x: cord.xCord,
y: cord.yCord,
};
}),
},
];
}
}

View File

@ -20,6 +20,7 @@ import "../../elements/events/ObjectChangelog";
import "../../elements/user/UserConsentList";
import "../../elements/oauth/UserCodeList";
import "../../elements/oauth/UserRefreshList";
import "../../elements/charts/UserChart";
import { Page } from "../../elements/Page";
import { CoreApi, User } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config";
@ -68,8 +69,9 @@ export class UserViewPage extends Page {
<section slot="page-1" data-tab-title="${gettext("Overview")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-l-gallery pf-m-gutter">
<div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;">
<div class="pf-c-card__title">${gettext("Logins over the last 24 hours")}</div>
<div class="pf-c-card__body">
<ak-charts-user>
</ak-charts-user>
</div>
</div>
</div>