Added listing of children to WBProcessView.

frontend/src/js/component/wb-process-listing.js

@@ -139,7 +139,7 @@ class WBProcessListing extends Component {
     this.fetchItems();
   }
 
-  render({ appState, ownerUuid, activePage, onPageChanged },
+  render({ appState, ownerUuid, activePage, onPageChanged, getPageUrl },
     { rows, numPages, requestStates, containerStates,
       reqStateMask, contStateMask }) {
 
@@ -154,7 +154,8 @@ class WBProcessListing extends Component {
 
         <WBPagination numPages={ numPages }
           activePage={ activePage }
-          onPageChanged={ i => onPageChanged(i) } />
+          getPageUrl={ getPageUrl }
+          onPageChanged={ onPageChanged } />
       </div>
     );
   }
@@ -163,7 +164,9 @@ class WBProcessListing extends Component {
 WBProcessListing.defaultProps = {
   'itemsPerPage': 100,
   'ownerUuid': null,
-  'requestingContainerUuid': null
+  'requestingContainerUuid': null,
+  'renderRenameLink': () => {},
+  'renderDeleteButton': () => {}
 };
 
 export default WBProcessListing;

frontend/src/js/page/wb-app.js

@@ -79,7 +79,7 @@ class WBApp extends Component {
         <WBBrowse path="/shared-with-me/:activePage?"
           app={ this } mode="shared-with-me" />
 
-        <WBProcessView path="/process/:uuid" app={ this } />
+        <WBProcessView path="/process/:uuid/:page?" app={ this } />
 
         <WBContainerView path="/container/:uuid" app={ this } />
 

frontend/src/js/page/wb-process-view.js

@@ -8,6 +8,7 @@ import urlForObject from 'url-for-object';
 import detectHashes from 'detect-hashes';
 import WBCommonFields from 'wb-common-fields';
 import WBContainerRequestFields from 'wb-container-request-fields';
+import WBProcessListing from 'wb-process-listing';
 
 class WBProcessView extends Component {
   constructor(...args) {
@@ -15,7 +16,13 @@ class WBProcessView extends Component {
     this.state.objectUrls = [];
   }
 
-  componentDidMount() {
+  getUrl(props) {
+    const page = ('page' in props ? props.page : this.props.page);
+    return ('/process/' + this.props.uuid +
+      (page ? '/' + page : ''));
+  }
+
+  fetchData() {
     let { arvHost, arvToken } = this.props.app.state;
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/container_requests/' + this.props.uuid);
@@ -74,11 +81,25 @@ class WBProcessView extends Component {
       let objDict = {};
       objects.map(o => (objDict[o['uuid']] = o));
       let urls = objects.map(o => urlForObject(o));
-      this.setState({ 'objectUrls': urls });
+      this.setState({
+        'objectUrls': urls,
+        'request': req,
+        'container': cont
+      });
     });
   }
 
-  render({ app, uuid }, { objectUrls }) {
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.setState({ 'objectUrls': [], 'request': null, 'container': null });
+    this.fetchData();
+  }
+
+  render({ app, uuid, page }, { objectUrls, container }) {
     return (
       <div>
         <WBNavbarCommon app={ app } />
@@ -95,6 +116,15 @@ class WBProcessView extends Component {
         <h2>Container Request Fields</h2>
         <WBContainerRequestFields app={ app } uuid={ uuid } />
 
+        { container ? ([
+          <h2>Children</h2>,
+          <WBProcessListing appState={ app.state }
+            requestingContainerUuid={ container.uuid }
+            itemsPerPage="20"
+            activePage={ Number(page || 0) }
+            getPageUrl={ page => this.getUrl({ page }) } />
+        ]) : null }
+
         <div>
           <a href="/browse">Click here</a>
         </div>