Adjust payload field to print content if bytes are printable

ui/src/api.ts

@@ -242,7 +242,7 @@ export interface DailyStat {
 // BaseTask corresponds to asynq.Task type.
 interface BaseTask {
   type: string;
-  payload: { [key: string]: any };
+  payload: string;
 }
 
 export interface ActiveTask extends BaseTask {
@@ -314,7 +314,7 @@ export interface SchedulerEntry {
   id: string;
   spec: string;
   task_type: string;
-  task_payload: { [key: string]: any };
+  task_payload: string;
   options: string[];
   next_enqueue_at: string;
   // prev_enqueue_at will be omitted

ui/src/components/ActiveTasksTable.tsx

@@ -288,7 +288,7 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {JSON.stringify(task.payload)}
+          {task.payload}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>{task.canceling ? "Canceling" : "Running"}</TableCell>

ui/src/components/ArchivedTasksTable.tsx

@@ -331,7 +331,7 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {JSON.stringify(task.payload)}
+          {task.payload}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>{timeAgo(task.last_failed_at)}</TableCell>

ui/src/components/PendingTasksTable.tsx

@@ -333,7 +333,7 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {JSON.stringify(task.payload)}
+          {task.payload}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell align="right">{task.retried}</TableCell>

ui/src/components/RetryTasksTable.tsx

@@ -365,7 +365,7 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {JSON.stringify(task.payload)}
+          {task.payload}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>{durationBefore(task.next_process_at)}</TableCell>

ui/src/components/ScheduledTasksTable.tsx

@@ -362,7 +362,7 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {JSON.stringify(task.payload)}
+          {task.payload}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>{durationBefore(task.next_process_at)}</TableCell>

ui/src/components/SchedulerEntriesTable.tsx

@@ -288,7 +288,7 @@ function Row(props: RowProps) {
       </TableCell>
       <TableCell className={clsx(isLastRow && classes.noBorder)}>
         <SyntaxHighlighter language="json">
-          {JSON.stringify(entry.task_payload)}
+          {entry.task_payload}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell className={clsx(isLastRow && classes.noBorder)}>

ui/src/components/ServersTable.tsx

@@ -282,7 +282,7 @@ function Row(props: RowProps) {
                             language="json"
                             customStyle={{ margin: 0 }}
                           >
-                            {JSON.stringify(worker.task_payload)}
+                            {worker.task_payload}
                           </SyntaxHighlighter>
                         </TableCell>
                         <TableCell>{worker.queue}</TableCell>