web/admin: refactor event geo display

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

web/src/admin/Routes.ts

@@ -105,8 +105,8 @@ export const ROUTES: Route[] = [
         return html`<ak-event-list></ak-event-list>`;
     }),
     new Route(new RegExp(`^/events/log/(?<id>${UUID_REGEX})$`), async (args) => {
-        await import("@goauthentik/admin/events/EventInfoPage");
+        await import("@goauthentik/admin/events/EventViewPage");
-        return html`<ak-event-info-page .eventID=${args.id}></ak-event-info-page>`;
+        return html`<ak-event-view .eventID=${args.id}></ak-event-view>`;
     }),
     new Route(new RegExp("^/events/transports$"), async () => {
         await import("@goauthentik/admin/events/TransportListPage");

web/src/admin/events/EventListPage.ts

@@ -1,9 +1,8 @@
 import "@goauthentik/admin/events/EventInfo";
-import { ActionToLabel } from "@goauthentik/admin/events/utils";
+import { ActionToLabel, EventGeo } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
 import { uiConfig } from "@goauthentik/common/ui/config";
-import { KeyUnknown } from "@goauthentik/elements/forms/Form";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
@@ -56,10 +55,6 @@ export class EventListPage extends TablePage<Event> {
     }
 
     row(item: EventWithContext): TemplateResult[] {
-        let geo: KeyUnknown | undefined = undefined;
-        if (Object.hasOwn(item.context, "geo")) {
-            geo = item.context.geo as KeyUnknown;
-        }
         return [
             html`<div>${ActionToLabel(item.action)}</div>
                 <small>${item.app}</small>`,
@@ -77,7 +72,8 @@ export class EventListPage extends TablePage<Event> {
                 : html`-`,
             html`<span>${item.created?.toLocaleString()}</span>`,
             html`<div>${item.clientIp || t`-`}</div>
-                ${geo ? html`<small>${[geo.city, geo.country].join(", ")}</small>` : html``}`,
+
+                <small>${EventGeo(item)}</small>`,
             html`<span>${item.tenant?.name || t`-`}</span>`,
             html`<a href="#/events/log/${item.pk}">
                 <i class="fas fa-share-square"></i>

web/src/admin/events/EventViewPage.ts

@@ -1,10 +1,9 @@
 import "@goauthentik/admin/events/EventInfo";
-import { ActionToLabel } from "@goauthentik/admin/events/utils";
+import { ActionToLabel, EventGeo } 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";
 
@@ -21,8 +20,8 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { EventsApi } from "@goauthentik/api";
 
-@customElement("ak-event-info-page")
+@customElement("ak-event-view")
-export class EventInfoPage extends AKElement {
+export class EventViewPage extends AKElement {
     @property()
     set eventID(value: string) {
         new EventsApi(DEFAULT_CONFIG)
@@ -46,10 +45,6 @@ export class EventInfoPage extends AKElement {
             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}`}
@@ -132,11 +127,7 @@ export class EventInfoPage extends AKElement {
                                     <dd class="pf-c-description-list__description">
                                         <div class="pf-c-description-list__text">
                                             <div>${this.event.clientIp || t`-`}</div>
-                                            ${geo
+                                            <small>${EventGeo(this.event)}</small>
-                                                ? html`<small
-                                                      >${[geo.city, geo.country].join(", ")}</small
-                                                  >`
-                                                : html``}
                                         </div>
                                     </dd>
                                 </div>

web/src/admin/events/utils.ts

@@ -1,7 +1,24 @@
+import { EventWithContext } from "@goauthentik/common/events";
+import { KeyUnknown } from "@goauthentik/elements/forms/Form";
+
 import { t } from "@lingui/macro";
 
+import { TemplateResult, html } from "lit";
+
 import { EventActions } from "@goauthentik/api";
 
+export function EventGeo(event: EventWithContext): TemplateResult {
+    let geo: KeyUnknown | undefined = undefined;
+    if (Object.hasOwn(event.context, "geo")) {
+        geo = event.context.geo as KeyUnknown;
+        const parts = [geo.city, geo.country, geo.continent].filter(
+            (v) => v !== "" && v !== undefined,
+        );
+        return html`${parts.join(", ")}`;
+    }
+    return html``;
+}
+
 export function ActionToLabel(action?: EventActions): string {
     if (!action) return "";
     switch (action) {