--- a/client/src/components/stretches/Stretches.vue	Wed May 15 17:29:03 2019 +0200
+++ b/client/src/components/stretches/Stretches.vue	Wed May 15 17:55:38 2019 +0200
@@ -27,21 +27,8 @@
           :data="filteredStretches() | sortTable(sortColumn, sortDirection)"
         >
           <template v-slot:row="{ item: stretch }">
-            <div class="py-1 col-4 ">
-              <a
-                class="text-info"
-                v-if="isInStaging(stretch.properties.name)"
-                @click="gotoStaging(stretch.properties.name)"
-              >
-                {{ stretch.properties.name }}
-                <font-awesome-icon
-                  class="ml-1 text-danger"
-                  icon="exclamation-triangle"
-                  fixed-width
-                />
-                <small class="ml-1">review</small>
-              </a>
-              <a v-else @click="moveMapToStretch(stretch)" href="#">
+            <div class="py-1 col-4">
+              <a @click="moveMapToStretch(stretch)" href="#">
                 {{ stretch.properties.name }}
               </a>
             </div>
@@ -53,6 +40,17 @@
             </div>
             <div class="py-1 col text-right">
               <button
+                v-if="isInStaging(stretch.properties.name)"
+                @click="gotoStaging(stretch.properties.name)"
+                class="btn btn-xs btn-danger mr-1"
+              >
+                <font-awesome-icon
+                  icon="exclamation-triangle"
+                  fixed-width
+                  v-tooltip="reviewTooltip"
+                />
+              </button>
+              <button
                 class="btn btn-xs btn-dark mr-1"
                 @click="editStretch(stretch)"
               >
@@ -352,16 +350,8 @@
     sourceorganizationLabel() {
       return this.$gettext("Source organization");
     },
-    stretchesInStaging() {
-      const result = [];
-      for (let stretch of this.stretches) {
-        for (let s of this.staging) {
-          if (s.kind == "st" && s.summary.stretch == stretch.properties.name) {
-            result.push({ name: s.summary.stretch, id: s.id });
-          }
-        }
-      }
-      return result;
+    reviewTooltip() {
+      return this.$gettext("Review pending import");
     }
   },
   watch: {
@@ -388,29 +378,45 @@
       });
     },
     gotoStaging(stretchName) {
-      let stretch = this.stretchesInStaging.find(s => s.name === stretchName);
-      if (stretch) this.$router.push("/review/" + stretch.id);
+      let pendingImport = this.staging.find(s => s.name === stretchName);
+      if (pendingImport)
+        this.$router.push("/imports/overview/" + pendingImport.id);
     },
-    isInStaging(stretchname) {
-      for (let s of this.stretchesInStaging) {
-        if (s.name == stretchname) return true;
-      }
-      return false;
+    isInStaging(stretchName) {
+      return !!this.staging.find(s => s.name === stretchName);
     },
     loadStagingData() {
-      return new Promise((resolve, reject) => {
-        HTTP.get("/imports?states=pending&kinds=st", {
-          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+      HTTP.get("/imports?states=pending&kinds=st", {
+        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+      })
+        .then(response => {
+          response.data.imports.forEach(i => {
+            HTTP.get("/imports/" + i.id, {
+              headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+            })
+              .then(response => {
+                this.staging.push({
+                  id: i.id,
+                  name: response.data.summary.stretch
+                });
+              })
+              .catch(error => {
+                const { status, data } = error.response;
+                displayError({
+                  title: this.$gettext("Backend Error"),
+                  message: `${status}: ${data.message || data}`
+                });
+              })
+              .finally(() => (this.loading = false));
+          });
         })
-          .then(response => {
-            const { imports } = response.data;
-            this.staging = imports;
-            resolve(response);
-          })
-          .catch(error => {
-            reject(error);
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
           });
-      });
+        });
     },
     editStretch(stretch) {
       const properties = stretch.properties;
@@ -591,13 +597,7 @@
         });
       })
       .finally(() => (this.loading = false));
-    this.loadStagingData().catch(error => {
-      const { status, data } = error.response;
-      displayError({
-        title: this.$gettext("Backend Error"),
-        message: `${status}: ${data.message || data}`
-      });
-    });
+    this.loadStagingData();
   }
 };
 </script>