web: add event transports UI

This commit is contained in:
Jens Langhammer 2021-01-12 22:03:50 +01:00
parent cac94792fa
commit cb36a3c8c7
6 changed files with 126 additions and 9 deletions

View file

@ -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<Transport> {
return DefaultClient.fetch<Transport>(["events", "transports", pk]);
}
static list(filter?: QueryArguments): Promise<PBResponse<Transport>> {
return DefaultClient.fetch<PBResponse<Transport>>(["events", "transports"], filter);
}
static adminUrl(rest: string): string {
return `/administration/events/transports/${rest}`;
}
}

View file

@ -49,7 +49,7 @@ export class ActionButton extends SpinnerButton {
level_tag: "error",
message: t
});
})
});
}
this.setDone(ERROR_CLASS);
});

View file

@ -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<boolean> => {
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<boolean> => {
return User.me().then(u => u.is_superuser);
}),
new SidebarItem("Resources").children(
new SidebarItem("Applications", "/applications").activeWhen(
`^/applications/(?<slug>${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<boolean> => {
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<boolean> => {
return User.me().then(u => u.is_superuser);
}),
@ -38,9 +46,11 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
).when((): Promise<boolean> => {
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<boolean> => {
return User.me().then(u => u.is_superuser);
}),

View file

@ -66,7 +66,7 @@ export class ApplicationListPage extends TablePage<Application> {
Edit
</ak-spinner-button>
<div slot="modal"></div>
</ak-modal-button>
</ak-modal-button>&nbsp;
<ak-modal-button href="${Application.adminUrl(`${item.pk}/delete/`)}">
<ak-spinner-button slot="trigger" class="pf-m-danger">
Delete

View file

@ -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<Transport> {
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<PBResponse<Transport>> {
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`
<ak-action-button url="${DefaultClient.makeUrl(["events", "transports", item.pk, "test"])}">
${gettext("Test")}
</ak-action-button>&nbsp;
<ak-modal-button href="${Transport.adminUrl(`${item.pk}/update/`)}">
<ak-spinner-button slot="trigger" class="pf-m-secondary">
${gettext("Edit")}
</ak-spinner-button>
<div slot="modal"></div>
</ak-modal-button>&nbsp;
<ak-modal-button href="${Transport.adminUrl(`${item.pk}/delete/`)}">
<ak-spinner-button slot="trigger" class="pf-m-danger">
${gettext("Delete")}
</ak-spinner-button>
<div slot="modal"></div>
</ak-modal-button>
`,
];
}
renderToolbar(): TemplateResult {
return html`
<ak-modal-button href=${Transport.adminUrl("create/")}>
<ak-spinner-button slot="trigger" class="pf-m-primary">
${gettext("Create")}
</ak-spinner-button>
<div slot="modal"></div>
</ak-modal-button>
${super.renderToolbar()}
`;
}
}

View file

@ -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>${SLUG_REGEX})$`)).then((args) => {
return html`<ak-flow-view .args=${args}></ak-flow-view>`;
}),
new Route(new RegExp("^/events$"), html`<ak-event-list></ak-event-list>`),
new Route(new RegExp("^/events/log$"), html`<ak-event-list></ak-event-list>`),
new Route(new RegExp("^/events/transports$"), html`<ak-event-transport-list></ak-event-transport-list>`),
];