From eb65bb8764e56b517b2a49fb396ba45ef57be222 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 29 Oct 2024 12:47:17 -0500
Subject: [PATCH 1/2] [24.0] Fetch invocation id only once on the job info page

... instead of polling while the job is non terminal; we only need the id once.

Fixes https://github.com/galaxyproject/galaxy/issues/18921
---
 client/src/components/JobInformation/JobInformation.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/JobInformation/JobInformation.vue b/client/src/components/JobInformation/JobInformation.vue
index 759e59b97418..7d1cade4942a 100644
--- a/client/src/components/JobInformation/JobInformation.vue
+++ b/client/src/components/JobInformation/JobInformation.vue
@@ -41,7 +41,7 @@ const metadataDetail = ref({
 
 function updateJob(newJob) {
     job.value = newJob;
-    if (newJob) {
+    if (newJob && !invocationId.value) {
         fetchInvocation(newJob.id);
     }
 }
@@ -57,6 +57,7 @@ function filterMetadata(jobMessages) {
     });
 }
 
+/** Fetches the invocation for the given job id to get the associated invocation id */
 async function fetchInvocation(jobId) {
     if (jobId) {
         const invocation = await invocationForJob({ jobId: jobId });

From 2cae82cfa9fd7a7f6fcd0dd1a436579490214837 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 30 Oct 2024 13:27:01 -0500
Subject: [PATCH 2/2] use a watcher to fetch invocation id just once

---
 .../JobInformation/JobInformation.vue         | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/client/src/components/JobInformation/JobInformation.vue b/client/src/components/JobInformation/JobInformation.vue
index 7d1cade4942a..3c0c8d407695 100644
--- a/client/src/components/JobInformation/JobInformation.vue
+++ b/client/src/components/JobInformation/JobInformation.vue
@@ -5,7 +5,7 @@ import { JobDetailsProvider } from "components/providers/JobProvider";
 import UtcDate from "components/UtcDate";
 import { formatDuration, intervalToDuration } from "date-fns";
 import JOB_STATES_MODEL from "utils/job-states-model";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { invocationForJob } from "@/api/invocations";
 
@@ -13,7 +13,7 @@ import DecodedId from "../DecodedId.vue";
 import CodeRow from "./CodeRow.vue";
 
 const job = ref(null);
-const invocationId = ref(null);
+const invocationId = ref(undefined);
 
 const props = defineProps({
     job_id: {
@@ -41,9 +41,6 @@ const metadataDetail = ref({
 
 function updateJob(newJob) {
     job.value = newJob;
-    if (newJob && !invocationId.value) {
-        fetchInvocation(newJob.id);
-    }
 }
 
 function filterMetadata(jobMessages) {
@@ -57,15 +54,21 @@ function filterMetadata(jobMessages) {
     });
 }
 
-/** Fetches the invocation for the given job id to get the associated invocation id */
-async function fetchInvocation(jobId) {
-    if (jobId) {
-        const invocation = await invocationForJob({ jobId: jobId });
-        if (invocation) {
-            invocationId.value = invocation.id;
+// Fetches the invocation for the given job id to get the associated invocation id
+watch(
+    () => props.job_id,
+    async (newId, oldId) => {
+        if (newId && (invocationId.value === undefined || newId !== oldId)) {
+            const invocation = await invocationForJob({ jobId: newId });
+            if (invocation) {
+                invocationId.value = invocation.id;
+            } else {
+                invocationId.value = null;
+            }
         }
-    }
-}
+    },
+    { immediate: true }
+);
 </script>
 
 <template>