habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rework event volume

Browse Source 
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer
2025-06-06 02:54:02 +02:00
parent ef5d3580e8
commit 533b51cb8c
4 changed files with 73 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/admin/admin-overview/charts/AdminLoginAuthorizeChart.ts
View File

@ -1,5 +1,5 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { AKChart, RGBAColor } from "@goauthentik/elements/charts/Chart";
import { AKChart } from "@goauthentik/elements/charts/Chart";
import { ChartData } from "chart.js";
import { msg } from "@lit/localize";
@ -18,8 +18,8 @@ export class AdminLoginAuthorizeChart extends AKChart<LoginMetrics> {
datasets: [
{
label: msg("Authorizations"),
backgroundColor: new RGBAColor(43, 154, 243, 0.5).toString(),
borderColor: new RGBAColor(43, 154, 243, 1).toString(),
backgroundColor: "rgba(43, 154, 243, 0.5)",
borderColor: "rgba(43, 154, 243, 1)",
spanGaps: true,
fill: "origin",
cubicInterpolationMode: "monotone",
@ -33,8 +33,8 @@ export class AdminLoginAuthorizeChart extends AKChart<LoginMetrics> {
},
{
label: msg("Failed Logins"),
backgroundColor: new RGBAColor(201, 24, 11, 0.5).toString(),
borderColor: new RGBAColor(201, 24, 11, 1).toString(),
backgroundColor: "rgba(201, 24, 11, 0.5)",
borderColor: "rgba(201, 24, 11, 1)",
spanGaps: true,
fill: "origin",
cubicInterpolationMode: "monotone",
@ -48,8 +48,8 @@ export class AdminLoginAuthorizeChart extends AKChart<LoginMetrics> {
},
{
label: msg("Successful Logins"),
backgroundColor: new RGBAColor(62, 134, 53, 0.5).toString(),
borderColor: new RGBAColor(62, 134, 53, 1).toString(),
backgroundColor: "rgba(62, 134, 53, 0.5)",
borderColor: "rgba(62, 134, 53, 1)",
spanGaps: true,
fill: "origin",
cubicInterpolationMode: "monotone",

52
web/src/admin/events/EventVolumeChart.ts
View File

@ -1,17 +1,17 @@
import { actionToLabel } from "#common/labels";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { AKChart } from "@goauthentik/elements/charts/Chart";
import { AKChart, getColorFromString } from "@goauthentik/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";
import { EventActions, EventVolume, EventsApi, EventsEventsListRequest } from "@goauthentik/api";
@customElement("ak-events-volume-chart")
export class EventVolumeChart extends AKChart<Coordinate[]> {
export class EventVolumeChart extends AKChart<EventVolume[]> {
_query?: EventsEventsListRequest;
@property({ attribute: false })
@ -24,39 +24,43 @@ export class EventVolumeChart extends AKChart<Coordinate[]> {
return super.styles.concat(
PFCard,
css`
.pf-c-card__body {
height: 12rem;
.pf-c-card {
height: 20rem;
}
`,
);
}
apiRequest(): Promise<Coordinate[]> {
apiRequest(): Promise<EventVolume[]> {
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,
};
}) || [],
},
],
getChartData(data: EventVolume[]): ChartData {
const datasets: ChartData = {
datasets: [],
};
// Get a list of all actions
const actions = new Set(data.map((v) => v.action));
actions.forEach((action) => {
const actionData: { x: number; y: number }[] = [];
data.filter((v) => v.action === action).forEach((v) => {
actionData.push({
x: v.day.getTime(),
y: v.count,
});
});
datasets.datasets.push({
label: actionToLabel(action as EventActions),
backgroundColor: getColorFromString(action),
spanGaps: true,
data: actionData,
});
});
return datasets;
}
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>`;
}