Bug 31666: Add job progress bar to stage-marc-import.pl
It would be nice if we had progress bars to indicate the progress of background jobs for scripts that utilize them. This patch implements a reusable bootstrap based progess bar. Test Plan: 1) Apply this patch 2) Stage a marc batch ( preferrably a large one to show the progress updating ) 3) Note the new progess bar, verify it functions correctly. Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
parent
5db2163857
commit
d2e4a6ec7d
|
|
@ -0,0 +1,5 @@
|
|||
<div class="progress">
|
||||
<div id="progress-bar-[% job_id %]" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:100%">
|
||||
<span id="job-percent-[% job_id %]">0</span>% <span id="job-status-[% job_id %]"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!-- str/job_progess.inc -->
|
||||
<script>
|
||||
var JOB_PROGRESS_NOT_STARTED = _("Not started");
|
||||
var JOB_PROGRESS_STARTED = _("Started");
|
||||
var JOB_PROGRESS_FINISHED = _("Finished");
|
||||
var JOB_PROGRESS_FAILED = _("Failed");
|
||||
</script>
|
||||
|
|
@ -74,6 +74,7 @@
|
|||
<h1>MARC staging</h1>
|
||||
<div class="dialog message">
|
||||
<p>The job has been enqueued! It will be processed as soon as possible.</p>
|
||||
[% INCLUDE "job_progress.inc" job_id=job_id %]
|
||||
<p><a class="job_details" href="/cgi-bin/koha/admin/background_jobs.pl?op=view&id=[% job_id | uri %]" title="View detail of the enqueued job">View detail of the enqueued job</a>
|
||||
</div>
|
||||
[% ELSE %]
|
||||
|
|
@ -258,6 +259,9 @@
|
|||
[% Asset.js("js/tools-menu.js") | $raw %]
|
||||
[% Asset.js("lib/jquery/plugins/humanmsg.js") | $raw %]
|
||||
[% Asset.js("js/file-upload.js") | $raw %]
|
||||
|
||||
[% INCLUDE 'str/job_progess.inc' job_id=job_id %]
|
||||
[% Asset.js("js/job_progess.js") | $raw %]
|
||||
<script>
|
||||
var xhr;
|
||||
var PROFILE_SAVE_MSG = _("Profile saved");
|
||||
|
|
@ -422,10 +426,7 @@
|
|||
})
|
||||
});
|
||||
[% IF job_enqueued %]
|
||||
setTimeout(
|
||||
function() { window.location.href=$('a.job_details').attr('href'); },
|
||||
5000, // 5 secs to read
|
||||
);
|
||||
updateProgress([% job_id %]);
|
||||
[% END %]
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
function updateProgress(job_id) {
|
||||
$.getJSON('/api/v1/jobs/' + job_id, function(job){
|
||||
let recheck = true;
|
||||
|
||||
if ( job.status == "new" ) {
|
||||
$(`#job-percent-${job_id}`).text(0);
|
||||
$(`#job-status-${job_id}`).text(JOB_PROGRESS_NOT_STARTED);
|
||||
$(`#progress-bar-${job_id}`).attr('aria-valuenow', 0).css("width", "100%");
|
||||
} else if ( job.status == "started" ) {
|
||||
const progress = job["progress"];
|
||||
const size = job["size"];
|
||||
const percent = progress > 0 ? ( progress / size ) * 100 : 0;
|
||||
$(`#job-percent-${job_id}`).text(percent.toFixed(2));
|
||||
$(`#job-status-${job_id}`).text(JOB_PROGRESS_STARTED);
|
||||
$(`#progress-bar-${job_id}`).attr('aria-valuenow', percent).css("width", `${percent}%`);
|
||||
} else if ( job.status == "finished" ) {
|
||||
$(`#job-percent-${job_id}`).text(100);
|
||||
$(`#job-status-${job_id}`).text(JOB_PROGRESS_FINISHED);
|
||||
$(`#progress-bar-${job_id}`).addClass("progress-bar-success");
|
||||
$(`#progress-bar-${job_id}`).attr('aria-valuenow', 100).css("width", "100%");
|
||||
recheck = false;
|
||||
} else if ( job.status == "failed" ) {
|
||||
$(`#job-percent-${job_id}`).text(0);
|
||||
$(`#job-status-${job_id}`).text(JOB_PROGRESS_FAILED);
|
||||
$(`#progress-bar-${job_id}`).addClass("progress-bar-danger");
|
||||
$(`#progress-bar-${job_id}`).attr('aria-valuenow', 0).css("width", "100%");
|
||||
recheck = false;
|
||||
}
|
||||
|
||||
if ( recheck ) {
|
||||
setTimeout(function(){updateProgress(job_id)}, 1 * 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue