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>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/job_progress.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/job_progress.inc
new file mode 100644 (file)
index 0000000..8741bab
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/job_progress.inc
@@ -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>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/str/job_progess.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/str/job_progess.inc
new file mode 100644 (file)
index 0000000..9e85c25
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/str/job_progess.inc
@@ -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>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/stage-marc-import.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/stage-marc-import.tt
index 8a23682..c790fd0 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/stage-marc-import.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/stage-marc-import.tt
@@ -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 %]
         });
 

diff --git a/koha-tmpl/intranet-tmpl/prog/js/job_progess.js b/koha-tmpl/intranet-tmpl/prog/js/job_progess.js
new file mode 100644 (file)
index 0000000..2504fcf
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/job_progess.js
@@ -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);
+        }
+    });
+}