1 files changed, 14 insertions, 18 deletions
diff --git a/app/assets/javascripts/pipelines/utils.js b/app/assets/javascripts/pipelines/utils.js
index 28d6c0edb0f..50bb23b7e63 100644
--- a/app/assets/javascripts/pipelines/utils.js
+++ b/app/assets/javascripts/pipelines/utils.js
@@ -1,12 +1,11 @@
 import { pickBy } from 'lodash';
 import { SUPPORTED_FILTER_PARAMETERS } from './constants';
+import { createNodeDict } from './components/parsing_utils';
 
-export const validateParams = params => {
+export const validateParams = (params) => {
   return pickBy(params, (val, key) => SUPPORTED_FILTER_PARAMETERS.includes(key) && val);
 };
 
-export const createUniqueLinkId = (stageName, jobName) => `${stageName}-${jobName}`;
-
 /**
  * This function takes the stages array and transform it
  * into a hash where each key is a job name and the job data
@@ -15,19 +14,8 @@ export const createUniqueLinkId = (stageName, jobName) => `${stageName}-${jobNam
  * @returns {Object} - Hash of jobs
  */
 export const createJobsHash = (stages = []) => {
-  const jobsHash = {};
-
-  stages.forEach(stage => {
-    if (stage.groups.length > 0) {
-      stage.groups.forEach(group => {
-        group.jobs.forEach(job => {
-          jobsHash[job.name] = job;
-        });
-      });
-    }
-  });
-
-  return jobsHash;
+  const nodes = stages.flatMap(({ groups }) => groups);
+  return createNodeDict(nodes);
 };
 
 /**
@@ -44,18 +32,26 @@ export const generateJobNeedsDict = (jobs = {}) => {
   const arrOfJobNames = Object.keys(jobs);
 
   return arrOfJobNames.reduce((acc, value) => {
-    const recursiveNeeds = jobName => {
+    const recursiveNeeds = (jobName) => {
       if (!jobs[jobName]?.needs) {
         return [];
       }
 
       return jobs[jobName].needs
-        .map(job => {
+        .map((job) => {
           // If we already have the needs of a job in the accumulator,
           // then we use the memoized data instead of the recursive call
           // to save some performance.
           const newNeeds = acc[job] ?? recursiveNeeds(job);
 
+          // In case it's a parallel job (size > 1), the name of the group
+          // and the job will be different. This mean we also need to add the group name
+          // to the list of `needs` to ensure we can properly reference it.
+          const group = jobs[job];
+          if (group.size > 1) {
+            return [job, group.name, ...newNeeds];
+          }
+
           return [job, ...newNeeds];
         })
         .flat(Infinity);