This repository has been archived on 2024-05-31. You can view files and clone it, but cannot push or open issues or pull requests.
authentik/web/src/pages/admin-overview/TopApplicationsTable.ts
Jens Langhammer 25300c1928 web: initial migration to lingui
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
2021-04-03 19:44:56 +02:00

58 lines
1.9 KiB
TypeScript

import { t } from "@lingui/macro";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { EventsApi, EventTopPerUser } from "authentik-api";
import PFTable from "@patternfly/patternfly/components/Table/table.css";
import AKGlobal from "../../authentik.css";
import "../../elements/Spinner";
import { DEFAULT_CONFIG } from "../../api/Config";
@customElement("ak-top-applications-table")
export class TopApplicationsTable extends LitElement {
@property({attribute: false})
topN?: EventTopPerUser[];
static get styles(): CSSResult[] {
return [PFTable, AKGlobal];
}
firstUpdated(): void {
new EventsApi(DEFAULT_CONFIG).eventsEventsTopPerUser({
action: "authorize_application",
}).then((events) => {
this.topN = events;
});
}
renderRow(event: EventTopPerUser): TemplateResult {
return html`<tr role="row">
<td role="cell">
${event.application.name}
</td>
<td role="cell">
${event.countedEvents}
</td>
<td role="cell">
<progress value="${event.countedEvents}" max="${this.topN ? this.topN[0].countedEvents : 0}"></progress>
</td>
</tr>`;
}
render(): TemplateResult {
return html`<table class="pf-c-table pf-m-compact" role="grid">
<thead>
<tr role="row">
<th role="columnheader" scope="col">${t`Application`}</th>
<th role="columnheader" scope="col">${t`Logins`}</th>
<th role="columnheader" scope="col"></th>
</tr>
</thead>
<tbody role="rowgroup">
${this.topN ? this.topN.map((e) => this.renderRow(e)) : html`<ak-spinner></ak-spinner>`}
</tbody>
</table>`;
}
}