YunoHost/yunorunner
1
0
Fork 0
mirror of https://github.com/YunoHost/yunorunner.git synced 2024-09-03 20:05:52 +02:00
Code Issues Projects Releases Packages Wiki Activity

[enh] better UX, tell when it's loading, there is no jobs or no apps

Browse source
This commit is contained in:
Laurent Peuch 2019-01-22 03:24:18 +01:00
parent 5b7f47dbbf
commit 173a1c33d4
2 changed files with 47 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
templates/apps.html
View file

@ -5,26 +5,34 @@
<div class="container"> <div class="container">
<h1 class="title">Apps</h1> <h1 class="title">Apps</h1>
<div id="apps"> <div id="apps">
<table class="table is-bordered is-hoverable is-striped is-fullwidth"> <template v-if="inited">
<thead> <table class="table is-bordered is-hoverable is-striped is-fullwidth">
<th>App</th> <thead>
<th>Last job</th> <th>App</th>
<th>Created time</th> <th>Last job</th>
<th>Started time</th> <th>Created time</th>
<th>End time</th> <th>Started time</th>
<th>Commit</th> <th>End time</th>
<th title="random day of the month on which a job is scheduled for this app">Day</th> <th>Commit</th>
</thead> <th title="random day of the month on which a job is scheduled for this app">Day</th>
<tr v-for="(app, index) in apps" :id="app.id" v-bind:class="[app.job_state + 'Job']"> </thead>
<td><a v-bind:href="app.name + '/'">{{app.name}}</a> <small>{{app.app_list}}</small> <span v-bind:class="['tag', appStateTagClass(app.state)]">{{app.state}}</span> <a target="_blank" v-bind:href="app.url">↪</a></td> <template v-if="apps.length > 0">
<td><a v-bind:href="'<{ relative_path_to_root }>job/' + app.job_id">#{{app.job_id}}</a> <span v-bind:class="['tag', jobStateTagClass(app.job_state)]">{{app.job_state}}</span></td> <tr v-for="(app, index) in apps" :id="app.id" v-bind:class="[app.job_state + 'Job']">
<td>{{timestampToDate(app.created_time)}}</td> <td><a v-bind:href="app.name + '/'">{{app.name}}</a> <small>{{app.app_list}}</small> <span v-bind:class="['tag', appStateTagClass(app.state)]">{{app.state}}</span> <a target="_blank" v-bind:href="app.url">↪</a></td>
<td>{{timestampToDate(app.started_time)}}</td> <td><a v-bind:href="'<{ relative_path_to_root }>job/' + app.job_id">#{{app.job_id}}</a> <span v-bind:class="['tag', jobStateTagClass(app.job_state)]">{{app.job_state}}</span></td>
<td>{{timestampToDate(app.end_time)}}</td> <td>{{timestampToDate(app.created_time)}}</td>
<td><a target="_blank" v-bind:href="app.url + '/commit/' + app.revision">{{app.revision.slice(0, 7)}}</a></td> <td>{{timestampToDate(app.started_time)}}</td>
<td class="randomJobDay" title="random day of the month on which a job is scheduled for this app">{{app.random_job_day}}</td> <td>{{timestampToDate(app.end_time)}}</td>
</tr> <td><a target="_blank" v-bind:href="app.url + '/commit/' + app.revision">{{app.revision.slice(0, 7)}}</a></td>
</table> <td class="randomJobDay" title="random day of the month on which a job is scheduled for this app">{{app.random_job_day}}</td>
</tr>
</template>
<template v-else>
<tr><td colspan="7">Not apps available yet.</td></tr>
</template>
</table>
</template>
<div v-else>Loading...</div>
</div> </div>
</div> </div>
</section> </section>
@ -36,7 +44,8 @@
var app = new Vue({ var app = new Vue({
el: '#apps', el: '#apps',
data: { data: {
apps: [] apps: [],
inited: false,
}, },
methods: { methods: {
timestampToDate: function (timestamp) { timestampToDate: function (timestamp) {
@ -75,6 +84,7 @@
if (action == "init_apps") { if (action == "init_apps") {
app.apps = data; app.apps = data;
Vue.set(app, 'inited', true);
} else if (action == "new_app") { } else if (action == "new_app") {
for (var i = 0; i < app.apps.length; ++i) { for (var i = 0; i < app.apps.length; ++i) {
if (data.name < app.apps[i].name) { if (data.name < app.apps[i].name) {

32
templates/index.html
View file

@ -5,7 +5,7 @@
<div class="container"> <div class="container">
<h1 class="title">Jobs <small>display last done job of each app and next scheduled job</small></h1> <h1 class="title">Jobs <small>display last done job of each app and next scheduled job</small></h1>
<div id="jobs"> <div id="jobs">
<div v-if="inited"> <template v-if="inited">
<table class="table is-bordered is-hoverable is-striped is-fullwidth"> <table class="table is-bordered is-hoverable is-striped is-fullwidth">
<thead> <thead>
<th>App</th> <th>App</th>
@ -14,23 +14,23 @@
<th>Started time</th> <th>Started time</th>
<th>End time</th> <th>End time</th>
</thead> </thead>
<div v-if="jobs.length > 0"> <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']"> <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><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>{{job.state}}</td>
<td>{{timestampToDate(job.created_time)}}</td> <td>{{timestampToDate(job.created_time)}}</td>
<td>{{timestampToDate(job.started_time)}}</td> <td>{{timestampToDate(job.started_time)}}</td>
<td>{{timestampToDate(job.end_time)}}</td> <td>{{timestampToDate(job.end_time)}}</td>
</tr> </tr>
</div> </template>
<div v-else> <template v-else>
<tr><td colspan="5">Not jobs available yet.</td></tr> <tr><td colspan="5">Not jobs available yet.</td></tr>
</div> </template>
</table> </table>
</div> </template>
<div v-else> <template v-else>
Loading... Loading...
</div> </template>
</div> </div>
</div> </div>
</section> </section>
@ -63,7 +63,7 @@
if (action == "init_jobs") { if (action == "init_jobs") {
app.jobs = data; app.jobs = data;
app.inited = true; Vue.set(app, 'inited', true);
} else if (action == "update_job") { } else if (action == "update_job") {
for (var i = 0; i < app.jobs.length; ++i) { for (var i = 0; i < app.jobs.length; ++i) {
if (app.jobs[i].id == data.id) { if (app.jobs[i].id == data.id) {