87 lines
3.5 KiB
TypeScript
87 lines
3.5 KiB
TypeScript
import { t } from "@lingui/macro";
|
|
|
|
import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
|
|
import { customElement } from "lit/decorators.js";
|
|
|
|
import AKGlobal from "../../authentik.css";
|
|
import PFContent from "@patternfly/patternfly/components/Content/content.css";
|
|
import PFList from "@patternfly/patternfly/components/List/list.css";
|
|
import PFPage from "@patternfly/patternfly/components/Page/page.css";
|
|
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
|
|
|
|
import { EventActions } from "@goauthentik/api";
|
|
|
|
import "../../elements/PageHeader";
|
|
import "../../elements/cards/AggregatePromiseCard";
|
|
import "../../elements/charts/AdminModelPerDay";
|
|
|
|
@customElement("ak-admin-dashboard-users")
|
|
export class DashboardUserPage extends LitElement {
|
|
static get styles(): CSSResult[] {
|
|
return [
|
|
PFGrid,
|
|
PFPage,
|
|
PFContent,
|
|
PFList,
|
|
AKGlobal,
|
|
css`
|
|
.row-divider {
|
|
margin-top: -4px;
|
|
margin-bottom: -4px;
|
|
}
|
|
.graph-container {
|
|
height: 20em;
|
|
}
|
|
.big-graph-container {
|
|
height: 35em;
|
|
}
|
|
.card-container {
|
|
max-height: 10em;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
|
|
render(): TemplateResult {
|
|
return html`<ak-page-header icon="pf-icon pf-icon-user" header=${t`User statistics`}>
|
|
</ak-page-header>
|
|
<section class="pf-c-page__main-section">
|
|
<div class="pf-l-grid pf-m-gutter">
|
|
<div
|
|
class="pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl big-graph-container"
|
|
>
|
|
<ak-aggregate-card header=${t`Users created per day in the last month`}>
|
|
<ak-charts-admin-model-per-day
|
|
.query=${{
|
|
context__model__app: "authentik_core",
|
|
context__model__model_name: "user",
|
|
}}
|
|
>
|
|
</ak-charts-admin-model-per-day>
|
|
</ak-aggregate-card>
|
|
</div>
|
|
<div class="pf-l-grid__item pf-m-12-col row-divider">
|
|
<hr />
|
|
</div>
|
|
<!-- row 2 -->
|
|
<div
|
|
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container"
|
|
>
|
|
<ak-aggregate-card header=${t`Logins per day in the last month`}>
|
|
<ak-charts-admin-model-per-day action=${EventActions.Login}>
|
|
</ak-charts-admin-model-per-day>
|
|
</ak-aggregate-card>
|
|
</div>
|
|
<div
|
|
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container"
|
|
>
|
|
<ak-aggregate-card header=${t`Failed Logins per day in the last month`}>
|
|
<ak-charts-admin-model-per-day action=${EventActions.LoginFailed}>
|
|
</ak-charts-admin-model-per-day>
|
|
</ak-aggregate-card>
|
|
</div>
|
|
</div>
|
|
</section> `;
|
|
}
|
|
}
|