static: add websocket support for messages, move console.log to debug

passbook/static/static/src/api/application.ts

@@ -1,7 +1,7 @@
 export class Application {
-    pk: string;
-    name: string;
-    slug: string;
+    pk?: string;
+    name?: string;
+    slug?: string;
     provider?: number;
 
     meta_launch_url?: string;

passbook/static/static/src/elements/ActionButton.ts

@@ -1,5 +1,4 @@
 import { getCookie } from "../utils";
-import { updateMessages } from "./Messages";
 import { css, customElement, html, LitElement, property } from "lit-element";
 // @ts-ignore
 import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
@@ -56,8 +55,6 @@ export class ActionButton extends LitElement {
         this.classList.remove(PROGRESS_CLASS);
         this.classList.replace(PRIMARY_CLASS, statusClass);
         this.requestUpdate();
-        // Trigger messages to update
-        updateMessages();
         setTimeout(() => {
             this.classList.replace(statusClass, PRIMARY_CLASS);
             this.requestUpdate();

passbook/static/static/src/elements/Messages.ts

@@ -11,13 +11,9 @@ let ID = function (prefix: string) {
     return prefix + Math.random().toString(36).substr(2, 9);
 };
 
-export function updateMessages() {
-    const messageElement = <Messages>document?.querySelector("pb-messages");
-    messageElement.fetchMessages();
-}
-
 interface Message {
-    level_tag: string;
+    levelTag: string;
+    tags: string[];
     message: string;
 }
 
@@ -29,38 +25,51 @@ export class Messages extends LitElement {
     @property()
     messages: string[] = [];
 
+    messageSocket?: WebSocket;
+
     createRenderRoot() {
         return this;
     }
 
-    firstUpdated() {
-        this.fetchMessages();
+    constructor() {
+        super();
+        this.connect();
     }
 
-    fetchMessages() {
-        return fetch(this.url)
-            .then((r) => r.json())
-            .then((r) => (this.messages = r))
-            .then((r) => {
-                const container = <HTMLElement>(
-                    this.querySelector(".pf-c-alert-group")!
-                );
-                r.forEach((message: Message) => {
-                    const messageElement = this.renderMessage(message);
-                    container.appendChild(messageElement);
-                });
-            });
+    connect() {
+        const wsUrl = `${window.location.protocol.replace("http", "ws")}//${
+            window.location.host
+        }/ws/client/`;
+        this.messageSocket = new WebSocket(wsUrl);
+        this.messageSocket.addEventListener("open", (e) => {
+            console.debug(`passbook/messages: connected to ${wsUrl}`);
+        });
+        this.messageSocket.addEventListener("close", (e) => {
+            console.debug(`passbook/messages: closed ws connection: ${e}`);
+            setTimeout(() => {
+                console.debug(`passbook/messages: reconnecting ws`);
+                this.connect();
+            }, 1000);
+        });
+        this.messageSocket.addEventListener("message", (e) => {
+            const container = <HTMLElement>(
+                this.querySelector(".pf-c-alert-group")!
+            );
+            const data = JSON.parse(e.data);
+            const messageElement = this.renderMessage(data);
+            container.appendChild(messageElement);
+        });
     }
 
     renderMessage(message: Message): ChildNode {
         const id = ID("pb-message");
         const el = document.createElement("template");
         el.innerHTML = `<li id=${id} class="pf-c-alert-group__item">
-            <div class="pf-c-alert pf-m-${message.level_tag} ${
-            message.level_tag === "error" ? "pf-m-danger" : ""
+            <div class="pf-c-alert pf-m-${message.levelTag} ${
+            message.levelTag === "error" ? "pf-m-danger" : ""
         }">
                 <div class="pf-c-alert__icon">
-                    <i class="${LEVEL_ICON_MAP[message.level_tag]}"></i>
+                    <i class="${LEVEL_ICON_MAP[message.levelTag]}"></i>
                 </div>
                 <p class="pf-c-alert__title">
                     ${message.message}

passbook/static/static/src/elements/ModalButton.ts

@@ -10,7 +10,6 @@ import ButtonStyle from "@patternfly/patternfly/components/Button/button.css";
 // @ts-ignore
 import fa from "@fortawesome/fontawesome-free/css/solid.css";
 
-import { updateMessages } from "../elements/Messages";
 import { convertToSlug } from "../utils";
 
 @customElement("pb-modal-button")
@@ -96,13 +95,13 @@ export class ModalButton extends LitElement {
                                 this.querySelector(
                                     "[slot=modal]"
                                 )!.innerHTML = data;
-                                console.log(
+                                console.debug(
                                     `passbook/modalbutton: re-showing form`
                                 );
                                 this.updateHandlers();
                             } else {
                                 this.open = false;
-                                console.log(
+                                console.debug(
                                     `passbook/modalbutton: successful submit`
                                 );
                                 this.dispatchEvent(
@@ -110,7 +109,6 @@ export class ModalButton extends LitElement {
                                         bubbles: true,
                                     })
                                 );
-                                updateMessages();
                             }
                         })
                         .catch((e) => {

passbook/static/static/src/pages/FlowShellCard.ts

@@ -1,5 +1,4 @@
 import { LitElement, html, customElement, property } from "lit-element";
-import { updateMessages } from "../elements/Messages";
 
 enum ResponseType {
     redirect = "redirect",
@@ -53,11 +52,10 @@ export class FlowShellCard extends LitElement {
                 this.flowBody = data.body;
                 await this.requestUpdate();
                 this.checkAutofocus();
-                updateMessages();
                 this.loadFormCode();
                 this.setFormSubmitHandlers();
             default:
-                console.log(
+                console.debug(
                     `passbook/flows: unexpected data type ${data.type}`
                 );
                 break;
@@ -83,14 +81,16 @@ export class FlowShellCard extends LitElement {
         for (let index = 0; index < form.elements.length; index++) {
             const element = <HTMLInputElement>form.elements[index];
             if (element.value === form.action) {
-                console.log(
+                console.debug(
                     "passbook/flows: Found Form action URL in form elements, not changing form action."
                 );
                 return false;
             }
         }
         form.action = this.flowBodyUrl;
-        console.log(`passbook/flows: updated form.action ${this.flowBodyUrl}`);
+        console.debug(
+            `passbook/flows: updated form.action ${this.flowBodyUrl}`
+        );
         return true;
     }
 
@@ -102,13 +102,13 @@ export class FlowShellCard extends LitElement {
 
     setFormSubmitHandlers() {
         this.querySelectorAll("form").forEach((form) => {
-            console.log(
+            console.debug(
                 `passbook/flows: Checking for autosubmit attribute ${form}`
             );
             this.checkAutosubmit(form);
-            console.log(`passbook/flows: Setting action for form ${form}`);
+            console.debug(`passbook/flows: Setting action for form ${form}`);
             this.updateFormAction(form);
-            console.log(`passbook/flows: Adding handler for form ${form}`);
+            console.debug(`passbook/flows: Adding handler for form ${form}`);
             form.addEventListener("submit", (e) => {
                 e.preventDefault();
                 let formData = new FormData(form);

passbook/static/static/src/pages/RouterOutlet.ts

@@ -26,7 +26,7 @@ export class Route {
 
     redirect(to: string): Route {
         this.callback = () => {
-            console.log(`passbook/router: redirecting ${to}`);
+            console.debug(`passbook/router: redirecting ${to}`);
             window.location.hash = `#${to}`;
             return html``;
         };
@@ -116,7 +116,9 @@ export class RouterOutlet extends LitElement {
         }
         let matchedRoute: RouteMatch | null = null;
         ROUTES.forEach((route) => {
-            console.debug(`passbook/router: matching ${activeUrl} against ${route.url}`);
+            console.debug(
+                `passbook/router: matching ${activeUrl} against ${route.url}`
+            );
             const match = route.url.exec(activeUrl);
             if (match != null) {
                 matchedRoute = new RouteMatch(route);

passbook/static/static/src/pages/SiteShell.ts

@@ -59,7 +59,9 @@ export class SiteShell extends LitElement {
                 if (r.ok) {
                     return r;
                 }
-                console.log(`passbook/site-shell: Request failed ${this._url}`);
+                console.debug(
+                    `passbook/site-shell: Request failed ${this._url}`
+                );
                 window.location.hash = "#/";
                 throw new Error("Request failed");
             })