From d0529e76ba74c90e6d9eb8223115fc7b1e5c7107 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 20 Mar 2021 17:30:10 +0100
Subject: [PATCH] web: show user metrics

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/charts/AdminLoginsChart.ts |  2 +-
 web/src/elements/charts/UserChart.ts        | 52 +++++++++++++++++++++
 web/src/pages/users/UserViewPage.ts         |  4 +-
 3 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 web/src/elements/charts/UserChart.ts

diff --git a/web/src/elements/charts/AdminLoginsChart.ts b/web/src/elements/charts/AdminLoginsChart.ts
index 9411597d3..bf0449240 100644
--- a/web/src/elements/charts/AdminLoginsChart.ts
+++ b/web/src/elements/charts/AdminLoginsChart.ts
@@ -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[] {
diff --git a/web/src/elements/charts/UserChart.ts b/web/src/elements/charts/UserChart.ts
new file mode 100644
index 000000000..86d4fa113
--- /dev/null
+++ b/web/src/elements/charts/UserChart.ts
@@ -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,
+                    };
+                }),
+            },
+        ];
+    }
+
+}
diff --git a/web/src/pages/users/UserViewPage.ts b/web/src/pages/users/UserViewPage.ts
index dd1d7b513..322b61f63 100644
--- a/web/src/pages/users/UserViewPage.ts
+++ b/web/src/pages/users/UserViewPage.ts
@@ -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>