From 59deefcd5ad9bbe194be4c3d2ce9d4b7beecdecd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20Bidoul?= <stephane.bidoul@gmail.com>
Date: Sat, 20 Nov 2021 12:20:56 +0100
Subject: [PATCH] Add rudimentary builds page

---
 src/runboat/webui/builds.html              | 48 ++++++++++++++++++++++
 src/runboat/webui/runboat-build-element.js | 11 ++---
 2 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 src/runboat/webui/builds.html
diff --git a/src/runboat/webui/builds.html b/src/runboat/webui/builds.html
new file mode 100644
index 0000000..b78e2e1
--- /dev/null
+++ b/src/runboat/webui/builds.html
@@ -0,0 +1,48 @@
+<html>
+    <head>
+        <title>Runboat builds</title>
+    </head>
+    <body>
+        <div id="builds"></div>
+        <script type="module">
+            import {RunboatBuildElement} from './runboat-build-element.js'
+            customElements.define('runboat-build', RunboatBuildElement);
+
+            const repo = new URLSearchParams(window.location.search).get("repo");
+            const target_branch = new URLSearchParams(window.location.search).get("target_branch");
+            var url = `/api/v1/build-events?repo=${repo}`
+            if (target_branch) {
+                url += `&target_branch=${target_branch}`
+            }
+            // TODO: evtSource error handling
+            const evtSource = new EventSource(url);
+            evtSource.onmessage = function(event) {
+                var oEvent = JSON.parse(event.data);
+                if (oEvent.event == "upd") {
+                    var buildElement = document.getElementById(oEvent.build.name);
+                    if (buildElement) {
+                        buildElement.build = oEvent.build;
+                    } else {
+                        var rowId = `branch-${oEvent.build.target_branch}`;
+                        if (oEvent.build.pr) {
+                            rowId += `-pr-${oEvent.build.pr}`
+                        }
+                        var rowElement = document.getElementById(rowId);
+                        if (!rowElement) {
+                            rowElement = document.createElement("div");
+                            rowElement.id = rowId;
+                            document.getElementById("builds").appendChild(rowElement);
+                        }
+                        buildElement = document.createElement("runboat-build");
+                        buildElement.id = oEvent.build.name;
+                        rowElement.appendChild(buildElement);
+                    }
+                } else {
+                    const buildElement = document.getElementById(oEvent.build.name);
+                    buildElement.remove();
+                }
+                buildElement.build = oEvent.event == "upd" ? oEvent.build : {};
+            }
+        </script>
+    </body>
+</html>
diff --git a/src/runboat/webui/runboat-build-element.js b/src/runboat/webui/runboat-build-element.js
index e43135a..9d23a4f 100644
--- a/src/runboat/webui/runboat-build-element.js
+++ b/src/runboat/webui/runboat-build-element.js
@@ -14,11 +14,8 @@ class RunboatBuildElement extends LitElement {
 
     render() {
         return html`
-            <p>Build: ${this.build.name}
-                ${this.build.status == "started"?
-                   html`<a href="${this.build.deploy_link}">=&gt; live</a>`:""
-                }
-            </p>
+        <div>
+            <p>Build: ${this.build.name}</p>
             <p>
                 Repo: ${this.build.repo}
                 ${this.build.pr?
@@ -39,7 +36,11 @@ class RunboatBuildElement extends LitElement {
             <p>
                 <button @click="${this.stopHandler}" ?disabled="${this.build.status != "started"}">stop</button>
                 <button @click="${this.startHandler}" ?disabled="${this.build.status != "stopped"}">start</button>
+                ${this.build.status == "started"?
+                   html`<a href="${this.build.deploy_link}">=&gt; live</a>`:""
+                }
             </p>
+        <div>
         `;
     }
 
