add sse server

templates/deployment/board.html

@@ -1,15 +1,42 @@
 {% extends 'base.html' %}
 
+{% load static %}
+
 {% block title %}deployment's 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();"
+{% endblock %}
+
 {% block content %}
   {{ user.username }}'s board
   {% if page_obj %}
-    <ul>
+    <table>
+      <tr>
+        <th>name</th>
+        <th>type</th>
+        <th>status</th>
+        <th></th>
+      </tr>
       {% for deployment in page_obj %}
-        <li><a href="{% url 'deployment-details' deployment.id %}">{{ deployment.name }} | {{ deployment.type }} | {{ deployment.status }}</a></li>
+      <tr id="{{ deployment.id }}">
+        <th name="name">{{ deployment.name }}</th>
+        <th name="type">{{ deployment.type }}</th>
+        <th name="status">{{ deployment.status }}</th>
+        <th>
+          <a href="{% url 'deployment-details' deployment.id %}">
+            <button>details</button>
+          </a>
+        </th>
+      </tr>
       {% endfor %}
-    </ul>
+    </table>
     <div class="pagination">
       <span class="step-links">
           {% if page_obj.has_previous %}
@@ -33,4 +60,26 @@
   <a href="/deployment/create">
     <button>create</button>
   </a>
+{% endblock %}
+
+{% block script %}
+<script>
+  var start = function () {
+
+  var es = new ReconnectingEventSource('{{ url|safe }}');
+
+  es.onopen = function () {
+    console.log('connected');
+  };
+
+  es.onerror = function () {
+    console.log('connection error');
+  };
+
+  es.addEventListener('deployment', function (e) {
+    e = JSON.parse(e.data);
+    console.log('stream reset: ' + JSON.stringify(e.channels));
+  }, false);
+};
+</script>
 {% endblock %}

templates/deployment/details.html

@@ -10,11 +10,11 @@
         <th>type</th>
         <th>status</th>
     </tr>
-    <tr>
-        <th>{{ deployment.id }}</th>
-        <th>{{ deployment.name }}</th>
-        <th>{{ deployment.type }}</th>
-        <th>{{ deployment.status }}</th>
+    <tr id="{{ deployment.id }}">
+        <th name="id">{{ deployment.id }}</th>
+        <th name="name">{{ deployment.name }}</th>
+        <th name="type">{{ deployment.type }}</th>
+        <th name="status">{{ deployment.status }}</th>
     </tr>
   </table>
   <form action="" method="post">