add progress bar

templates/deployment/details.html

@@ -1,7 +1,27 @@
 {% extends 'base.html' %}
 
+{% load static %}
+
 {% block title %} Deployment details: {{ deployment.name }} {% endblock %}
 
+{% if deployment.status == "RUNNING" %}
+
+    {% block bodyattr %}
+        {% if deployment.status == "RUNNING" %}
+            onload="start('{{ url|safe }}');"
+        {% endif %}
+    {% endblock %}
+
+    {% block headscript %}
+        {% if deployment.status == "RUNNING" %}
+            <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 content %}
     <div class="container-fluid">
         <div class="row justify-content-md-center">
@@ -19,6 +39,13 @@
                         <input type="text" readonly class="form-control-plaintext" id="status" value="{{ deployment.status }}">
                         <label for="status">Status</label>
                     </div>
+                    {% if deployment.status == "RUNNING" %}
+                        <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>
+                            </div>
+                        </div>
+                    {% endif %}
                     <div class="form-floating mb-3">
                         <input type="text" readonly class="form-control-plaintext" id="created_at" value="{{ deployment.created_at }}">
                         <label for="created-at">Created at</label>
@@ -27,6 +54,18 @@
                         <input type="text" readonly class="form-control-plaintext" id="updated_at" value="{{ deployment.updated_at }}">
                         <label for="updated-at">Updated at</label>
                     </div>
+                    {% if deployment.status == "RUNNING" %}
+                        <div class="form-floating mb-3">
+                            <input type="text" readonly class="form-control-plaintext" id="updated_at" value="{{ deployment.task_id }}">
+                            <label for="updated-at">Task UUID</label>
+                        </div>
+                    {% endif %}
+                    {% if deployment.status == "FAILED" %}
+                        <div class="form-floating mb-3">
+                            <input type="text" readonly class="form-control-plaintext" id="updated_at" value="{{ deployment.error }}">
+                            <label for="updated-at">Error</label>
+                        </div>
+                    {% endif %}
                     <form action="" method="post">
                         {% csrf_token %}
                         <button type="button" onclick="goBack()" class="btn btn-secondary">Back</button>
@@ -43,9 +82,13 @@
 {% endblock %}
 
 {% block script %}
-<script>
-    function goBack() {
-        window.location=document.referrer;
-    }
-</script>
+    {% if deployment.status == "RUNNING" %}
+        <script src="{% static 'deployment/js/event_source_details.js' %}" />
+        </script>
+    {% endif %}
+    <script>
+        function goBack() {
+            window.location=document.referrer;
+        }
+    </script>
 {% endblock %}