AMP-2990/3006

- refactor workflowResultService get media link methods - update all references to above methods - rewrite logic for mediaElement to use symlink - rewrite logic for all links to use click event to process symlink
AudiovisualMetadataPlatform · Oct 16, 2023 · 0147cfc · 0147cfc
1 parent 8b95a48
commit 0147cfc
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 35 deletions.
diff --git a/src/components/dashboard/DashboardTable.vue b/src/components/dashboard/DashboardTable.vue
@@ -131,11 +131,10 @@
             <td v-if="checkAvailability('externalId')">{{ rec.externalId }}</td>
             <td v-if="checkAvailability('itemName')">{{ rec.itemName }}</td>
             <td v-if="checkAvailability('primaryfileName') && canAccessLink(rec, true)">
-              <a
-                href="#"
-                @click="workflowResultService.getSourceUrl(rec.primaryfileId)"
+              <a            
+                @click="workflowResultService.getSymlinkContent(rec, false, $event)"
                 target="_blank"
-                class="complete-output"
+                class="complete-output"              
                 >{{ rec.primaryfileName }}</a
               >
             </td>
@@ -154,8 +153,7 @@
                 outputReady(rec)"
             >
               <a
-                href="#" 
-                @click="workflowResultService.getOutputUrl(rec.id)"
+                @click="workflowResultService.getSymlinkContent(rec, true, $event)"                
                 target="_blank"
                 class="complete-output"
                 >{{ rec.outputName }}</a
@@ -173,8 +171,7 @@
                 outputReady(rec)"
             >
               <a
-                href="#" 
-                @click="workflowResultService.getOutputUrl(rec.id)"
+                @click="workflowResultService.getSymlinkContent(rec, true, $event)"  
                 target="_blank"
                 class="complete-output"
                 >{{ rec.outputLabel }}</a
@@ -476,6 +473,25 @@ export default {
     },
   },
   methods: {
+    // async getMedia(rec, event) {
+    //   // let link = doc.getElementById(rec.id + '-M');
+    //   let link = event.target;
+    //   if (!link.href) {
+    //     let symlink = await this.workflowResultService.getMediaSymlink(rec.primaryfileId);
+    //     link.href = symlink;
+    //     link.click();
+    //     console.log("media symlink = " + symlink)
+    //   }
+    // },
+    async getOutput(rec) {
+      let link = document.getElementById(rec.id + '-O');
+      if (!link.href) {
+        let symlink = await this.workflowResultService.getOutputSymlink(rec.Id);
+        link.href = symlink;
+        link.click();
+        console.log("output symlink = " + symlink)
+      }
+    },
     async setWorkflowResultFinal(workflowResultId) {
       for (
         var r = 0;

diff --git a/src/components/entity/EntityList.vue b/src/components/entity/EntityList.vue
@@ -1354,7 +1354,7 @@ export default {
           self.showEdit = false;
         }
       } else if (self.baseUrl === "file") {
-        let mediaSourceUrl = await self.workflowResultService.getSourceLink(
+        let mediaSourceUrl = await self.workflowResultService.getMediaSymlink(
           self.selectedFile.id
         );
         console.log("mediaSourceUrl = " + mediaSourceUrl);

diff --git a/src/components/entity/OutputFile.vue b/src/components/entity/OutputFile.vue
@@ -73,8 +73,7 @@
                     disabled
                 /> -->
                 <a
-                  href="#" 
-                  @click="workflowResultService.getOutputUrl(output.id)"
+                  @click="workflowResultService.getSymlinkContent(output, true, $event)"
                   class="complete-output"
                   target="_blank"
                   v-if="

diff --git a/src/components/evaluation/TestResultsVisualiz.vue b/src/components/evaluation/TestResultsVisualiz.vue
@@ -52,19 +52,13 @@
                                   <h6>
                                     <a
                                       class="scores-files"
-                                      v-bind:href="
-                                        workflowResultService.getSourceUrl(
-                                          testResult.workflowResult
-                                            .primaryfileId
-                                        )
-                                      "
+                                      @click="workflowResultService.getSymlinkContent(testResult.workflowResult, false, $event)"
                                       target="_blank"
                                       >{{ testResult.primaryFilename }}</a
                                     >
                                     (<a
-                                      class="scores-files"
-                                      href="#" 
-                                      @click="workflowResultService.getOutputUrl(testResult.workflowResult.id)"
+                                      class="scores-files" 
+                                      @click="workflowResultService.getSymlinkContent(testResult.workflowResult, true, $event)"
                                       target="_blank"
                                       >{{
                                         testResult.workflowResult.workflowStep

diff --git a/src/service/workflow-result-service.js b/src/service/workflow-result-service.js
@@ -52,29 +52,51 @@ export default class WorkflowResultService extends BaseService {
       });
     return data;
   }
-
-  async getSourceLink(primaryfileId) {
-    const url = `/primaryfiles/${primaryfileId}/media`;
-    var symlink = await super.get_auth(url).then((result) => {
-      return result.headers['Location'];
-    });
-    return symlink;
-  }
 
-  async getSourceUrl(primaryfileId) {
+  // get symlink for primaryfile media
+  async getMediaSymlink(primaryfileId) {
     const url = `/primaryfiles/${primaryfileId}/media`;
-    var content = await super.get_auth(url).then((result) => {
+    var symlink = await super.get_auth(url).then((result) => {
       return result.data;
     });
-    return content;
+    return symlink;
   }
 
-  async getOutputUrl(id) {
+  // get symlink for workflow result output
+  async getOutputSymlink(id) {
     const url = `/workflow-results/${id}/output`;
-    var content = await super.get_auth(url).then((result) => {
+    var symlink = await super.get_auth(url).then((result) => {
       return result.data;
     });
-    return content;
+    return symlink;
+  }
+
+  // onclick event handler for media/output links:
+  // get content of media or output based on forOutput boolean
+  // note that this method is shared across multiple components.
+  async getSymlinkContent(result, forOutput, event) {
+    // get the link element being clicked
+    let link = event.target;
+
+    // only process the event when the link href hasm't been populated
+    if (!link.href) {
+      // get symlink URL via API call
+      let symlink = ""
+      if (forOutput) {
+        symlink = await this.getOutputSymlink(result.id);
+      }
+      else {
+        symlink = await this.getMediaSymlink(result.primaryfileId);
+      }
+
+      // TODO handle error resposne
+
+      // initialize the link URL and trigger a click to request the content
+      link.href = symlink;
+      link.click();
+      console.log("forOutput = " + forOutput + ", symlink = " + symlink)
+    }
+    // otherwise do nothing and just let browser handle the link click
   }
 
   async deleteWorkflowResult(id) {

diff --git a/tests/unit/components/dashboard/DashboardTable.spec.js b/tests/unit/components/dashboard/DashboardTable.spec.js
@@ -61,7 +61,7 @@ function(){
             workflowStep: "contact_sheets"}],filters: null, totalResults: 1});
 
         },
-        getSourceUrl: (id) => {
+        getMediaSymlink: (id) => {
           return id;
         }
     }