Experimental result popover.

drgrice1 · Oct 18, 2023 · ae7a25e · ae7a25e
1 parent c42143f
commit ae7a25e
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 28 deletions.
diff --git a/htdocs/js/JobManager/jobmanager.js b/htdocs/js/JobManager/jobmanager.js
@@ -38,4 +38,13 @@
 			});
 		}
 	}
+
+	document.querySelectorAll('.result-popover-btn').forEach((popover) => {
+		new bootstrap.Popover(popover, {
+			trigger: 'hover focus',
+			customClass: 'job-queue-result-popover',
+			html: true,
+			placement: 'left'
+		});
+	});
 })();
diff --git a/htdocs/js/JobManager/jobmanager.scss b/htdocs/js/JobManager/jobmanager.scss
@@ -0,0 +1,3 @@
+.job-queue-result-popover {
+	--bs-popover-max-width: 400px;
+}
diff --git a/lib/WeBWorK/ContentGenerator/Instructor/JobManager.pm b/lib/WeBWorK/ContentGenerator/Instructor/JobManager.pm
@@ -33,7 +33,6 @@ use constant FIELDS => [
 	[ started  => x('Started') ],
 	[ finished => x('Finished') ],
 	[ state    => x('State') ],
-	[ result   => x('Result') ]
 ];
 
 use constant SORT_SUBS => {
@@ -42,8 +41,7 @@ use constant SORT_SUBS => {
 	created  => \&byCreatedTime,
 	started  => \&byStartedTime,
 	finished => \&byFinishedTime,
-	state    => \&byState,
-	result   => \&byResult
+	state    => \&byState
 };
 
 sub initialize ($c) {
@@ -178,6 +176,5 @@ sub byCreatedTime  { return $a->{created}  <=> $b->{created} }
 sub byStartedTime  { return $a->{started}  <=> $b->{started} }
 sub byFinishedTime { return $a->{finished} <=> $b->{finished} }
 sub byState        { return $a->{state} cmp $b->{state} }
-sub byResult       { return lc $a->{result} cmp lc $b->{result} }
 
 1;
diff --git a/templates/ContentGenerator/Instructor/JobManager.html.ep b/templates/ContentGenerator/Instructor/JobManager.html.ep
@@ -1,5 +1,9 @@
 % use WeBWorK::Utils qw(getAssetURL);
 %
+% content_for css => begin
+	<%= stylesheet getAssetURL($ce, 'js/JobManager/jobmanager.css') =%>
+% end
+%
 % content_for js => begin
 	<%= javascript getAssetURL($ce, 'js/ActionTabs/actiontabs.js'), defer => undef =%>
 	<%= javascript getAssetURL($ce, 'js/SelectAll/selectall.js'),   defer => undef =%>
@@ -100,10 +104,6 @@
 						<%= link_to maketext('State') => '#', class => 'sort-header',
 							data => { sort_field => 'state' } =%>
 					</th>
-					<th>
-						<%= link_to maketext('Result') => '#', class => 'sort-header',
-							data => { sort_field => 'result' } =%>
-					</th>
 				</tr>
 			</thead>
 			<tbody class="table-group-divider">
@@ -120,7 +120,7 @@
 							</td>
 							<td><%= label_for "job_${jobID}_checkbox" => $jobID =%></td>
 						% }
-						<td><%= $jobs->{$jobID}{task} =~ s/_/ /gr =%></td>
+						<td class="text-nowrap"><%= $jobs->{$jobID}{task} =~ s/_/ /gr =%></td>
 						<td class="text-nowrap">
 							<%= $c->formatDateTime(
 								$jobs->{$jobID}{created}, '', 'datetime_format_medium', $ce->{language}) =%>
@@ -137,14 +137,29 @@
 									$jobs->{$jobID}{finished}, '', 'datetime_format_medium', $ce->{language}) =%>
 							% }
 						</td>
-						<td><%= $jobs->{$jobID}{state} %></td>
-						<td style="min-width:20em">
-							% if (ref($jobs->{$jobID}{result}) eq 'ARRAY') {
-								% for (@{ $jobs->{$jobID}{result} } ) {
-									<p class="m-0"><%= $_ %></p>
-								% }
-							% } else {
-								<%= $jobs->{$jobID}{result} // '' %>
+						<td class="text-nowrap">
+							<%= $jobs->{$jobID}{state} =%>
+							% if (defined $jobs->{$jobID}{result}) {
+								% content_for "result_$jobID", begin
+									% if (ref($jobs->{$jobID}{result}) eq 'ARRAY') {
+										<ul class="m-0">
+											% for (@{ $jobs->{$jobID}{result} } ) {
+												<li><%= $_ %></li>
+											% }
+										</ul>
+									% } else {
+										<%= $jobs->{$jobID}{result} =%>
+									% }
+								% end
+								<%= link_to '#', class => 'result-popover-btn', role => 'button',
+									data => {
+										bs_toggle    => 'popover',
+										bs_title     => maketext('Result'),
+										bs_content   => content("result_$jobID")->xml_escape
+									}, begin =%>
+									<i class="fa-solid fa-circle-info fa-xl" aria-hidden="true"></i>
+									<span class="visually-hidden"><%= maketext('Result') %></span>
+								<% end =%>
 							% }
 						</td>
 					</tr>

diff --git a/templates/HelpFiles/InstructorJobManager.html.ep b/templates/HelpFiles/InstructorJobManager.html.ep
@@ -47,17 +47,13 @@
 	<dt><%= maketext('State') %></dt>
 	<dd>
 		<%= maketext('The current state of the job.  This will be one of "inactive", "active", "finished", or '
-			. '"failed". If a job is "inactive" it means that the job has been added to the queue, but execution of '
-			. 'the job has not yet started. If a job is "active" it means that the job is currently being executed. '
-			. 'If a job is "finished" it means that the execution of the job has successfully completed. If a job is '
-			. '"failed" it means that the execution of job has completed, but there were errors in the execution of '
-			. 'the job.') =%>
-	</dd>
-	<dt><%= maketext('Result') %></dt>
-	<dd>
-		<%= maketext('The result set by the job when execution is completed.  This will be shown if the job is in the '
-			. '"finished" or "failed" states, and will contain information about what happened when the job was '
-			. 'executed.') =%>
+			. '"failed". If a job is "inactive" it means that the job has been added to the queue, but execution '
+			. 'of the job has not yet started. If a job is "active" it means that the job is currently being '
+			. 'executed. If a job is "finished" it means that the execution of the job has successfully '
+			. 'completed. If a job is "failed" it means that the execution of job has completed, but there were '
+			. 'errors in the execution of the job. If the job is in the "finished" or "failed" state, then there '
+			. 'will also be a popover containing information about what happened when the job was executed.') =%>
+		</p>
 	</dd>
 </dl>
 %