web: add API Drawer

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

web/src/api/Config.ts

@@ -4,13 +4,17 @@ import { VERSION } from "../constants";
 import { SentryIgnoredError } from "../common/errors";
 import { Config, Configuration, RootApi } from "authentik-api";
 import { getCookie } from "../utils";
+import { MIDDLEWARE } from "../elements/notifications/APIDrawer";
 
 export const DEFAULT_CONFIG = new Configuration({
     basePath: "/api/v2beta",
     headers: {
         "X-CSRFToken": getCookie("authentik_csrf"),
         "X-Authentik-Prevent-Basic": "true"
-    }
+    },
+    middleware: [
+        MIDDLEWARE
+    ],
 });
 
 export function configureSentry(): Promise<Config> {

web/src/constants.ts

@@ -8,3 +8,4 @@ export const PAGE_SIZE = 20;
 export const EVENT_REFRESH = "ak-refresh";
 export const EVENT_NOTIFICATION_TOGGLE = "ak-notification-toggle";
 export const EVENT_SIDEBAR_TOGGLE = "ak-sidebar-toggle";
+export const EVENT_API_DRAWER_REFRESH = "ak-api-drawer-refresh";

web/src/elements/notifications/APIDrawer.ts

@@ -0,0 +1,86 @@
+import { Middleware, ResponseContext } from "authentik-api";
+import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css";
+import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
+import AKGlobal from "../../authentik.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import { gettext } from "django";
+import { EVENT_API_DRAWER_REFRESH } from "../../constants";
+
+export interface RequestInfo {
+    method: string;
+    path: string;
+}
+
+export class APIMiddleware implements Middleware {
+    requests: RequestInfo[];
+
+    constructor() {
+        this.requests = [];
+    }
+
+    post?(context: ResponseContext): Promise<Response | void> {
+        this.requests.push({
+            method: (context.init.method || "GET").toUpperCase(),
+            path: context.url,
+        });
+        if (this.requests.length > MAX_REQUESTS) {
+            this.requests.shift();
+        }
+        window.dispatchEvent(
+            new CustomEvent(EVENT_API_DRAWER_REFRESH, {
+                bubbles: true,
+                composed: true,
+            })
+        );
+        return Promise.resolve(context.response);
+    }
+}
+
+export const MAX_REQUESTS = 50;
+export const MIDDLEWARE = new APIMiddleware();
+
+@customElement("ak-api-drawer")
+export class APIDrawer extends LitElement {
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFNotificationDrawer, PFContent, PFDropdown, AKGlobal];
+    }
+
+    constructor() {
+        super();
+        this.addEventListener(EVENT_API_DRAWER_REFRESH, () => {
+            this.requestUpdate();
+        });
+    }
+
+    renderItem(item: RequestInfo): TemplateResult {
+        return html`<li class="pf-c-notification-drawer__list-item pf-m-read">
+            <div class="pf-c-notification-drawer__list-item-header">
+                <h2 class="pf-c-notification-drawer__list-item-header-title">
+                    ${item.method}
+                </h2>
+            </div>
+            <p class="pf-c-notification-drawer__list-item-description">${item.path}</p>
+        </li>`;
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-drawer__body pf-m-no-padding">
+            <div class="pf-c-notification-drawer">
+                <div class="pf-c-notification-drawer__header pf-c-content">
+                    <h1>
+                        ${gettext("API Requests")}
+                    </h1>
+                </div>
+                <div class="pf-c-notification-drawer__body">
+                    <ul class="pf-c-notification-drawer__list">
+                        ${MIDDLEWARE.requests.map(n => this.renderItem(n))}
+                    </ul>
+                </div>
+            </div>
+        </div>`;
+    }
+
+}