Fancy result details

src-ui/src/app/components/admin/tasks/tasks.component.html

@@ -174,12 +174,36 @@
               </div>
             </td>
           </tr>
-          <tr>
-            <td class="p-0" [class.border-0]="expandedTask !== task.id" [attr.colspan]="sectionShowsResults(section) ? 5 : 4">
-              <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result_message }}</div></pre>
-            </td>
-          </tr>
-        }
+        <tr>
+          <td class="p-0" [class.border-0]="expandedTask !== task.id" [attr.colspan]="sectionShowsResults(section) ? 5 : 4">
+            <div #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="task-detail-panel bg-darker small mb-0">
+              <div class="p-2 p-lg-3 ms-lg-3">
+                @if (task.result_message) {
+                  <div class="detail-section mb-3">
+                    <div class="detail-label fs-7 fw-bold text-uppercase text-muted mb-1" i18n>Result message</div>
+                    <pre class="detail-block border border-dark bg-body p-3 rounded-2 mb-0">{{ task.result_message }}</pre>
+                  </div>
+                }
+
+                <div class="row g-3">
+                  <div class="col-12 col-xl-6">
+                    <div class="detail-section h-100">
+                      <div class="detail-label fs-7 fw-bold text-uppercase text-muted mb-1" i18n>Input data</div>
+                      <pre class="detail-block border border-dark bg-body p-3 rounded-2 mb-0">{{ task.input_data | json }}</pre>
+                    </div>
+                  </div>
+                  <div class="col-12 col-xl-6">
+                    <div class="detail-section h-100">
+                      <div class="detail-label fs-7 fw-bold text-uppercase text-muted mb-1" i18n>Result data</div>
+                      <pre class="detail-block border border-dark bg-body p-3 rounded-2 mb-0">{{ (task.result_data ?? {}) | json }}</pre>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+      }
       </tbody>
     </table>
   </div>

src-ui/src/app/components/admin/tasks/tasks.component.spec.ts

@@ -137,7 +137,7 @@ const tasks: PaperlessTask[] = [
   {
     id: 461,
     task_id: 'bb79efb3-1e78-4f31-b4be-0966620b0ce1',
-    input_data: {},
+    input_data: { dry_run: false, scope: 'global' },
     date_created: new Date('2023-06-07T03:54:35.694916Z'),
     date_done: null,
     task_type: PaperlessTaskType.SanityCheck,
@@ -147,6 +147,7 @@ const tasks: PaperlessTask[] = [
     status: PaperlessTaskStatus.Started,
     status_display: 'Started',
     result_message: null,
+    result_data: { issues_found: 0 },
     acknowledged: false,
     related_document_ids: [],
   },
@@ -285,6 +286,19 @@ describe('TasksComponent', () => {
     expect(component.expandedTask).toBeUndefined()
   })
 
+  it('should show structured task details when expanded', () => {
+    component.setSection(TaskSection.InProgress)
+    component.expandTask(tasks[6])
+    fixture.detectChanges()
+
+    const detailText = fixture.nativeElement.textContent
+
+    expect(detailText).toContain('Input data')
+    expect(detailText).toContain('Result data')
+    expect(detailText).toContain('"scope": "global"')
+    expect(detailText).toContain('"issues_found": 0')
+  })
+
   it('should support dismiss single task', () => {
     const dismissSpy = jest.spyOn(tasksService, 'dismissTasks')
     component.dismissTask(tasks[0])

src-ui/src/app/components/admin/tasks/tasks.component.ts

@@ -1,4 +1,4 @@
-import { NgTemplateOutlet } from '@angular/common'
+import { JsonPipe, NgTemplateOutlet, SlicePipe } from '@angular/common'
 import { Component, inject, OnDestroy, OnInit } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
@@ -107,6 +107,8 @@ const TRIGGER_SOURCE_OPTIONS = [
     PageHeaderComponent,
     IfPermissionsDirective,
     CustomDatePipe,
+    SlicePipe,
+    JsonPipe,
     FormsModule,
     ReactiveFormsModule,
     NgTemplateOutlet,

src-ui/src/styles.scss

@@ -119,6 +119,10 @@ table .btn-link {
   font-size: 1em;
 }
 
+.fs-7 {
+  font-size: 0.75rem !important;
+}
+
 .bg-body {
   background-color: var(--bs-body-bg);
 }
@@ -128,6 +132,10 @@ table .btn-link {
   color: var(--pngx-primary-text-contrast);
 }
 
+.bg-darker {
+  background-color: var(--pngx-bg-darker) !important;
+}
+
 .navbar-brand {
   color: var(--pngx-primary-text-contrast) !important;
 }