dockerize app + add celery + impl pushpin for message events

templates/deployment/board.html

@@ -23,6 +23,7 @@
         <th>type</th>
         <th>status</th>
         <th></th>
+        <th></th>
       </tr>
       {% for deployment in page_obj %}
       <tr id="{{ deployment.id }}">
@@ -34,6 +35,14 @@
             <button>details</button>
           </a>
         </th>
+        {% if deployment.status == "FAILED" or deployment.status == "READY" %}
+        <th name="deploy">
+          <form action="{% url 'deployment-launch' deployment.id %}?page={{ page_obj.number }}" method="post">
+            {% csrf_token %}
+            <input type="submit" value="deploy">
+          </form>
+        </th>
+        {% endif %}
       </tr>
       {% endfor %}
     </table>
@@ -72,13 +81,35 @@
     console.log('connected');
   };
 
-  es.onerror = function () {
+  es.addEventListener('stream-error', function (e) {
+    es.close();
+    message = JSON.parse(e.data);
+    console.log('stream error: ' + message.condition + ': ' + message.text);
+  }, false);
+
+  es.onerror = function (e) {
     console.log('connection error');
   };
 
-  es.addEventListener('deployment', function (e) {
-    e = JSON.parse(e.data);
-    console.log('stream reset: ' + JSON.stringify(e.channels));
+  // listening on `message` events and update the corresponding table line.
+  // If the status is `FAILED`, we reload the window to ensure a new csrf_token.
+  es.addEventListener('message', function (e) {
+    message = JSON.parse(e.data);
+    console.log("id: " + message.id);
+    console.log("status: " + message.status);
+
+    const tr = document.getElementById(message.id);
+    if (tr) {
+      var th = tr.querySelector("th[name='status']");
+      th.innerHTML = message.status;
+
+      if (message.status == "FAILED") {
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      }
+    }
+
   }, false);
 };
 </script>