Replaced <pre>s with WBJsonViewer in WBContainerRequestFields.

frontend/src/js/component/wb-container-request-fields.js

@@ -7,6 +7,7 @@ import urlForObject from 'url-for-object';
 import wbFormatDate from 'wb-format-date';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import WBAccordion from 'wb-accordion';
+import WBJsonViewer from 'wb-json-viewer';
 
 class WBContainerRequestFields extends Component {
   componentDidMount() {
@@ -33,7 +34,7 @@ class WBContainerRequestFields extends Component {
         [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
         [ 'Properties', (
           <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.properties, null, 2) }</pre>
+            <WBJsonViewer value={ item.properties } />
           </WBAccordion>
         ) ],
         [ 'State', item.state ],
@@ -48,20 +49,20 @@ class WBContainerRequestFields extends Component {
           <WBAccordion names={ Object.keys(item.mounts) }
             cardHeaderClass="card-header-sm">
             { Object.keys(item.mounts).map(k => (
-              <pre class="word-wrap">{ JSON.stringify(item.mounts[k], null, 2) }</pre>
+              <WBJsonViewer value={ item.mounts[k] } />
             )) }
           </WBAccordion>
         ) ],
         [ 'Runtime Constraints', (
           <WBAccordion names={ ['Runtime Constraints'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.runtime_constraints, null, 2) }</pre>
+            <WBJsonViewer value={ item.runtime_constraints } />
           </WBAccordion>
         ) ],
         [ 'Scheduling Parameters', (
           <WBAccordion names={ ['Scheduling Parameters'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.scheduling_parameters, null, 2) }</pre>
+            <WBJsonViewer value={ item.scheduling_parameters } />
           </WBAccordion>
         ) ],
         [ 'Container Image', (
@@ -70,12 +71,12 @@ class WBContainerRequestFields extends Component {
         [ 'Environment', (
           <WBAccordion names={ ['Environment'] }
             cardHeaderClass="card-header-sm">
-            <pre class="word-wrap">{ JSON.stringify(item.environment, null, 2) }</pre>
+            <WBJsonViewer value={ item.environment } />
           </WBAccordion>
         ) ],
         [ 'Working Directory', item.cwd ],
         [ 'Command', (
-          <pre class="word-wrap">{ JSON.stringify(item.command) }</pre>
+          <WBJsonViewer value={ item.command } />
         ) ],
         [ 'Output Path', item.output_path ],
         [ 'Output Name', item.output_name ],
@@ -90,7 +91,7 @@ class WBContainerRequestFields extends Component {
           <WBNameAndUuid app={ app } uuid={ item.output_uuid } />
         ) ],
         [ 'Filters', (
-          item.filters ? (<pre class="word-wrap">{ item.filters }</pre>) : (<i>{ String(item.filters) }</i>)
+          item.filters ? (<WBJsonViewer value={ item.filters } />) : (<i>{ String(item.filters) }</i>)
         ) ],
         [ 'Runtime Token', item.runtime_token || (<i>{ String(item.runtime_token) }</i>) ],
         [ 'Runtime User', (
@@ -98,7 +99,7 @@ class WBContainerRequestFields extends Component {
         ) ],
         [ 'Runtime Auth Scopes', (
           item.runtime_auth_scopes ? (
-            <pre class="word-wrap">{ JSON.stringify(item.runtime_auth_scopes, null, 2) }</pre>
+            <WBJsonViewer value={ item.runtime_auth_scopes } />
           ) : (
             <i>{ String(item.runtime_auth_scopes) }</i>
           )