Skip to content

Commit

Permalink
Add option to restart jobs upon comment submission
Browse files Browse the repository at this point in the history
- Renamed `addComments` to `restartOrCommentJobs` to handle both commenting and
restarting jobs.
- Added button-specific actions using `form.clickedButton`.
- Updated `fetchWithCSRF` logic to dynamically determine request URLs based on
the button clicked.
- Introduced separate success and error messages for restarting and commenting
actions.
- Updated HTML to include "Restart and Comment" and "Comment" buttons with
individual API endpoints via formaction. That removes action attribute from
the form element.
- Let "comments" be `btn-warning` and "restart" show more severe operation
using `btn-danger`.
- Adjusted modal to allow submission of comments or restarts through the
correct action handlers.
- Inform overview page with warning in case of errors in Response.
- Redesign `restartOrCommentJobs` (previews addComments) to reflect the new
features.

These updates enhance the user experience by allowing users to either comment
on jobs, or perform restart with a comment simultaneously from the
overview page. Comments always add to the original job of the overview
page. By integrating this functionality we provide a workflow for
users managing multiple jobs on the overview page using the already existing
API implementations.

https://progress.opensuse.org/issues/166559

Signed-off-by: Ioannis Bonatakis <[email protected]>
  • Loading branch information
b10n1k committed Oct 16, 2024
1 parent fc5ba82 commit f33859a
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 35 deletions.
34 changes: 26 additions & 8 deletions assets/javascripts/overview.js
Original file line number Diff line number Diff line change
Expand Up @@ -287,12 +287,16 @@ function showAddCommentsDialog() {
modal.show();
}

function addComments(form) {
function restartOrCommentJobs(form) {
const text = form.elements.text.value;
if (!text.length) {
return window.alert("The comment text mustn't be empty.");
}
const progressIndication = document.getElementById('add-comments-progress-indication');
const actionBtn = form.clickedButton ? form.clickedButton.value : null;

Check failure on line 295 in assets/javascripts/overview.js

View workflow job for this annotation

GitHub Actions / Lint JavaScript code (using Node version 20)

Delete `··`
console.log(actionBtn);

Check failure on line 296 in assets/javascripts/overview.js

View workflow job for this annotation

GitHub Actions / Lint JavaScript code (using Node version 20)

Delete `··`
let reqUrl = form.clickedButton.getAttribute('formaction');

Check failure on line 297 in assets/javascripts/overview.js

View workflow job for this annotation

GitHub Actions / Lint JavaScript code (using Node version 20)

Replace `····` with `··`
console.log(form.clickedButton.getAttribute('formaction'));

Check failure on line 298 in assets/javascripts/overview.js

View workflow job for this annotation

GitHub Actions / Lint JavaScript code (using Node version 20)

Delete `··`
const progressIndication = document.getElementById('add-comments-progress-indication');

Check failure on line 299 in assets/javascripts/overview.js

View workflow job for this annotation

GitHub Actions / Lint JavaScript code (using Node version 20)

Delete `··`
const controls = document.getElementById('add-comments-controls');
progressIndication.style.display = 'flex';
controls.style.display = 'none';
Expand All @@ -301,17 +305,31 @@ function addComments(form) {
controls.style.display = 'inline';
window.addCommentsModal.hide();
};
fetchWithCSRF(form.action, {method: 'POST', body: new FormData(form)})

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: ';
}
fetchWithCSRF(reqUrl, {method: 'POST', body: new FormData(form)})
.then(response => {
if (!response.ok) throw `Server returned ${response.status}: ${response.statusText}`;
addFlash(
'info',
'The comments have been created. <a href="javascript: location.reload()">Reload</a> the page to show changes.'
);
addFlash('info', infoText);
done();
return response.json();
})
.then(resData => {

Check failure on line 323 in assets/javascripts/overview.js

View workflow job for this annotation

GitHub Actions / Lint JavaScript code (using Node version 20)

Delete `····`
console.log(resData);

Check failure on line 324 in assets/javascripts/overview.js

View workflow job for this annotation

GitHub Actions / Lint JavaScript code (using Node version 20)

Delete `······`
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', `The comments could not be added: ${error}`);
addFlash('danger', `${errText} ${error}`);
done();
});
}
58 changes: 38 additions & 20 deletions t/ui/10-tests_overview.t
Original file line number Diff line number Diff line change
Expand Up @@ -543,18 +543,34 @@ subtest 'filter by result and state' => sub {
ok !$driver->find_element_by_id('filter-failed')->is_selected, 'other checkbox not checked';
};

subtest "job template names displayed on 'Test result overview' page" => sub {
$driver->get('/group_overview/1002');
is($driver->find_element('.progress-bar-unfinished')->get_text(),
'1 unfinished', 'The number of unfinished jobs is right');

$driver->get('/tests/overview?distri=opensuse&version=13.1&build=0091&groupid=1002');
my @tds = $driver->find_elements('#results_DVD tbody tr .name');
is($tds[0]->get_text(), 'kde_variant', 'job template name kde_variant displayed correctly');

my @descriptions = $driver->find_elements('td.name a', 'css');
is(scalar @descriptions, 2, 'only test suites with description content are shown as links');
disable_bootstrap_animations;
$descriptions[0]->click();
is(wait_for_element(selector => '.popover-header')->get_text, 'kde_variant', 'description popover shows content');
};

subtest 'add comments' => sub {
my @buttons = $driver->find_elements('button[title="Add comments"]');
my @buttons = $driver->find_elements('button[title="Restart or comment jobs"]');
is @buttons, 0, 'button for adding comments not present if not logged-in';

$driver->find_element_by_link_text('Login')->click;
$driver->get('/tests/overview?state=done&result=failed');
disable_bootstrap_animations;
$driver->find_element('button[title="Add comments"]')->click;
$driver->find_element('button[title="Restart or comment jobs"]')->click;
my $comment_text = 'comment via add-comments';
my $submit_button = $driver->find_element('#add-comments-controls button[type="submit"]');
my $submit_button = $driver->find_element('#add-comments-controls button[id="commentJobsBtn"]');
$driver->find_element_by_id('text')->send_keys($comment_text);
is $submit_button->get_text, 'Submit comment on all 2 jobs', 'submit button displayed with number of jobs';
is $submit_button->get_text, 'Comment on all 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/The comments have been created. Reload/,
Expand All @@ -565,23 +581,25 @@ subtest 'add comments' => sub {
'comments created on all relevant jobs';
is $comments->search({job_id => {-not_in => \@failed_job_ids}, text => $comment_text})->count, 0,
'comments not created on other jobs';
};

subtest "job template names displayed on 'Test result overview' page" => sub {
$driver->get('/group_overview/1002');
is($driver->find_element('.progress-bar-failed')->get_text(), '1 failed', 'The number of failed jobs is right');
is($driver->find_element('.progress-bar-unfinished')->get_text(),
'1 unfinished', 'The number of unfinished jobs is right');

$driver->get('/tests/overview?distri=opensuse&version=13.1&build=0091&groupid=1002');
my @tds = $driver->find_elements('#results_DVD tbody tr .name');
is($tds[0]->get_text(), 'kde_variant', 'job template name kde_variant displayed correctly');

my @descriptions = $driver->find_elements('td.name a', 'css');
is(scalar @descriptions, 2, 'only test suites with description content are shown as links');
disable_bootstrap_animations;
$descriptions[0]->click();
is(wait_for_element(selector => '.popover-header')->get_text, 'kde_variant', 'description popover shows content');
subtest 'restart jobs with comment' => sub {
$driver->get('/tests/overview?state=done&result=failed');
disable_bootstrap_animations;
$driver->find_element('button[title="Restart or comment jobs"]')->click;
my $comment_text = 'comment current jobs and restart';
my $submit_button = $driver->find_element('#add-comments-controls button[id="restartAndCommentJobsBtn"]');
$driver->find_element_by_id('text')->send_keys($comment_text);
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/,
'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,
'comments not created on other jobs';
my $running_job_ids = map { $_->id } $jobs->search({state => RUNNING})->all;
is $running_job_ids, 2, 'all relevant jobs restarted';
};
};

subtest "job dependencies displayed on 'Test result overview' page" => sub {
Expand Down
28 changes: 21 additions & 7 deletions templates/webapi/test/overview.html.ep
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,12 @@
<div class="card-body">
% my $allow_commenting = @$job_ids && current_user;
% if ($allow_commenting) {
<button type="button" class="btn btn-secondary btn-circle btn-sm trigger-edit-button" onclick="showAddCommentsDialog()" title="Add comments">
<i class="fa fa-comment" aria-hidden="true"></i>
<button type="button" class="btn btn-secondary btn-circle btn-sm
trigger-edit-button" onclick="showAddCommentsDialog()" title="Restart or comment jobs">
<span class="fa-stack" style="font-size: 0.9em" >
<i class="fa fa-comment fa-stack-2x text-danger-info" aria-hidden="true"></i>
<i class="fa fa-undo fa-stack-1x" style="color: #0c4374;" aria-hidden="true"></i>
</span>
</button>
% }
% my @badges = qw(success secondary warning danger info primary light light);
Expand Down Expand Up @@ -217,7 +221,7 @@
<div class="modal fade" id="add-comments-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form action="<%= url_for('apiv1_post_comments')->query(job_id => $job_ids) %>" method="post" onsubmit="addComments(this); return false;">
<form method="post" onsubmit="restartOrCommentJobs(this); return false;">
<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>
Expand All @@ -231,10 +235,20 @@
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
<div id="add-comments-controls">
<button type="submit" class="btn btn-danger">
<i class="fa fa-comment"></i> Submit comment on all <%= scalar @$job_ids %> jobs
</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Discard</button>
<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>
</div>
</div>
</form>
Expand Down

0 comments on commit f33859a

Please sign in to comment.