web: add API Drawer
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
e7fd37efeb
commit
ec8dee3588
|
@ -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> {
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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>`;
|
||||
}
|
||||
|
||||
}
|
Reference in New Issue