add Args component to render job args

webui/internal/assets/package.json

@@ -34,5 +34,8 @@
     "style-loader": "^0.19.0",
     "url-loader": "^0.6.2",
     "webpack": "^3.10.0"
+  },
+  "dependencies": {
+    "react-json-view": "^1.21.3"
   }
 }

webui/internal/assets/src/Args.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactJson from 'react-json-view';
+
+const base64regex = /^([\da-zA-Z+/]{4})*(([\da-zA-Z+/]{2}==)|([\da-zA-Z+/]{3}=))?$/;
+
+export default class Args extends React.Component {
+  static propTypes = {
+    args: PropTypes.object.isRequired,
+  }
+
+  render() {
+    let args = this.props.args;
+
+    // If object has base64 encoded JSON property named 'payload', try to unwrap it.
+    if (args.hasOwnProperty('payload') && base64regex.test(args.payload)) {
+      try {
+        args.payload = JSON.parse(atob(args.payload));
+        if (Object.keys(args).length === 1) {
+          args = args.payload;
+        }
+      } catch(e) {
+        args.payload = {
+          parse_error: 'not a valid JSON',
+          value: args.payload
+        };
+      }
+    }
+
+    return (
+      <ReactJson src={args}
+        name={false}
+        collapsed={1}
+        collapseStringsAfterLength={32}
+        displayDataTypes={false}
+      />
+    );
+  }
+}

webui/internal/assets/src/DeadJobs.js

@@ -4,6 +4,7 @@ import PageList from './PageList';
 import UnixTime from './UnixTime';
 import styles from './bootstrap.min.css';
 import cx from './cx';
+import Args from './Args';
 
 export default class DeadJobs extends React.Component {
   static propTypes = {
@@ -144,7 +145,7 @@ export default class DeadJobs extends React.Component {
                       <tr key={job.id}>
                         <td><input type="checkbox" checked={this.checked(job)} onChange={() => this.check(job)}/></td>
                         <td>{job.name}</td>
-                        <td>{JSON.stringify(job.args)}</td>
+                        <td><Args args={job.args}/></td>
                         <td>{job.err}</td>
                         <td><UnixTime ts={job.t} /></td>
                       </tr>

webui/internal/assets/src/Processes.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import UnixTime from './UnixTime';
 import ShortList from './ShortList';
 import styles from './bootstrap.min.css';
+import Args from './Args';
 import cx from './cx';
 
 class BusyWorkers extends React.Component {
@@ -27,7 +28,7 @@ class BusyWorkers extends React.Component {
                 return (
                   <tr key={worker.worker_id}>
                     <td>{worker.job_name}</td>
-                    <td>{worker.args_json}</td>
+                    <td><Args args={JSON.parse(worker.args_json)}/></td>
                     <td><UnixTime ts={worker.started_at}/></td>
                     <td><UnixTime ts={worker.checkin_at}/></td>
                     <td>{worker.checkin}</td>

webui/internal/assets/src/RetryJobs.js

@@ -4,6 +4,7 @@ import PageList from './PageList';
 import UnixTime from './UnixTime';
 import styles from './bootstrap.min.css';
 import cx from './cx';
+import Args from './Args';
 
 export default class RetryJobs extends React.Component {
   static propTypes = {
@@ -60,7 +61,7 @@ export default class RetryJobs extends React.Component {
                   return (
                     <tr key={job.id}>
                       <td>{job.name}</td>
-                      <td>{JSON.stringify(job.args)}</td>
+                      <td><Args args={job.args}/></td>
                       <td>{job.err}</td>
                       <td><UnixTime ts={job.t} /></td>
                     </tr>

webui/internal/assets/src/ScheduledJobs.js

@@ -4,6 +4,7 @@ import PageList from './PageList';
 import UnixTime from './UnixTime';
 import styles from './bootstrap.min.css';
 import cx from './cx';
+import Args from './Args';
 
 export default class ScheduledJobs extends React.Component {
   static propTypes = {
@@ -59,7 +60,7 @@ export default class ScheduledJobs extends React.Component {
                   return (
                     <tr key={job.id}>
                       <td>{job.name}</td>
-                      <td>{JSON.stringify(job.args)}</td>
+                      <td><Args args={job.args}/></td>
                       <td><UnixTime ts={job.run_at} /></td>
                     </tr>
                   );