habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: migrate Outpost Service Connection to web

Browse Source
This commit is contained in:
Jens Langhammer
2021-02-19 17:49:34 +01:00
parent 8008918d8b
commit 865f652476
11 changed files with 353 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/api/Outposts.ts
View File

@ -1,5 +1,5 @@
import { DefaultClient, AKResponse, QueryArguments } from "./Client";
import { Provider } from "./Providers";
import { Provider, TypeCreate } from "./Providers";
export interface OutpostHealth {
last_seen: number;
@ -38,3 +38,42 @@ export class Outpost {
return `/administration/outposts/${rest}`;
}
}
export interface OutpostServiceConnectionState {
version: string;
healthy: boolean;
}
export class OutpostServiceConnection {
pk: string;
name: string;
local: boolean;
object_type: string;
verbose_name: string;
verbose_name_plural: string;
constructor() {
throw Error();
}
static get(pk: string): Promise<OutpostServiceConnection> {
return DefaultClient.fetch<OutpostServiceConnection>(["outposts", "service_connections", "all", pk]);
}
static list(filter?: QueryArguments): Promise<AKResponse<OutpostServiceConnection>> {
return DefaultClient.fetch<AKResponse<OutpostServiceConnection>>(["outposts", "service_connections", "all"], filter);
}
static state(pk: string): Promise<OutpostServiceConnectionState> {
return DefaultClient.fetch<OutpostServiceConnectionState>(["outposts", "service_connections", "all", pk, "state"]);
}
static getTypes(): Promise<TypeCreate[]> {
return DefaultClient.fetch<TypeCreate[]>(["outposts", "service_connections", "all", "types"]);
}
static adminUrl(rest: string): string {
return `/administration/outpost_service_connections/${rest}`;
}
}

2
web/src/interfaces/AdminInterface.ts
View File

@ -28,7 +28,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
),
new SidebarItem("Providers", "/providers"),
new SidebarItem("Outposts", "/outposts"),
new SidebarItem("Outpost Service Connections", "/administration/outpost_service_connections/"),
new SidebarItem("Outpost Service Connections", "/outpost-service-connections"),
).when((): Promise<boolean> => {
return User.me().then(u => u.is_superuser);
}),

1
web/src/pages/flows/BoundStagesList.ts
View File

@ -7,6 +7,7 @@ import "../../elements/Tabs";
import "../../elements/AdminLoginsChart";
import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton";
import "../../elements/buttons/Dropdown";
import "../../elements/policies/BoundPoliciesList";
import { FlowStageBinding, Stage } from "../../api/Flows";
import { until } from "lit-html/directives/until";

102
web/src/pages/outposts/OutpostServiceConnectionListPage.ts Normal file
View File

@ -0,0 +1,102 @@
import { gettext } from "django";
import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { AKResponse } from "../../api/Client";
import { OutpostServiceConnection } from "../../api/Outposts";
import { TableColumn } from "../../elements/table/Table";
import { TablePage } from "../../elements/table/TablePage";
import "./OutpostHealth";
import "../../elements/buttons/SpinnerButton";
import "../../elements/buttons/ModalButton";
import "../../elements/buttons/Dropdown";
import { until } from "lit-html/directives/until";
@customElement("ak-outpost-service-connection-list")
export class OutpostServiceConnectionListPage extends TablePage<OutpostServiceConnection> {
pageTitle(): string {
return "Outpost Service-Connections";
}
pageDescription(): string | undefined {
return "Outpost Service-Connections define how authentik connects to external platforms to manage and deploy Outposts.";
}
pageIcon(): string {
return "pf-icon pf-icon-integration";
}
searchEnabled(): boolean {
return true;
}
apiEndpoint(page: number): Promise<AKResponse<OutpostServiceConnection>> {
return OutpostServiceConnection.list({
ordering: this.order,
page: page,
search: this.search || "",
});
}
columns(): TableColumn[] {
return [
new TableColumn("Name", "name"),
new TableColumn("Type"),
new TableColumn("Local", "local"),
new TableColumn("State"),
new TableColumn(""),
];
}
@property()
order = "name";
row(item: OutpostServiceConnection): TemplateResult[] {
return [
html`${item.name}`,
html`${item.verbose_name}`,
html`${item.local ? "Yes" : "No"}`,
html`${until(OutpostServiceConnection.state(item.pk).then((state) => {
if (state.healthy) {
return html`<i class="fas fa-check pf-m-success"></i> ${state.version}`;
}
return html`<i class="fas fa-times pf-m-danger"></i> ${gettext("Unhealthy")}`;
}), html`<ak-spinner></ak-spinner>`)}`,
html`
<ak-modal-button href="${OutpostServiceConnection.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>
<ak-modal-button href="${OutpostServiceConnection.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-dropdown class="pf-c-dropdown">
<button class="pf-m-primary pf-c-dropdown__toggle" type="button">
<span class="pf-c-dropdown__toggle-text">${gettext("Create")}</span>
<i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
</button>
<ul class="pf-c-dropdown__menu" hidden>
${until(OutpostServiceConnection.getTypes().then((types) => {
return types.map((type) => {
return html`<li>
<ak-modal-button href="${type.link}">
<button slot="trigger" class="pf-c-dropdown__menu-item">${type.name}<br>
<small>${type.description}</small>
</button>
<div slot="modal"></div>
</ak-modal-button>
</li>`;
});
}), html`<ak-spinner></ak-spinner>`)}
</ul>
</ak-dropdown>
${super.renderToolbar()}`;
}
}

4
web/src/pages/policies/PolicyListPage.ts
View File

@ -31,7 +31,7 @@ export class PolicyListPage extends TablePage<Policy> {
apiEndpoint(page: number): Promise<AKResponse<Policy>> {
return Policy.list({
ordering: this.order,
page: page,
page: page,
search: this.search || "",
});
}
@ -54,7 +54,7 @@ export class PolicyListPage extends TablePage<Policy> {
${gettext(`Assigned to ${item.bound_to} objects.`)}
</small>`:
html`<i class="pf-icon pf-icon-warning-triangle"></i>
<small>${gettext("Warning: Policy is not assigned.")}/small>`}
<small>${gettext("Warning: Policy is not assigned.")}</small>`}
</div>`,
html`${item.verbose_name}`,
html`

2
web/src/routes.ts
View File

@ -13,6 +13,7 @@ import "./pages/flows/FlowListPage";
import "./pages/flows/FlowViewPage";
import "./pages/LibraryPage";
import "./pages/outposts/OutpostListPage";
import "./pages/outposts/OutpostServiceConnectionListPage";
import "./pages/policies/PolicyListPage";
import "./pages/property-mappings/PropertyMappingListPage";
import "./pages/providers/ProviderListPage";
@ -53,5 +54,6 @@ export const ROUTES: Route[] = [
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>`),
new Route(new RegExp("^/outposts$"), html`<ak-outpost-list></ak-outpost-list>`),
new Route(new RegExp("^/outpost-service-connections$"), html`<ak-outpost-service-connection-list></ak-outpost-service-connection-list>`),
new Route(new RegExp("^/crypto/certificates$"), html`<ak-crypto-certificatekeypair-list></ak-crypto-certificatekeypair-list>`),
];