only fetch invocations for job (to get ID) if ID is not provided as prop

This prevents us fetching `/api/invocations?job_id` needlessly, when we already have the invocation ID in the parent components.

Author: ahmedhamidawan

client/src/components/JobInformation/JobDetails.vue

@@ -12,6 +12,7 @@ import JobParameters from "components/JobParameters/JobParameters.vue";
 const props = defineProps<{
     job?: JobBaseModel;
     jobId?: string;
+    invocationId?: string;
 }>();
 
 const id = computed(() => props.job?.id || props.jobId);
@@ -25,7 +26,7 @@ const remoteHost = computed(() => (props.job && "remote_host" in props.job ? (pr
 
 <template>
     <div v-if="id">
-        <JobInformation :job-id="id" :include-times="true">
+        <JobInformation :job-id="id" :include-times="true" :invocation-id="invocationId">
             <!-- only needed for admin job component -->
             <tr v-if="traceback">
                 <td>Traceback</td>

client/src/components/JobInformation/JobInformation.vue

@@ -16,14 +16,17 @@ import CopyToClipboard from "@/components/CopyToClipboard.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
-const job = ref<ShowFullJobResponse | null>(null);
-const invocationId = ref<string | null | undefined>(undefined);
-
 const props = defineProps<{
     jobId: string;
+    /** If `true`, the job's update and create times, as well as time to finish are shown. */
     includeTimes?: boolean;
+    /** If provided, this component will skip fetching the invocation ID for the job. */
+    invocationId?: string;
 }>();
 
+const job = ref<ShowFullJobResponse | null>(null);
+const fetchedInvocationId = ref<string | null | undefined>(props.invocationId);
+
 const stdout_length = ref(50000);
 const stdout_text = ref("");
 const stderr_length = ref(50000);
@@ -42,7 +45,7 @@ function jobStateIsRunning(jobState: string) {
 
 const jobIsTerminal = computed(() => (job.value?.state ? jobStateIsTerminal(job.value?.state) : false));
 const jobIsRunning = computed(() => (job.value?.state ? jobStateIsRunning(job.value.state) : false));
-const routeToInvocation = computed(() => `/workflows/invocations/${invocationId.value}`);
+const routeToInvocation = computed(() => `/workflows/invocations/${fetchedInvocationId.value}`);
 
 // Curious as to why we're trying to access tool_version and traceback like this, when they don't exist on
 // `ShowFullJobResponse`? Possibly historical reasons or maybe the `JobProvider` can return different types (doesn't seem like it)?
@@ -113,12 +116,15 @@ async function fetchInvocationForJob(jobId: string) {
 watch(
     () => props.jobId,
     async (newId, oldId) => {
-        if (newId && (invocationId.value === undefined || newId !== oldId)) {
+        if (
+            newId &&
+            (fetchedInvocationId.value === undefined || (fetchedInvocationId.value === null && newId !== oldId))
+        ) {
             const invocation = await fetchInvocationForJob(newId);
             if (invocation) {
-                invocationId.value = invocation.id;
+                fetchedInvocationId.value = invocation.id;
             } else {
-                invocationId.value = null;
+                fetchedInvocationId.value = null;
             }
         }
     },
@@ -245,10 +251,10 @@ watch(
                         {{ job.copied_from_job_id }} <DecodedId :id="job.copied_from_job_id" />
                     </td>
                 </tr>
-                <tr v-if="invocationId">
+                <tr v-if="fetchedInvocationId">
                     <td>Workflow Invocation</td>
                     <td>
-                        <router-link :to="routeToInvocation">{{ invocationId }}</router-link>
+                        <router-link :to="routeToInvocation">{{ fetchedInvocationId }}</router-link>
                     </td>
                 </tr>
             </tbody>

client/src/components/WorkflowInvocationState/JobStep.vue

@@ -12,13 +12,10 @@ import JobStepJobs from "./JobStepJobs.vue";
 
 const PER_PAGE = 10;
 
-interface Props {
+const props = defineProps<{
     jobs: JobBaseModel[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    jobs: () => [],
-});
+    invocationId: string;
+}>();
 
 const firstJob = computed(() => props.jobs[0]);
 const jobCount = computed(() => props.jobs.length);
@@ -75,7 +72,7 @@ watch(
 <template>
     <BAlert v-if="!jobCount" variant="info" show> No jobs found for this step. </BAlert>
     <div v-else-if="jobCount === 1 && firstJob">
-        <JobDetailsDisplayed :job-id="firstJob.id" />
+        <JobDetailsDisplayed :job-id="firstJob.id" :invocation-id="props.invocationId" />
     </div>
     <div v-else>
         <div class="mb-2 p-2 d-flex justify-content-between align-items-center flex-wrap">
@@ -107,6 +104,7 @@ watch(
         <JobStepJobs
             v-else
             :jobs="currentStateJobs"
+            :invocation-id="props.invocationId"
             :current-page.sync="currentPage"
             :sort-desc.sync="sortDesc"
             :per-page="PER_PAGE" />

client/src/components/WorkflowInvocationState/JobStepJobs.vue

@@ -18,6 +18,7 @@ import UtcDate from "../UtcDate.vue";
 
 const props = defineProps<{
     jobs: JobBaseModel[];
+    invocationId: string;
     currentPage: number;
     sortDesc: boolean;
     perPage: number;
@@ -187,7 +188,7 @@ watch(
                     </div>
                 </div>
             </template>
-            <JobDetails v-if="viewedJob" :job-id="viewedJob.id" />
+            <JobDetails v-if="viewedJob" :job-id="viewedJob.id" :invocation-id="invocationId" />
         </GModal>
     </div>
 </template>

client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue

@@ -254,7 +254,8 @@ onUnmounted(() => {
                                             <JobStep
                                                 v-if="stepDetails.jobs?.length"
                                                 class="mt-1"
-                                                :jobs="stepDetails.jobs" />
+                                                :jobs="stepDetails.jobs"
+                                                :invocation-id="props.invocation.id" />
                                             <BAlert v-else v-localize variant="info" show>This step has no jobs</BAlert>
                                         </div>
                                     </BTab>