Adjust payload field to print content if bytes are printable

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>