web: fix circular dependency

This commit is contained in:
Jens Langhammer 2021-03-03 10:41:04 +01:00
parent c002c4b610
commit 9e3d1f0baa
4 changed files with 3 additions and 24 deletions

View File

@ -14,7 +14,7 @@ export interface LoginMetrics {
@customElement("ak-admin-logins-chart") @customElement("ak-admin-logins-chart")
export class AdminLoginsChart extends LitElement { export class AdminLoginsChart extends LitElement {
@property() @property({type: Array})
url: string[] = []; url: string[] = [];
chart?: Chart; chart?: Chart;

View File

@ -1,6 +1,5 @@
import { gettext } from "django"; import { gettext } from "django";
import { LitElement, html, customElement, TemplateResult, property } from "lit-element"; import { LitElement, html, customElement, TemplateResult, property } from "lit-element";
import { DefaultClient } from "../../api/Client";
import "./Message"; import "./Message";
import { APIMessage } from "./Message"; import { APIMessage } from "./Message";
@ -15,7 +14,6 @@ export function showMessage(message: APIMessage): void {
@customElement("ak-message-container") @customElement("ak-message-container")
export class MessageContainer extends LitElement { export class MessageContainer extends LitElement {
url = DefaultClient.makeUrl(["root", "messages"]);
@property({attribute: false}) @property({attribute: false})
messages: APIMessage[] = []; messages: APIMessage[] = [];
@ -36,10 +34,6 @@ export class MessageContainer extends LitElement {
} }
} }
firstUpdated(): void {
this.fetchMessages();
}
connect(): void { connect(): void {
const wsUrl = `${window.location.protocol.replace("http", "ws")}//${ const wsUrl = `${window.location.protocol.replace("http", "ws")}//${
window.location.host window.location.host
@ -74,21 +68,6 @@ export class MessageContainer extends LitElement {
}); });
} }
/* Fetch messages which were stored in the session.
* This mostly gets messages which were created when the user arrives/leaves the site
* and especially the login flow */
fetchMessages(): Promise<void> {
console.debug("authentik/messages: fetching messages over direct api");
return fetch(this.url)
.then((r) => r.json())
.then((r: APIMessage[]) => {
r.forEach((m: APIMessage) => {
this.messages.push(m);
this.requestUpdate();
});
});
}
render(): TemplateResult { render(): TemplateResult {
return html`<ul class="pf-c-alert-group pf-m-toast"> return html`<ul class="pf-c-alert-group pf-m-toast">
${this.messages.map((m) => { ${this.messages.map((m) => {

View File

@ -30,7 +30,7 @@ export class AdminOverviewPage extends LitElement {
<section class="pf-c-page__main-section"> <section class="pf-c-page__main-section">
<div class="pf-l-gallery pf-m-gutter"> <div class="pf-l-gallery pf-m-gutter">
<ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Logins over the last 24 hours" style="grid-column-end: span 3;grid-row-end: span 2;"> <ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Logins over the last 24 hours" style="grid-column-end: span 3;grid-row-end: span 2;">
<ak-admin-logins-chart url="${["admin", "metrics"]}"></ak-admin-logins-chart> <ak-admin-logins-chart .url="${["admin", "metrics"]}"></ak-admin-logins-chart>
</ak-aggregate-card> </ak-aggregate-card>
<ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Apps with most usage" style="grid-column-end: span 2;grid-row-end: span 3;"> <ak-aggregate-card class="pf-l-gallery__item pf-m-4-col" icon="pf-icon pf-icon-server" header="Apps with most usage" style="grid-column-end: span 2;grid-row-end: span 3;">
<ak-top-applications-table></ak-top-applications-table> <ak-top-applications-table></ak-top-applications-table>

View File

@ -70,7 +70,7 @@ export class ApplicationViewPage extends LitElement {
<div class="pf-c-card__body"> <div class="pf-c-card__body">
${this.application ? html` ${this.application ? html`
<ak-admin-logins-chart <ak-admin-logins-chart
url="${["core", "applications", this.application?.slug, "metrics"]}"> .url="${["core", "applications", this.application?.slug, "metrics"]}">
</ak-admin-logins-chart>`: ""} </ak-admin-logins-chart>`: ""}
</div> </div>
</div> </div>