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);

templates/deployment/board.html

@@ -51,6 +51,12 @@
                                             <span role="status">Deploying...</span>
                                         </button>
                                     </th>
+                                {% elif deployment.status == "PENDING" %}
+                                    <th name="deploy">
+                                        <button class="btn btn-primary btn-sm" type="button" disabled>
+                                            <span role="status">Pending...</span>
+                                        </button>
+                                    </th>
                                 {% else %}
                                     <th></th>
                                 {% endif %}

templates/deployment/details.html

@@ -37,7 +37,7 @@
                         <input type="text" readonly class="form-control-plaintext" id="status" value="{{ deployment.status }}">
                         <label for="status">Status</label>
                     </div>
-                    {% if deployment.status == "RUNNING" %}
+                    {% if deployment.status == "RUNNING" or deployment.status == "PENDING" %}
                         <div class="form-floating mb-3">
                             <div class="progress" role="progressbar" aria-label="deployment-progress" aria-valuenow="{{ deployment.progress }}" aria-valuemin="0" aria-valuemax="100">
                                 <div id="deployment-progress" class="progress-bar progress-bar-striped progress-bar-animated" style="width: {{ deployment.progress }}%"></div>
@@ -88,7 +88,7 @@
 {% endblock %}
 
 {% block script %}
-    {% if deployment.status == "RUNNING" %}
+    {% if deployment.status == "RUNNING" or deployment.status == "PENDING" %}
         <script src="{% static 'deployment/js/event_source_details.js' %}" />
         </script>
     {% endif %}