TMP apply new stuf... squash/rename me.

app/assets/javascripts/pipelines/components/graph/graph_component.vue

 <script>
+  import linkedPipelinesColumn from './linked_pipelines_column.vue';
   import stageColumnComponent from './stage_column_component.vue';
   import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
-  import '../../../flash';
 
   export default {
+    components: {
+      linkedPipelinesColumn,
+      stageColumnComponent,
+      loadingIcon,
+    },
     props: {
       isLoading: {
         type: Boolean,
@@ -14,38 +19,55 @@
         required: true,
       },
     },
-
-    components: {
-      stageColumnComponent,
-      loadingIcon,
-    },
-
     computed: {
       graph() {
         return this.pipeline.details && this.pipeline.details.stages;
       },
+      hasTriggered() {
+        return !!this.pipeline.triggered.length;
+      },
+      hasTriggeredBy() {
+        return !!this.pipeline.triggered_by.length;
+      },
+      linkedPipelinesClass() {
+        return this.hasTriggered || this.hasTriggeredBy ? 'has-linked-pipelines' : '';
+      },
     },
-
     methods: {
       capitalizeStageName(name) {
         return name.charAt(0).toUpperCase() + name.slice(1);
       },
-
       isFirstColumn(index) {
         return index === 0;
       },
-
       stageConnectorClass(index, stage) {
         let className;
 
         // If it's the first stage column and only has one job
         if (index === 0 && stage.groups.length === 1) {
-          className = 'no-margin';
+          if (!this.hasTriggeredBy) {
+            className = 'no-margin';
+          } else {
+            className = 'left-margin';
+          }
         } else if (index > 0) {
           // If it is not the first column
           className = 'left-margin';
         }
 
+        return className;
+      },
+      linkedPipelineClass(index) {
+        let className = '';
+        const isFirstStage = index === 0;
+        const isLastStage = index === this.graph.length - 1;
+
+        if (isFirstStage && this.hasTriggeredBy) {
+          className += 'has-upstream';
+        } else if (isLastStage && this.hasTriggered) {
+          className += 'has-downstream';
+        }
+
         return className;
       },
     },
@@ -61,17 +83,35 @@
           />
       </div>
 
+      <linked-pipelines-column
+        v-if="hasTriggeredBy"
+        :linked-pipelines="pipeline.triggered_by"
+        column-title="Upstream"
+        graph-position="left"
+      />
+
       <ul
         v-if="!isLoading"
-        class="stage-column-list">
+        class="stage-column-list"
+        :class="linkedPipelinesClass">
         <stage-column-component
           v-for="(stage, index) in graph"
+          :class="linkedPipelineClass(index)"
           :title="capitalizeStageName(stage.name)"
           :jobs="stage.groups"
           :key="stage.name"
           :stage-connector-class="stageConnectorClass(index, stage)"
-          :is-first-column="isFirstColumn(index)"/>
+          :is-first-column="isFirstColumn(index)"
+          :has-triggered-by="hasTriggeredBy"
+          />
       </ul>
+
+      <linked-pipelines-column
+        v-if="hasTriggered"
+        :linked-pipelines="pipeline.triggered"
+        column-title="Downstream"
+        graph-position="right"
+      />
     </div>
   </div>
 </template>

app/assets/javascripts/pipelines/stores/pipeline_store.js

+const mockTriggerers = [
+  { id: 111, path: 'hello/world/tho', project: { name: 'GitLab Shell' }, details: { status: { icon: 'icon_status_pending', group: 'pending' } } },
+];
+
+const mockTriggereds = [
+  { id: 111, path: 'hello/world/tho', project: { name: 'GitLab EE' }, details: { status: { icon: 'icon_status_failed', group: 'failed' } } },
+  { id: 111, path: 'hello/world/tho', project: { name: 'Gitaly' }, details: { status: { icon: 'icon_status_pending', group: 'pending' } } },
+  { id: 111, path: 'hello/world/tho', project: { name: 'GitHub' }, details: { status: { icon: 'icon_status_success', group: 'success' } } },
+];
+
 export default class PipelineStore {
   constructor() {
     this.state = {};
 
-    this.state.pipeline = {};
+    this.state.pipeline = [];
+    this.state.triggered = [];
+    this.state.triggered_by = [];
   }
 
   storePipeline(pipeline = {}) {
+    // single job in first stage
+   // graph[0].groups = [graph[0].groups[0]];
+
+    // multiple jobs in last stage
+    // graph[3].groups.push(graph[0].groups[0]);
     this.state.pipeline = pipeline;
+    this.state.triggered_by = mockTriggerers;
+
+    // single triggered
+    // this.state.triggered = [mockTriggereds[0]];
+    this.state.triggered = mockTriggereds;
   }
 }