Reuse restartJob in order of restart jobs in Overview page

Refactor restartJob in order to make sure that is able to handle request for multiple restarts. This follows up with some changes to the form and the javascript part of the overview.html.ep, which triggers the restart with the use of restartJob, as opposed of reimplement the logic. The advantage is that we have one common behavior and error handling on the restart operation. - An optional comment can be passed not to restartJob, which is included to the request. - restartJob handles both single and multible job restarts. - The form is designed to handle each occasion in separate functions making the code becomes more modular and easier to maintain. - The overvies's restartJobs function will restart only jobs with valid id. https://progress.opensuse.org/issues/166559 Signed-off-by: Ioannis Bonatakis <[email protected]>
os-autoinst · Oct 25, 2024 · d2d169f · d2d169f
1 parent 7ec8b7e
commit d2d169f
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 48 deletions.
diff --git a/assets/javascripts/openqa.js b/assets/javascripts/openqa.js
@@ -238,7 +238,12 @@ function forceJobRestartViaRestartLink(restartLink) {
   restartLink.click();
 }
 
-function restartJob(ajaxUrl, jobId) {
+function restartJob(ajaxUrl, jobIds, comment) {
+  let singleJobId;
+  if (!Array.isArray(jobIds)) {
+    singleJobId = jobIds;
+    jobIds = [jobIds];
+  }
   var showError = function (reason) {
     var errorMessage = '<strong>Unable to restart job';
     if (reason) {
@@ -248,30 +253,47 @@ function restartJob(ajaxUrl, jobId) {
     }
     addFlash('danger', errorMessage);
   };
-
-  return fetchWithCSRF(ajaxUrl, {method: 'POST'})
+  const body = {
+    jobs: jobIds,
+    comment: comment
+  };
+  return fetchWithCSRF(ajaxUrl, {method: 'POST', body: JSON.stringify(body)})
     .then(response => {
       if (!response.ok) throw `Server returned ${response.status}: ${response.statusText}`;
       return response.json();
     })
     .then(responseJSON => {
       var newJobUrl;
       try {
-        newJobUrl = responseJSON.test_url[0][jobId];
+        if (singleJobId) {
+          newJobUrl = responseJSON.test_url[0][singleJobId];
+        } else {
+          var testUrlData = responseJSON.test_url;
+          if (testUrlData && Array.isArray(testUrlData)) {
+            newJobUrl = testUrlData.map(item => Object.values(item)[0]);
+          }
+        }
       } catch {
         // Intentionally ignore all errors
       }
       if (
         showJobRestartResults(
           responseJSON,
           newJobUrl,
-          restartJob.bind(undefined, addParam(ajaxUrl, 'force', '1'), jobId)
+          restartJob.bind(undefined, addParam(ajaxUrl, 'force', '1'), jobIds, comment)
         )
       ) {
         return;
       }
       if (newJobUrl) {
-        window.location.replace(newJobUrl);
+        if (Array.isArray(newJobUrl)) {
+          addFlash('info', 'Overview will be reloaded');
+          setTimeout(() => {
+            window.location.reload();
+          }, 2000);
+        } else {
+          window.location.replace(newJobUrl);
+        }
       } else {
         throw 'URL for new job not available';
       }

diff --git a/assets/javascripts/overview.js b/assets/javascripts/overview.js
@@ -287,49 +287,57 @@ function showAddCommentsDialog() {
   modal.show();
 }
 
-function restartOrCommentJobs(form) {
+function restartJobs(btn) {
+  const form = btn.closest('form');
   const text = form.elements.text.value;
+  const jobs = btn.dataset.jobs
+    .split(',')
+    .map(Number)
+    .filter(n => !isNaN(n));
+  const apiUrl = btn.dataset.url;
   if (!text.length) {
     return window.alert("The comment text mustn't be empty.");
   }
-    const actionBtn = form.clickedButton ? form.clickedButton.value : null;
-    console.log(actionBtn);
-    let reqUrl = form.clickedButton.getAttribute('formaction');
-    console.log(form.clickedButton.getAttribute('formaction'));
-    const progressIndication = document.getElementById('add-comments-progress-indication');
+
+  const progressIndication = document.getElementById('add-comments-progress-indication');
   const controls = document.getElementById('add-comments-controls');
   progressIndication.style.display = 'flex';
   controls.style.display = 'none';
-  const done = () => {
+  restartJob(apiUrl, jobs, text);
+  setTimeout(() => {
     progressIndication.style.display = 'none';
     controls.style.display = 'inline';
     window.addCommentsModal.hide();
-  };
+  }, 500);
+}
 
-  let infoText =
-    'The comments have been created. <a href="javascript: location.reload()">Reload</a> the page to show changes.';
-  let errText = 'The comments could not be added:';
-  if (actionBtn === 'restartAndCommentJobs') {
-    infoText = '<a href="javascript: location.reload()">Reload</a> the page to show restarted jobs.';
-    errText = 'Failed to restart jobs: ';
+function addComments(btn) {
+  const form = btn.closest('form');
+  const text = form.elements.text.value;
+  const apiUrl = btn.dataset.url;
+  if (!text.length) {
+    return window.alert("The comment text mustn't be empty.");
   }
-  fetchWithCSRF(reqUrl, {method: 'POST', body: new FormData(form)})
+  const progressIndication = document.getElementById('add-comments-progress-indication');
+  const controls = document.getElementById('add-comments-controls');
+  progressIndication.style.display = 'flex';
+  controls.style.display = 'none';
+  const done = () => {
+    progressIndication.style.display = 'none';
+    controls.style.display = 'inline';
+    window.addCommentsModal.hide();
+  };
+  fetchWithCSRF(apiUrl, {method: 'POST', body: new FormData(form)})
     .then(response => {
       if (!response.ok) throw `Server returned ${response.status}: ${response.statusText}`;
-      addFlash('info', infoText);
+      addFlash(
+        'info',
+        'The comments have been created. <a href="javascript: location.reload()">Reload</a> the page to show changes.'
+      );
       done();
-      return response.json();
-    })
-        .then(resData => {
-            console.log(resData);
-      if (resData.errors && resData.errors.length > 0) {
-        for (let i in resData.errors) {
-          addFlash('warning', 'Warning: Errors found in Response:\n' + resData.errors[i].trim());
-        }
-      }
     })
     .catch(error => {
-      addFlash('danger', `${errText} ${error}`);
+      addFlash('danger', `The comments could not be added: ${error}`);
       done();
     });
 }
diff --git a/t/ui/10-tests_overview.t b/t/ui/10-tests_overview.t
@@ -592,7 +592,7 @@ subtest 'add comments' => sub {
         is $submit_button->get_text, 'Restart and comment on 2 jobs', 'submit button displayed with number of jobs';
         $submit_button->click;
         wait_for_ajax msg => 'comments created';
-        like $driver->find_element_by_id('flash-messages')->get_text, qr/Reload the page to show restarted jobs/,
+        like $driver->find_element_by_id('flash-messages')->get_text, qr/Overview will be reloaded/,
           'info about successful restart shown';
         my @failed_job_ids = map { $_->id } $jobs->search({result => FAILED})->all;
         is $comments->search({job_id => {-not_in => \@failed_job_ids}, text => $comment_text})->count, 0,

diff --git a/templates/webapi/test/overview.html.ep b/templates/webapi/test/overview.html.ep
@@ -221,7 +221,7 @@
 <div class="modal fade" id="add-comments-modal">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
-            <form method="post" onsubmit="restartOrCommentJobs(this); return false;">
+            <form method="post">
                 <div class="modal-header">
                     <h4 class="modal-title">Add comment on all currently shown jobs</h4>
                     <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
@@ -235,20 +235,20 @@
                         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                     </div>
                     <div id="add-comments-controls">
-                      <button type="submit" name="bulkAction" class="btn btn-warning"
-                              value="commentJobs" id="commentJobsBtn"
-                              formaction="<%= url_for('apiv1_post_comments')->query(job_id=>$job_ids) %>"
-                              onclick="form.clickedButton = this;">
-                        <i class="fa fa-comment"></i> Comment on all <%= scalar @$job_ids %> jobs
-                      </button>
-                      <button type="submit" name="bulkAction" class="btn btn-danger"
-                              value="restartAndCommentJobs"
-                              id="restartAndCommentJobsBtn"
-                              formaction="<%= url_for('apiv1_restart_jobs')->query(jobs => $job_ids) %>"
-                              onclick="form.clickedButton = this;">
-                        <i class="fa fa-play-circle-o"></i> Restart and comment on <%= scalar @$job_ids %> jobs
-                      </button>
-                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Discard</button>
+                        <button type="button" name="bulkAction" class="btn btn-warning"
+                                value="commentJobs" id="commentJobsBtn"
+                                data-url="<%= url_for('apiv1_post_comments')->query(job_id=>$job_ids) %>"
+                                onclick="addComments(this);">
+                            <i class="fa fa-comment"></i> Comment on all <%= scalar @$job_ids %> jobs
+                        </button>
+                        <button type="button" name="bulkAction" class="btn btn-danger"
+                                value="restartAndCommentJobs" id="restartAndCommentJobsBtn"
+                                data-jobs="<%= join(',', @$job_ids) %>"
+                                data-url="<%= url_for('apiv1_restart_jobs')->query(jobs=>$job_ids) %>"
+                                onclick="restartJobs(this);">
+                            <i class="fa fa-play-circle-o"></i> Restart and comment on <%= scalar @$job_ids %> jobs
+                        </button>
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Discard</button>
                     </div>
                 </div>
             </form>