Prettify json bytes in Web UI

2025-01-18 18:55:54 +08:00 · 2021-12-14 00:39:55 +00:00 · 2021-12-14 00:39:55 +00:00 · 711ca8b5c8
commit 711ca8b5c8
parent 980cdedcc4
19 changed files with 53 additions and 33 deletions
--- a/ui/build/asset-manifest.json
+++ b/ui/build/asset-manifest.json
@ -1,17 +1,17 @@
 {
  "files": {
-    "main.js": "/[[.RootPath]]/static/js/main.525ff6d9.chunk.js",
-    "main.js.map": "/[[.RootPath]]/static/js/main.525ff6d9.chunk.js.map",
+    "main.js": "/[[.RootPath]]/static/js/main.2bdef890.chunk.js",
+    "main.js.map": "/[[.RootPath]]/static/js/main.2bdef890.chunk.js.map",
    "runtime-main.js": "/[[.RootPath]]/static/js/runtime-main.9fea6c1a.js",
    "runtime-main.js.map": "/[[.RootPath]]/static/js/runtime-main.9fea6c1a.js.map",
-    "static/js/2.260e42b2.chunk.js": "/[[.RootPath]]/static/js/2.260e42b2.chunk.js",
-    "static/js/2.260e42b2.chunk.js.map": "/[[.RootPath]]/static/js/2.260e42b2.chunk.js.map",
+    "static/js/2.d6956563.chunk.js": "/[[.RootPath]]/static/js/2.d6956563.chunk.js",
+    "static/js/2.d6956563.chunk.js.map": "/[[.RootPath]]/static/js/2.d6956563.chunk.js.map",
    "index.html": "/[[.RootPath]]/index.html",
-    "static/js/2.260e42b2.chunk.js.LICENSE.txt": "/[[.RootPath]]/static/js/2.260e42b2.chunk.js.LICENSE.txt"
+    "static/js/2.d6956563.chunk.js.LICENSE.txt": "/[[.RootPath]]/static/js/2.d6956563.chunk.js.LICENSE.txt"
  },
  "entrypoints": [
    "static/js/runtime-main.9fea6c1a.js",
-    "static/js/2.260e42b2.chunk.js",
-    "static/js/main.525ff6d9.chunk.js"
+    "static/js/2.d6956563.chunk.js",
+    "static/js/main.2bdef890.chunk.js"
  ]
 }
--- a/ui/build/index.html
+++ b/ui/build/index.html
@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" type="image/png" href="/[[.RootPath]]/favicon.ico"/><link rel="icon" type="image/png" sizes="32x32" href="/[[.RootPath]]/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/[[.RootPath]]/favicon-16x16.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Asynq monitoring web console"/><link rel="apple-touch-icon" sizes="180x180" href="/[[.RootPath]]/apple-touch-icon.png"/><link rel="manifest" href="/[[.RootPath]]/manifest.json"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/><script>window.ROOT_PATH="/[[.RootPath]]"</script><title>Asynq - Monitoring</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,i,l=t[0],a=t[1],f=t[2],c=0,s=[];c<l.length;c++)i=l[c],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,f||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,l=1;l<r.length;l++){var a=r[l];0!==o[a]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/[[.RootPath]]/";var l=this.webpackJsonpui=this.webpackJsonpui||[],a=l.push.bind(l);l.push=t,l=l.slice();for(var f=0;f<l.length;f++)t(l[f]);var p=a;r()}([])</script><script src="/[[.RootPath]]/static/js/2.260e42b2.chunk.js"></script><script src="/[[.RootPath]]/static/js/main.525ff6d9.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" type="image/png" href="/[[.RootPath]]/favicon.ico"/><link rel="icon" type="image/png" sizes="32x32" href="/[[.RootPath]]/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/[[.RootPath]]/favicon-16x16.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Asynq monitoring web console"/><link rel="apple-touch-icon" sizes="180x180" href="/[[.RootPath]]/apple-touch-icon.png"/><link rel="manifest" href="/[[.RootPath]]/manifest.json"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/><script>window.ROOT_PATH="/[[.RootPath]]"</script><title>Asynq - Monitoring</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,i,l=t[0],a=t[1],f=t[2],c=0,s=[];c<l.length;c++)i=l[c],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,f||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,l=1;l<r.length;l++){var a=r[l];0!==o[a]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/[[.RootPath]]/";var l=this.webpackJsonpui=this.webpackJsonpui||[],a=l.push.bind(l);l.push=t,l=l.slice();for(var f=0;f<l.length;f++)t(l[f]);var p=a;r()}([])</script><script src="/[[.RootPath]]/static/js/2.d6956563.chunk.js"></script><script src="/[[.RootPath]]/static/js/main.2bdef890.chunk.js"></script></body></html>
--- a/ui/build/static/js/2.d6956563.chunk.js
+++ b/ui/build/static/js/2.d6956563.chunk.js
--- a/ui/build/static/js/2.d6956563.chunk.js.LICENSE.txt
+++ b/ui/build/static/js/2.d6956563.chunk.js.LICENSE.txt
--- a/ui/build/static/js/2.d6956563.chunk.js.map
+++ b/ui/build/static/js/2.d6956563.chunk.js.map
--- a/ui/build/static/js/main.2bdef890.chunk.js
+++ b/ui/build/static/js/main.2bdef890.chunk.js
--- a/ui/build/static/js/main.2bdef890.chunk.js.map
+++ b/ui/build/static/js/main.2bdef890.chunk.js.map
--- a/ui/build/static/js/main.525ff6d9.chunk.js
+++ b/ui/build/static/js/main.525ff6d9.chunk.js
--- a/ui/build/static/js/main.525ff6d9.chunk.js.map
+++ b/ui/build/static/js/main.525ff6d9.chunk.js.map
--- a/ui/src/components/ActiveTasksTable.tsx
+++ b/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>
--- a/ui/src/components/ArchivedTasksTable.tsx
+++ b/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>
--- a/ui/src/components/CompletedTasksTable.tsx
+++ b/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>
--- a/ui/src/components/PendingTasksTable.tsx
+++ b/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>
--- a/ui/src/components/RetryTasksTable.tsx
+++ b/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>
--- a/ui/src/components/ScheduledTasksTable.tsx
+++ b/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>
--- a/ui/src/components/SchedulerEntriesTable.tsx
+++ b/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)}>
--- a/ui/src/components/ServersTable.tsx
+++ b/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>
--- a/ui/src/utils.ts
+++ b/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;
+}
--- a/ui/src/views/TaskDetailsView.tsx
+++ b/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>