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>

ui/src/utils.ts

@@ -102,3 +102,22 @@ export function percentage(numerator: number, denominator: number): string {
   const perc = ((numerator / denominator) * 100).toFixed(2);
   return `${perc} %`;
 }
+
+
+export function isJsonPayload(p: string) {
+  try {
+    JSON.parse(p);
+  } catch (error) {
+    return false;
+  }
+
+  return true;
+}
+
+export function prettifyPayload(p: string) {
+  if (isJsonPayload(p)) {
+    return JSON.stringify(JSON.parse(p), null, 2);
+  }
+
+  return p;
+}

ui/src/views/TaskDetailsView.tsx

@@ -18,7 +18,7 @@ import { TaskDetailsRouteParams } from "../paths";
 import { usePolling } from "../hooks";
 import { listQueuesAsync } from "../actions/queuesActions";
 import SyntaxHighlighter from "../components/SyntaxHighlighter";
-import { durationFromSeconds, stringifyDuration, timeAgo } from "../utils";
+import { durationFromSeconds, stringifyDuration, timeAgo, prettifyPayload } from "../utils";
 
 function mapStateToProps(state: AppState) {
   return {
@@ -228,7 +228,7 @@ function TaskDetailsView(props: Props) {
                       language="json"
                       customStyle={{ margin: 0, maxWidth: 400 }}
                     >
-                      {taskInfo.payload}
+                      {prettifyPayload(taskInfo.payload)}
                     </SyntaxHighlighter>
                   )}
                 </div>
@@ -262,7 +262,7 @@ function TaskDetailsView(props: Props) {
                           language="json"
                           customStyle={{ margin: 0, maxWidth: 400 }}
                         >
-                          {taskInfo.result}
+                          {prettifyPayload(taskInfo.result)}
                         </SyntaxHighlighter>
                       </div>
                     </div>