Prettify json bytes in Web UI

ui/src/components/ActiveTasksTable.tsx

@@ -33,7 +33,7 @@ import TablePaginationActions, {
 import TableActions from "./TableActions";
 import { usePolling } from "../hooks";
 import { ActiveTaskExtended } from "../reducers/tasksReducer";
-import { durationBefore, timeAgo, uuidPrefix } from "../utils";
+import { durationBefore, timeAgo, uuidPrefix, prettifyPayload } from "../utils";
 import { TableColumn } from "../types/table";
 import { taskDetailsPath } from "../paths";
 
@@ -313,7 +313,7 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {task.payload}
+          {prettifyPayload(task.payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>{task.canceling ? "Canceling" : "Running"}</TableCell>

ui/src/components/ArchivedTasksTable.tsx

@@ -35,7 +35,7 @@ import TablePaginationActions, {
 } from "./TablePaginationActions";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
 import TableActions from "./TableActions";
-import { timeAgo, uuidPrefix } from "../utils";
+import { timeAgo, uuidPrefix, prettifyPayload } from "../utils";
 import { usePolling } from "../hooks";
 import { TaskInfoExtended } from "../reducers/tasksReducer";
 import { TableColumn } from "../types/table";
@@ -352,7 +352,7 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {task.payload}
+          {prettifyPayload(task.payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>{timeAgo(task.last_failed_at)}</TableCell>

ui/src/components/CompletedTasksTable.tsx

@@ -36,6 +36,7 @@ import {
   stringifyDuration,
   timeAgo,
   uuidPrefix,
+  prettifyPayload
 } from "../utils";
 import { usePolling } from "../hooks";
 import { TaskInfoExtended } from "../reducers/tasksReducer";
@@ -326,7 +327,7 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {task.payload}
+          {prettifyPayload(task.payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>{timeAgo(task.completed_at)}</TableCell>
@@ -335,7 +336,7 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {task.result}
+          {prettifyPayload(task.result)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>

ui/src/components/PendingTasksTable.tsx

@@ -36,7 +36,7 @@ import {
 import { taskRowsPerPageChange } from "../actions/settingsActions";
 import { AppState } from "../store";
 import { usePolling } from "../hooks";
-import { uuidPrefix } from "../utils";
+import { uuidPrefix, prettifyPayload } from "../utils";
 import { TableColumn } from "../types/table";
 import { TaskInfoExtended } from "../reducers/tasksReducer";
 import { taskDetailsPath } from "../paths";
@@ -354,7 +354,7 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {task.payload}
+          {prettifyPayload(task.payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell align="right">{task.retried}</TableCell>

ui/src/components/RetryTasksTable.tsx

@@ -39,7 +39,7 @@ import TablePaginationActions, {
 } from "./TablePaginationActions";
 import { taskRowsPerPageChange } from "../actions/settingsActions";
 import TableActions from "./TableActions";
-import { durationBefore, uuidPrefix } from "../utils";
+import { durationBefore, uuidPrefix, prettifyPayload } from "../utils";
 import { usePolling } from "../hooks";
 import { TaskInfoExtended } from "../reducers/tasksReducer";
 import { TableColumn } from "../types/table";
@@ -387,7 +387,7 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {task.payload}
+          {prettifyPayload(task.payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>{durationBefore(task.next_process_at)}</TableCell>

ui/src/components/ScheduledTasksTable.tsx

@@ -39,7 +39,7 @@ import TablePaginationActions, {
   rowsPerPageOptions,
 } from "./TablePaginationActions";
 import TableActions from "./TableActions";
-import { durationBefore, uuidPrefix } from "../utils";
+import { durationBefore, uuidPrefix, prettifyPayload } from "../utils";
 import { usePolling } from "../hooks";
 import { TaskInfoExtended } from "../reducers/tasksReducer";
 import { TableColumn } from "../types/table";
@@ -383,7 +383,7 @@ function Row(props: RowProps) {
           language="json"
           customStyle={{ margin: 0, maxWidth: 400 }}
         >
-          {task.payload}
+          {prettifyPayload(task.payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell>{durationBefore(task.next_process_at)}</TableCell>

ui/src/components/SchedulerEntriesTable.tsx

@@ -18,7 +18,7 @@ import { SortDirection, SortableTableColumn } from "../types/table";
 import TableSortLabel from "@material-ui/core/TableSortLabel";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { SchedulerEntry } from "../api";
-import { timeAgo, durationBefore } from "../utils";
+import { timeAgo, durationBefore, prettifyPayload } from "../utils";
 import SchedulerEnqueueEventsTable from "./SchedulerEnqueueEventsTable";
 
 const useStyles = makeStyles((theme) => ({
@@ -288,7 +288,7 @@ function Row(props: RowProps) {
       </TableCell>
       <TableCell className={clsx(isLastRow && classes.noBorder)}>
         <SyntaxHighlighter language="json">
-          {entry.task_payload}
+          {prettifyPayload(entry.task_payload)}
         </SyntaxHighlighter>
       </TableCell>
       <TableCell className={clsx(isLastRow && classes.noBorder)}>

ui/src/components/ServersTable.tsx

@@ -21,7 +21,7 @@ import AlertTitle from "@material-ui/lab/AlertTitle";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { ServerInfo } from "../api";
 import { SortDirection, SortableTableColumn } from "../types/table";
-import { timeAgo, uuidPrefix } from "../utils";
+import { timeAgo, uuidPrefix, prettifyPayload } from "../utils";
 import { queueDetailsPath } from "../paths";
 import Typography from "@material-ui/core/Typography";
 
@@ -282,7 +282,7 @@ function Row(props: RowProps) {
                             language="json"
                             customStyle={{ margin: 0 }}
                           >
-                            {worker.task_payload}
+                            {prettifyPayload(worker.task_payload)}
                           </SyntaxHighlighter>
                         </TableCell>
                         <TableCell>{worker.queue}</TableCell>