web/admin: rework event info page to show all event infos

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

web/src/admin/events/EventInfo.ts

@@ -13,6 +13,7 @@ import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
 import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
@@ -30,6 +31,7 @@ export class EventInfo extends AKElement {
             PFBase,
             PFButton,
             PFFlex,
+            PFCard,
             PFList,
             PFDescriptionList,
             css`
@@ -56,7 +58,8 @@ export class EventInfo extends AKElement {
         if (context === null) {
             return html`<span>-</span>`;
         }
-        return html`<dl class="pf-c-description-list pf-m-horizontal">
+        return html`<div class="pf-c-card__body">
+            <dl class="pf-c-description-list pf-m-horizontal">
                 <div class="pf-c-description-list__group">
                     <dt class="pf-c-description-list__term">
                         <span class="pf-c-description-list__text">${t`UID`}</span>
@@ -89,7 +92,8 @@ export class EventInfo extends AKElement {
                         <div class="pf-c-description-list__text">${context.model_name}</div>
                     </dd>
                 </div>
-        </dl>`;
+            </dl>
+        </div>`;
     }
 
     getEmailInfo(context: EventContext): TemplateResult {
@@ -139,13 +143,17 @@ export class EventInfo extends AKElement {
     defaultResponse(): TemplateResult {
         return html`<div class="pf-l-flex">
             <div class="pf-l-flex__item">
-                <h3>${t`Context`}</h3>
+                <div class="pf-c-card__title">${t`Context`}</div>
+                <div class="pf-c-card__body">
                     <code>${JSON.stringify(this.event?.context, null, 4)}</code>
                 </div>
+            </div>
             <div class="pf-l-flex__item">
-                <h3>${t`User`}</h3>
+                <div class="pf-c-card__title">${t`User`}</div>
+                <div class="pf-c-card__body">
                     <code>${JSON.stringify(this.event?.user, null, 4)}</code>
                 </div>
+            </div>
         </div>`;
     }
 
@@ -204,19 +212,24 @@ new?labels=bug,from_authentik&title=${encodeURIComponent(title)}
             case EventActions.ModelUpdated:
             case EventActions.ModelDeleted:
                 return html`
-                    <h3>${t`Affected model:`}</h3>
+                    <div class="pf-c-card__title">${t`Affected model:`}</div>
+                    <div class="pf-c-card__body">
                         ${this.getModelInfo(this.event.context?.model as EventModel)}
+                    </div>
                 `;
             case EventActions.AuthorizeApplication:
                 return html`<div class="pf-l-flex">
                         <div class="pf-l-flex__item">
-                            <h3>${t`Authorized application:`}</h3>
+                            <div class="pf-c-card__title">${t`Authorized application:`}</div>
+                            <div class="pf-c-card__body">
                                 ${this.getModelInfo(
                                     this.event.context.authorized_application as EventModel,
                                 )}
                             </div>
+                        </div>
                         <div class="pf-l-flex__item">
-                            <h3>${t`Using flow`}</h3>
+                            <div class="pf-c-card__title">${t`Using flow`}</div>
+                            <div class="pf-c-card__body">
                                 <span
                                     >${until(
                                         new FlowsApi(DEFAULT_CONFIG)
@@ -234,15 +247,16 @@ new?labels=bug,from_authentik&title=${encodeURIComponent(title)}
                                 </span>
                             </div>
                         </div>
+                    </div>
                     <ak-expand>${this.defaultResponse()}</ak-expand>`;
             case EventActions.EmailSent:
-                return html`<h3>${t`Email info:`}</h3>
+                return html`<div class="pf-c-card__title">${t`Email info:`}</div>
-                    ${this.getEmailInfo(this.event.context)}
+                    <div class="pf-c-card__body">${this.getEmailInfo(this.event.context)}</div>
                     <ak-expand>
                         <iframe srcdoc=${this.event.context.body}></iframe>
                     </ak-expand>`;
             case EventActions.SecretView:
-                return html` <h3>${t`Secret:`}</h3>
+                return html` <div class="pf-c-card__title">${t`Secret:`}</div>
                     ${this.getModelInfo(this.event.context.secret as EventModel)}`;
             case EventActions.SystemException:
                 return html` <a
@@ -254,31 +268,38 @@ new?labels=bug,from_authentik&title=${encodeURIComponent(title)}
                     </a>
                     <div class="pf-l-flex">
                         <div class="pf-l-flex__item">
-                            <h3>${t`Exception`}</h3>
+                            <div class="pf-c-card__title">${t`Exception`}</div>
+                            <div class="pf-c-card__body">
                                 <pre>${this.event.context.message}</pre>
                             </div>
                         </div>
+                    </div>
                     <ak-expand>${this.defaultResponse()}</ak-expand>`;
             case EventActions.PropertyMappingException:
                 return html`<div class="pf-l-flex">
                         <div class="pf-l-flex__item">
-                            <h3>${t`Exception`}</h3>
+                            <div class="pf-c-card__title">${t`Exception`}</div>
+                            <div class="pf-c-card__body">
                                 <pre>${this.event.context.message || this.event.context.error}</pre>
                             </div>
+                        </div>
                         <div class="pf-l-flex__item">
-                            <h3>${t`Expression`}</h3>
+                            <div class="pf-c-card__title">${t`Expression`}</div>
+                            <div class="pf-c-card__body">
                                 <code>${this.event.context.expression}</code>
                             </div>
                         </div>
+                    </div>
                     <ak-expand>${this.defaultResponse()}</ak-expand>`;
             case EventActions.PolicyException:
                 return html`<div class="pf-l-flex">
                         <div class="pf-l-flex__item">
-                            <h3>${t`Binding`}</h3>
+                            <div class="pf-c-card__title">${t`Binding`}</div>
                             ${this.getModelInfo(this.event.context.binding as EventModel)}
                         </div>
                         <div class="pf-l-flex__item">
-                            <h3>${t`Request`}</h3>
+                            <div class="pf-c-card__title">${t`Request`}</div>
+                            <div class="pf-c-card__body">
                                 <ul class="pf-c-list">
                                     <li>
                                         ${t`Object`}:
@@ -302,20 +323,26 @@ new?labels=bug,from_authentik&title=${encodeURIComponent(title)}
                                     </li>
                                 </ul>
                             </div>
+                        </div>
                         <div class="pf-l-flex__item">
-                            <h3>${t`Exception`}</h3>
+                            <div class="pf-c-card__title">${t`Exception`}</div>
-                            <code>${this.event.context.message || this.event.context.error}</code>
+                            <div class="pf-c-card__body">
+                                <code
+                                    >${this.event.context.message || this.event.context.error}</code
+                                >
+                            </div>
                         </div>
                     </div>
                     <ak-expand>${this.defaultResponse()}</ak-expand>`;
             case EventActions.PolicyExecution:
                 return html`<div class="pf-l-flex">
                         <div class="pf-l-flex__item">
-                            <h3>${t`Binding`}</h3>
+                            <div class="pf-c-card__title">${t`Binding`}</div>
                             ${this.getModelInfo(this.event.context.binding as EventModel)}
                         </div>
                         <div class="pf-l-flex__item">
-                            <h3>${t`Request`}</h3>
+                            <div class="pf-c-card__title">${t`Request`}</div>
+                            <div class="pf-c-card__body">
                                 <ul class="pf-c-list">
                                     <li>
                                         ${t`Object`}:
@@ -339,8 +366,10 @@ new?labels=bug,from_authentik&title=${encodeURIComponent(title)}
                                     </li>
                                 </ul>
                             </div>
+                        </div>
                         <div class="pf-l-flex__item">
-                            <h3>${t`Result`}</h3>
+                            <div class="pf-c-card__title">${t`Result`}</div>
+                            <div class="pf-c-card__body">
                                 <ul class="pf-c-list">
                                     <li>
                                         ${t`Passing`}:
@@ -360,12 +389,13 @@ new?labels=bug,from_authentik&title=${encodeURIComponent(title)}
                                 </ul>
                             </div>
                         </div>
+                    </div>
                     <ak-expand>${this.defaultResponse()}</ak-expand>`;
             case EventActions.ConfigurationError:
-                return html`<h3>${this.event.context.message}</h3>
+                return html`<div class="pf-c-card__title">${this.event.context.message}</div>
                     <ak-expand>${this.defaultResponse()}</ak-expand>`;
             case EventActions.UpdateAvailable:
-                return html`<h3>${t`New version available!`}</h3>
+                return html`<div class="pf-c-card__title">${t`New version available!`}</div>
                     <a
                         target="_blank"
                         href="https://github.com/goauthentik/authentik/releases/tag/version%2F${this
@@ -379,14 +409,16 @@ new?labels=bug,from_authentik&title=${encodeURIComponent(title)}
                 if ("using_source" in this.event.context) {
                     return html`<div class="pf-l-flex">
                         <div class="pf-l-flex__item">
-                            <h3>${t`Using source`}</h3>
+                            <div class="pf-c-card__title">${t`Using source`}</div>
                             ${this.getModelInfo(this.event.context.using_source as EventModel)}
                         </div>
                     </div>`;
                 }
                 return this.defaultResponse();
             case EventActions.LoginFailed:
-                return html` <h3>${t`Attempted to log in as ${this.event.context.username}`}</h3>
+                return html` <div class="pf-c-card__title">
+                        ${t`Attempted to log in as ${this.event.context.username}`}
+                    </div>
                     <ak-expand>${this.defaultResponse()}</ak-expand>`;
             case EventActions.Logout:
                 if (Object.keys(this.event.context).length === 0) {
@@ -396,9 +428,11 @@ new?labels=bug,from_authentik&title=${encodeURIComponent(title)}
             case EventActions.SystemTaskException:
                 return html`<div class="pf-l-flex">
                     <div class="pf-l-flex__item">
-                        <h3>${t`Exception`}</h3>
+                        <div class="pf-c-card__title">${t`Exception`}</div>
+                        <div class="pf-c-card__body">
                             <pre>${this.event.context.message}</pre>
                         </div>
+                    </div>
                 </div>`;
             default:
                 return this.defaultResponse();

web/src/admin/events/EventInfoPage.ts

@@ -1,8 +1,10 @@
 import "@goauthentik/admin/events/EventInfo";
+import { ActionToLabel } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/PageHeader";
+import { KeyUnknown } from "@goauthentik/elements/forms/Form";
 
 import { t } from "@lingui/macro";
 
@@ -12,7 +14,9 @@ import { customElement, property } from "lit/decorators.js";
 import AKGlobal from "@goauthentik/common/styles/authentik.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { EventsApi } from "@goauthentik/api";
@@ -34,19 +38,122 @@ export class EventInfoPage extends AKElement {
     event!: EventWithContext;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFContent, PFCard, AKGlobal];
+        return [PFBase, PFGrid, PFDescriptionList, PFPage, PFContent, PFCard, AKGlobal];
     }
 
     render(): TemplateResult {
+        if (!this.event) {
+            return html`<ak-page-header icon="pf-icon pf-icon-catalog" header=${t`Loading`}>
+            </ak-page-header> `;
+        }
+        let geo: KeyUnknown | undefined = undefined;
+        if (Object.hasOwn(this.event.context, "geo")) {
+            geo = this.event.context.geo as KeyUnknown;
+        }
         return html`<ak-page-header
                 icon="pf-icon pf-icon-catalog"
-                header=${t`Event ${this.event?.pk || ""}`}
+                header=${t`Event ${this.event.pk}`}
             >
             </ak-page-header>
             <section class="pf-c-page__main-section pf-m-no-padding-mobile">
-                <div class="pf-c-card">
+                <div class="pf-l-grid pf-m-gutter">
+                    <div class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-4-col-on-xl">
                         <div class="pf-c-card__title">${t`Event info`}</div>
                         <div class="pf-c-card__body">
+                            <dl class="pf-c-description-list pf-m-horizontal">
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text"
+                                            >${t`Action`}</span
+                                        >
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            ${ActionToLabel(this.event.action)}
+                                        </div>
+                                    </dd>
+                                </div>
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text">${t`App`}</span>
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            ${this.event.app}
+                                        </div>
+                                    </dd>
+                                </div>
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text">${t`User`}</span>
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            ${this.event.user?.username
+                                                ? html`<div>
+                                                          <a
+                                                              href="#/identity/users/${this.event
+                                                                  .user.pk}"
+                                                              >${this.event.user?.username}</a
+                                                          >
+                                                      </div>
+                                                      ${this.event.user.on_behalf_of
+                                                          ? html`<small>
+                                                                <a
+                                                                    href="#/identity/users/${this
+                                                                        .event.user.on_behalf_of
+                                                                        .pk}"
+                                                                    >${t`On behalf of ${this.event.user.on_behalf_of.username}`}</a
+                                                                >
+                                                            </small>`
+                                                          : html``}`
+                                                : html`-`}
+                                        </div>
+                                    </dd>
+                                </div>
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text"
+                                            >${t`Created`}</span
+                                        >
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            ${this.event.created?.toLocaleString()}
+                                        </div>
+                                    </dd>
+                                </div>
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text"
+                                            >${t`Client IP`}</span
+                                        >
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            <div>${this.event.clientIp || t`-`}</div>
+                                            ${geo
+                                                ? html`<small>${geo.city}, ${geo.country}</small> `
+                                                : html``}
+                                        </div>
+                                    </dd>
+                                </div>
+                                <div class="pf-c-description-list__group">
+                                    <dt class="pf-c-description-list__term">
+                                        <span class="pf-c-description-list__text"
+                                            >${t`Tenant`}</span
+                                        >
+                                    </dt>
+                                    <dd class="pf-c-description-list__description">
+                                        <div class="pf-c-description-list__text">
+                                            ${this.event.tenant?.name || t`-`}
+                                        </div>
+                                    </dd>
+                                </div>
+                            </dl>
+                        </div>
+                    </div>
+                    <div class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-8-col-on-xl">
                         <ak-event-info .event=${this.event}></ak-event-info>
                     </div>
                 </div>