events: replace list view with SPA Page

web/src/api/Events.ts

@@ -1,6 +1,37 @@
-import { DefaultClient } from "./Client";
+import { DefaultClient, PBResponse, QueryArguments } from "./Client";
+
+export interface EventUser {
+    pk: number;
+    email?: string;
+    username: string;
+    on_behalf_of?: EventUser;
+}
+
+export interface EventContext {
+    [key: string]: EventContext | string | number;
+}
 
 export class Event {
+    pk: string;
+    user: EventUser;
+    action: string;
+    app: string;
+    context: EventContext;
+    client_ip: string;
+    created: string;
+
+    constructor() {
+        throw Error();
+    }
+
+    static get(pk: string): Promise<Event> {
+        return DefaultClient.fetch<Event>(["events", "events", pk]);
+    }
+
+    static list(filter?: QueryArguments): Promise<PBResponse<Event>> {
+        return DefaultClient.fetch<PBResponse<Event>>(["events", "events"], filter);
+    }
+
     // events/events/top_per_user/?filter_action=authorize_application
     static topForUser(action: string): Promise<TopNEvent[]> {
         return DefaultClient.fetch<TopNEvent[]>(["events", "events", "top_per_user"], {

web/src/interfaces/AdminInterface.ts

@@ -9,7 +9,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
     new SidebarItem("Monitor").children(
         new SidebarItem("Overview", "/administration/overview"),
         new SidebarItem("System Tasks", "/administration/tasks/"),
-        new SidebarItem("Events", "/events/log/"),
+        new SidebarItem("Events", "/events"),
     ).when((): Promise<boolean> => {
         return User.me().then(u => u.is_superuser);
     }),

web/src/pages/events/EventInfo.ts

@@ -0,0 +1,116 @@
+import { gettext } from "django";
+import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { until } from "lit-html/directives/until";
+import { Event, EventContext } from "../../api/Events";
+import { Flow } from "../../api/Flows";
+import { COMMON_STYLES } from "../../common/styles";
+import "../../elements/Spinner";
+import { SpinnerSize } from "../../elements/Spinner";
+
+@customElement("ak-event-info")
+export class EventInfo extends LitElement {
+
+    @property({attribute: false})
+    event?: Event;
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES.concat(
+            css`
+                code {
+                    display: block;
+                    white-space: pre-wrap;
+                }
+            `
+        );
+    }
+
+    getModelInfo(context: EventContext): TemplateResult {
+        return html`<ul class="pf-c-list">
+            <li>${gettext("UID")}: ${context.pk as string}</li>
+            <li>${gettext("Name")}: ${context.name as string}</li>
+            <li>${gettext("App")}: ${context.app as string}</li>
+            <li>${gettext("Model Name")}: ${context.model_name as string}</li>
+        </ul>`;
+    }
+
+    defaultResponse(): TemplateResult {
+        return html`<div class="pf-l-flex">
+                    <div class="pf-l-flex__item">
+                        <h3>${gettext("Context")}</h3>
+                        <code>${JSON.stringify(this.event?.context)}</code>
+                    </div>
+                    <div class="pf-l-flex__item">
+                        <h3>${gettext("User")}</h3>
+                        <code>${JSON.stringify(this.event?.user)}</code>
+                    </div>
+                </div>`;
+    }
+
+    render(): TemplateResult {
+        if (!this.event) {
+            return html`<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>`;
+        }
+        switch (this.event?.action) {
+        case "model_created":
+        case "model_updated":
+        case "model_deleted":
+            return html`
+                <h3>${gettext("Affected model:")}</h3><hr>
+                ${this.getModelInfo(this.event.context.model as EventContext)}
+                `;
+        case "authorize_application":
+            return html`<div class="pf-l-flex">
+                    <div class="pf-l-flex__item">
+                        <h3>${gettext("Authorized application:")}</h3><hr>
+                        ${this.getModelInfo(this.event.context.authorized_application as EventContext)}
+                    </div>
+                    <div class="pf-l-flex__item">
+                        <h3>${gettext("Using flow")}</h3>
+                        <span>${until(Flow.list({
+        flow_uuid: this.event.context.flow as string,
+    }).then(resp => {
+        return html`<a href="#/flows/${resp.results[0].slug}">${resp.results[0].name}</a>`;
+    }), html`<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>`)}</span>
+                    </div>
+                </div>`;
+        case "login_failed":
+            return html`
+                <h3>${gettext(`Attempted to log in as ${this.event.context.username}`)}</h3>
+                `;
+        case "token_view":
+            return html`
+                <h3>${gettext("Token:")}</h3><hr>
+                ${this.getModelInfo(this.event.context.token as EventContext)}
+                `;
+        case "property_mapping_exception":
+        case "policy_exception":
+            return html`<div class="pf-l-flex">
+                    <div class="pf-l-flex__item">
+                        <h3>${gettext("Exception")}</h3>
+                        <code>${this.event.context.error}</code>
+                    </div>
+                    <div class="pf-l-flex__item">
+                        <h3>${gettext("Expression")}</h3>
+                        <code>${this.event.context.expression}</code>
+                    </div>
+                </div>`;
+        case "configuration_error":
+            return html`<h3>${this.event.context.message}</h3>`;
+        case "update_available":
+            return html`<h3>${gettext("New version available!")}</h3>
+                <a target="_blank" href="https://github.com/BeryJu/authentik/releases/tag/version%2F${this.event.context.new_version}">${this.event.context.new_version}</a>
+                `;
+            // Action types which typically don't record any extra context.
+            // If context is not empty, we fall to the default response.
+        case "login":
+        case "logout":
+            if (this.event.context === {}) {
+                return html`<span>${gettext("No additional data available.")}</span>`;
+            }
+            return this.defaultResponse();
+        default:
+            return this.defaultResponse();
+        }
+    }
+
+}

web/src/pages/events/EventListPage.ts

@@ -0,0 +1,71 @@
+import { gettext } from "django";
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { PBResponse } from "../../api/Client";
+import { Event } from "../../api/Events";
+import { TableColumn } from "../../elements/table/Table";
+import { TablePage } from "../../elements/table/TablePage";
+import { time } from "../../utils";
+import "./EventInfo";
+
+@customElement("ak-event-list")
+export class EventListPage extends TablePage<Event> {
+    expandable = true;
+
+    pageTitle(): string {
+        return "Event Log";
+    }
+    pageDescription(): string | undefined {
+        return;
+    }
+    pageIcon(): string {
+        return "pf-icon pf-icon-catalog";
+    }
+    searchEnabled(): boolean {
+        return true;
+    }
+
+    @property()
+    order = "-created";
+
+    apiEndpoint(page: number): Promise<PBResponse<Event>> {
+        return Event.list({
+            ordering: this.order,
+            page: page,
+            search: this.search || "",
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn("Action", "action"),
+            new TableColumn("User", "user"),
+            new TableColumn("Creation Date", "created"),
+            new TableColumn("Client IP", "client_ip"),
+        ];
+    }
+    row(item: Event): TemplateResult[] {
+        return [
+            html`<div>${item.action}</div>
+            <small>${item.app}</small>`,
+            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>${time(item.created).toLocaleString()}</span>`,
+            html`<span>${item.client_ip}</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}></ak-event-info>
+            </div>
+        </td>
+        <td></td>
+        <td></td>
+        <td></td>`;
+    }
+
+}

web/src/routes.ts

@@ -7,6 +7,7 @@ import "./pages/applications/ApplicationListPage";
 import "./pages/applications/ApplicationViewPage";
 import "./pages/sources/SourceViewPage";
 import "./pages/flows/FlowViewPage";
+import "./pages/events/EventListPage";
 
 export const ROUTES: Route[] = [
     // Prevent infinite Shell loops
@@ -24,4 +25,5 @@ export const ROUTES: Route[] = [
     new Route(new RegExp(`^/flows/(?<slug>${SLUG_REGEX})$`)).then((args) => {
         return html`<ak-flow-view .args=${args}></ak-flow-view>`;
     }),
+    new Route(new RegExp("^/events$"), html`<ak-event-list></ak-event-list>`),
 ];