From de389e23850e90487c74bf7dd8709fcf2120e9f2 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Sun, 5 Feb 2023 00:23:32 +0100 Subject: [PATCH] web/admin: rework event info page to show all event infos Signed-off-by: Jens Langhammer --- web/src/admin/events/EventInfo.ts | 320 ++++++++++++++------------ web/src/admin/events/EventInfoPage.ts | 117 +++++++++- web/src/admin/events/EventListPage.ts | 2 +- 3 files changed, 290 insertions(+), 149 deletions(-) diff --git a/web/src/admin/events/EventInfo.ts b/web/src/admin/events/EventInfo.ts index 6c75a1fed..f92e71270 100644 --- a/web/src/admin/events/EventInfo.ts +++ b/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,40 +58,42 @@ export class EventInfo extends AKElement { if (context === null) { return html`-`; } - return html`
-
-
- ${t`UID`} -
-
-
${context.pk}
-
-
-
-
- ${t`Name`} -
-
-
${context.name}
-
-
-
-
- ${t`App`} -
-
-
${context.app}
-
-
-
-
- ${t`Model Name`} -
-
-
${context.model_name}
-
-
-
`; + return html`
+
+
+
+ ${t`UID`} +
+
+
${context.pk}
+
+
+
+
+ ${t`Name`} +
+
+
${context.name}
+
+
+
+
+ ${t`App`} +
+
+
${context.app}
+
+
+
+
+ ${t`Model Name`} +
+
+
${context.model_name}
+
+
+
+
`; } getEmailInfo(context: EventContext): TemplateResult { @@ -139,12 +143,16 @@ export class EventInfo extends AKElement { defaultResponse(): TemplateResult { return html`
-

${t`Context`}

- ${JSON.stringify(this.event?.context, null, 4)} +
${t`Context`}
+
+ ${JSON.stringify(this.event?.context, null, 4)} +
-

${t`User`}

- ${JSON.stringify(this.event?.user, null, 4)} +
${t`User`}
+
+ ${JSON.stringify(this.event?.user, null, 4)} +
`; } @@ -204,45 +212,51 @@ new?labels=bug,from_authentik&title=${encodeURIComponent(title)} case EventActions.ModelUpdated: case EventActions.ModelDeleted: return html` -

${t`Affected model:`}

- ${this.getModelInfo(this.event.context?.model as EventModel)} +
${t`Affected model:`}
+
+ ${this.getModelInfo(this.event.context?.model as EventModel)} +
`; case EventActions.AuthorizeApplication: return html`
-

${t`Authorized application:`}

- ${this.getModelInfo( - this.event.context.authorized_application as EventModel, - )} +
${t`Authorized application:`}
+
+ ${this.getModelInfo( + this.event.context.authorized_application as EventModel, + )} +
-

${t`Using flow`}

- ${until( - new FlowsApi(DEFAULT_CONFIG) - .flowsInstancesList({ - flowUuid: this.event.context.flow as string, - }) - .then((resp) => { - return html`${resp.results[0].name}`; - }), - html``, - )} - +
${t`Using flow`}
+
+ ${until( + new FlowsApi(DEFAULT_CONFIG) + .flowsInstancesList({ + flowUuid: this.event.context.flow as string, + }) + .then((resp) => { + return html`${resp.results[0].name}`; + }), + html``, + )} + +
${this.defaultResponse()}`; case EventActions.EmailSent: - return html`

${t`Email info:`}

- ${this.getEmailInfo(this.event.context)} + return html`
${t`Email info:`}
+
${this.getEmailInfo(this.event.context)}
`; case EventActions.SecretView: - return html`

${t`Secret:`}

+ return html`
${t`Secret:`}
${this.getModelInfo(this.event.context.secret as EventModel)}`; case EventActions.SystemException: return html`
-

${t`Exception`}

- 
${this.event.context.message}
+
${t`Exception`}
+
+ 
${this.event.context.message}
+
${this.defaultResponse()}`; case EventActions.PropertyMappingException: return html`
-

${t`Exception`}

- 
${this.event.context.message || this.event.context.error}
+
${t`Exception`}
+
+ 
${this.event.context.message || this.event.context.error}
+
-

${t`Expression`}

- ${this.event.context.expression} +
${t`Expression`}
+
+ ${this.event.context.expression} +
${this.defaultResponse()}`; case EventActions.PolicyException: return html`
-

${t`Binding`}

+
${t`Binding`}
${this.getModelInfo(this.event.context.binding as EventModel)}
-

${t`Request`}

-
    -
  • - ${t`Object`}: - ${this.getModelInfo( - (this.event.context.request as EventContext) - .obj as EventModel, - )} -
    • -
  • - ${t`Context`}: - ${JSON.stringify( - (this.event.context.request as EventContext) - .context, - null, - 4, - )} -
    • -
+
${t`Request`}
+
+
    +
  • + ${t`Object`}: + ${this.getModelInfo( + (this.event.context.request as EventContext) + .obj as EventModel, + )} +
    • +
  • + ${t`Context`}: + ${JSON.stringify( + (this.event.context.request as EventContext) + .context, + null, + 4, + )} +
    • +
+
-

${t`Exception`}

- ${this.event.context.message || this.event.context.error} +
${t`Exception`}
+
+ ${this.event.context.message || this.event.context.error} +
${this.defaultResponse()}`; case EventActions.PolicyExecution: return html`
-

${t`Binding`}

+
${t`Binding`}
${this.getModelInfo(this.event.context.binding as EventModel)}
-

${t`Request`}

-
    -
  • - ${t`Object`}: - ${this.getModelInfo( - (this.event.context.request as EventContext) - .obj as EventModel, - )} -
    • -
  • - ${t`Context`}: - ${JSON.stringify( - (this.event.context.request as EventContext) - .context, - null, - 4, - )} -
    • -
+
${t`Request`}
+
+
    +
  • + ${t`Object`}: + ${this.getModelInfo( + (this.event.context.request as EventContext) + .obj as EventModel, + )} +
    • +
  • + ${t`Context`}: + ${JSON.stringify( + (this.event.context.request as EventContext) + .context, + null, + 4, + )} +
    • +
+
-

${t`Result`}

-
    -
  • - ${t`Passing`}: - ${(this.event.context.result as EventContext).passing} -
    • -
  • - ${t`Messages`}: -
      - ${( - (this.event.context.result as EventContext) - .messages as string[] - ).map((msg) => { - return html`
    • ${msg}
      • `; - })} -
    -
    • -
+
${t`Result`}
+
+
    +
  • + ${t`Passing`}: + ${(this.event.context.result as EventContext).passing} +
    • +
  • + ${t`Messages`}: +
      + ${( + (this.event.context.result as EventContext) + .messages as string[] + ).map((msg) => { + return html`
    • ${msg}
      • `; + })} +
    +
    • +
+
${this.defaultResponse()}`; case EventActions.ConfigurationError: - return html`

${this.event.context.message}

+ return html`
${this.event.context.message}
${this.defaultResponse()}`; case EventActions.UpdateAvailable: - return html`

${t`New version available!`}

+ return html`
${t`New version available!`}
-

${t`Using source`}

+
${t`Using source`}
${this.getModelInfo(this.event.context.using_source as EventModel)}
`; } return this.defaultResponse(); case EventActions.LoginFailed: - return html`

${t`Attempted to log in as ${this.event.context.username}`}

+ return html`
+ ${t`Attempted to log in as ${this.event.context.username}`} +
${this.defaultResponse()}`; case EventActions.Logout: if (Object.keys(this.event.context).length === 0) { @@ -396,8 +428,10 @@ new?labels=bug,from_authentik&title=${encodeURIComponent(title)} case EventActions.SystemTaskException: return html`
-

${t`Exception`}

- 
${this.event.context.message}
+
${t`Exception`}
+
+ 
${this.event.context.message}
+
`; default: diff --git a/web/src/admin/events/EventInfoPage.ts b/web/src/admin/events/EventInfoPage.ts index 935afee47..e07569276 100644 --- a/web/src/admin/events/EventInfoPage.ts +++ b/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` + `; + } + let geo: KeyUnknown | undefined = undefined; + if (Object.hasOwn(this.event.context, "geo")) { + geo = this.event.context.geo as KeyUnknown; + } return html`
-
-
${t`Event info`}
-
+
+
+
${t`Event info`}
+
+
+
+
+ ${t`Action`} +
+
+
+ ${ActionToLabel(this.event.action)} +
+
+
+
+
+ ${t`App`} +
+
+
+ ${this.event.app} +
+
+
+
+
+ ${t`User`} +
+
+
+ ${this.event.user?.username + ? html` + ${this.event.user.on_behalf_of + ? html` + ${t`On behalf of ${this.event.user.on_behalf_of.username}`} + ` + : html``}` + : html`-`} +
+
+
+
+
+ ${t`Created`} +
+
+
+ ${this.event.created?.toLocaleString()} +
+
+
+
+
+ ${t`Client IP`} +
+
+
+
${this.event.clientIp || t`-`}
+ ${geo + ? html`${geo.city}, ${geo.country} ` + : html``} +
+
+
+
+
+ ${t`Tenant`} +
+
+
+ ${this.event.tenant?.name || t`-`} +
+
+
+
+
+
+
diff --git a/web/src/admin/events/EventListPage.ts b/web/src/admin/events/EventListPage.ts index 595af1a91..a6a2ef152 100644 --- a/web/src/admin/events/EventListPage.ts +++ b/web/src/admin/events/EventListPage.ts @@ -76,7 +76,7 @@ export class EventListPage extends TablePage { : html``}` : html`-`, html`${item.created?.toLocaleString()}`, - html`
${item.clientIp || t`-`}
+ html`
${item.clientIp || t`-`}
${geo ? html`${geo.city}, ${geo.country} ` : html``}`, html`${item.tenant?.name || t`-`}`, html`