web: fix circular dependency

web/src/elements/AdminLoginsChart.ts

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

web/src/elements/messages/MessageContainer.ts

@@ -1,6 +1,5 @@
 import { gettext } from "django";
 import { LitElement, html, customElement, TemplateResult, property } from "lit-element";
-import { DefaultClient } from "../../api/Client";
 import "./Message";
 import { APIMessage } from "./Message";
 
@@ -15,7 +14,6 @@ export function showMessage(message: APIMessage): void {
 
 @customElement("ak-message-container")
 export class MessageContainer extends LitElement {
-    url = DefaultClient.makeUrl(["root", "messages"]);
 
     @property({attribute: false})
     messages: APIMessage[] = [];
@@ -36,10 +34,6 @@ export class MessageContainer extends LitElement {
         }
     }
 
-    firstUpdated(): void {
-        this.fetchMessages();
-    }
-
     connect(): void {
         const wsUrl = `${window.location.protocol.replace("http", "ws")}//${
             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 {
         return html`<ul class="pf-c-alert-group pf-m-toast">
             ${this.messages.map((m) => {

web/src/pages/admin-overview/AdminOverviewPage.ts

@@ -30,7 +30,7 @@ export class AdminOverviewPage extends LitElement {
         <section class="pf-c-page__main-section">
             <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-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 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>

web/src/pages/applications/ApplicationViewPage.ts

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