From 68a09d9f943f00a78cb401554017ea56244a3aba Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Thu, 20 Feb 2020 18:13:14 +0100
Subject: [PATCH] Completed infrmation displayed by WBProcessListing.

---
 frontend/src/js/component/wb-name-and-uuid.js | 13 ++-
 .../src/js/component/wb-process-listing.js    | 96 +++++++++++++++----
 2 files changed, 88 insertions(+), 21 deletions(-)

diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js
index 5927681..732df7f 100644
--- a/frontend/src/js/component/wb-name-and-uuid.js
+++ b/frontend/src/js/component/wb-name-and-uuid.js
@@ -5,7 +5,7 @@ import arvadosObjectName from 'arvados-object-name';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBNameAndUuid extends Component {
-  componentDidMount() {
+  fetchData() {
     const { uuid, app, lookup } = this.props;
 
     if (!uuid)
@@ -75,6 +75,17 @@ class WBNameAndUuid extends Component {
     }
   }
 
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.uuid !== nextProps.uuid) {
+      this.props = nextProps;
+      this.fetchData();
+    }
+  }
+
   render({ uuid, onLinkClicked }, { error, item }) {
     if (!uuid)
       return (
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index 34483ec..6eb4530 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -4,6 +4,9 @@ import makeArvadosRequest from 'make-arvados-request';
 import WBTable from 'wb-table';
 import WBPagination from 'wb-pagination';
 import WBCheckboxes from 'wb-checkboxes';
+import wbFormatDate from 'wb-format-date';
+import wbFetchObjects from 'wb-fetch-objects';
+import WBNameAndUuid from 'wb-name-and-uuid';
 
 class WBProcessListing extends Component {
 
@@ -21,22 +24,28 @@ class WBProcessListing extends Component {
     this.fetchItems();
   }
 
-  prepareRows(items) {
+  prepareRows(requests, containerLookup, ownerLookup, outputLookup) {
     const { renderRenameLink, renderDeleteButton } = this.props;
-    return items.map(item => [
+    return requests.map(item => [
       (<div>
         <div>
-          <a href="#"
-            onclick={ e => { e.preventDefault(); route('/process/' + item['uuid']) }}>
+          <a href={ '/process/' + item['uuid'] }>
             { item['name'] }
           </a> { renderRenameLink(item, () => this.fetchItems()) }
         </div>
         <div>{ item['uuid'] }</div>
       </div>),
-      item['state'],
-      item['owner_uuid'],
-      item['created_at'].replace('T', ' ').substr(0, item['created_at'].length - 11) + '',
-      item['output_uuid'],
+      ( <div>
+          <div>{ item['state'] } /</div>
+          <div>{ item.container_uuid ?
+            item.container_uuid in containerLookup ?
+            containerLookup[item.container_uuid].state :
+            "Container Not Found" :
+            <i>{ String(item.container_uuid) }</i> }</div>
+        </div> ),
+      ( <WBNameAndUuid uuid={ item['owner_uuid'] } lookup={ ownerLookup } /> ),
+      wbFormatDate(item['created_at']),
+      ( <WBNameAndUuid uuid={ item['output_uuid'] } lookup={ outputLookup } /> ),
       (<div>
         { renderDeleteButton(item, () => this.fetchItems()) }
       </div>)
@@ -44,21 +53,68 @@ class WBProcessListing extends Component {
   }
 
   fetchItems() {
-    let { arvHost, arvToken } = this.props.appState;
-    let i = this.props.activePage;
-    let filters = [
-      [ 'state', 'in', this.state.requestStates.filter((_, idx) => this.state.reqStateMask[idx]) ]
+    const { arvHost, arvToken } = this.props.appState;
+    const { requestStates, reqStateMask } = this.state;
+    const { activePage, itemsPerPage, ownerUuid,
+      requestingContainerUuid } = this.props;
+
+    const filters = [
+      [ 'state', 'in', requestStates.filter((_, idx) => reqStateMask[idx]) ]
     ];
-    if (this.props.ownerUuid)
-      filters.push([ 'owner_uuid', '=', this.props.ownerUuid ]);
+    if (ownerUuid)
+      filters.push([ 'owner_uuid', '=', ownerUuid ]);
+    //if (requestingContainerUuid)
+      //filters.push([ 'requesting_container_uuid', '=', requestingContainerUuid ]);
+
     let prom = makeArvadosRequest(arvHost, arvToken,
       '/arvados/v1/container_requests?filters=' + encodeURIComponent(JSON.stringify(filters)) +
-      '&limit=' + encodeURIComponent(this.props.itemsPerPage) +
-      '&offset=' + encodeURIComponent(this.props.itemsPerPage * i));
-    prom = prom.then(xhr =>
+      '&limit=' + itemsPerPage +
+      '&offset=' + (itemsPerPage * activePage));
+
+    let requests;
+    let numPages;
+    prom = prom.then(xhr => {
+      requests = xhr.response.items;
+      numPages = Math.ceil(xhr.response['items_available'] / xhr.response['limit']);
+      /* container_uuids = requests.map(r => r.container_uuid);
+      container_uuids = container_uuids.filter(uuid => uuid);
+      const filters_1 = [
+        [ 'uuid', 'in', container_uuids ]
+      ];
+      return makeArvadosRequest(arvHost, arvToken,
+        '/arvados/v1/containers?filters=' +
+        encodeURIComponent(JSON.stringify(filters_1)));*/
+      return wbFetchObjects(arvHost, arvToken,
+        requests.map(r => r.container_uuid).filter(uuid => uuid));
+    });
+
+    let containerLookup;
+    prom = prom.then(lookup => {
+      containerLookup = lookup;
+      // const containers = xhr.response.items;
+      // containers.map(c => (containerLookup[c.uuid] = c));
+      return wbFetchObjects(arvHost, arvToken,
+        requests.map(r => r.owner_uuid).filter(uuid => uuid));
+    });
+
+    let ownerLookup;
+    prom = prom.then(lookup => {
+      ownerLookup = lookup;
+      return wbFetchObjects(arvHost, arvToken,
+        requests.map(r => r.output_uuid).filter(uuid => uuid));
+    });
+
+    let outputLookup;
+    prom = prom.then(lookup => (outputLookup = lookup));
+
+    // prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
+    //  '/arvados/v1/'))
+
+    prom = prom.then(() =>
       this.setState({
-        'numPages': Math.ceil(xhr.response['items_available'] / xhr.response['limit']),
-        'rows': this.prepareRows(xhr.response['items'])
+        'numPages': numPages,
+        'rows': this.prepareRows(requests, containerLookup,
+          ownerLookup, outputLookup)
       }));
   }
 
@@ -81,7 +137,7 @@ class WBProcessListing extends Component {
           cssClass="float-left mx-2 my-2" title="Container State: "
           onChange={ () => this.fetchItems() } />
 
-        <WBTable columns={ [ 'Name', 'Status', 'Owner', 'Created At (UTC)', 'Output', 'Actions' ] }
+        <WBTable columns={ [ 'Name', 'Status', 'Owner', 'Created At', 'Output', 'Actions' ] }
           rows={ rows } />
 
         <WBPagination numPages={ numPages }