yunorunner/templates/index.html

<% extends "base.html" %>

<% block content %>
<section class="section">
    <div class="container">
        <h1 class="title">Jobs <small>display last done job of each app and next scheduled job</small></h1>
        <div id="jobs">
            <template v-if="inited">
                <table class="table is-bordered is-hoverable is-striped is-fullwidth">
                    <thead>
                        <th>App</th>
                        <th>State</th>
                        <th>Created time</th>
                        <th>Started time</th>
                        <th>End time</th>
                    </thead>
                        <template v-if="jobs.length > 0">
                        <tr v-for="(job, index) in jobs" :id="job.id" v-bind:class="[{deleted: job.deleted}, job.state + 'Job']">
                            <td><a v-if="!job.deleted" v-bind:href="'job/' + job.id">{{job.name}}</a><span v-if="job.deleted">{{job.name}} (deleted)</span> <small title="job's id">#{{job.id}} </small></td>
                            <td>{{job.state}}</td>
                            <td>{{timestampToDate(job.created_time)}}</td>
                            <td>{{timestampToDate(job.started_time)}}</td>
                            <td>{{timestampToDate(job.end_time)}}</td>
                        </tr>
                    </template>
                    <template v-else>
                        <tr><td colspan="5">Not jobs available yet.</td></tr>
                    </template>
                </table>
            </template>
            <template v-else>
                Loading...
            </template>
        </div>
    </div>
</section>
<% endblock %>

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

                    return new Date(timestamp * 1000).toLocaleString()
                }
            }
        })

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

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

            if (action == "init_jobs") {
                app.jobs = data;
                Vue.set(app, 'inited', true);
            // when there is too much initial data, it's streamed to avoid a
            // bug in firefox that make the whole browser crash
            } else if (action == "init_jobs_stream") {
                Vue.set(app, 'jobs', app.jobs.concat(data))
            } else if (action == "update_job") {
                for (var i = 0; i < app.jobs.length; ++i) {
                    if (app.jobs[i].id == data.id) {

                        if ((app.jobs[i].state !== undefined) && (app.jobs[i].state != data.state))
                        {
                            notify("Job for " + data.name + " is " + data.state);
                        }

                        Vue.set(app.jobs, i, data);
                        break;
                    }
                }
            } else if (action == "new_job") {
                app.jobs.splice(0, 0, data);
            } else if (action == "delete_job") {
                for (var i = 0; i < app.jobs.length; ++i) {
                    if (app.jobs[i].id == data.id) {
                        Vue.set(app.jobs[i], 'deleted', true);
                        Vue.set(app.jobs[i], 'state', 'deleted');
                        break;
                    }
                }
            }
        };
    })()
</script>
<% endblock %>