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

events: rework metrics (#4407)

Browse Source 
* rework metrics

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

* change graphs to be over last week

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

* fix  Apps with most usage card

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

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-01-11 12:21:07 +01:00
committed by GitHub
parent a35b8f5862
commit 67a6fa6399
14 changed files with 143 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/admin/admin-overview/AdminOverviewPage.ts
View File

@ -180,7 +180,7 @@ export class AdminOverviewPage extends AKElement {
>
<ak-aggregate-card
icon="pf-icon pf-icon-server"
header=${t`Logins and authorizations over the last 24 hours`}
header=${t`Logins and authorizations over the last week (per 8 hours)`}
>
<ak-charts-admin-login-authorization></ak-charts-admin-login-authorization>
</ak-aggregate-card>

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

@ -1,6 +1,6 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { AKChart, RGBAColor } from "@goauthentik/elements/charts/Chart";
import { ChartData } from "chart.js";
import { ChartData, Tick } from "chart.js";
import { t } from "@lingui/macro";
@ -14,6 +14,13 @@ export class AdminLoginAuthorizeChart extends AKChart<LoginMetrics> {
return new AdminApi(DEFAULT_CONFIG).adminMetricsRetrieve();
}
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 t`${ago} day(s) ago`;
}
getChartData(data: LoginMetrics): ChartData {
return {
datasets: [
@ -25,7 +32,7 @@ export class AdminLoginAuthorizeChart extends AKChart<LoginMetrics> {
fill: "origin",
cubicInterpolationMode: "monotone",
tension: 0.4,
data: data.authorizationsPer1h.map((cord) => {
data: data.authorizations.map((cord) => {
return {
x: cord.xCord,
y: cord.yCord,
@ -40,7 +47,7 @@ export class AdminLoginAuthorizeChart extends AKChart<LoginMetrics> {
fill: "origin",
cubicInterpolationMode: "monotone",
tension: 0.4,
data: data.loginsFailedPer1h.map((cord) => {
data: data.loginsFailed.map((cord) => {
return {
x: cord.xCord,
y: cord.yCord,
@ -55,7 +62,7 @@ export class AdminLoginAuthorizeChart extends AKChart<LoginMetrics> {
fill: "origin",
cubicInterpolationMode: "monotone",
tension: 0.4,
data: data.loginsPer1h.map((cord) => {
data: data.logins.map((cord) => {
return {
x: cord.xCord,
y: cord.yCord,

9
web/src/admin/applications/ApplicationAuthorizeChart.ts
View File

@ -1,6 +1,6 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { AKChart } from "@goauthentik/elements/charts/Chart";
import { ChartData } from "chart.js";
import { ChartData, Tick } from "chart.js";
import { t } from "@lingui/macro";
@ -19,6 +19,13 @@ export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
});
}
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 t`${ago} days ago`;
}
getChartData(data: Coordinate[]): ChartData {
return {
datasets: [

4
web/src/admin/applications/ApplicationViewPage.ts
View File

@ -225,7 +225,9 @@ export class ApplicationViewPage extends AKElement {
<div
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-10-col-on-2xl"
>
<div class="pf-c-card__title">${t`Logins over the last 24 hours`}</div>
<div class="pf-c-card__title">
${t`Logins over the last week (per 8 hours)`}
</div>
<div class="pf-c-card__body">
${this.application &&
html` <ak-charts-application-authorize

15
web/src/admin/users/UserChart.ts
View File

@ -1,6 +1,6 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { AKChart } from "@goauthentik/elements/charts/Chart";
import { ChartData } from "chart.js";
import { ChartData, Tick } from "chart.js";
import { t } from "@lingui/macro";
@ -19,6 +19,13 @@ export class UserChart extends AKChart<UserMetrics> {
});
}
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 t`${ago} days ago`;
}
getChartData(data: UserMetrics): ChartData {
return {
datasets: [
@ -27,7 +34,7 @@ export class UserChart extends AKChart<UserMetrics> {
backgroundColor: "rgba(201, 25, 11, .5)",
spanGaps: true,
data:
data.loginsFailedPer1h?.map((cord) => {
data.loginsFailed?.map((cord) => {
return {
x: cord.xCord || 0,
y: cord.yCord || 0,
@ -39,7 +46,7 @@ export class UserChart extends AKChart<UserMetrics> {
backgroundColor: "rgba(189, 229, 184, .5)",
spanGaps: true,
data:
data.loginsPer1h?.map((cord) => {
data.logins?.map((cord) => {
return {
x: cord.xCord || 0,
y: cord.yCord || 0,
@ -51,7 +58,7 @@ export class UserChart extends AKChart<UserMetrics> {
backgroundColor: "rgba(43, 154, 243, .5)",
spanGaps: true,
data:
data.authorizationsPer1h?.map((cord) => {
data.authorizations?.map((cord) => {
return {
x: cord.xCord || 0,
y: cord.yCord || 0,

4
web/src/admin/users/UserViewPage.ts
View File

@ -276,7 +276,9 @@ export class UserViewPage extends AKElement {
<div
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-9-col-on-xl pf-m-9-col-on-2xl"
>
<div class="pf-c-card__title">${t`Actions over the last 24 hours`}</div>
<div class="pf-c-card__title">
${t`Actions over the last week (per 8 hours)`}
</div>
<div class="pf-c-card__body">
<ak-charts-user userId=${this.user.pk || 0}> </ak-charts-user>
</div>

3
web/src/elements/cards/AggregateCard.ts
View File

@ -40,6 +40,9 @@ export class AggregateCard extends AKElement {
.subtext {
font-size: var(--pf-global--FontSize--sm);
}
.pf-c-card__body {
overflow-x: scroll;
}
`,
]);
}

2
web/src/elements/charts/Chart.ts
View File

@ -168,7 +168,7 @@ export abstract class AKChart<T> extends AKElement {
const valueStamp = ticks[index];
const delta = Date.now() - valueStamp.value;
const ago = Math.round(delta / 1000 / 3600);
return t`${ago} hours ago`;
return t`${ago} hour(s) ago`;
}
getOptions(): ChartOptions {