Added properties editor to WBContainerRequestFields.

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

@@ -8,106 +8,111 @@ import wbFormatDate from 'wb-format-date';
 import WBNameAndUuid from 'wb-name-and-uuid';
 import WBAccordion from 'wb-accordion';
 import WBJsonViewer from 'wb-json-viewer';
+import wbUpdateField from 'wb-update-field';
+import WBJsonEditor from 'wb-json-editor';
 
 class WBContainerRequestFields extends Component {
   componentDidMount() {
-    this.prepareRows();
+    this.fetchData();
   }
 
   componentWillReceiveProps(nextProps) {
     this.props = nextProps;
-    this.prepareRows();
+    this.fetchData();
   }
 
-  prepareRows() {
+  prepareRows(item) {
+    const { app } = this.props;
+    const { arvHost, arvToken } = app.state;
+
+    let rows = [
+      [ 'Name', item.name ],
+      [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
+      [ 'Properties', (
+        <WBJsonEditor name="Properties" app={ app } value={ item.properties }
+          onChange={ value => wbUpdateField(arvHost, arvToken, item.uuid, 'properties', value)
+            .then(() => { item.properties = value; this.prepareRows(item); }) } />
+      ) ],
+      [ 'State', item.state ],
+      [ 'Requesting Container', (
+        <WBNameAndUuid app={ app } uuid={ item.requesting_container_uuid } />
+      ) ],
+      [ 'Container', (
+        <WBNameAndUuid app={ app } uuid={ item.container_uuid } />
+      ) ],
+      [ 'Container Count Max', item.container_count_max ],
+      [ 'Mounts', (
+        <WBAccordion names={ Object.keys(item.mounts) }
+          cardHeaderClass="card-header-sm">
+          { Object.keys(item.mounts).map(k => (
+            <WBJsonViewer app={ app } value={ item.mounts[k] } />
+          )) }
+        </WBAccordion>
+      ) ],
+      [ 'Runtime Constraints', (
+        <WBAccordion names={ ['Runtime Constraints'] }
+          cardHeaderClass="card-header-sm">
+          <WBJsonViewer app={ app } value={ item.runtime_constraints } />
+        </WBAccordion>
+      ) ],
+      [ 'Scheduling Parameters', (
+        <WBAccordion names={ ['Scheduling Parameters'] }
+          cardHeaderClass="card-header-sm">
+          <WBJsonViewer app={ app } value={ item.scheduling_parameters } />
+        </WBAccordion>
+      ) ],
+      [ 'Container Image', (
+        <WBNameAndUuid app={ app } uuid={ item.container_image } />
+      ) ],
+      [ 'Environment', (
+        <WBAccordion names={ ['Environment'] }
+          cardHeaderClass="card-header-sm">
+          <WBJsonViewer app={ app } value={ item.environment } />
+        </WBAccordion>
+      ) ],
+      [ 'Working Directory', item.cwd ],
+      [ 'Command', (
+        <WBJsonViewer app={ app } value={ item.command } pretty={ false } />
+      ) ],
+      [ 'Output Path', item.output_path ],
+      [ 'Output Name', item.output_name ],
+      [ 'Output TTL', item.output_ttl ],
+      [ 'Priority', item.priority ],
+      [ 'Expires At', wbFormatDate(item.expires_at) ],
+      [ 'Use Existing', String(item.use_existing) ],
+      [ 'Log', (
+        <WBNameAndUuid app={ app } uuid={ item.log_uuid } />
+      ) ],
+      [ 'Output', (
+        <WBNameAndUuid app={ app } uuid={ item.output_uuid } />
+      ) ],
+      [ 'Filters', (
+        item.filters ? (<WBJsonViewer app={ app } value={ item.filters } />) : (<i>{ String(item.filters) }</i>)
+      ) ],
+      [ 'Runtime Token', item.runtime_token || (<i>{ String(item.runtime_token) }</i>) ],
+      [ 'Runtime User', (
+        <WBNameAndUuid app={ app } uuid={ item.runtime_user } />
+      ) ],
+      [ 'Runtime Auth Scopes', (
+        item.runtime_auth_scopes ? (
+          <WBJsonViewer app={ app } value={ item.runtime_auth_scopes } />
+        ) : (
+          <i>{ String(item.runtime_auth_scopes) }</i>
+        )
+      ) ]
+    ];
+    rows = rows.map(r => [r[0], r[1] ? r[1] : (<i>{ String(r[1]) }</i>)]);
+    this.setState({ rows });
+  }
+
+  fetchData() {
     let { uuid, app } = this.props;
     let { arvHost, arvToken } = app.state;
 
     let item;
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/container_requests/' + uuid);
-    prom = prom.then(xhr => (item = xhr.response));
-
-    prom = prom.then(() => {
-      let rows = [
-        [ 'Name', item.name ],
-        [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
-        [ 'Properties', (
-          <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
-            <WBJsonViewer app={ app } value={ item.properties } />
-          </WBAccordion>
-        ) ],
-        [ 'State', item.state ],
-        [ 'Requesting Container', (
-          <WBNameAndUuid app={ app } uuid={ item.requesting_container_uuid } />
-        ) ],
-        [ 'Container', (
-          <WBNameAndUuid app={ app } uuid={ item.container_uuid } />
-        ) ],
-        [ 'Container Count Max', item.container_count_max ],
-        [ 'Mounts', (
-          <WBAccordion names={ Object.keys(item.mounts) }
-            cardHeaderClass="card-header-sm">
-            { Object.keys(item.mounts).map(k => (
-              <WBJsonViewer app={ app } value={ item.mounts[k] } />
-            )) }
-          </WBAccordion>
-        ) ],
-        [ 'Runtime Constraints', (
-          <WBAccordion names={ ['Runtime Constraints'] }
-            cardHeaderClass="card-header-sm">
-            <WBJsonViewer app={ app } value={ item.runtime_constraints } />
-          </WBAccordion>
-        ) ],
-        [ 'Scheduling Parameters', (
-          <WBAccordion names={ ['Scheduling Parameters'] }
-            cardHeaderClass="card-header-sm">
-            <WBJsonViewer app={ app } value={ item.scheduling_parameters } />
-          </WBAccordion>
-        ) ],
-        [ 'Container Image', (
-          <WBNameAndUuid app={ app } uuid={ item.container_image } />
-        ) ],
-        [ 'Environment', (
-          <WBAccordion names={ ['Environment'] }
-            cardHeaderClass="card-header-sm">
-            <WBJsonViewer app={ app } value={ item.environment } />
-          </WBAccordion>
-        ) ],
-        [ 'Working Directory', item.cwd ],
-        [ 'Command', (
-          <WBJsonViewer app={ app } value={ item.command } pretty={ false } />
-        ) ],
-        [ 'Output Path', item.output_path ],
-        [ 'Output Name', item.output_name ],
-        [ 'Output TTL', item.output_ttl ],
-        [ 'Priority', item.priority ],
-        [ 'Expires At', wbFormatDate(item.expires_at) ],
-        [ 'Use Existing', String(item.use_existing) ],
-        [ 'Log', (
-          <WBNameAndUuid app={ app } uuid={ item.log_uuid } />
-        ) ],
-        [ 'Output', (
-          <WBNameAndUuid app={ app } uuid={ item.output_uuid } />
-        ) ],
-        [ 'Filters', (
-          item.filters ? (<WBJsonViewer app={ app } value={ item.filters } />) : (<i>{ String(item.filters) }</i>)
-        ) ],
-        [ 'Runtime Token', item.runtime_token || (<i>{ String(item.runtime_token) }</i>) ],
-        [ 'Runtime User', (
-          <WBNameAndUuid app={ app } uuid={ item.runtime_user } />
-        ) ],
-        [ 'Runtime Auth Scopes', (
-          item.runtime_auth_scopes ? (
-            <WBJsonViewer app={ app } value={ item.runtime_auth_scopes } />
-          ) : (
-            <i>{ String(item.runtime_auth_scopes) }</i>
-          )
-        ) ]
-      ];
-      rows = rows.map(r => [r[0], r[1] ? r[1] : (<i>{ String(r[1]) }</i>)]);
-      this.setState({ 'rows': rows });
-    });
+    prom = prom.then(xhr => this.prepareRows(xhr.response));
   }
 
   render({}, { rows }) {