116 lines
3.2 KiB
HTML

{% 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 %}
<table>
<tr>
<th>name</th>
<th>type</th>
<th>status</th>
<th></th>
<th></th>
</tr>
{% for deployment in page_obj %}
<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>
{% 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>
<div class="pagination">
<span class="step-links">
{% if page_obj.has_previous %}
<a href="?page=1">&laquo; first</a>
<a href="?page={{ page_obj.previous_page_number }}">previous</a>
{% endif %}
<span class="current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}">next</a>
<a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
{% endif %}
</span>
</div>
{% else %}
<p>no deployments available</p>
{% endif %}
<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.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');
};
// 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>
{% endblock %}