166 lines
6.2 KiB
PHP
166 lines
6.2 KiB
PHP
@extends('jobs.base')
|
|
|
|
@section('jobs_content')
|
|
<div id="jobs" class="ui basic segment"></div>
|
|
@endsection
|
|
|
|
@push('page_styles')
|
|
<link rel="stylesheet" href="//cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
|
|
@endpush
|
|
|
|
@push('page_scripts')
|
|
<script type="text/javascript" src="//cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
|
|
<script type="text/javascript">
|
|
class Job
|
|
{
|
|
id
|
|
command
|
|
arguments
|
|
states
|
|
|
|
constructor(props)
|
|
{
|
|
this.id = props.id
|
|
this.command = props.command
|
|
this.arguments = props.arguments
|
|
this.states = props.states
|
|
}
|
|
lastState()
|
|
{
|
|
return this.states.sort((a, b) => {
|
|
const d1 = new Date(a.date.date)
|
|
const d2 = new Date(b.date.date)
|
|
return d1 - d2
|
|
}).at(-1)
|
|
}
|
|
isPending()
|
|
{
|
|
return this.lastState().status === 1
|
|
}
|
|
draw()
|
|
{
|
|
return {
|
|
row: () => {
|
|
const status = this.isPending() ? 'yellow clock' : 'green check'
|
|
const formatter = new Intl.DateTimeFormat('es-CL', {dateStyle: 'full', timeStyle: 'long'})
|
|
const d = new Date(this.lastState().date.date)
|
|
return $('<tr></tr>').attr('data-id', this.id).append(
|
|
$('<td></td>').html(this.id)
|
|
).append(
|
|
$('<td></td>').html(this.command)
|
|
).append(
|
|
$('<td></td>').html(this.arguments)
|
|
).append(
|
|
$('<td></td>').append(
|
|
$('<i></i>').addClass('ui icon ' + status)
|
|
)
|
|
).append(
|
|
$('<td></td>').html(formatter.format(d))
|
|
)
|
|
}
|
|
}
|
|
}
|
|
execute()
|
|
{
|
|
const uri = '/job/' + this.id + '/execute'
|
|
Send.get(uri).then((response, status, jqXHR) => {
|
|
console.debug(jqXHR.status)
|
|
console.debug(response)
|
|
})
|
|
}
|
|
}
|
|
const jobs = {
|
|
id: '',
|
|
data: [],
|
|
get: function() {
|
|
return {
|
|
jobs: () => {
|
|
this.draw().loader()
|
|
const uri = '/jobs'
|
|
return Send.get(uri).then((response, status, jqXHR) => {
|
|
if (parseInt(jqXHR.status/100) !== 2 || jqXHR.status === 204) {
|
|
$(this.id).html('').append(
|
|
this.draw().empty()
|
|
)
|
|
return
|
|
}
|
|
if (response.jobs.length === 0) {
|
|
$(this.id).html('').append(
|
|
this.draw().empty()
|
|
)
|
|
return
|
|
}
|
|
this.data = response.jobs.map(job => {
|
|
return new Job(job)
|
|
})
|
|
this.draw().jobs()
|
|
})
|
|
}
|
|
}
|
|
},
|
|
draw: function() {
|
|
return {
|
|
loader: () => {
|
|
$(this.id).html('').append(
|
|
$('<div></div>').addClass('ui segment').append(
|
|
$('<p></p>').html(' ')
|
|
).append(
|
|
$('<div></div>').addClass('ui active dimmer').append(
|
|
$('<div></div>').addClass('ui indeterminate elastic loader')
|
|
)
|
|
).append(
|
|
$('<p></p>').html(' ')
|
|
)
|
|
)
|
|
},
|
|
empty: () => {
|
|
return $('<div></div>').addClass('ui message').html('No messages found.')
|
|
},
|
|
jobs: () => {
|
|
$(this.id).html('')
|
|
const table = $('<table></table>').addClass('ui table').attr('id', 'jobs_table')
|
|
table.append(
|
|
this.draw().head()
|
|
).append(
|
|
this.draw().body()
|
|
)
|
|
$(this.id).append(table)
|
|
const t = new DataTable('#jobs_table', {
|
|
order: [[4, 'desc']]
|
|
})
|
|
},
|
|
head: () => {
|
|
return $('<thead></thead>').append(
|
|
$('<tr></tr>').append(
|
|
$('<th></th>').html('ID')
|
|
).append(
|
|
$('<th></th>').html('Command')
|
|
).append(
|
|
$('<th></th>').html('Arguments')
|
|
).append(
|
|
$('<th></th>').html('Status')
|
|
).append(
|
|
$('<th></th>').html('Date')
|
|
)
|
|
)
|
|
},
|
|
body: () => {
|
|
const body = $('<tbody></tbody>')
|
|
this.data.forEach(job => {
|
|
body.append(job.draw().row())
|
|
})
|
|
return body
|
|
}
|
|
}
|
|
},
|
|
setup: function() {
|
|
this.get().jobs()
|
|
}
|
|
}
|
|
$().ready(() => {
|
|
jobs.id = '#jobs'
|
|
jobs.setup()
|
|
})
|
|
</script>
|
|
@endpush
|