From cb36a3c8c7673085356afad08532a9312c8d7ef9 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Tue, 12 Jan 2021 22:03:50 +0100 Subject: [PATCH] web: add event transports UI --- web/src/api/EventTransports.ts | 25 ++++++ web/src/elements/buttons/ActionButton.ts | 2 +- web/src/interfaces/AdminInterface.ts | 22 +++-- .../pages/applications/ApplicationListPage.ts | 2 +- web/src/pages/events/TransportListPage.ts | 80 +++++++++++++++++++ web/src/routes.ts | 4 +- 6 files changed, 126 insertions(+), 9 deletions(-) create mode 100644 web/src/api/EventTransports.ts create mode 100644 web/src/pages/events/TransportListPage.ts diff --git a/web/src/api/EventTransports.ts b/web/src/api/EventTransports.ts new file mode 100644 index 000000000..ddcfb3b02 --- /dev/null +++ b/web/src/api/EventTransports.ts @@ -0,0 +1,25 @@ +import { DefaultClient, QueryArguments, PBResponse } from "./Client"; + +export class Transport { + pk: string; + name: string; + mode: string; + mode_verbose: string; + webhook_url: string; + + constructor() { + throw Error(); + } + + static get(pk: string): Promise { + return DefaultClient.fetch(["events", "transports", pk]); + } + + static list(filter?: QueryArguments): Promise> { + return DefaultClient.fetch>(["events", "transports"], filter); + } + + static adminUrl(rest: string): string { + return `/administration/events/transports/${rest}`; + } +} diff --git a/web/src/elements/buttons/ActionButton.ts b/web/src/elements/buttons/ActionButton.ts index 9640fd94d..4e2e8e2e7 100644 --- a/web/src/elements/buttons/ActionButton.ts +++ b/web/src/elements/buttons/ActionButton.ts @@ -49,7 +49,7 @@ export class ActionButton extends SpinnerButton { level_tag: "error", message: t }); - }) + }); } this.setDone(ERROR_CLASS); }); diff --git a/web/src/interfaces/AdminInterface.ts b/web/src/interfaces/AdminInterface.ts index 3b88acc44..1168dda29 100644 --- a/web/src/interfaces/AdminInterface.ts +++ b/web/src/interfaces/AdminInterface.ts @@ -9,11 +9,17 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [ new SidebarItem("Monitor").children( new SidebarItem("Overview", "/administration/overview"), new SidebarItem("System Tasks", "/administration/tasks/"), - new SidebarItem("Events", "/events"), ).when((): Promise => { return User.me().then(u => u.is_superuser); }), - new SidebarItem("Administration").children( + new SidebarItem("Events").children( + new SidebarItem("Log", "/events/log"), + new SidebarItem("Notification Triggers", "/administration/tasks/"), + new SidebarItem("Notification Transports", "/events/transports"), + ).when((): Promise => { + return User.me().then(u => u.is_superuser); + }), + new SidebarItem("Resources").children( new SidebarItem("Applications", "/applications").activeWhen( `^/applications/(?${SLUG_REGEX})$` ), @@ -23,10 +29,12 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [ new SidebarItem("Providers", "/administration/providers/"), new SidebarItem("Outposts", "/administration/outposts/"), new SidebarItem("Outpost Service Connections", "/administration/outposts/service_connections/"), + ).when((): Promise => { + return User.me().then(u => u.is_superuser); + }), + new SidebarItem("Customisation").children( new SidebarItem("Policies", "/administration/policies/"), new SidebarItem("Property Mappings", "/administration/property-mappings"), - new SidebarItem("Certificates", "/administration/crypto/certificates"), - new SidebarItem("Tokens", "/administration/tokens/"), ).when((): Promise => { return User.me().then(u => u.is_superuser); }), @@ -38,9 +46,11 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [ ).when((): Promise => { return User.me().then(u => u.is_superuser); }), - new SidebarItem("User Management").children( + new SidebarItem("Identity & Cryptography").children( new SidebarItem("User", "/administration/users/"), - new SidebarItem("Groups", "/administration/groups/") + new SidebarItem("Groups", "/administration/groups/"), + new SidebarItem("Certificates", "/administration/crypto/certificates"), + new SidebarItem("Tokens", "/administration/tokens/"), ).when((): Promise => { return User.me().then(u => u.is_superuser); }), diff --git a/web/src/pages/applications/ApplicationListPage.ts b/web/src/pages/applications/ApplicationListPage.ts index 3d0927bb3..f8ccf0e05 100644 --- a/web/src/pages/applications/ApplicationListPage.ts +++ b/web/src/pages/applications/ApplicationListPage.ts @@ -66,7 +66,7 @@ export class ApplicationListPage extends TablePage { Edit
- +   Delete diff --git a/web/src/pages/events/TransportListPage.ts b/web/src/pages/events/TransportListPage.ts new file mode 100644 index 000000000..6212411f9 --- /dev/null +++ b/web/src/pages/events/TransportListPage.ts @@ -0,0 +1,80 @@ +import { gettext } from "django"; +import { customElement, html, property, TemplateResult } from "lit-element"; +import { DefaultClient, PBResponse } from "../../api/Client"; +import { TablePage } from "../../elements/table/TablePage"; + +import "../../elements/buttons/ModalButton"; +import "../../elements/buttons/SpinnerButton"; +import { TableColumn } from "../../elements/table/Table"; +import { Transport } from "../../api/EventTransports"; + +@customElement("ak-event-transport-list") +export class TransportListPage extends TablePage { + searchEnabled(): boolean { + return true; + } + pageTitle(): string { + return gettext("Notification Transports"); + } + pageDescription(): string { + return gettext("Define how notifications are sent to users, like Email or Webhook."); + } + pageIcon(): string { + return gettext("pf-icon pf-icon-export"); + } + + @property() + order = "name"; + + apiEndpoint(page: number): Promise> { + return Transport.list({ + ordering: this.order, + page: page, + search: this.search || "", + }); + } + + columns(): TableColumn[] { + return [ + new TableColumn("Name", "name"), + new TableColumn("Mode", "mode"), + new TableColumn(""), + ]; + } + + row(item: Transport): TemplateResult[] { + return [ + html`${item.name}`, + html`${item.mode_verbose}`, + html` + + ${gettext("Test")} +   + + + ${gettext("Edit")} + +
+   + + + ${gettext("Delete")} + +
+ + `, + ]; + } + + renderToolbar(): TemplateResult { + return html` + + + ${gettext("Create")} + +
+ + ${super.renderToolbar()} + `; + } +} diff --git a/web/src/routes.ts b/web/src/routes.ts index 7c8134c93..97810f87c 100644 --- a/web/src/routes.ts +++ b/web/src/routes.ts @@ -8,6 +8,7 @@ import "./pages/applications/ApplicationViewPage"; import "./pages/sources/SourceViewPage"; import "./pages/flows/FlowViewPage"; import "./pages/events/EventListPage"; +import "./pages/events/TransportListPage"; export const ROUTES: Route[] = [ // Prevent infinite Shell loops @@ -25,5 +26,6 @@ export const ROUTES: Route[] = [ new Route(new RegExp(`^/flows/(?${SLUG_REGEX})$`)).then((args) => { return html``; }), - new Route(new RegExp("^/events$"), html``), + new Route(new RegExp("^/events/log$"), html``), + new Route(new RegExp("^/events/transports$"), html``), ];