events: add graph for event volume (#7639)

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

web/src/admin/events/EventListPage.ts

@@ -1,3 +1,4 @@
+import "@goauthentik/admin/events/EventVolumeChart";
 import { EventGeo } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
@@ -10,7 +11,7 @@ import { TablePage } from "@goauthentik/elements/table/TablePage";
 import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { msg, str } from "@lit/localize";
-import { TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import { Event, EventsApi } from "@goauthentik/api";
@@ -35,6 +36,14 @@ export class EventListPage extends TablePage<Event> {
     @property()
     order = "-created";
 
+    static get styles(): CSSResult[] {
+        return super.styles.concat(css`
+            .pf-m-no-padding-bottom {
+                padding-bottom: 0;
+            }
+        `);
+    }
+
     async apiEndpoint(page: number): Promise<PaginatedResponse<Event>> {
         return new EventsApi(DEFAULT_CONFIG).eventsEventsList({
             ordering: this.order,
@@ -55,6 +64,19 @@ export class EventListPage extends TablePage<Event> {
         ];
     }
 
+    renderSectionBefore(): TemplateResult {
+        return html`
+            <div class="pf-c-page__main-section pf-m-no-padding-bottom">
+                <ak-events-volume-chart
+                    .query=${{
+                        page: this.page,
+                        search: this.search,
+                    }}
+                ></ak-events-volume-chart>
+            </div>
+        `;
+    }
+
     row(item: EventWithContext): TemplateResult[] {
         return [
             html`<div>${actionToLabel(item.action)}</div>

web/src/admin/events/EventVolumeChart.ts

@@ -0,0 +1,63 @@
+import { DEFAULT_CONFIG } from "@goauthentik/app/common/api/config";
+import { AKChart } from "@goauthentik/app/elements/charts/Chart";
+import { ChartData } from "chart.js";
+
+import { msg } from "@lit/localize";
+import { CSSResult, TemplateResult, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+
+import { Coordinate, EventsApi, EventsEventsListRequest } from "@goauthentik/api";
+
+@customElement("ak-events-volume-chart")
+export class EventVolumeChart extends AKChart<Coordinate[]> {
+    _query?: EventsEventsListRequest;
+
+    @property({ attribute: false })
+    set query(value: EventsEventsListRequest | undefined) {
+        this._query = value;
+        this.refreshHandler();
+    }
+
+    static get styles(): CSSResult[] {
+        return super.styles.concat(
+            PFCard,
+            css`
+                .pf-c-card__body {
+                    height: 12rem;
+                }
+            `,
+        );
+    }
+
+    apiRequest(): Promise<Coordinate[]> {
+        return new EventsApi(DEFAULT_CONFIG).eventsEventsVolumeList(this._query);
+    }
+
+    getChartData(data: Coordinate[]): ChartData {
+        return {
+            datasets: [
+                {
+                    label: msg("Events"),
+                    backgroundColor: "rgba(189, 229, 184, .5)",
+                    spanGaps: true,
+                    data:
+                        data.map((cord) => {
+                            return {
+                                x: cord.xCord || 0,
+                                y: cord.yCord || 0,
+                            };
+                        }) || [],
+                },
+            ],
+        };
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-card">
+            <div class="pf-c-card__title">${msg("Event volume")}</div>
+            <div class="pf-c-card__body">${super.render()}</div>
+        </div>`;
+    }
+}