migrate more

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

web/src/admin/applications/ApplicationAuthorizeChart.ts

@@ -1,47 +1,38 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { AKChart } from "@goauthentik/elements/charts/Chart";
-import { ChartData, Tick } from "chart.js";
+import { ChartData } from "chart.js";
 
-import { msg, str } from "@lit/localize";
+import { msg } from "@lit/localize";
 import { customElement, property } from "lit/decorators.js";
 
-import { Coordinate, CoreApi } from "@goauthentik/api";
+import { EventActions, EventVolume, EventsApi } from "@goauthentik/api";
 
 @customElement("ak-charts-application-authorize")
-export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
-    @property()
-    applicationSlug!: string;
+export class ApplicationAuthorizeChart extends AKChart<EventVolume[]> {
+    @property({ attribute: "application-id" })
+    applicationId!: string;
 
-    async apiRequest(): Promise<Coordinate[]> {
-        return new CoreApi(DEFAULT_CONFIG).coreApplicationsMetricsList({
-            slug: this.applicationSlug,
+    async apiRequest(): Promise<EventVolume[]> {
+        return new EventsApi(DEFAULT_CONFIG).eventsEventsVolumeList({
+            action: EventActions.AuthorizeApplication,
+            contextAuthorizedApp: this.applicationId.replaceAll("-", ""),
         });
     }
 
-    timeTickCallback(tickValue: string | number, index: number, ticks: Tick[]): string {
-        const valueStamp = ticks[index];
-        const delta = Date.now() - valueStamp.value;
-        const ago = Math.round(delta / 1000 / 3600 / 24);
-        return msg(str`${ago} days ago`);
-    }
-
-    getChartData(data: Coordinate[]): ChartData {
-        return {
-            datasets: [
-                {
-                    label: msg("Authorizations"),
-                    backgroundColor: "rgba(189, 229, 184, .5)",
-                    spanGaps: true,
-                    data:
-                        data.map((cord) => {
-                            return {
-                                x: cord.xCord || 0,
-                                y: cord.yCord || 0,
-                            };
-                        }) || [],
-                },
-            ],
-        };
+    getChartData(data: EventVolume[]): ChartData {
+        return this.eventVolume(
+            data,
+            new Map([
+                [
+                    EventActions.AuthorizeApplication,
+                    {
+                        label: msg("Authorizations"),
+                        backgroundColor: "rgba(189, 229, 184, .5)",
+                        spanGaps: true,
+                    },
+                ],
+            ]),
+        );
     }
 }
 

web/src/admin/applications/ApplicationViewPage.ts

@@ -283,7 +283,7 @@ export class ApplicationViewPage extends AKElement {
                         <div class="pf-c-card__body">
                             ${this.application &&
                             html` <ak-charts-application-authorize
-                                applicationSlug=${this.application.slug}
+                                application-id=${this.application.pk}
                             >
                             </ak-charts-application-authorize>`}
                         </div>