update status on listening pending events

deployment/static/deployment/js/event_source.js

@@ -30,6 +30,22 @@ var start = function (url) {
             status.innerHTML = message.status;
 
             var button = tr.querySelector("th[name='deploy']");
+            if (message.status == "RUNNING") {
+                var innerBtn = document.createElement("button");
+                innerBtn.setAttribute("disabled", "");
+                innerBtn.setAttribute("type", "button");
+                innerBtn.className = "btn btn-primary btn-sm"
+
+                innerSpan = document.createElement("span");
+                innerSpan.setAttribute("role", "status");
+                innerSpan.innerHTML = "Deploying...";
+                
+                innerBtn.appendChild(innerSpan);
+
+                button.innerHTML = "";
+                button.appendChild(innerBtn);
+            }
+
             if (message.status == "SUCCESS") {
                 button.innerHTML = "";
             }

deployment/static/deployment/js/event_source_details.js

@@ -23,8 +23,14 @@ var start = function (url) {
         console.log("status: " + message.status);
         console.log("progress: " + message.progress);
 
+        var status = document.getElementById("status");
+        status.setAttribute("value", message.status)
+
         var progress = document.getElementById("deployment-progress");
-        progress.style["width"] = message.progress+"%";
+        // no progress in `PENDING` state
+        if (progress !== undefined) {
+            progress.style["width"] = message.progress+"%";
+        }
 
         if (message.status == "SUCCESS") {
             setTimeout(() => window.location.reload(), 1000);