Removes get requests for upstream/downstream

Recursively updates isExpanded property for
all triggered and triggered by pipelines

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import Flash from '~/flash';
 import Translate from '~/vue_shared/translate';
 import { __ } from '~/locale';
-import PipelinesMediator from 'ee/pipelines/pipeline_details_mediator';
+import PipelinesMediator from './pipeline_details_mediator';
 import pipelineGraph from 'ee/pipelines/components/graph/graph_component.vue';
 import pipelineHeader from './components/header_component.vue';
 import eventHub from './event_hub';
@@ -53,10 +53,10 @@ export default () => {
         on: {
           refreshPipelineGraph: this.requestRefreshPipelineGraph,
           // EE-only start
-          refreshTriggeredPipelineGraph: this.mediator.refreshTriggeredByPipelineGraph,
-          refreshTriggeredByPipelineGraph: this.mediator.refreshTriggeredByPipelineGraph,
-          onClickTriggeredBy: pipeline => this.clickTriggeredBy(pipeline),
-          onClickTriggered: pipeline => this.clickTriggered(pipeline),
+          // refreshTriggeredPipelineGraph: this.mediator.refreshTriggeredByPipelineGraph,
+          // refreshTriggeredByPipelineGraph: this.mediator.refreshTriggeredByPipelineGraph,
+          onClickTriggeredBy: pipeline => this.clickTriggeredByPipeline(pipeline),
+          onClickTriggered: pipeline => this.clickTriggeredPipeline(pipeline),
           // EE-only end
         },
       });

app/assets/javascripts/pipelines/pipeline_details_mediator.js

@@ -2,8 +2,8 @@ import Visibility from 'visibilityjs';
 import Flash from '../flash';
 import Poll from '../lib/utils/poll';
 import { __ } from '../locale';
+import PipelineService from '~/pipelines/services/pipeline_service';
 import PipelineStore from 'ee/pipelines/stores/pipeline_store'; // eslint-disable-line import/order
-import PipelineService from 'ee/pipelines/services/pipeline_service'; // eslint-disable-line import/order
 
 export default class pipelinesMediator {
   constructor(options = {}) {

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

@@ -6,6 +6,7 @@ import EEGraphMixin from 'ee/pipelines/mixins/graph_component_mixin';
 import StageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue';
 
 export default {
+  name: 'PipelineGraph',
   components: {
     LinkedPipelinesColumn,
     StageColumnComponent,
@@ -62,21 +63,6 @@ export default {
     <div class="pipeline-visualization pipeline-graph pipeline-tab-content">
       <div class="text-center"><gl-loading-icon v-if="isLoading" :size="3" /></div>
 
-      <ul v-if="shouldRenderTriggeredByPipeline" class="d-inline-block upstream-pipeline align-top">
-        <stage-column-component
-          v-for="(stage, indexUpstream) in triggeredByGraph"
-          :key="stage.name"
-          :class="{
-            'has-only-one-job': hasOnlyOneJob(stage),
-          }"
-          :title="capitalizeStageName(stage.name)"
-          :groups="stage.groups"
-          :stage-connector-class="stageConnectorClass(indexUpstream, stage)"
-          :is-first-column="isFirstColumn(indexUpstream)"
-          @refreshPipelineGraph="refreshTriggeredByPipelineGraph"
-        />
-      </ul>
-
       <linked-pipelines-column
         v-if="hasTriggeredBy"
         :linked-pipelines="triggeredByPipelines"
@@ -116,25 +102,6 @@ export default {
         graph-position="right"
         @linkedPipelineClick="handleClickedDownstream"
       />
-
-      <ul
-        v-if="shouldRenderTriggeredPipeline"
-        class="d-inline-block downstream-pipeline position-relative align-top"
-        :style="{ 'margin-top': marginTop }"
-      >
-        <stage-column-component
-          v-for="(stage, indexDownstream) in triggeredGraph"
-          :key="stage.name"
-          :class="{
-            'has-only-one-job': hasOnlyOneJob(stage),
-          }"
-          :title="capitalizeStageName(stage.name)"
-          :groups="stage.groups"
-          :stage-connector-class="stageConnectorClass(indexDownstream, stage)"
-          :is-first-column="isFirstColumn(indexDownstream)"
-          @refreshPipelineGraph="refreshTriggeredPipelineGraph"
-        />
-      </ul>
     </div>
   </div>
 </template>

ee/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue

@@ -12,30 +12,23 @@ export default {
     GlButton,
   },
   props: {
-    pipelineId: {
-      type: Number,
-      required: true,
-    },
-    pipelineStatus: {
+    pipeline: {
       type: Object,
       required: true,
     },
-    projectName: {
-      type: String,
-      required: true,
-    },
-    isLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     tooltipText() {
       return `${this.projectName} - ${this.pipelineStatus.label}`;
     },
     buttonId() {
-      return `js-linked-pipeline-${this.pipelineId}`;
+      return `js-linked-pipeline-${this.pipeline.id}`;
+    },
+    pipelineStatus() {
+      return this.pipeline.details.status;
+    },
+    projectName() {
+      return this.pipeline.project.name;
     },
   },
   methods: {
@@ -57,10 +50,10 @@ export default {
       class="js-linked-pipeline-content linked-pipeline-content"
       @click="onClickLinkedPipeline"
     >
-      <gl-loading-icon v-if="isLoading" class="js-linked-pipeline-loading d-inline" />
+      <gl-loading-icon v-if="pipeline.isLoading" class="js-linked-pipeline-loading d-inline" />
       <ci-status v-else :status="pipelineStatus" class="js-linked-pipeline-status" />
 
-      <span class="str-truncated align-bottom"> {{ projectName }} &#8226; #{{ pipelineId }} </span>
+      <span class="str-truncated align-bottom"> {{ projectName }} &#8226; #{{ pipeline.id }} </span>
     </gl-button>
   </li>
 </template>

ee/app/assets/javascripts/pipelines/constants.js

 export default {
   triggeredPipelines: 'triggeredPipelines',
   triggeredByPipelines: 'triggeredByPipelines',
-  triggeredBy: 'triggeredBy',
+  triggeredBy: 'triggered_by',
   triggered: 'triggered',
 };

ee/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js

-import _ from 'underscore';
-
 export default {
-  props: {
-    triggered: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    triggeredBy: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    triggeredByPipelines: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    triggeredPipelines: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-  },
   data() {
     return {
       triggeredTopIndex: 1,
     };
   },
   computed: {
-    triggeredGraph() {
-      return this.triggered && this.triggered.details && this.triggered.details.stages;
+    hasTriggeredBy() {
+      return this.pipeline.triggered_by && this.pipeline.triggered_by != null;
     },
-    triggeredByGraph() {
-      return this.triggeredBy && this.triggeredBy.details && this.triggeredBy.details.stages;
+    triggeredByPipelines() {
+      return this.pipeline.triggered_by;
     },
     hasTriggered() {
-      return this.triggeredPipelines.length > 0;
-    },
-    hasTriggeredBy() {
-      return this.triggeredByPipelines.length > 0;
-    },
-    shouldRenderTriggeredPipeline() {
-      return !this.isLoading && !_.isEmpty(this.triggered);
+      return this.pipeline.triggered && this.pipeline.triggered.length > 0;
     },
-    shouldRenderTriggeredByPipeline() {
-      return !this.isLoading && !_.isEmpty(this.triggeredBy);
+    triggeredPipelines() {
+      return this.pipeline.triggered;
     },
     /**
      * Calculates the margin top of the clicked downstream pipeline by
@@ -56,6 +26,7 @@ export default {
     },
   },
   methods: {
+    // TODO FILIPA: REMOVE THIS
     refreshTriggeredPipelineGraph() {
       this.$emit('refreshTriggeredPipelineGraph');
     },

ee/app/assets/javascripts/pipelines/mixins/graph_pipeline_bundle_mixin.js

-import pipelinesKeys from 'ee/pipelines/constants';
+import keys from '../constants';
 
 export default {
   methods: {
@@ -13,30 +13,19 @@ export default {
      * @param {String} resetStoreKey Store key for the visible pipeline that will need to be reset
      * @param {Object} pipeline The clicked pipeline
      */
-    clickPipeline(method, storeKey, resetStoreKey, pipeline, pollKey) {
+    clickPipeline(pipeline, method) {
+      debugger;
       if (!pipeline.isExpanded) {
-        this.mediator[method](pipeline);
+        this.mediator.store[method](pipeline);
       } else {
-        this.mediator.resetPipeline(storeKey, pipeline, resetStoreKey, pollKey);
+        this.mediator.store.closePipeline(pipeline);
       }
     },
-    clickTriggered(triggered) {
-      this.clickPipeline(
-        'fetchTriggeredPipeline',
-        pipelinesKeys.triggeredPipelines,
-        pipelinesKeys.triggered,
-        triggered,
-        'pollTriggered',
-      );
+    clickTriggeredByPipeline(pipeline) {
+      this.clickPipeline(pipeline, 'openTriggeredByPipeline');
     },
-    clickTriggeredBy(triggeredBy) {
-      this.clickPipeline(
-        'fetchTriggeredByPipeline',
-        pipelinesKeys.triggeredByPipelines,
-        pipelinesKeys.triggeredBy,
-        triggeredBy,
-        'pollTriggeredBy',
-      );
+    clickTriggeredPipeline(pipeline) {
+      this.clickPipeline(pipeline, 'openTriggeredPipeline');
     },
   },
 };

ee/app/assets/javascripts/pipelines/pipeline_details_mediator.js

-import CePipelineMediator from '~/pipelines/pipeline_details_mediator';
-import createFlash from '~/flash';
-import Poll from '~/lib/utils/poll';
-import { __ } from '~/locale';
-import PipelineService from 'ee/pipelines/services/pipeline_service';
-
-/**
- * Extends CE mediator with the logic to handle the upstream/downstream pipelines
- */
-export default class EePipelineMediator extends CePipelineMediator {
-  /**
-   * Requests the clicked downstream pipeline pipeline
-   *
-   * @param {Object} pipeline
-   */
-  fetchTriggeredPipeline(pipeline) {
-    if (this.pollTriggered) {
-      this.pollTriggered.stop();
-
-      this.pollTriggered = null;
-    }
-
-    this.store.requestTriggeredPipeline(pipeline);
-
-    this.pollTriggered = new Poll({
-      resource: PipelineService,
-      method: 'getUpstreamDownstream',
-      data: pipeline.path,
-      successCallback: ({ data }) => this.store.receiveTriggeredPipelineSuccess(pipeline, data),
-      errorCallback: () => {
-        this.store.receiveTriggeredPipelineError(pipeline);
-        createFlash(
-          __('An error occured while fetching this downstream pipeline. Please try again'),
-        );
-      },
-    });
-
-    this.pollTriggered.makeRequest();
-  }
-
-  refreshTriggeredPipelineGraph() {
-    this.pollTriggered.stop();
-    this.pollTriggered.restart();
-  }
-
-  /**
-   * Requests the clicked upstream pipeline pipeline
-   * @param {*} pipeline
-   */
-  fetchTriggeredByPipeline(pipeline) {
-    if (this.pollTriggeredBy) {
-      this.pollTriggeredBy.stop();
-
-      this.pollTriggeredBy = null;
-    }
-
-    this.store.requestTriggeredByPipeline(pipeline);
-
-    this.pollTriggeredBy = new Poll({
-      resource: PipelineService,
-      method: 'getUpstreamDownstream',
-      data: pipeline.path,
-      successCallback: ({ data }) => this.store.receiveTriggeredByPipelineSuccess(pipeline, data),
-      errorCallback: () => {
-        this.store.receiveTriggeredByPipelineError(pipeline);
-        createFlash(__('An error occured while fetching this upstream pipeline. Please try again'));
-      },
-    });
-
-    this.pollTriggeredBy.makeRequest();
-  }
-
-  refreshTriggeredByPipelineGraph() {
-    this.pollTriggeredBy.stop();
-    this.pollTriggeredBy.restart();
-  }
-
-  resetPipeline(storeKey, pipeline, resetStoreKey, pollKey) {
-    this[pollKey].stop();
-    this.store.closePipeline(storeKey, pipeline, resetStoreKey);
-  }
-}

ee/app/assets/javascripts/pipelines/services/pipeline_service.js

-import axios from '~/lib/utils/axios_utils';
-import CePipelineService from '~/pipelines/services/pipeline_service';
-
-export default class PipelineStore extends CePipelineService {
-  static getUpstreamDownstream(endpoint) {
-    return axios.get(`${endpoint}.json`);
-  }
-}

ee/spec/javascripts/pipelines/stores/pipeline_store.js

@@ -150,89 +150,4 @@ describe('EE Pipeline store', () => {
       });
     });
   });
-
-  describe('utils', () => {
-    describe('parsePipeline', () => {
-      let parsed;
-      beforeAll(() => {
-        parsed = PipelineStore.parsePipeline(pipeline);
-      });
-
-      it('adds isLoading key set to false', () => {
-        expect(parsed.isLoading).toEqual(false);
-      });
-
-      it('adds isExpanded key set to false', () => {
-        expect(parsed.isExpanded).toEqual(false);
-      });
-    });
-
-    describe('getPipelineIndex', () => {
-      beforeAll(() => {
-        store.storePipeline(pipelineWithBoth);
-      });
-
-      it('returns the pipeline index for the provided pipeline and storeKey', () => {
-        store.getPipelineIndex('triggeredPipelines', store.triggeredPipelines[1]).toEqual(1);
-      });
-    });
-
-    describe('updateStoreOnRequest', () => {
-      beforeAll(() => {
-        store.storePipeline(pipelineWithBoth);
-      });
-
-      it('sets clicked pipeline isLoading to true', () => {
-        store.updateStoreOnRequest('triggeredPipelines', store.triggeredPipelines[1]);
-
-        expect(store.triggeredPipelines[1].isLoading).isLoading(true);
-      });
-
-      it('sets clicked pipeline isExpanded to true', () => {
-        store.updateStoreOnRequest('triggeredPipelines', store.triggeredPipelines[1]);
-
-        expect(store.triggeredPipelines[1].isExpanded).isLoading(true);
-      });
-    });
-
-    describe('updatePipeline', () => {
-      beforeAll(() => {
-        store.storePipeline(pipelineWithBoth);
-
-        store.updatePipeline(
-          'triggeredPipelines',
-          store.triggeredPipelines[1],
-          { isLoading: true },
-          'triggered',
-          store.triggeredPipelines[1],
-        );
-      });
-
-      it('updates the given pipeline in the correct array', () => {
-        expect(store.triggeredPipelines[1].isLoading).toEqual(true);
-        expect(store.triggered).toEqual(store.triggeredPipelines[1]);
-      });
-
-      it('updates the visible pipeline to the given value', () => {});
-    });
-
-    describe('closePipeline', () => {
-      beforeAll(() => {
-        store.storePipeline(pipelineWithBoth);
-      });
-
-      it('closes the given pipeline', () => {
-        const clickedPipeline = store.triggeredPipelines[1];
-
-        // open it first
-        clickedPipeline.isExpanded = true;
-        store.triggered = clickedPipeline;
-
-        store.closePipeline('triggeredPipelines', clickedPipeline, 'triggered');
-
-        expect(store.triggeredPipelines[1].isExpanded).toEqual(true);
-        expect(store.triggered).toEqual({});
-      });
-    });
-  });
 });