events: rework metrics endpoint (#14934)

* rework event volume Signed-off-by: Jens Langhammer <jens@goauthentik.io> * migrate more Signed-off-by: Jens Langhammer <jens@goauthentik.io> * migrate more Signed-off-by: Jens Langhammer <jens@goauthentik.io> * migrate more Signed-off-by: Jens Langhammer <jens@goauthentik.io> * the rest of the owl Signed-off-by: Jens Langhammer <jens@goauthentik.io> * client-side data padding Signed-off-by: Jens Langhammer <jens@goauthentik.io> * I love deleting code Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix clamping Signed-off-by: Jens Langhammer <jens@goauthentik.io> * chunk it Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix tests Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add event-to-color map Signed-off-by: Jens Langhammer <jens@goauthentik.io> * sync colours Signed-off-by: Jens Langhammer <jens@goauthentik.io> * switch colours Signed-off-by: Jens Langhammer <jens@goauthentik.io> * heatmap? Signed-off-by: Jens Langhammer <jens@goauthentik.io> * Revert "heatmap?" This reverts commit c1f549a18b. * Revert "Revert "heatmap?"" This reverts commit 6d6175b96b. * Revert "Revert "Revert "heatmap?""" This reverts commit 3717903f12. * format Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io>
2025-06-10 02:36:09 +02:00
parent 856ac052e7
commit 734db4dee6
23 changed files with 461 additions and 743 deletions
--- a/web/src/admin/admin-overview/charts/AdminLoginAuthorizeChart.ts
+++ b/web/src/admin/admin-overview/charts/AdminLoginAuthorizeChart.ts
@ -1,68 +1,51 @@
+import { EventChart } from "#elements/charts/EventChart";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { AKChart, RGBAColor } from "@goauthentik/elements/charts/Chart";
-import { ChartData } from "chart.js";
+import { ChartData, ChartDataset } from "chart.js";

 import { msg } from "@lit/localize";
 import { customElement } from "lit/decorators.js";

-import { AdminApi, LoginMetrics } from "@goauthentik/api";
+import { EventActions, EventVolume, EventsApi } from "@goauthentik/api";

@customElement("ak-charts-admin-login-authorization")
-export class AdminLoginAuthorizeChart extends AKChart<LoginMetrics> {
-    async apiRequest(): Promise<LoginMetrics> {
-        return new AdminApi(DEFAULT_CONFIG).adminMetricsRetrieve();
+export class AdminLoginAuthorizeChart extends EventChart {
+    async apiRequest(): Promise<EventVolume[]> {
+        return new EventsApi(DEFAULT_CONFIG).eventsEventsVolumeList({
+            actions: [
+                EventActions.AuthorizeApplication,
+                EventActions.Login,
+                EventActions.LoginFailed,
+            ],
+        });
    }

-    getChartData(data: LoginMetrics): ChartData {
-        return {
-            datasets: [
-                {
-                    label: msg("Authorizations"),
-                    backgroundColor: new RGBAColor(43, 154, 243, 0.5).toString(),
-                    borderColor: new RGBAColor(43, 154, 243, 1).toString(),
-                    spanGaps: true,
-                    fill: "origin",
-                    cubicInterpolationMode: "monotone",
-                    tension: 0.4,
-                    data: data.authorizations.map((cord) => {
-                        return {
-                            x: cord.xCord,
-                            y: cord.yCord,
-                        };
-                    }),
-                },
-                {
-                    label: msg("Failed Logins"),
-                    backgroundColor: new RGBAColor(201, 24, 11, 0.5).toString(),
-                    borderColor: new RGBAColor(201, 24, 11, 1).toString(),
-                    spanGaps: true,
-                    fill: "origin",
-                    cubicInterpolationMode: "monotone",
-                    tension: 0.4,
-                    data: data.loginsFailed.map((cord) => {
-                        return {
-                            x: cord.xCord,
-                            y: cord.yCord,
-                        };
-                    }),
-                },
-                {
-                    label: msg("Successful Logins"),
-                    backgroundColor: new RGBAColor(62, 134, 53, 0.5).toString(),
-                    borderColor: new RGBAColor(62, 134, 53, 1).toString(),
-                    spanGaps: true,
-                    fill: "origin",
-                    cubicInterpolationMode: "monotone",
-                    tension: 0.4,
-                    data: data.logins.map((cord) => {
-                        return {
-                            x: cord.xCord,
-                            y: cord.yCord,
-                        };
-                    }),
-                },
-            ],
-        };
+    getChartData(data: EventVolume[]): ChartData {
+        const optsMap = new Map<EventActions, Partial<ChartDataset>>();
+        optsMap.set(EventActions.AuthorizeApplication, {
+            label: msg("Authorizations"),
+            spanGaps: true,
+            fill: "origin",
+            cubicInterpolationMode: "monotone",
+            tension: 0.4,
+        });
+        optsMap.set(EventActions.Login, {
+            label: msg("Successful Logins"),
+            spanGaps: true,
+            fill: "origin",
+            cubicInterpolationMode: "monotone",
+            tension: 0.4,
+        });
+        optsMap.set(EventActions.LoginFailed, {
+            label: msg("Failed Logins"),
+            spanGaps: true,
+            fill: "origin",
+            cubicInterpolationMode: "monotone",
+            tension: 0.4,
+        });
+        return this.eventVolume(data, {
+            optsMap: optsMap,
+            padToDays: 7,
+        });
    }
 }