From f97f9b857b1780ba0c87f13ec04fa2d31d7e6595 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 26 May 2022 15:41:30 -0700
Subject: [PATCH] Task results popover

---
 .../manage/tasks/tasks.component.html         | 25 +++++++++++++------
 .../manage/tasks/tasks.component.scss         |  3 +++
 src/documents/serialisers.py                  |  8 ++++++
 3 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 src-ui/src/app/components/manage/tasks/tasks.component.scss

diff --git a/src-ui/src/app/components/manage/tasks/tasks.component.html b/src-ui/src/app/components/manage/tasks/tasks.component.html
index dff538f3a..c292a5c00 100644
--- a/src-ui/src/app/components/manage/tasks/tasks.component.html
+++ b/src-ui/src/app/components/manage/tasks/tasks.component.html
@@ -27,28 +27,37 @@
   <table class="table table-striped align-middle border shadow-sm">
     <thead>
       <tr>
-        <th>
+        <th scope="col">
           <div class="form-check">
             <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length == 0" (click)="toggleAll($event); $event.stopPropagation();">
             <label class="form-check-label" for="all-tasks"></label>
           </div>
         </th>
-        <th scope="col" i18n>Name</th>
-        <th scope="col" i18n>Created</th>
-        <th scope="col" i18n>Actions</th>
+        <th scope="col" width="25%" i18n>Name</th>
+        <th scope="col" width="20%" i18n>Created</th>
+        <th scope="col" width="45%" i18n>Results</th>
+        <th scope="col" width="10%" i18n>Actions</th>
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let task of tasks">
-        <td>
+        <th scope="row">
           <div class="form-check">
             <input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task, $event); $event.stopPropagation();">
             <label class="form-check-label" for="task{{task.id}}"></label>
           </div>
+        </th>
+        <td>{{ task.name }}</td>
+        <td>{{ task.created | customDate:'short' }}</td>
+        <td>
+          <button *ngIf="task.result.length > 50" class="btn btn-link p-1 mr-2" [ngbPopover]="resultPopover" popoverClass="shadow font-monospace small" triggers="mouseenter:mouseleave:click">
+            <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
+              <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
+            </svg>
+          </button><span class="small d-none d-md-inline-block font-monospace">{{ task.result | slice:0:50 }}</span>
+          <ng-template #resultPopover><div class="small">{{ task.result }}</div></ng-template>
         </td>
-        <td scope="row">{{ task.name }}</td>
-        <td scope="row">{{ task.created | customDate:'medium' }}</td>
-        <td scope="row">
+        <td>
           <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task)">
             <svg class="sidebaricon" fill="currentColor">
               <use xlink:href="assets/bootstrap-icons.svg#check"/>
diff --git a/src-ui/src/app/components/manage/tasks/tasks.component.scss b/src-ui/src/app/components/manage/tasks/tasks.component.scss
new file mode 100644
index 000000000..838674a9c
--- /dev/null
+++ b/src-ui/src/app/components/manage/tasks/tasks.component.scss
@@ -0,0 +1,3 @@
+::ng-deep .popover {
+    max-width: 32rem;
+}
diff --git a/src/documents/serialisers.py b/src/documents/serialisers.py
index 17d37ae2a..273381106 100644
--- a/src/documents/serialisers.py
+++ b/src/documents/serialisers.py
@@ -610,6 +610,14 @@ class TasksViewSerializer(serializers.ModelSerializer):
         # just file tasks, for now
         return "file"
 
+    result = serializers.SerializerMethodField()
+
+    def get_result(self, obj):
+        result = ""
+        if hasattr(obj, "attempted_task"):
+            result = obj.attempted_task.result
+        return result
+
     status = serializers.SerializerMethodField()
 
     def get_status(self, obj):