From cfdbb532f79bdf153eb7d08ff4124ac90f8d7089 Mon Sep 17 00:00:00 2001
From: Stanislaw Adaszewski <s.adaszewski@gmail.com>
Date: Fri, 3 Apr 2020 12:45:22 +0200
Subject: [PATCH] Added lazy mode to WBNameAndUuid and WBProcessState.

---
 frontend/src/js/component/wb-name-and-uuid.js | 23 +++++++++++++++----
 .../src/js/component/wb-process-listing.js    |  6 ++---
 frontend/src/js/component/wb-process-state.js | 20 ++++++++++++----
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/frontend/src/js/component/wb-name-and-uuid.js b/frontend/src/js/component/wb-name-and-uuid.js
index 732df7f..2c45b57 100644
--- a/frontend/src/js/component/wb-name-and-uuid.js
+++ b/frontend/src/js/component/wb-name-and-uuid.js
@@ -76,17 +76,26 @@ class WBNameAndUuid extends Component {
   }
 
   componentDidMount() {
-    this.fetchData();
+    if (this.props.lazy)
+      ;//this.setState({ item: { uuid: this.props.uuid }});
+    else
+      this.fetchData();
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.uuid !== nextProps.uuid) {
+    if (this.props.uuid === nextProps.uuid)
+      return;
+
+    if (nextProps.lazy) {
+      this.setState({ item: { uuid: nextProps.uuid }});
+
+    } else {
       this.props = nextProps;
       this.fetchData();
     }
   }
 
-  render({ uuid, onLinkClicked }, { error, item }) {
+  render({ uuid, onLinkClicked, lazy }, { error, item }) {
     if (!uuid)
       return (
         <div><i>{ String(uuid) }</i></div>
@@ -97,10 +106,14 @@ class WBNameAndUuid extends Component {
         <div>
           { error ? error : (item ? (
             <a href={ urlForObject(item) } onclick={ onLinkClicked }>{ arvadosObjectName(item) }</a>
-          ) : 'Loading...') }
+          ) : (lazy ? null : 'Loading...')) }
         </div>
         <div>
-          { uuid }
+          { uuid } { (lazy && !item) ? (
+            <a href="#" title="Look up" onclick={ e => { e.preventDefault(); this.fetchData(); } }>
+              <i class="fas fa-search"></i>
+            </a>
+          ) : null }
         </div>
       </div>
     );
diff --git a/frontend/src/js/component/wb-process-listing.js b/frontend/src/js/component/wb-process-listing.js
index c2961e6..45e8b8a 100644
--- a/frontend/src/js/component/wb-process-listing.js
+++ b/frontend/src/js/component/wb-process-listing.js
@@ -58,10 +58,10 @@ class WBProcessListing extends Component {
             { item.description } { renderEditDescription(item, () => this.fetchItems()) }
           </div>
         </div>),
-        ( <WBProcessState app={ app } process={ item } /> ),
-        ( <WBNameAndUuid app={ app } uuid={ item['owner_uuid'] } /> ),
+        ( <WBProcessState app={ app } process={ item } lazy={ true } /> ),
+        ( <WBNameAndUuid app={ app } uuid={ item['owner_uuid'] } lazy={ true } /> ),
         wbFormatDate(item['created_at']),
-        ( <WBNameAndUuid app={ app } uuid={ item['output_uuid'] } /> ),
+        ( <WBNameAndUuid app={ app } uuid={ item['output_uuid'] } lazy={ true } /> ),
         (<div>
           <button class="btn btn-outline-warning m-1" onclick={ () => this.cancelProcess(item.uuid) }>
             <i class="fas fa-stop-circle"></i>
diff --git a/frontend/src/js/component/wb-process-state.js b/frontend/src/js/component/wb-process-state.js
index 27387e0..b334ae1 100644
--- a/frontend/src/js/component/wb-process-state.js
+++ b/frontend/src/js/component/wb-process-state.js
@@ -3,12 +3,18 @@ import makeArvadosRequest from 'make-arvados-request';
 
 class WBProcessState extends Component {
   componentDidMount() {
-    this.fetchData();
+    if (!this.props.lazy)
+      this.fetchData();
   }
 
   componentWillReceiveProps(nextProps) {
-    this.props = nextProps;
-    this.fetchData();
+    if (this.props.lazy) {
+      this.setState({ container: null, apiError: null });
+
+    } else {
+      this.props = nextProps;
+      this.fetchData();
+    }
   }
 
   fetchData() {
@@ -24,7 +30,7 @@ class WBProcessState extends Component {
     prom = prom.catch(() => this.setState({ 'apiError': 'Failed to fetch container' }));
   }
 
-  render({ process }, { container, apiError }) {
+  render({ process, lazy }, { container, apiError }) {
     const runtimeStatus = container ? container.runtime_status : null;
     const error = runtimeStatus ? runtimeStatus.error : null;
     const warning = runtimeStatus ? runtimeStatus.warning : null;
@@ -38,7 +44,11 @@ class WBProcessState extends Component {
         { error ? [" / ", <a href={ '/container/' + container.uuid }
           title={ error }>E</a> ] : null }
         { warning ? [ " / ", <a href={ '/container/' + container.uuid }
-          title={ warning }>W</a> ] : null }
+          title={ warning }>W</a> ] : null } { lazy && !container && !apiError ? (
+          <a href="#" title="Look up" onclick={ e => { e.preventDefault(); this.fetchData(); } }>
+            <i class="fas fa-search"></i>
+          </a>
+        ) : null }
       </div>
     );
   }