{% extends "base.html" %}
{% load staticfiles %}
{% load bootstrap4 %}

{% block extrahead %}
    {{block.super}}
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
{% endblock %}

<style>
code {
    overflow: scroll;
}
</style>

{% block content %}
<div class="row">
    <div class="col-12 col-lg-5">
        <div class="card mb-3">
            <div class="card-header d-flex">
                <h4 class="d-inline">Overview</h4>
                <!-- <button data-toggle="collapse" data-target="#panel_overview" class="btn btn-outline-secondary ml-auto">Expand</button> -->
            </div>
            <div class="collapse show" id="panel_overview">
                <table class="table m-0">
                    <tr>
                        <td>Owner</td>
                        <td>{{ booking.owner }}</td>
                    </tr>
                    <tr>
                        <td>Collaborators</td>
                        <td>
                            {{ collab_string}}
                        </td>
                    </tr>
                    <tr>
                        <td>Project</td>
                        <td>{{ booking.project }}</td>
                    </tr>
                    <tr>
                        <td>Purpose</td>
                        <td>{{ booking.purpose }}</td>
                    </tr>
                    <tr>
                        <td>Start Time</td>
                        <td>{{ booking.start }}</td>
                    </tr>
                    <tr>
                        <td>End Time</td>
                        <td>{{ booking.end }}</td>
                    </tr>
                    <tr>
                        <td>Lab Deployed At</td>
                        <td>{{ booking.lab }}</td>
                    </tr>
                    <tr>
                        <td>IPMI Username</td>
                        <td><code id="ipmi-username">{{ status.config.ipmi_username }}</code></td>
                    </tr>
                    <tr>
                        <td>IPMI Password</td>
                        <td><code id="ipmi-password">{{ status.config.ipmi_password }}</code></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card mb-3">
            <div class="card-header d-flex">
                <h4 class="d-inline">Deployment Progress</h4>
                <p class="mx-3">Your resources are being prepared. If this is taking a really long time, please contact
                    us <a href="mailto:{{contact_email}}">here!</a></p>
            </div>
            <div class="collapse show" id="panel_tasks">
                <table class="table m-0">
                    <tr>
                        <th></th>
                        <th>Name</th>

                        <th>Assigned Host</th>
                        <th>Status</th>
                    </tr>
                    {% with status.instances as instances %}

                    {% for id, inst in instances.items %}
                    <tr>
                        <td>
                            <!-- icon -->
                            {% if inst.logs|length > 0 %}
                            {% with inst.logs|last as lastelem %}
                            {% if 'Success' in lastelem.status  %}
                            <div id="icon-{{id}}" class="rounded-circle bg-success square-20"></div>
                            {% elif 'Fail' in lastelem.status %}
                            <div id="icon-{{id}}" class="rounded-circle bg-danger square-20"></div>
                            {% else %}
                            <div id="icon-{{id}}" class="spinner-border text-primary square-20"></div>
                            {% endif %}
                            {% endwith %}
                            {% endif %}
                        </td>
                        <td id="alias-{{id}}">
                            <!-- Hostname -->
                            {{inst.host_alias}}
                        </td>
                        <td id="host-{{id}}">
                            <!-- Actual Host -->
                            {{inst.assigned_host}}
                        </td>
                        <td>
                            <!-- Logs -->
                            {% if inst.logs|length > 0 %}
                            {% with inst.logs|last as lastelem %}
                            <span id="status-{{id}}">
                            {{lastelem.status}}
                            </span>
                                <button class="btn-secondary btn float-right" data-target="#collapse-{{id}}"
                                    data-toggle="collapse">Show Additional Logs</button>
                            {% endwith %}

                            {% endif %}
                            <p>
                            <div class="card collapse mt-3" id="collapse-{{id}}">
                                <div class="card-header">Additional Logs</div>
                                <div class="card-body">
                                    <table id="logs-{{id}}">
                                        {% for log in inst.logs %}
                                        <tr>
                                            <td>
                                                {{log.status}}
                                            </td>

                                            <td>
                                                {{log.time}}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </table>
                                </div>
                            </div>
                            </p>
                        </td>
                    </tr>
                    {% endfor %}
                    {% endwith %}
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-5">
        <div class="card mb-3">
            <div class="card-header d-flex">
                Diagnostic Information
            </div>
            <div>
                <table class="table m-0">
                    <tr>
                        <th></th>
                        <th>Aggregate ID</th>
                        <td>{{booking.aggregateId}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    setInterval(function () {
        fetchBookingStatus();
    }, 5000);


    async function fetchBookingStatus() {
        req = new XMLHttpRequest();
        var url = "status";
        req.open("GET", url, true);
        req.onerror = function () { console.log("failed to get status") }
        req.onreadystatechange = function () {
            if (req.readyState === 4) {
                let status = JSON.parse(req.responseText)
                updateStatuses(status)
            }
        }
        req.send();
    }

    async function updateStatuses(status) {

        const instances = status.instances;
        
        Object.keys(instances).forEach((aggId) => {
            const instance = instances[aggId]
            const status = instance.logs.pop()

            let icon_class = "spinner-border text-primary square-20"
            if (status.status.includes('Success')) {
                icon_class = "rounded-circle bg-success square-20"
            } else if (status.status.includes('Fail')) {
                icon_class = "rounded-circle bg-danger square-20"
            }

            // icon
            document.getElementById("icon-" + aggId).className = icon_class;
            // host alias
            document.getElementById("alias-" + aggId).innerText = instance.host_alias;
            // assigned host
            document.getElementById("host-" + aggId).innerText = instance.assigned_host;
            // status
            document.getElementById("status-" + aggId).innerText = status.status;
            // logs
            const log_table = document.getElementById("logs-" + aggId);
            log_table.innerHTML = "";
            for (const log of instance.logs) {
                const tr = document.createElement('tr');
                const td_status = document.createElement('td')
                td_status.innerText = log.status;
                const td_time = document.createElement('td')
                td_time.innerText = log.time;
                tr.appendChild(td_status)
                tr.appendChild(td_time)
                log_table.appendChild(tr)
            }
        })

        // IPMI
        document.getElementById("ipmi-username").innerText = status.config.ipmi_username;
        document.getElementById("ipmi-password").innerText = status.config.ipmi_password;
    }
</script>

{% endblock content %}