web: add EventInfoPage

web/src/elements/table/TablePage.ts

@@ -1,3 +1,4 @@
+import { gettext } from "django";
 import { html, TemplateResult } from "lit-html";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { Table } from "./Table";
@@ -26,9 +27,9 @@ export abstract class TablePage<T> extends Table<T> {
                 <div class="pf-c-content">
                     <h1>
                         <i class="${this.pageIcon()}"></i>
-                        ${this.pageTitle()}
+                        ${gettext(this.pageTitle())}
                     </h1>
-                    ${description ? html`<p>${description}</p>` : html``}
+                    ${description ? html`<p>${gettext(description)}</p>` : html``}
                 </div>
             </section>
             <section class="pf-c-page__main-section pf-m-no-padding-mobile">

web/src/pages/events/EventInfoPage.ts

@@ -0,0 +1,47 @@
+import { gettext } from "django";
+import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { Event } from "../../api/Events";
+import { COMMON_STYLES } from "../../common/styles";
+
+@customElement("ak-event-info-page")
+export class EventInfoPage extends LitElement {
+    @property()
+    set args(value: { [key: string]: string }) {
+        this.eventID = value.id;
+    }
+
+    @property()
+    set eventID(value: string) {
+        Event.get(value).then((e) => (this.event = e));
+    }
+
+    @property({ attribute: false })
+    event?: Event;
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES.concat(css`
+            .pf-c-card {
+                color: var(--ak-dark-foreground);
+            }
+        `);
+    }
+
+    render(): TemplateResult {
+        return html`<section class="pf-c-page__main-section pf-m-light">
+            <div class="pf-c-content">
+                <h1>
+                    <i class="pf-icon pf-icon-catalog"></i>
+                    ${gettext(`Event ${this.event?.pk || ""}`)}
+                </h1>
+            </div>
+        </section>
+        <section class="pf-c-page__main-section pf-m-no-padding-mobile">
+            <div class="pf-c-card">
+                <div class="pf-c-card__body">
+                    <ak-event-info .event=${this.event}></ak-event-info>
+                </div>
+            </div>
+        </section>`;
+    }
+
+}

web/src/routes.ts

@@ -1,5 +1,5 @@
 import { html } from "lit-html";
-import { Route, SLUG_REGEX, ID_REGEX } from "./elements/router/Route";
+import { Route, SLUG_REGEX, ID_REGEX, UUID_REGEX } from "./elements/router/Route";
 
 import "./pages/LibraryPage";
 import "./pages/admin-overview/AdminOverviewPage";
@@ -8,6 +8,7 @@ import "./pages/applications/ApplicationViewPage";
 import "./pages/sources/SourceViewPage";
 import "./pages/flows/FlowViewPage";
 import "./pages/events/EventListPage";
+import "./pages/events/EventInfoPage";
 import "./pages/events/TransportListPage";
 import "./pages/events/RuleListPage";
 import "./pages/providers/ProviderListPage";
@@ -35,6 +36,9 @@ export const ROUTES: Route[] = [
         return html`<ak-flow-view .args=${args}></ak-flow-view>`;
     }),
     new Route(new RegExp("^/events/log$"), html`<ak-event-list></ak-event-list>`),
+    new Route(new RegExp(`^/events/log/(?<id>${UUID_REGEX})$`)).then((args) => {
+        return html`<ak-event-info-page .args=${args}></ak-event-info-page>`;
+    }),
     new Route(new RegExp("^/events/transports$"), html`<ak-event-transport-list></ak-event-transport-list>`),
     new Route(new RegExp("^/events/rules$"), html`<ak-event-rule-list></ak-event-rule-list>`),
     new Route(new RegExp("^/property-mappings$"), html`<ak-property-mapping-list></ak-property-mapping-list>`),