outposts: migrate service connections to web

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/api/legacy.ts

@@ -12,10 +12,6 @@ export class AdminURLManager {
         return `/administration/property-mappings/${rest}`;
     }
 
-    static outpostServiceConnections(rest: string): string {
-        return `/administration/outpost_service_connections/${rest}`;
-    }
-
     static stages(rest: string): string {
         return `/administration/stages/${rest}`;
     }

web/src/pages/outposts/ServiceConnectionDockerForm.ts

@@ -0,0 +1,111 @@
+import { CryptoApi, DockerServiceConnection, OutpostsApi } from "authentik-api";
+import { gettext } from "django";
+import { customElement, property } from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { Form } from "../../elements/forms/Form";
+import { until } from "lit-html/directives/until";
+import { ifDefined } from "lit-html/directives/if-defined";
+import "../../elements/forms/HorizontalFormElement";
+
+@customElement("ak-service-connection-docker-form")
+export class ServiceConnectionDockerForm extends Form<DockerServiceConnection> {
+
+    set scUUID(value: string) {
+        new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsDockerRead({
+            uuid: value,
+        }).then(sc => {
+            this.sc = sc;
+        });
+    }
+
+    @property({attribute: false})
+    sc?: DockerServiceConnection;
+
+    getSuccessMessage(): string {
+        if (this.sc) {
+            return gettext("Successfully updated service-connection.");
+        } else {
+            return gettext("Successfully created service-connection.");
+        }
+    }
+
+    send = (data: DockerServiceConnection): Promise<DockerServiceConnection> => {
+        if (this.sc) {
+            return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsDockerUpdate({
+                uuid: this.sc.pk || "",
+                data: data
+            });
+        } else {
+            return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsDockerCreate({
+                data: data
+            });
+        }
+    };
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal
+                label=${gettext("Name")}
+                ?required=${true}
+                name="name">
+                <input type="text" value="${ifDefined(this.sc?.name)}" class="pf-c-form-control" required>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal name="local">
+                <div class="pf-c-check">
+                    <input type="checkbox" class="pf-c-check__input" ?checked=${this.sc?.local || false}>
+                    <label class="pf-c-check__label">
+                        ${gettext("Local")}
+                    </label>
+                </div>
+                <p class="pf-c-form__helper-text">${gettext("If enabled, use the local connection. Required Docker socket/Kubernetes Integration.")}</p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Docker URL")}
+                ?required=${true}
+                name="url">
+                <input type="text" value="${ifDefined(this.sc?.url)}" class="pf-c-form-control" required>
+                <p class="pf-c-form__helper-text">${gettext("Can be in the format of 'unix://' when connecting to a local docker daemon, or 'https://:2376' when connecting to a remote system.")}</p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("TLS Verification Certificate")}
+                ?required=${true}
+                name="tlsVerification">
+                <select class="pf-c-form-control">
+                    <option value="" ?selected=${this.sc?.tlsVerification === undefined}>---------</option>
+                    ${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
+                        ordering: "pk"
+                    }).then(certs => {
+                        return certs.results.map(cert => {
+                            const selected = Array.from(this.sc?.tlsVerification || []).some(sp => {
+                                return sp == cert.pk;
+                            });
+                            return html`<option value=${ifDefined(cert.pk)} ?selected=${selected}>${cert.name}</option>`;
+                        });
+                    }))}
+                </select>
+                <p class="pf-c-form__helper-text">${gettext("CA which the endpoint's Certificate is verified against. Can be left empty for no validation.")}</p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("TLS Authentication Certificate")}
+                ?required=${true}
+                name="tlsAuthentication">
+                <select class="pf-c-form-control">
+                    <option value="" ?selected=${this.sc?.tlsAuthentication === undefined}>---------</option>
+                    ${until(new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList({
+                        ordering: "pk"
+                    }).then(certs => {
+                        return certs.results.map(cert => {
+                            const selected = Array.from(this.sc?.tlsAuthentication || []).some(sp => {
+                                return sp == cert.pk;
+                            });
+                            return html`<option value=${ifDefined(cert.pk)} ?selected=${selected}>${cert.name}</option>`;
+                        });
+                    }))}
+                </select>
+                <p class="pf-c-form__helper-text">${gettext("Certificate/Key used for authentication. Can be left empty for no authentication.")}</p>
+            </ak-form-element-horizontal>
+        </form>`;
+    }
+
+}

web/src/pages/outposts/ServiceConnectionKubernetesForm.ts

@@ -0,0 +1,73 @@
+import { KubernetesServiceConnection, OutpostsApi } from "authentik-api";
+import { gettext } from "django";
+import { customElement, property } from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { Form } from "../../elements/forms/Form";
+import { ifDefined } from "lit-html/directives/if-defined";
+import "../../elements/forms/HorizontalFormElement";
+import "../../elements/CodeMirror";
+import YAML from "yaml";
+
+@customElement("ak-service-connection-kubernetes-form")
+export class ServiceConnectionKubernetesForm extends Form<KubernetesServiceConnection> {
+
+    set scUUID(value: string) {
+        new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsKubernetesRead({
+            uuid: value,
+        }).then(sc => {
+            this.sc = sc;
+        });
+    }
+
+    @property({attribute: false})
+    sc?: KubernetesServiceConnection;
+
+    getSuccessMessage(): string {
+        if (this.sc) {
+            return gettext("Successfully updated service-connection.");
+        } else {
+            return gettext("Successfully created service-connection.");
+        }
+    }
+
+    send = (data: KubernetesServiceConnection): Promise<KubernetesServiceConnection> => {
+        if (this.sc) {
+            return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsKubernetesUpdate({
+                uuid: this.sc.pk || "",
+                data: data
+            });
+        } else {
+            return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsKubernetesCreate({
+                data: data
+            });
+        }
+    };
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal
+                label=${gettext("Name")}
+                ?required=${true}
+                name="name">
+                <input type="text" value="${ifDefined(this.sc?.name)}" class="pf-c-form-control" required>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal name="local">
+                <div class="pf-c-check">
+                    <input type="checkbox" class="pf-c-check__input" ?checked=${this.sc?.local || false}>
+                    <label class="pf-c-check__label">
+                        ${gettext("Local")}
+                    </label>
+                </div>
+                <p class="pf-c-form__helper-text">${gettext("If enabled, use the local connection. Required Docker socket/Kubernetes Integration.")}</p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Kubeconfig")}
+                name="kubeconfig">
+                <ak-codemirror mode="yaml" value="${YAML.stringify(this.sc?.kubeconfig)}">
+                </ak-codemirror>
+            </ak-form-element-horizontal>
+        </form>`;
+    }
+
+}

web/src/pages/outposts/ServiceConnectionListPage.ts

@@ -10,11 +10,15 @@ import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
 import "../../elements/forms/DeleteForm";
+import "../../elements/forms/ModalForm";
+import "./ServiceConnectionKubernetesForm";
+import "./ServiceConnectionDockerForm";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
 import { OutpostsApi, ServiceConnection } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { AdminURLManager } from "../../api/legacy";
+import "../../elements/forms/ProxyForm";
+import { ifDefined } from "lit-html/directives/if-defined";
 
 @customElement("ak-outpost-service-connection-list")
 export class OutpostServiceConnectionListPage extends TablePage<ServiceConnection> {
@@ -68,12 +72,28 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
                     return html`<i class="fas fa-times pf-m-danger"></i> ${gettext("Unhealthy")}`;
                 }), html`<ak-spinner></ak-spinner>`)}`,
             html`
-            <ak-modal-button href="${AdminURLManager.outpostServiceConnections(`${item.pk}/update/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+            <ak-forms-modal>
+                <span slot="submit">
+                    ${gettext("Update")}
+                </span>
+                <span slot="header">
+                    ${gettext(`Update ${item.verboseName}`)}
+                </span>
+                <ak-proxy-form
+                    slot="form"
+                    .args=${{
+                        "scUUID": item.pk
+                    }}
+                    type=${ifDefined(item.objectType)}
+                    .typeMap=${{
+                        "docker": "ak-service-connection-docker-form",
+                        "kubernetes": "ak-service-connection-kubernetes-form"
+                    }}>
+                </ak-proxy-form>
+                <button slot="trigger" class="pf-c-button pf-m-secondary">
                     ${gettext("Edit")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
+                </button>
+            </ak-forms-modal>
             <ak-forms-delete
                 .obj=${item}
                 objectLabel=${gettext("Outpost Service-connection")}
@@ -100,12 +120,22 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
                 ${until(new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllTypes({}).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>
+                            <ak-forms-modal>
+                                <span slot="submit">
+                                    ${gettext("Create")}
+                                </span>
+                                <span slot="header">
+                                    ${gettext(`Create ${type.name}`)}
+                                </span>
+                                <ak-proxy-form
+                                    slot="form"
+                                    type=${type.link}>
+                                </ak-proxy-form>
+                                <button slot="trigger" class="pf-c-dropdown__menu-item">
+                                    ${type.name}<br>
                                     <small>${type.description}</small>
                                 </button>
-                                <div slot="modal"></div>
-                            </ak-modal-button>
+                            </ak-forms-modal>
                         </li>`;
                     });
                 }), html`<ak-spinner></ak-spinner>`)}

web/src/routes.ts

@@ -14,7 +14,7 @@ import "./pages/flows/FlowViewPage";
 import "./pages/groups/GroupListPage";
 import "./pages/LibraryPage";
 import "./pages/outposts/OutpostListPage";
-import "./pages/outposts/OutpostServiceConnectionListPage";
+import "./pages/outposts/ServiceConnectionListPage";
 import "./pages/policies/PolicyListPage";
 import "./pages/property-mappings/PropertyMappingListPage";
 import "./pages/providers/ProviderListPage";