1 files changed, 85 insertions, 59 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
index 47fc7023222..2475d958e3c 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
@@ -17,65 +17,10 @@ const DEFAULT_TH_CLASSES =
   'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1! gl-font-sm!';
 
 export default {
-  fields: [
-    {
-      key: 'status',
-      label: s__('Pipeline|Status'),
-      thClass: DEFAULT_TH_CLASSES,
-      columnClass: 'gl-w-10p',
-      tdClass: DEFAULT_TD_CLASS,
-      thAttr: { 'data-testid': 'status-th' },
-    },
-    {
-      key: 'pipeline',
-      label: s__('Pipeline|Pipeline'),
-      thClass: DEFAULT_TH_CLASSES,
-      tdClass: `${DEFAULT_TD_CLASS} ${HIDE_TD_ON_MOBILE}`,
-      columnClass: 'gl-w-10p',
-      thAttr: { 'data-testid': 'pipeline-th' },
-    },
-    {
-      key: 'triggerer',
-      label: s__('Pipeline|Triggerer'),
-      thClass: DEFAULT_TH_CLASSES,
-      tdClass: `${DEFAULT_TD_CLASS} ${HIDE_TD_ON_MOBILE}`,
-      columnClass: 'gl-w-10p',
-      thAttr: { 'data-testid': 'triggerer-th' },
-    },
-    {
-      key: 'commit',
-      label: s__('Pipeline|Commit'),
-      thClass: DEFAULT_TH_CLASSES,
-      tdClass: DEFAULT_TD_CLASS,
-      columnClass: 'gl-w-20p',
-      thAttr: { 'data-testid': 'commit-th' },
-    },
-    {
-      key: 'stages',
-      label: s__('Pipeline|Stages'),
-      thClass: DEFAULT_TH_CLASSES,
-      tdClass: DEFAULT_TD_CLASS,
-      columnClass: 'gl-w-15p',
-      thAttr: { 'data-testid': 'stages-th' },
-    },
-    {
-      key: 'timeago',
-      label: s__('Pipeline|Duration'),
-      thClass: DEFAULT_TH_CLASSES,
-      tdClass: DEFAULT_TD_CLASS,
-      columnClass: 'gl-w-15p',
-      thAttr: { 'data-testid': 'timeago-th' },
-    },
-    {
-      key: 'actions',
-      thClass: DEFAULT_TH_CLASSES,
-      tdClass: DEFAULT_TD_CLASS,
-      columnClass: 'gl-w-20p',
-      thAttr: { 'data-testid': 'actions-th' },
-    },
-  ],
   components: {
     GlTable,
+    LinkedPipelinesMiniList: () =>
+      import('ee_component/vue_shared/components/linked_pipelines_mini_list.vue'),
     PipelinesCommit,
     PipelineMiniGraph,
     PipelineOperations,
@@ -107,6 +52,10 @@ export default {
       type: String,
       required: true,
     },
+    pipelineKeyOption: {
+      type: Object,
+      required: true,
+    },
   },
   data() {
     return {
@@ -116,6 +65,68 @@ export default {
       cancelingPipeline: null,
     };
   },
+  computed: {
+    tableFields() {
+      const fields = [
+        {
+          key: 'status',
+          label: s__('Pipeline|Status'),
+          thClass: DEFAULT_TH_CLASSES,
+          columnClass: 'gl-w-10p',
+          tdClass: DEFAULT_TD_CLASS,
+          thAttr: { 'data-testid': 'status-th' },
+        },
+        {
+          key: 'pipeline',
+          label: this.pipelineKeyOption.label,
+          thClass: DEFAULT_TH_CLASSES,
+          tdClass: `${DEFAULT_TD_CLASS} ${HIDE_TD_ON_MOBILE}`,
+          columnClass: 'gl-w-10p',
+          thAttr: { 'data-testid': 'pipeline-th' },
+        },
+        {
+          key: 'triggerer',
+          label: s__('Pipeline|Triggerer'),
+          thClass: DEFAULT_TH_CLASSES,
+          tdClass: `${DEFAULT_TD_CLASS} ${HIDE_TD_ON_MOBILE}`,
+          columnClass: 'gl-w-10p',
+          thAttr: { 'data-testid': 'triggerer-th' },
+        },
+        {
+          key: 'commit',
+          label: s__('Pipeline|Commit'),
+          thClass: DEFAULT_TH_CLASSES,
+          tdClass: DEFAULT_TD_CLASS,
+          columnClass: 'gl-w-20p',
+          thAttr: { 'data-testid': 'commit-th' },
+        },
+        {
+          key: 'stages',
+          label: s__('Pipeline|Stages'),
+          thClass: DEFAULT_TH_CLASSES,
+          tdClass: DEFAULT_TD_CLASS,
+          columnClass: 'gl-w-quarter',
+          thAttr: { 'data-testid': 'stages-th' },
+        },
+        {
+          key: 'timeago',
+          label: s__('Pipeline|Duration'),
+          thClass: DEFAULT_TH_CLASSES,
+          tdClass: DEFAULT_TD_CLASS,
+          columnClass: 'gl-w-15p',
+          thAttr: { 'data-testid': 'timeago-th' },
+        },
+        {
+          key: 'actions',
+          thClass: DEFAULT_TH_CLASSES,
+          tdClass: DEFAULT_TD_CLASS,
+          columnClass: 'gl-w-15p',
+          thAttr: { 'data-testid': 'actions-th' },
+        },
+      ];
+      return fields;
+    },
+  },
   watch: {
     pipelines() {
       this.cancelingPipeline = null;
@@ -146,7 +157,7 @@ export default {
 <template>
   <div class="ci-table">
     <gl-table
-      :fields="$options.fields"
+      :fields="tableFields"
       :items="pipelines"
       tbody-tr-class="commit"
       :tbody-tr-attr="{ 'data-testid': 'pipeline-table-row' }"
@@ -167,7 +178,11 @@ export default {
       </template>
 
       <template #cell(pipeline)="{ item }">
-        <pipeline-url :pipeline="item" :pipeline-schedule-url="pipelineScheduleUrl" />
+        <pipeline-url
+          :pipeline="item"
+          :pipeline-schedule-url="pipelineScheduleUrl"
+          :pipeline-key="pipelineKeyOption.key"
+        />
       </template>
 
       <template #cell(triggerer)="{ item }">
@@ -182,12 +197,23 @@ export default {
         <div class="stage-cell">
           <!-- This empty div should be removed, see https://gitlab.com/gitlab-org/gitlab/-/issues/323488 -->
           <div></div>
+          <linked-pipelines-mini-list
+            v-if="item.triggered_by"
+            :triggered-by="[item.triggered_by]"
+            data-testid="mini-graph-upstream"
+          />
           <pipeline-mini-graph
             v-if="item.details && item.details.stages && item.details.stages.length > 0"
+            class="gl-display-inline"
             :stages="item.details.stages"
             :update-dropdown="updateGraphDropdown"
             @pipelineActionRequestComplete="onPipelineActionRequestComplete"
           />
+          <linked-pipelines-mini-list
+            v-if="item.triggered.length"
+            :triggered="item.triggered"
+            data-testid="mini-graph-downstream"
+          />
         </div>
       </template>