fix event source conn

Makefile

@@ -1,3 +1,6 @@
+ROOT_DIR = $(dir $(realpath $(lastword $(MAKEFILE_LIST))))
+PYTHON = $(ROOT_DIR)venv/bin/python
+
 format:
 	@./venv/bin/black mumui/*.py deployment/*.py
 
@@ -24,6 +27,10 @@ build:
 	$(MAKE) nginx-local
 	$(MAKE) django
 
+.PHONY: static
+static:
+	$(PYTHON) manage.py collectstatic --no-input
+
 run:
 	docker compose up
 

deployment/static/deployment/js/event_source.js

@@ -1,5 +1,11 @@
+var es = null;
+
 var start = function (url) {
-    var es = new ReconnectingEventSource(url);
+    if (es) {
+        console.log("closing es", es);
+        es.close();
+    }
+    es = new ReconnectingEventSource(url);
 
     console.log("url: " + url);
 
@@ -60,4 +66,18 @@ var start = function (url) {
             }
         }
     }, false);
-};
+};
+
+document.querySelectorAll(".btn-details").forEach(btn => {
+    btn.addEventListener("click", function(e) {
+        const durl = e.currentTarget.getAttribute("durl");
+        console.log("details url:", durl);
+
+        if (es) {
+            window.es.close()
+            console.log("closing sse....");
+        };
+
+        window.location = durl;
+    });
+});

deployment/static/deployment/js/event_source_details.js

@@ -1,5 +1,11 @@
 var start = function (url) {
-    var es = new ReconnectingEventSource(url);
+    if (window.es) {
+        console.log("closing es", window.es);
+        window.es.close();
+    }
+
+    es = new ReconnectingEventSource(url);
+    window.es = es;
 
     console.log("url: " + url);
 

templates/deployment/board.html

@@ -4,16 +4,6 @@
 
 {% block title %} Deployments board {% endblock %}
 
-{% block headscript %}
-    <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>
-{% endblock %}
-
-{% block bodyattr %}
-    onload="start('{{ url|safe }}');"
-{% endblock %}
-
 {% block content %}
     <div class="container-fluid">
         <div class="row justify-content-md-center">
@@ -33,9 +23,7 @@
                                 <th name="type">{{ deployment.type }}</th>
                                 <th name="status">{{ deployment.status }}</th>
                                 <th>
-                                    <a href="{% url 'deployment-details' deployment.id %}">
+                                    <button class="btn btn-primary btn-sm btn btn-details" durl="{% url 'deployment-details' deployment.id %}">Details</button>
-                                        <button class="btn btn-primary btn-sm">Details</button>
-                                    </a>
                                 </th>
                                 {% if deployment.status == "FAILED" or deployment.status == "READY" %}
                                     <th name="deploy">
@@ -85,6 +73,10 @@
 {% endblock %}
 
 {% block script %}
+    <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>
     <script src="{% static 'deployment/js/event_source.js' %}" />
     </script>
+    <script>start('{{ url|safe }}');</script>
 {% endblock %}

templates/deployment/details.html

@@ -4,20 +4,6 @@
 
 {% block title %} Deployment details: {{ deployment.name }} {% endblock %}
 
-{% block bodyattr %}
-        {% if deployment.status == "RUNNING" or deployment.status == "PENDING" %}
-            onload="start('{{ url|safe }}');"
-        {% endif %}
-{% 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 %}
-
 {% block content %}
     <div class="container-fluid">
         <div class="row justify-content-md-center">
@@ -71,7 +57,7 @@
                             {% csrf_token %}
                         </form>
                     {% endif %}
-                    <button type="button" onclick="goBack()" class="btn btn-secondary">Back</button>
+                    <button id="btn-back" durl="{% url 'deployments' %}" type="button" class="btn btn-secondary">Back</button>
                     {% if deployment.status != "RUNNING" and deployment.status != "PENDING" %}
                         <button form="delete-deployment" type="submit" class="btn btn-danger">Delete</button>
                     {% else %}
@@ -87,12 +73,23 @@
 
 {% block script %}
     {% if deployment.status == "RUNNING" or deployment.status == "PENDING" %}
-        <script src="{% static 'deployment/js/event_source_details.js' %}" />
+        <script src="{% static 'django_eventstream/json2.js' %}"></script>
-        </script>
+        <script src="{% static 'django_eventstream/eventsource.min.js' %}"></script>
+        <script src="{% static 'django_eventstream/reconnecting-eventsource.js' %}"></script>
+        <script src="{% static 'deployment/js/event_source_details.js' %}" /></script>
+        <script>start('{{ url|safe }}');</script>
     {% endif %}
     <script>
-        function goBack() {
+        document.querySelector("#btn-back").addEventListener("click", function(e) {
-            window.location={% url 'deployments' %};
+            const durl = e.currentTarget.getAttribute("durl");
-        }
+            console.log("deployment url:", durl);
+
+            if (window.es) {
+                window.es.close()
+                console.log("closing sse....");
+            };
+
+            window.location = durl;
+        });
     </script>
 {% endblock %}