[airavata-django-portal] 03/03: AIRAVATA-2990 Switch to experiment tab, reuse

[ma...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

machristie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git

commit ba081775173fd3e31221fed60a406c3a3467f154
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Thu Jun 20 10:17:52 2019 -0400

    AIRAVATA-2990 Switch to experiment tab, reuse
---
 .../statistics/ExperimentStatisticsContainer.vue   | 52 ++++++++++++++++++----
 1 file changed, 43 insertions(+), 9 deletions(-)

diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
index 6cd4fec..1e41f4b 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
@@ -8,15 +8,27 @@
     <b-card header="Load experiment details by experiment id">
       <b-form-group>
         <b-input-group>
-          <b-form-input v-model="experimentId" placeholder="Experiment ID" @keydown.native.enter="experimentId && showExperimentDetails(experimentId)"/>
+          <b-form-input
+            v-model="experimentId"
+            placeholder="Experiment ID"
+            @keydown.native.enter="experimentId && showExperimentDetails(experimentId)"
+          />
           <b-input-group-append>
-            <b-button :disabled="!experimentId" @click="showExperimentDetails(experimentId)" variant="primary">Load</b-button>
+            <b-button
+              :disabled="!experimentId"
+              @click="showExperimentDetails(experimentId)"
+              variant="primary"
+            >Load</b-button>
           </b-input-group-append>
         </b-input-group>
       </b-form-group>
     </b-card>
     <b-card no-body>
-      <b-tabs card>
+      <b-tabs
+        card
+        v-model="activeTabIndex"
+        ref="tabs"
+      >
         <b-tab :title="selectedExperimentsTabTitle">
           <div class="row">
             <div class="col">
@@ -310,7 +322,8 @@ export default {
       appInterfaces: null,
       computeResourceNames: null,
       experimentDetails: [],
-      experimentId: null
+      experimentId: null,
+      activeTabIndex: 0
     };
   },
   created() {
@@ -526,11 +539,32 @@ export default {
       this.loadStatistics();
     },
     showExperimentDetails(experimentId) {
-      // TODO: if experiment details already loaded, select its tab
-      // TODO: maybe don't need to load the experiment first since ExperimentDetailsView will load FullExperiment?
-      services.ExperimentService.retrieve({
-        lookup: experimentId
-      }).then(exp => this.experimentDetails.push(exp));
+      const expDetailsIndex = this.getExperimentDetailsIndex(experimentId);
+      if (expDetailsIndex >= 0) {
+        this.selectExperimentDetailsTab(experimentId);
+      } else {
+        // TODO: maybe don't need to load the experiment first since ExperimentDetailsView will load FullExperiment?
+        services.ExperimentService.retrieve({
+          lookup: experimentId
+        }).then(exp => {
+          this.experimentDetails.push(exp);
+          this.selectExperimentDetailsTab(experimentId);
+        });
+      }
+    },
+    selectExperimentDetailsTab(experimentId) {
+      const expDetailsIndex = this.getExperimentDetailsIndex(experimentId);
+      // Note: running this in $nextTick doesn't work, but setTimeout does
+      // (see also https://github.com/bootstrap-vue/bootstrap-vue/issues/1378#issuecomment-345689470)
+      setTimeout(() => {
+        // Add 1 to the index because the first tab has the overall statistics
+        this.activeTabIndex = expDetailsIndex + 1;
+      }, 1);
+    },
+    getExperimentDetailsIndex(experimentId) {
+      return this.experimentDetails.findIndex(
+        e => e.experimentId === experimentId
+      );
     }
   }
 };