Added lazy mode to WBNameAndUuid and WBProcessState.

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>
     );

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>

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>
     );
   }