web: add ObjectChangelog element to show changelog for a single object
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
parent
080282a0bc
commit
2de869d9c3
86
web/src/elements/events/ObjectChangelog.ts
Normal file
86
web/src/elements/events/ObjectChangelog.ts
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import { gettext } from "django";
|
||||
import { customElement, html, property, TemplateResult } from "lit-element";
|
||||
import { AKResponse } from "../../api/Client";
|
||||
import { Table, TableColumn } from "../table/Table";
|
||||
import { Event, EventsApi } from "authentik-api";
|
||||
|
||||
import "../forms/DeleteForm";
|
||||
import "../Tabs";
|
||||
import "../buttons/ModalButton";
|
||||
import "../buttons/SpinnerButton";
|
||||
import "../buttons/Dropdown";
|
||||
import "../../pages/events/EventInfo";
|
||||
import { PAGE_SIZE } from "../../constants";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
import { EventWithContext } from "../../api/Events";
|
||||
|
||||
@customElement("ak-object-changelog")
|
||||
export class ObjectChangelog extends Table<Event> {
|
||||
expandable = true;
|
||||
|
||||
@property()
|
||||
order = "-created";
|
||||
|
||||
@property()
|
||||
targetModelPk!: string | number;
|
||||
|
||||
@property()
|
||||
targetModelApp!: string;
|
||||
|
||||
@property()
|
||||
targetModelName!: string;
|
||||
|
||||
apiEndpoint(page: number): Promise<AKResponse<Event>> {
|
||||
return new EventsApi(DEFAULT_CONFIG).eventsEventsList({
|
||||
action: "model_",
|
||||
page: page,
|
||||
ordering: this.order,
|
||||
pageSize: PAGE_SIZE,
|
||||
contextModelApp: this.targetModelApp,
|
||||
contextModelName: this.targetModelName,
|
||||
contextModelPk: this.targetModelPk.toString(),
|
||||
});
|
||||
}
|
||||
|
||||
columns(): TableColumn[] {
|
||||
return [
|
||||
new TableColumn("Action", "action"),
|
||||
new TableColumn("User", "enabled"),
|
||||
new TableColumn("Creation Date", "created"),
|
||||
new TableColumn("Client IP", "client_ip"),
|
||||
];
|
||||
}
|
||||
|
||||
row(item: EventWithContext): TemplateResult[] {
|
||||
return [
|
||||
html`${item.action}`,
|
||||
html`<div>${item.user?.username}</div>
|
||||
${item.user.on_behalf_of ? html`<small>
|
||||
${gettext(`On behalf of ${item.user.on_behalf_of.username}`)}
|
||||
</small>` : html``}`,
|
||||
html`<span>${item.created?.toLocaleString()}</span>`,
|
||||
html`<span>${item.clientIp}</span>`,
|
||||
];
|
||||
}
|
||||
|
||||
renderExpanded(item: Event): TemplateResult {
|
||||
return html`
|
||||
<td role="cell" colspan="4">
|
||||
<div class="pf-c-table__expandable-row-content">
|
||||
<ak-event-info .event=${item as EventWithContext}></ak-event-info>
|
||||
</div>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>`;
|
||||
}
|
||||
|
||||
renderEmpty(): TemplateResult {
|
||||
return super.renderEmpty(html`<ak-empty-state header=${gettext("No Events found.")} icon="pf-icon-module">
|
||||
<div slot="body">
|
||||
${gettext("No matching events could be found.")}
|
||||
</div>
|
||||
</ak-empty-state>`);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@ export class DeleteForm extends ModalButton {
|
|||
objectLabel?: string;
|
||||
|
||||
@property({attribute: false})
|
||||
delete!: () => Promise<void>;
|
||||
delete!: () => Promise<unknown>;
|
||||
|
||||
confirm(): void {
|
||||
this.delete().then(() => {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import "../../elements/buttons/ModalButton";
|
|||
import "../../elements/buttons/SpinnerButton";
|
||||
import "../../elements/policies/BoundPoliciesList";
|
||||
import "../../elements/EmptyState";
|
||||
import "../../elements/events/ObjectChangelog";
|
||||
import { Application, CoreApi } from "authentik-api";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
import PFPage from "@patternfly/patternfly/components/Page/page.css";
|
||||
|
|
@ -111,6 +112,20 @@ export class ApplicationViewPage extends LitElement {
|
|||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;">
|
||||
<div class="pf-c-card__header">
|
||||
<div class="pf-c-card__header-main">
|
||||
<i class="pf-icon pf-icon-server"></i> ${gettext("Changelog")}
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.application.pk || ""}
|
||||
targetModelApp="authentik_core"
|
||||
targetModelName="application">
|
||||
</ak-object-changelog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div slot="page-2" data-tab-title="${gettext("Policy Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { gettext } from "django";
|
|||
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||
|
||||
import "../../elements/Tabs";
|
||||
import "../../elements/events/ObjectChangelog";
|
||||
import "../../elements/buttons/ModalButton";
|
||||
import "../../elements/buttons/SpinnerButton";
|
||||
import "../../elements/policies/BoundPoliciesList";
|
||||
|
|
@ -79,6 +80,15 @@ export class FlowViewPage extends LitElement {
|
|||
</ak-bound-policies-list>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="page-4" data-tab-title="${gettext("Changelog")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
|
||||
<div class="pf-c-card">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.flow.pk || ""}
|
||||
targetModelApp="authentik_flows"
|
||||
targetModelName="flow">
|
||||
</ak-object-changelog>
|
||||
</div>
|
||||
</div>
|
||||
</ak-tabs>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue