diff --git a/web/src/api/Config.ts b/web/src/api/Config.ts index 6d4d9c6a4..6cd207e57 100644 --- a/web/src/api/Config.ts +++ b/web/src/api/Config.ts @@ -1,6 +1,6 @@ import { Config, Configuration, CoreApi, CurrentTenant, Middleware, ResponseContext, RootApi, Tenant } from "authentik-api"; import { getCookie } from "../utils"; -import { API_DRAWER_MIDDLEWARE } from "../elements/notifications/APIDrawer"; +import { APIMiddleware } from "../elements/notifications/APIDrawer"; import { MessageMiddleware } from "../elements/messages/Middleware"; export class LoggingMiddleware implements Middleware { @@ -62,7 +62,7 @@ export const DEFAULT_CONFIG = new Configuration({ "X-CSRFToken": getCookie("authentik_csrf"), }, middleware: [ - API_DRAWER_MIDDLEWARE, + new APIMiddleware(), new MessageMiddleware(), new LoggingMiddleware(), ], diff --git a/web/src/authentik.css b/web/src/authentik.css index c460537fd..82ad6f830 100644 --- a/web/src/authentik.css +++ b/web/src/authentik.css @@ -230,6 +230,9 @@ body { .pf-c-form-control[readonly] { background-color: var(--ak-dark-background-light); } + .pf-c-button.pf-m-plain:hover { + color: var(--ak-dark-foreground); + } .pf-c-button.pf-m-control { --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter) var(--ak-dark-background-lighter) diff --git a/web/src/constants.ts b/web/src/constants.ts index 5117d9bbd..9d251095c 100644 --- a/web/src/constants.ts +++ b/web/src/constants.ts @@ -9,7 +9,8 @@ export const TITLE_DEFAULT = "authentik"; export const ROUTE_SEPARATOR = ";"; export const EVENT_REFRESH = "ak-refresh"; -export const EVENT_NOTIFICATION_TOGGLE = "ak-notification-toggle"; +export const EVENT_NOTIFICATION_DRAWER_TOGGLE = "ak-notification-toggle"; +export const EVENT_API_DRAWER_TOGGLE = "ak-api-drawer-toggle"; export const EVENT_SIDEBAR_TOGGLE = "ak-sidebar-toggle"; export const EVENT_API_DRAWER_REFRESH = "ak-api-drawer-refresh"; export const EVENT_WS_MESSAGE = "ak-ws-message"; diff --git a/web/src/elements/PageHeader.ts b/web/src/elements/PageHeader.ts index 2a13c8936..9524fcf89 100644 --- a/web/src/elements/PageHeader.ts +++ b/web/src/elements/PageHeader.ts @@ -12,7 +12,7 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css"; import AKGlobal from "../authentik.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css"; -import { EVENT_NOTIFICATION_TOGGLE, EVENT_SIDEBAR_TOGGLE, TITLE_DEFAULT } from "../constants"; +import { EVENT_API_DRAWER_TOGGLE, EVENT_NOTIFICATION_DRAWER_TOGGLE, EVENT_SIDEBAR_TOGGLE, TITLE_DEFAULT } from "../constants"; import { DEFAULT_CONFIG, tenant } from "../api/Config"; import { EventsApi } from "../../api/dist"; @@ -127,13 +127,26 @@ export class PageHeader extends LitElement { ${this.description ? html`

${this.description}

` : html``} + `; + + `; } } diff --git a/web/src/elements/notifications/APIDrawer.ts b/web/src/elements/notifications/APIDrawer.ts index 27e9c7f00..80645fea6 100644 --- a/web/src/elements/notifications/APIDrawer.ts +++ b/web/src/elements/notifications/APIDrawer.ts @@ -1,77 +1,114 @@ import { Middleware, ResponseContext } from "authentik-api"; -import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element"; +import { css, CSSResult, customElement, html, LitElement, property, 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 PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; +import AKGlobal from "../../authentik.css"; import { t } from "@lingui/macro"; -import { EVENT_API_DRAWER_REFRESH } from "../../constants"; +import { EVENT_API_DRAWER_REFRESH, EVENT_API_DRAWER_TOGGLE } from "../../constants"; export interface RequestInfo { method: string; path: string; + status: number; } export class APIMiddleware implements Middleware { - requests: RequestInfo[]; - - constructor() { - this.requests = []; - } post?(context: ResponseContext): Promise { - this.requests.push({ + const request: RequestInfo = { method: (context.init.method || "GET").toUpperCase(), path: context.url, - }); - if (this.requests.length > MAX_REQUESTS) { - this.requests.shift(); - } + status: context.response.status, + }; window.dispatchEvent( new CustomEvent(EVENT_API_DRAWER_REFRESH, { bubbles: true, composed: true, + detail: request, }), ); return Promise.resolve(context.response); } -} -export const MAX_REQUESTS = 50; -export const API_DRAWER_MIDDLEWARE = new APIMiddleware(); +} @customElement("ak-api-drawer") export class APIDrawer extends LitElement { + + @property({attribute: false}) + requests: RequestInfo[] = []; + static get styles(): CSSResult[] { - return [PFBase, PFNotificationDrawer, PFContent, PFDropdown, AKGlobal]; + return [PFBase, PFNotificationDrawer, PFButton, PFContent, PFDropdown, AKGlobal, css` + .pf-c-notification-drawer__header { + height: 114px; + align-items: center; + } + .pf-c-notification-drawer__header-action, + .pf-c-notification-drawer__header-action-close, + .pf-c-notification-drawer__header-action-close > .pf-c-button.pf-m-plain { + height: 100%; + } + .pf-c-notification-drawer__list-item-description { + white-space: pre-wrap; + font-family: monospace; + } + `]; } constructor() { super(); - this.addEventListener(EVENT_API_DRAWER_REFRESH, () => { + window.addEventListener(EVENT_API_DRAWER_REFRESH, ((e: CustomEvent) => { + this.requests.splice(0, 0, e.detail); + if (this.requests.length > 50) { + this.requests.shift(); + } this.requestUpdate(); - }); + }) as EventListener); } renderItem(item: RequestInfo): TemplateResult { return html`
  • -

    ${item.method}

    +

    ${item.method}: ${item.status}

    -

    ${item.path}

    + ${item.path}
    • `; } render(): TemplateResult { return html`
    -
    -

    ${t`API Requests`}

    +
    +
    +

    ${t`API Requests`}

    +
    +
    +
    + +
    +
      - ${API_DRAWER_MIDDLEWARE.requests.map((n) => this.renderItem(n))} + ${this.requests.map((n) => this.renderItem(n))}
    diff --git a/web/src/elements/notifications/NotificationDrawer.ts b/web/src/elements/notifications/NotificationDrawer.ts index 6eccdc95c..91fb6d1e8 100644 --- a/web/src/elements/notifications/NotificationDrawer.ts +++ b/web/src/elements/notifications/NotificationDrawer.ts @@ -17,7 +17,7 @@ import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css" import PFButton from "@patternfly/patternfly/components/Button/button.css"; import AKGlobal from "../../authentik.css"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; -import { EVENT_NOTIFICATION_TOGGLE } from "../../constants"; +import { EVENT_NOTIFICATION_DRAWER_TOGGLE } from "../../constants"; import { ActionToLabel } from "../../pages/events/utils"; @customElement("ak-notification-drawer") @@ -135,7 +135,7 @@ export class NotificationDrawer extends LitElement {
    diff --git a/web/src/pages/events/TransportListPage.ts b/web/src/pages/events/TransportListPage.ts index 0c19647ba..2781e8d35 100644 --- a/web/src/pages/events/TransportListPage.ts +++ b/web/src/pages/events/TransportListPage.ts @@ -77,16 +77,7 @@ export class TransportListPage extends TablePage { return [ html`${item.name}`, html`${item.modeVerbose}`, - html` { - return new EventsApi(DEFAULT_CONFIG).eventsTransportsTestCreate({ - uuid: item.pk || "", - }); - }} - > - ${t`Test`} - - + html` ${t`Update`} ${t`Update Notification Transport`} @@ -94,7 +85,16 @@ export class TransportListPage extends TablePage { - `, + + { + return new EventsApi(DEFAULT_CONFIG).eventsTransportsTestCreate({ + uuid: item.pk || "", + }); + }} + > + + `, ]; }