{% extends "base_user.jinja2" %}
{% block title %}Inspect execution {{ e.name }}{% endblock %}

{% block custom_head %}
    <script src="{{ static_url("moment.min.js") }}" type="application/javascript"></script>
    <script src="{{ static_url("moment-timezone.min.js") }}" type="application/javascript"></script>
    <script>
    let locale = window.navigator.userLanguage || window.navigator.language;
    moment.locale(locale);

    function format_timestamp(ts) {
        var m = moment.utc(ts);
        m.local();
        document.write(m.format("L, LTS"));
    }
    </script>
{% endblock %}

{% block content %}
<h2>Detailed information for execution {{ e.name }} ({{ e.id }})</h2>
<div id="contents">
<ul>
    <li>Application name: {{ e.description['name'] }}</li>
    {% if user.role.can_operate_others %}
    <li>Owner: {{ e.user_id }}</li>
    {% endif %}
    <li>Time submitted: <script>format_timestamp("{{ e.time_submit }}")</script></li>
    {% if e.time_start == None %}
    <li>Time started: not yet</li>
    {% else %}
    <li>Time started: <script>format_timestamp("{{ e.time_start }}")</script></li>
    {% endif %}
    {% if e.time_end == None %}
    <li>Time finished: not yet</li>
    {% else %}
    <li>Time finished: <script>format_timestamp("{{ e.time_end }}")</script></li>
    {%  endif %}
    <li>Status: <span style="font-weight: bold;">{{ e.status }}</span></li>
    {% if e.is_running %}
    <li>Actions:
        <a href="{{ reverse_url("execution_terminate", e.id) }}">Terminate</a>
    </li>
    {% elif e.status == "terminated" %}
    <li>Actions:
        <a href="{{ reverse_url("execution_restart", e.id) }}">Restart</a>
    </li>
    {% endif %}
    {% if grafana_url is defined %}
    <li>
        <a href="{{ grafana_url }}">Resource usage plots</a>
    </li>
    {% endif %}
</ul>
{% if e.status == 'error' %}
<p>Error message: <code>{{ e.error_message }}</code></p>
{% endif %}

<div id="endpoints">
<h3>Endpoints</h3>
{% if endpoints|length > 0 %}
<ul>
{% for endp in endpoints|sort %}
    <li><a href="{{ endp[1] }}" target="_blank">{{ endp[0] }}</a> ({{ endp[1] }})</li>
{% endfor %}
</ul>
{% else %}
    {% if e.status == "running" %}
        <p>This execution does not have any active endpoint</p>
    {% elif e.status == "submitted" or e.status == "starting" or e.status == "scheduled" %}
        <p>Please wait, the execution is starting up. This page will refresh automatically.</p>
    {% else %}
        <p>No endpoints are available</p>
    {% endif %}
{% endif %}
</div>

<div id="container_list">
{% if services_info|length > 0 %}
<h3>Services:</h3>
{% endif %}
<table class="service-list">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Zoe status</th>
        <th>Backend status</th>
        <th>Host</th>
        <th>Labels</th>
        <th>Output logs</th>
        <th>Errors</th>
    </tr>
    </thead>
    <tbody>
    {% for s in services_info %}
        <tr>
            <td>{{ s['id'] }}</td>
            <td>{{ s['name'] }}</td>
            <td>{{ s['status'] }}</td>
            <td>{{ s['backend_status'] }}</td>
            <td>{{ s['backend_host'] }}</td>
            <td>{% for l in s['labels'] %}{{ l }} {% endfor %}</td>
            {% if s['status'] != 'created' %}
            <td><a href="{{ reverse_url("service_logs", s['id']) }}">open</a></td>
            {% else %}
            <td></td>
            {% endif %}
            <td>{{ s['error_message'] }}</td>
        </tr>
    {% endfor %}

    </tbody>
</table>
</div>

</div>
{% if e.status != 'terminated' %}
<script>
    function refresh_page() {
        document.location.reload();
    }
    setInterval(refresh_page, 15000);
</script>
{% endif %}
{% endblock %}