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:
Kyle Hall 2022-09-30 12:35:00 -04:00 committed by Tomas Cohen Arazi
parent 5db2163857
commit d2e4a6ec7d
No known key found for this signature in database
GPG Key ID: 0A272EA1B2F3C15F
4 changed files with 51 additions and 4 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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 %]
});

View File

@ -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);
}
});
}