From 981555bcf30b950e5d0da48e3a70e6b6142b7afc Mon Sep 17 00:00:00 2001
From: rmanach <manach.r@msn.com>
Date: Tue, 26 Sep 2023 13:28:59 +0200
Subject: [PATCH] add spinner when receiving running state + fix stream in
 details for pending state

---
 .../static/deployment/js/event_source.js      |  7 +++++-
 templates/deployment/details.html             | 22 +++++++++----------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/deployment/static/deployment/js/event_source.js b/deployment/static/deployment/js/event_source.js
index fb4ac0e..826fd8b 100644
--- a/deployment/static/deployment/js/event_source.js
+++ b/deployment/static/deployment/js/event_source.js
@@ -36,10 +36,15 @@ var start = function (url) {
                 innerBtn.setAttribute("type", "button");
                 innerBtn.className = "btn btn-primary btn-sm"
 
-                innerSpan = document.createElement("span");
+                var innerSpan = document.createElement("span");
                 innerSpan.setAttribute("role", "status");
                 innerSpan.innerHTML = "Deploying...";
+
+                var innerSpinner = document.createElement("span");
+                innerSpinner.className = "spinner-border spinner-border-sm";
+                innerSpinner.setAttribute("aria-hidden", "true");
                 
+                innerBtn.appendChild(innerSpinner);
                 innerBtn.appendChild(innerSpan);
 
                 button.innerHTML = "";
diff --git a/templates/deployment/details.html b/templates/deployment/details.html
index 1c25b92..4ae7eb3 100644
--- a/templates/deployment/details.html
+++ b/templates/deployment/details.html
@@ -4,21 +4,19 @@
 
 {% block title %} Deployment details: {{ deployment.name }} {% endblock %}
 
-{% if deployment.status == "RUNNING" %}
-    {% block bodyattr %}
-        {% if deployment.status == "RUNNING" %}
+{% block bodyattr %}
+        {% if deployment.status == "RUNNING" or deployment.status == "PENDING" %}
             onload="start('{{ url|safe }}');"
         {% endif %}
-    {% endblock %}
+{% endblock %}
 
-    {% block headscript %}
-        {% if deployment.status == "RUNNING" or deployment.status == "PENDING" %}
-            <script src="{% static 'django_eventstream/json2.js' %}"></script>
-            <script src="{% static 'django_eventstream/eventsource.min.js' %}"></script>
-            <script src="{% static 'django_eventstream/reconnecting-eventsource.js' %}"></script>
-        {% endif %}
-    {% endblock %}
-{% endif %}
+{% block headscript %}
+    {% if deployment.status == "RUNNING" or deployment.status == "PENDING" %}   
+        <script src="{% static 'django_eventstream/json2.js' %}"></script>
+        <script src="{% static 'django_eventstream/eventsource.min.js' %}"></script>
+        <script src="{% static 'django_eventstream/reconnecting-eventsource.js' %}"></script>
+    {% endif %}
+{% endblock %}
 
 {% block content %}
     <div class="container-fluid">