From b4aade59c04f1b3f0a29eeb523419835518cee65 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 26 Jun 2017 21:52:14 +0100
Subject: [PATCH] First iteration

---
 .../components/graph/graph_component.vue      | 27 ++++----
 .../components/graph/linked_pipeline.vue      | 17 +++++
 .../graph/linked_pipelines_column.vue         | 59 +++++++++++-------
 app/assets/javascripts/pipelines/constants.js |  2 +
 .../pipelines/pipeline_details_bundle.js      |  4 +-
 .../javascripts/pipelines/stores/mock.js      |  1 +
 .../pipelines/stores/pipeline_store.js        | 62 ++++++++++++++++++-
 7 files changed, 138 insertions(+), 34 deletions(-)
 create mode 100644 app/assets/javascripts/pipelines/constants.js
 create mode 100644 app/assets/javascripts/pipelines/stores/mock.js

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index e645a1f41837a0..aa47c88db69dc5 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -2,6 +2,7 @@
   import linkedPipelinesColumn from './linked_pipelines_column.vue';
   import stageColumnComponent from './stage_column_component.vue';
   import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
+  import { UPSTREAM, DOWNSTREAM } from '../../constants';
 
   export default {
     props: {
@@ -14,23 +15,27 @@
         required: true,
       },
     },
-
     components: {
       linkedPipelinesColumn,
       stageColumnComponent,
       loadingIcon,
     },
+    data() {
+      return {
+        UPSTREAM,
+        DOWNSTREAM,
+      };
+    },
+    created() {
+      console.log(this.pipeline);
+    },
 
     computed: {
-      graph() {
-        return this.pipeline.details && this.pipeline.details.stages;
-      },
       triggered() {
-        return this.pipeline.triggered || [];
+        return this.pipeline.downstreams || [];
       },
       triggeredBy() {
-        const response = this.pipeline.triggered_by;
-        return response ? [response] : [];
+        return this.pipeline.upstreams;
       },
       hasTriggered() {
         return !!this.triggered.length;
@@ -79,7 +84,7 @@
         v-if="hasTriggeredBy"
         :linked-pipelines="triggeredBy"
         column-title="Upstream"
-        graph-position="left"
+        :type="UPSTREAM"
       />
 
       <ul
@@ -90,10 +95,10 @@
         }"
         >
         <stage-column-component
-          v-for="(stage, index) in graph"
+          v-for="(stage, index) in pipeline.graph"
           :class="{
             'has-upstream': index === 0 && hasTriggeredBy,
-            'has-downstream': index === graph.length - 1 && hasTriggered,
+            'has-downstream': index === pipeline.graph.length - 1 && hasTriggered,
             'has-only-one-job': stage.groups.length === 1
           }"
           :title="capitalizeStageName(stage.name)"
@@ -109,7 +114,7 @@
         v-if="hasTriggered"
         :linked-pipelines="triggered"
         column-title="Downstream"
-        graph-position="right"
+        :type="DOWNSTREAM"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
index 01afbf701000ab..e04df030bc8295 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
@@ -1,6 +1,7 @@
 <script>
 import ciStatus from '../../../vue_shared/components/ci_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
+import eventHub from '../../event_hub';
 
 export default {
   props: {
@@ -20,6 +21,10 @@ export default {
       type: String,
       required: true,
     },
+    type: {
+      type: String,
+      required: true,
+    },
   },
   directives: {
     tooltip,
@@ -32,6 +37,15 @@ export default {
       return `${this.projectName} - ${this.pipelineStatus.label}`;
     },
   },
+
+  methods: {
+    expand() {
+      eventHub.$emit('expandNode', { 
+        type: this.type,
+        id: this.pipelineId,
+      });
+    }
+  }
 };
 </script>
 
@@ -39,6 +53,9 @@ export default {
   <li class="linked-pipeline build">
     <div class="curve"></div>
     <div>
+      <div 
+        style="background: blue; width: 10px; height: 40px;"
+        @click="expand"></div>
       <a
         v-tooltip
         class="linked-pipeline-content"
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
index 3f51ae6aad8216..2393cec6d095ed 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
@@ -1,30 +1,46 @@
 <script>
-import linkedPipeline from './linked_pipeline.vue';
+  import linkedPipeline from './linked_pipeline.vue';
+  import { UPSTREAM, DOWNSTREAM } from '../../constants';
 
-export default {
-  props: {
-    columnTitle: {
-      type: String,
-      required: true,
+  export default {
+    props: {
+      columnTitle: {
+        type: String,
+        required: true,
+      },
+      linkedPipelines: {
+        type: Array,
+        required: true,
+      },
+      type: {
+        type: String,
+        required: true,
+      },
     },
-    linkedPipelines: {
-      type: Array,
-      required: true,
+    components: {
+      linkedPipeline,
     },
-    graphPosition: {
-      type: String,
-      required: true,
+    data() {
+      return {
+        UPSTREAM,
+        DOWNSTREAM,
+      };
     },
-  },
-  components: {
-    linkedPipeline,
-  },
-  computed: {
-    columnClass() {
-      return `graph-position-${this.graphPosition}`;
+    computed: {
+      graphPosition() {
+        if (this.type === UPSTREAM) {
+          return 'left';
+        }
+
+        if (this.type === DOWNSTREAM) {
+          return 'right';
+        }
+      },
+      columnClass() {
+        return `graph-position-${this.graphPosition}`;
+      },
     },
-  },
-};
+  };
 </script>
 
 <template>
@@ -45,6 +61,7 @@ export default {
         :project-name="pipeline.project.name"
         :pipeline-status="pipeline.details.status"
         :pipeline-path="pipeline.path"
+        :type="type"
       />
     </ul>
   </div>
diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
new file mode 100644
index 00000000000000..9018da43aa2e3b
--- /dev/null
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -0,0 +1,2 @@
+export const UPSTREAM = 'upstream';
+export const DOWNSTREAM = 'downstream';
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index bfc416da50b3b4..26fb7c9f9f2ca0 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -28,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
       return createElement('pipeline-graph', {
         props: {
           isLoading: this.mediator.state.isLoading,
-          pipeline: this.mediator.store.state.pipeline,
+          pipeline: this.mediator.store.state,
         },
       });
     },
@@ -47,9 +47,11 @@ document.addEventListener('DOMContentLoaded', () => {
     },
     created() {
       eventHub.$on('headerPostAction', this.postAction);
+      eventHub.$on('expandNode', this.mediator.store.expandPipeline);
     },
     beforeDestroy() {
       eventHub.$off('headerPostAction', this.postAction);
+      eventHub.$ff('expandNode', this.mediator.store.expandPipeline);
     },
     methods: {
       postAction(action) {
diff --git a/app/assets/javascripts/pipelines/stores/mock.js b/app/assets/javascripts/pipelines/stores/mock.js
new file mode 100644
index 00000000000000..08cc6ff01db969
--- /dev/null
+++ b/app/assets/javascripts/pipelines/stores/mock.js
@@ -0,0 +1 @@
+export default {"id":9331283,"user":{"name":"Fabio Busatto","username":"bikebilly","id":1273957,"state":"active","avatar_url":"https://gitlab.com/uploads/system/user/avatar/1273957/avatar.png","web_url":"https://gitlab.com/bikebilly","path":"/bikebilly"},"active":false,"coverage":null,"source":"pipeline","created_at":"2017-06-26T10:05:32.420Z","updated_at":"2017-06-26T10:06:19.808Z","path":"/bikebilly/multi-project-pipeline-1/pipelines/9331283","flags":{"latest":true,"stuck":false,"yaml_errors":false,"retryable":false,"cancelable":false},"details":{"status":{"icon":"icon_status_success","text":"passed","label":"passed","group":"success","has_details":true,"details_path":"/bikebilly/multi-project-pipeline-1/pipelines/9331283","favicon":"/assets/ci_favicons/favicon_status_success-26f59841becbef8c6fe414e9e74471d8bfd6a91b5855c19fe7f5923a40a7da47.ico"},"duration":40,"finished_at":"2017-06-26T10:06:19.746Z","stages":[{"name":"test","title":"test: passed","groups":[{"name":"dummy","size":1,"status":{"icon":"icon_status_success","text":"passed","label":"passed","group":"success","has_details":true,"details_path":"/bikebilly/multi-project-pipeline-1/-/jobs/19960511","favicon":"/assets/ci_favicons/favicon_status_success-26f59841becbef8c6fe414e9e74471d8bfd6a91b5855c19fe7f5923a40a7da47.ico"},"jobs":[{"id":19960511,"name":"dummy","build_path":"/bikebilly/multi-project-pipeline-1/-/jobs/19960511","retry_path":"/bikebilly/multi-project-pipeline-1/-/jobs/19960511/retry","playable":false,"created_at":"2017-06-26T10:05:32.815Z","updated_at":"2017-06-26T10:05:53.722Z","status":{"icon":"icon_status_success","text":"passed","label":"passed","group":"success","has_details":true,"details_path":"/bikebilly/multi-project-pipeline-1/-/jobs/19960511","favicon":"/assets/ci_favicons/favicon_status_success-26f59841becbef8c6fe414e9e74471d8bfd6a91b5855c19fe7f5923a40a7da47.ico"}}]},{"name":"test","size":1,"status":{"icon":"icon_status_success","text":"passed","label":"passed","group":"success","has_details":true,"details_path":"/bikebilly/multi-project-pipeline-1/-/jobs/19960510","favicon":"/assets/ci_favicons/favicon_status_success-26f59841becbef8c6fe414e9e74471d8bfd6a91b5855c19fe7f5923a40a7da47.ico"},"jobs":[{"id":19960510,"name":"test","build_path":"/bikebilly/multi-project-pipeline-1/-/jobs/19960510","retry_path":"/bikebilly/multi-project-pipeline-1/-/jobs/19960510/retry","playable":false,"created_at":"2017-06-26T10:05:32.678Z","updated_at":"2017-06-26T10:05:52.921Z","status":{"icon":"icon_status_success","text":"passed","label":"passed","group":"success","has_details":true,"details_path":"/bikebilly/multi-project-pipeline-1/-/jobs/19960510","favicon":"/assets/ci_favicons/favicon_status_success-26f59841becbef8c6fe414e9e74471d8bfd6a91b5855c19fe7f5923a40a7da47.ico"}}]}],"status":{"icon":"icon_status_success","text":"passed","label":"passed","group":"success","has_details":true,"details_path":"/bikebilly/multi-project-pipeline-1/pipelines/9331283#test","favicon":"/assets/ci_favicons/favicon_status_success-26f59841becbef8c6fe414e9e74471d8bfd6a91b5855c19fe7f5923a40a7da47.ico"},"path":"/bikebilly/multi-project-pipeline-1/pipelines/9331283#test","dropdown_path":"/bikebilly/multi-project-pipeline-1/pipelines/9331283/stage.json?stage=test"},{"name":"trigger","title":"trigger: passed","groups":[{"name":"trigger","size":1,"status":{"icon":"icon_status_success","text":"passed","label":"passed","group":"success","has_details":true,"details_path":"/bikebilly/multi-project-pipeline-1/-/jobs/19960512","favicon":"/assets/ci_favicons/favicon_status_success-26f59841becbef8c6fe414e9e74471d8bfd6a91b5855c19fe7f5923a40a7da47.ico"},"jobs":[{"id":19960512,"name":"trigger","build_path":"/bikebilly/multi-project-pipeline-1/-/jobs/19960512","retry_path":"/bikebilly/multi-project-pipeline-1/-/jobs/19960512/retry","playable":false,"created_at":"2017-06-26T10:05:32.939Z","updated_at":"2017-06-26T10:06:19.535Z","status":{"icon":"icon_status_success","text":"passed","label":"passed","group":"success","has_details":true,"details_path":"/bikebilly/multi-project-pipeline-1/-/jobs/19960512","favicon":"/assets/ci_favicons/favicon_status_success-26f59841becbef8c6fe414e9e74471d8bfd6a91b5855c19fe7f5923a40a7da47.ico"}}]}],"status":{"icon":"icon_status_success","text":"passed","label":"passed","group":"success","has_details":true,"details_path":"/bikebilly/multi-project-pipeline-1/pipelines/9331283#trigger","favicon":"/assets/ci_favicons/favicon_status_success-26f59841becbef8c6fe414e9e74471d8bfd6a91b5855c19fe7f5923a40a7da47.ico"},"path":"/bikebilly/multi-project-pipeline-1/pipelines/9331283#trigger","dropdown_path":"/bikebilly/multi-project-pipeline-1/pipelines/9331283/stage.json?stage=trigger"}],"artifacts":[],"manual_actions":[]},"ref":{"name":"master","path":"/bikebilly/multi-project-pipeline-1/commits/master","tag":false,"branch":true},"commit":{"id":"d3a4a7abf12b5f36188c0bf48f0fa857f6ea71ae","short_id":"d3a4a7ab","title":"Update .gitlab-ci.yml","created_at":"2017-06-22T12:31:58.000+00:00","parent_ids":["20f5279fcce9c147776731266969a2c01a11b902"],"message":"Update .gitlab-ci.yml","author_name":"Fabio Busatto","author_email":"fabio@gitlab.com","authored_date":"2017-06-22T12:31:58.000+00:00","committer_name":"Fabio Busatto","committer_email":"fabio@gitlab.com","committed_date":"2017-06-22T12:31:58.000+00:00","author":{"name":"Fabio Busatto","username":"bikebilly","id":1273957,"state":"active","avatar_url":"https://gitlab.com/uploads/system/user/avatar/1273957/avatar.png","web_url":"https://gitlab.com/bikebilly","path":"/bikebilly"},"author_gravatar_url":"https://secure.gravatar.com/avatar/c73441bf568e69369b3603ef02f6da13?s=80\u0026d=identicon","commit_url":"https://gitlab.com/bikebilly/multi-project-pipeline-1/commit/d3a4a7abf12b5f36188c0bf48f0fa857f6ea71ae","commit_path":"/bikebilly/multi-project-pipeline-1/commit/d3a4a7abf12b5f36188c0bf48f0fa857f6ea71ae"},"triggered_by":{"id":9331258,"user":{"name":"Fabio Busatto","username":"bikebilly","id":1273957,"state":"active","avatar_url":"https://gitlab.com/uploads/system/user/avatar/1273957/avatar.png","web_url":"https://gitlab.com/bikebilly","path":"/bikebilly"},"active":false,"coverage":null,"source":"push","path":"/bikebilly/multi-project-pipeline-0/pipelines/9331258","details":{"status":{"icon":"icon_status_success","text":"passed","label":"passed","group":"success","has_details":true,"details_path":"/bikebilly/multi-project-pipeline-0/pipelines/9331258","favicon":"/assets/ci_favicons/favicon_status_success-26f59841becbef8c6fe414e9e74471d8bfd6a91b5855c19fe7f5923a40a7da47.ico"}},"project":{"id":3579613,"name":"multi-project-pipeline-0","full_path":"/bikebilly/multi-project-pipeline-0","full_name":"Fabio Busatto / multi-project-pipeline-0"}},"triggered":[{"id":9331308,"user":{"name":"Fabio Busatto","username":"bikebilly","id":1273957,"state":"active","avatar_url":"https://gitlab.com/uploads/system/user/avatar/1273957/avatar.png","web_url":"https://gitlab.com/bikebilly","path":"/bikebilly"},"active":false,"coverage":null,"source":"pipeline","path":"/bikebilly/multi-project-pipeline-2/pipelines/9331308","details":{"status":{"icon":"icon_status_success","text":"passed","label":"passed","group":"success","has_details":true,"details_path":"/bikebilly/multi-project-pipeline-2/pipelines/9331308","favicon":"/assets/ci_favicons/favicon_status_success-26f59841becbef8c6fe414e9e74471d8bfd6a91b5855c19fe7f5923a40a7da47.ico"}},"project":{"id":3557095,"name":"multi-project-pipeline-2","full_path":"/bikebilly/multi-project-pipeline-2","full_name":"Fabio Busatto / multi-project-pipeline-2"}}]};
\ No newline at end of file
diff --git a/app/assets/javascripts/pipelines/stores/pipeline_store.js b/app/assets/javascripts/pipelines/stores/pipeline_store.js
index 052e34a8aef8a9..9b1b9fa19b43ee 100644
--- a/app/assets/javascripts/pipelines/stores/pipeline_store.js
+++ b/app/assets/javascripts/pipelines/stores/pipeline_store.js
@@ -1,11 +1,71 @@
+import _ from 'underscore';
+import mock from './mock';
+import { UPSTREAM, DOWNSTREAM } from '../constants';
+
 export default class PipelineStore {
   constructor() {
     this.state = {};
 
     this.state.pipeline = {};
+    this.state.graph = {};
+    this.state.upstreams = [];
+    this.state.downstreams = [];
   }
 
-  storePipeline(pipeline = {}) {
+  storePipeline(pipeline = mock) {
+    pipeline = mock;
+
     this.state.pipeline = pipeline;
+
+    this.state.graph = pipeline.details.stages;
+
+    // EE feature - has upstream and downstream pipelines
+    if (pipeline.triggered) {
+      pipeline.triggered.map(downstream => this.addDownstream(downstream));
+    }
+
+    if (pipeline.triggered_by) {
+      this.addUpstream(pipeline.triggered_by);
+    }
+  }
+
+  addUpstream(upstream = {}) {
+    if (!_.findWhere(this.state.upstreams, { id: upstream.id })) {
+      this.state.upstreams.push(Object.assign({}, upstream, { expanded: false }));
+    }
+  }
+
+  updateUpstream(upstream) {
+    // Update the entire array: https://vuejs.org/v2/guide/list.html#Replacing-an-Array
+    const upstreamCopy = this.upstream;
+
+    upstreamCopy.map((element) => {
+      if (upstream.id === element.id) {
+        return Object.assign({}, element, upstream);
+      }
+      return element;
+    });
+
+    debugger;
+
+    this.upstream = upstreamCopy;
+  }
+
+  addDownstream(downstream = {}) {
+    if (!_.findWhere(this.state.downstreams, { id: downstream.id })) {
+      this.state.downstreams.push(Object.assign({}, downstream, { expanded: false }));
+    }
+  }
+
+  expandPipeline({ type, id }) {
+    if (type === UPSTREAM) {
+      // Assuming that each upstream has an object with an upstream
+      // Let's look for the one with the given id
+      const newUpstream = _.findWhere(this.state.upstreams, { id, expdanded: false });
+      // Update the status in order to not be possible to expand it more than once
+      this.updateUpstream(Object.assign({}, newUpstream, { expanded: true }));
+      // And add it as an new upstream
+      this.addUpstream(newUpstream.triggered_by);
+    }
   }
 }
-- 
GitLab