web: add outpost list page

2021-02-08 19:04:19 +01:00 · 2021-02-08 19:04:19 +01:00 · 820f658b49
parent 5d460a2537
commit 820f658b49
8 changed files with 247 additions and 9 deletions
--- a/authentik/admin/views/outposts.py
+++ b/authentik/admin/views/outposts.py
@ -12,10 +12,7 @@ from django.utils.translation import gettext as _
 from django.views.generic import UpdateView
 from guardian.mixins import PermissionRequiredMixin

-from authentik.admin.views.utils import (
-    BackSuccessUrlMixin,
-    DeleteMessageView,
-)
+from authentik.admin.views.utils import BackSuccessUrlMixin, DeleteMessageView
 from authentik.lib.views import CreateAssignPermView
 from authentik.outposts.forms import OutpostForm
 from authentik.outposts.models import Outpost, OutpostConfig
--- a/authentik/outposts/api/outposts.py
+++ b/authentik/outposts/api/outposts.py
@ -51,6 +51,13 @@ class OutpostViewSet(ModelViewSet):

    queryset = Outpost.objects.all()
    serializer_class = OutpostSerializer
+    filterset_fields = {
+        "providers": ["isnull"],
+    }
+    search_fields = [
+        "name",
+        "providers__name",
+    ]

    @swagger_auto_schema(responses={200: OutpostHealthSerializer(many=True)})
    @action(methods=["GET"], detail=True)
--- a/swagger.yaml
+++ b/swagger.yaml
@ -1789,6 +1789,11 @@ paths:
      operationId: outposts_outposts_list
      description: Outpost Viewset
      parameters:
+        - name: providers__isnull
+          in: query
+          description: ''
+          required: false
+          type: string
        - name: ordering
          in: query
          description: Which field to use when ordering the results.
@ -1914,11 +1919,11 @@ paths:
  /outposts/outposts/{uuid}/health/:
    get:
      operationId: outposts_outposts_health
-      description: Outpost Viewset
+      description: Get outposts current health
      parameters: []
      responses:
        '200':
-          description: ''
+          description: Outpost health status
          schema:
            description: ''
            type: array
@ -4457,7 +4462,7 @@ paths:
  /providers/oauth2/{id}/setup_urls/:
    get:
      operationId: providers_oauth2_setup_urls
-      description: Return metadata as XML string
+      description: Get Providers setup URLs
      parameters: []
      responses:
        '200':
@ -8179,11 +8184,15 @@ definitions:
        type: string
        format: uuid
        x-nullable: true
+      token_identifier:
+        title: Token identifier
+        type: string
+        readOnly: true
      _config:
        title: config
        type: object
  OutpostHealth:
-    description: ''
+    description: Outpost health status
    type: object
    properties:
      last_seen:
@ -8191,6 +8200,20 @@ definitions:
        type: string
        format: date-time
        readOnly: true
+      version:
+        title: Version
+        type: string
+        readOnly: true
+        minLength: 1
+      version_should:
+        title: Version should
+        type: string
+        readOnly: true
+        minLength: 1
+      version_outdated:
+        title: Version outdated
+        type: boolean
+        readOnly: true
  OpenIDConnectConfiguration:
    title: Oidc configuration
    description: rest_framework Serializer for OIDC Configuration
--- a/web/src/api/Outposts.ts
+++ b/web/src/api/Outposts.ts
@ -0,0 +1,39 @@
+import { DefaultClient, PBResponse, QueryArguments } from "./Client";
+import { Provider } from "./Providers";
+
+export interface OutpostHealth {
+    last_seen: number;
+    version: string;
+    version_should: string;
+    version_outdated: boolean;
+}
+
+export class Outpost {
+
+    pk: string;
+    name: string;
+    providers: Provider[];
+    service_connection?: string;
+    _config: QueryArguments;
+    token_identifier: string;
+
+    constructor() {
+        throw Error();
+    }
+
+    static get(pk: string): Promise<Outpost> {
+        return DefaultClient.fetch<Outpost>(["outposts", "outposts", pk]);
+    }
+
+    static list(filter?: QueryArguments): Promise<PBResponse<Outpost>> {
+        return DefaultClient.fetch<PBResponse<Outpost>>(["outposts", "outposts"], filter);
+    }
+
+    static health(pk: string): Promise<OutpostHealth[]> {
+        return DefaultClient.fetch<OutpostHealth[]>(["outposts", "outposts", pk, "health"]);
+    }
+
+    static adminUrl(rest: string): string {
+        return `/administration/outposts/${rest}`;
+    }
+}
--- a/web/src/interfaces/AdminInterface.ts
+++ b/web/src/interfaces/AdminInterface.ts
@ -27,7 +27,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
            `^/sources/(?<slug>${SLUG_REGEX})$`,
        ),
        new SidebarItem("Providers", "/providers"),
-        new SidebarItem("Outposts", "/administration/outposts/"),
+        new SidebarItem("Outposts", "/outposts"),
        new SidebarItem("Outpost Service Connections", "/administration/outpost_service_connections/"),
    ).when((): Promise<boolean> => {
        return User.me().then(u => u.is_superuser);
--- a/web/src/pages/outposts/OutpostHealth.ts
+++ b/web/src/pages/outposts/OutpostHealth.ts
@ -0,0 +1,49 @@
+import { gettext } from "django";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
+import { until } from "lit-html/directives/until";
+import { Outpost } from "../../api/Outposts";
+import { COMMON_STYLES } from "../../common/styles";
+
+@customElement("ak-outpost-health")
+export class OutpostHealth extends LitElement {
+
+    @property()
+    outpostId?: string;
+
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES;
+    }
+
+    render(): TemplateResult {
+        if (!this.outpostId) {
+            return html`<ak-spinner></ak-spinner>`;
+        }
+        return html`<ul>${until(Outpost.health(this.outpostId).then((oh) => {
+            if (oh.length === 0) {
+                return html`<li>
+                    <ul>
+                        <li role="cell">
+                            <i class="fas fa-question-circle"></i>&nbsp;${gettext("Not available")}
+                        </li>
+                    </ul>
+                </li>`;
+            }
+            return oh.map((h) => {
+                return html`<li>
+                    <ul>
+                        <li role="cell">
+                            <i class="fas fa-check pf-m-success"></i>&nbsp;${gettext(`Last seen: ${new Date(h.last_seen * 1000).toLocaleTimeString()}`)}
+                        </li>
+                        <li role="cell">
+                            ${h.version_outdated ?
+                            html`<i class="fas fa-times pf-m-danger"></i>&nbsp;
+                                ${gettext(`${h.version}, should be ${h.version_should}`)}` :
+                            html`<i class="fas fa-check pf-m-success"></i>&nbsp;${gettext(`Version: ${h.version}`)}`}
+                        </li>
+                    </ul>
+                </li>`;
+            });
+        }), html`<ak-spinner></ak-spinner>`)}</ul>`;
+    }
+
+}
--- a/web/src/pages/outposts/OutpostListPage.ts
+++ b/web/src/pages/outposts/OutpostListPage.ts
@ -0,0 +1,121 @@
+import { gettext } from "django";
+import { customElement, property } from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { PBResponse } from "../../api/Client";
+import { Outpost } 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";
+
+@customElement("ak-outpost-list")
+export class OutpostListPage extends TablePage<Outpost> {
+    pageTitle(): string {
+        return "Outposts";
+    }
+    pageDescription(): string | undefined {
+        return "Outposts are deployments of authentik components to support different environments and protocols, like reverse proxies.";
+    }
+    pageIcon(): string {
+        return "pf-icon pf-icon-zone";
+    }
+    searchEnabled(): boolean {
+        return true;
+    }
+    apiEndpoint(page: number): Promise<PBResponse<Outpost>> {
+        return Outpost.list({
+            ordering: this.order,
+            page: page,
+            search: this.search || "",
+        });
+    }
+    columns(): TableColumn[] {
+        return [
+            new TableColumn("Name", "name"),
+            new TableColumn("Providers"),
+            new TableColumn("Health and Version"),
+            new TableColumn(""),
+        ];
+    }
+
+    @property()
+    order = "name";
+
+    row(item: Outpost): TemplateResult[] {
+        return [
+            html`${item.name}`,
+            html`<ul>${item.providers.map((p) => {
+                return html`<li><a href="#/providers/${p.pk}">${p.name}</a></li>`;
+            })}</ul>`,
+            html`<ak-outpost-health outpostId=${item.pk}></ak-outpost-health>`,
+            html`
+            <ak-modal-button href="${Outpost.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="${Outpost.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>
+            <ak-modal-button>
+                <button slot="trigger" class="pf-c-button pf-m-tertiary">
+                    ${gettext('View Deployment Info')}
+                </button>
+                <div slot="modal">
+                    <div class="pf-c-modal-box__header">
+                        <h1 class="pf-c-title pf-m-2xl" id="modal-title">${gettext('Outpost Deployment Info')}</h1>
+                    </div>
+                    <div class="pf-c-modal-box__body" id="modal-description">
+                        <p><a href="https://goauthentik.io/docs/outposts/outposts/#deploy">${gettext('View deployment documentation')}</a></p>
+                        <form class="pf-c-form">
+                            <div class="pf-c-form__group">
+                                <label class="pf-c-form__label" for="help-text-simple-form-name">
+                                    <span class="pf-c-form__label-text">AUTHENTIK_HOST</span>
+                                </label>
+                                <input class="pf-c-form-control" readonly type="text" value="${document.location.toString()}" />
+                            </div>
+                            <div class="pf-c-form__group">
+                                <label class="pf-c-form__label" for="help-text-simple-form-name">
+                                    <span class="pf-c-form__label-text">AUTHENTIK_TOKEN</span>
+                                </label>
+                                <div>
+                                    <ak-token-copy-button identifier="${item.token_identifier}">
+                                        ${gettext('Click to copy token')}
+                                    </ak-token-copy-button>
+                                </div>
+                            </div>
+                            <h3>${gettext('If your authentik Instance is using a self-signed certificate, set this value.')}</h3>
+                            <div class="pf-c-form__group">
+                                <label class="pf-c-form__label" for="help-text-simple-form-name">
+                                    <span class="pf-c-form__label-text">AUTHENTIK_INSECURE</span>
+                                </label>
+                                <input class="pf-c-form-control" readonly type="text" value="true" />
+                            </div>
+                        </form>
+                    </div>
+                    <footer class="pf-c-modal-box__footer pf-m-align-left">
+                        <a class="pf-c-button pf-m-primary">${gettext('Close')}</a>
+                    </footer>
+                </div>
+            </ak-modal-button>`,
+        ];
+    }
+
+    renderToolbar(): TemplateResult {
+        return html`
+        <ak-modal-button href=${Outpost.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()}
+        `;
+    }
+}
--- a/web/src/routes.ts
+++ b/web/src/routes.ts
@ -14,6 +14,7 @@ import "./pages/events/RuleListPage";
 import "./pages/providers/ProviderListPage";
 import "./pages/providers/ProviderViewPage";
 import "./pages/property-mappings/PropertyMappingListPage";
+import "./pages/outposts/OutpostListPage";

 export const ROUTES: Route[] = [
    // Prevent infinite Shell loops
@ -42,4 +43,5 @@ export const ROUTES: Route[] = [
    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>`),
+    new Route(new RegExp("^/outposts$"), html`<ak-outpost-list></ak-outpost-list>`),
 ];