yunorunner/templates/job.html

<% extends "base.html" %>

<% block content %>
<section class="section" id="job">
    <div class="container" v-bind:class="{deleted: job.deleted}">
        <h1 class="title">
            <span v-if="job.deleted">(DELETED)</span>
           Job #{{job.uuid}}
           <% if app %><a href="<{ relative_path_to_root }>apps/<{ app.name }>/">{{ job.name }} </a>
            <% else %>{{ job.name }}
           <% endif %>
            <a target="_blank" v-bind:href="job.url_or_path">↪</a>
        </h1>

        <div style="margin-bottom: 15px" v-if="!job.deleted">
            <button class="button is-warning" v-on:click="cancelJob">Cancel job</button>
            <button class="button is-default" v-on:click="restartJob">Restart job</button>
        </div>

        <table v-bind:class="['table', 'is-bordered', job.state + 'Job']">
            <tr><th>State</th><td>{{job.state}}</td></tr>
            <tr><th>Created time</th><td>{{timestampToDate(job.created_time)}}</td></tr>
            <tr><th>Started time</th><td>{{timestampToDate(job.started_time)}}</td></tr>
            <tr><th>End time</th><td>{{timestampToDate(job.end_time)}}</td></tr>
        </table>

        <h2 class="subtitle">Execution log:</h2>
        <pre class="consoleOutput" v-html="logWithColors"></pre>
    </div>
</section>
<% endblock %>

<% block javascript %>
<script>
    (function() {
        var app = new Vue({
            el: '#job',
            data: {
                job: {}
            },
            methods: {
                timestampToDate: function (timestamp) {
                    if (timestamp === null) return "";

                    return new Date(timestamp * 1000).toLocaleString()
                },
                cancelJob: function() {
                    $.post("<{ relative_path_to_root }>api/job/" + this.job.id + "/stop")
                },
                restartJob: function() {
                    $.post("<{ relative_path_to_root }>api/job/" + this.job.id + "/restart")
                }
            },
            computed: {
                logWithColors: function() {
                    if (this.job.log != undefined) {
                        var ansiup = new AnsiUp;
                        return ansiup.ansi_to_html(this.job.log);
                    } else {
                        return "";
                    }
                }
            }
        })

        ws = new ReconnectingWebSocket(websocketPrefix() + '://' + document.domain + ':' + location.port + websocketRelativePath('<{ path }>') + '/job-<{ job.uuid }>-ws');

        ws.onmessage = function (event) {
            var message = JSON.parse(event.data);
            var data = message.data;
            var action = message.action;

            if (action == "init_job" || action == "update_job") {
                data.deleted = false;
                app.job = data;
            } else if (action == "delete_job") {
                Vue.set(app.job, "deleted", true);
                Vue.set(app.job, "state", "deleted");
            }
        };
    })()
</script>
<% endblock %>