Merge branch 'ac-post-merge-pipeline' into 'master'

post merge pipeline and environments status

Closes #47799

See merge request gitlab-org/gitlab-ce!22292

4 files changed, 95 insertions, 25 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index 6c87287a4c4..5e7a35e9396 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -2,6 +2,7 @@
 import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import FilteredSearchDropdown from '~/vue_shared/components/filtered_search_dropdown.vue';
+import { __ } from '~/locale';
 import timeagoMixin from '../../vue_shared/mixins/timeago';
 import tooltip from '../../vue_shared/directives/tooltip';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
@@ -31,6 +32,11 @@ export default {
       required: true,
     },
   },
+  deployedTextMap: {
+    running: __('Deploying to'),
+    success: __('Deployed to'),
+    failed: __('Failed to deploy to'),
+  },
   data() {
     const features = window.gon.features || {};
     return {
@@ -54,10 +60,13 @@ export default {
     hasMetrics() {
       return !!this.deployment.metrics_url;
     },
+    deployedText() {
+      return this.$options.deployedTextMap[this.deployment.status];
+    },
   },
   methods: {
     stopEnvironment() {
-      const msg = 'Are you sure you want to stop this environment?';
+      const msg = __('Are you sure you want to stop this environment?');
       const isConfirmed = confirm(msg); // eslint-disable-line
 
       if (isConfirmed) {
@@ -87,10 +96,10 @@ export default {
     <div class="ci-widget media">
       <div class="media-body">
         <div class="deploy-body">
-          <div class="deployment-info">
+          <div class="js-deployment-info deployment-info">
             <template v-if="hasDeploymentMeta">
               <span>
-                Deployed to
+                {{ deployedText }}
               </span>
               <tooltip-on-truncate
                 :title="deployment.name"
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 5d9f7cebcf2..a5c69d2bc7a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -1,4 +1,6 @@
 <script>
+import _ from 'underscore';
+import { __ } from '~/locale';
 import Project from '~/pages/projects/project';
 import SmartInterval from '~/smart_interval';
 import createFlash from '../flash';
@@ -80,6 +82,7 @@ export default {
     const service = this.createService(store);
     return {
       mr: store,
+      state: store.state,
       service,
     };
   },
@@ -103,6 +106,17 @@ export default {
         (!this.mr.isNothingToMergeState && !this.mr.isMergedState)
       );
     },
+    shouldRenderMergedPipeline() {
+      return this.mr.state === 'merged' && !_.isEmpty(this.mr.mergePipeline);
+    },
+  },
+  watch: {
+    state(newVal, oldVal) {
+      if (newVal !== oldVal && this.shouldRenderMergedPipeline) {
+        // init polling
+        this.initPostMergeDeploymentsPolling();
+      }
+    }
   },
   created() {
     this.initPolling();
@@ -112,11 +126,19 @@ export default {
   mounted() {
     this.setFaviconHelper();
     this.initDeploymentsPolling();
+
+    if (this.shouldRenderMergedPipeline) {
+      this.initPostMergeDeploymentsPolling();
+    }
   },
   beforeDestroy() {
     eventHub.$off('mr.discussion.updated', this.checkStatus);
     this.pollingInterval.destroy();
     this.deploymentsInterval.destroy();
+
+    if (this.postMergeDeploymentsInterval) {
+      this.postMergeDeploymentsInterval.destroy();
+    }
   },
   methods: {
     createService(store) {
@@ -146,7 +168,13 @@ export default {
             cb.call(null, data);
           }
         })
-        .catch(() => createFlash('Something went wrong. Please try again.'));
+        .catch(() => createFlash(__('Something went wrong. Please try again.')));
+    },
+    setFaviconHelper() {
+      if (this.mr.ciStatusFaviconPath) {
+        return setFaviconOverlay(this.mr.ciStatusFaviconPath);
+      }
+      return Promise.resolve();
     },
     initPolling() {
       this.pollingInterval = new SmartInterval({
@@ -158,8 +186,14 @@ export default {
       });
     },
     initDeploymentsPolling() {
-      this.deploymentsInterval = new SmartInterval({
-        callback: this.fetchDeployments,
+      this.deploymentsInterval = this.deploymentsPoll(this.fetchPreMergeDeployments);
+    },
+    initPostMergeDeploymentsPolling() {
+      this.postMergeDeploymentsInterval = this.deploymentsPoll(this.fetchPostMergeDeployments);
+    },
+    deploymentsPoll(callback) {
+      return new SmartInterval({
+        callback,
         startingInterval: 30000,
         maxInterval: 120000,
         hiddenInterval: 240000,
@@ -167,26 +201,29 @@ export default {
         immediateExecution: true,
       });
     },
-    setFaviconHelper() {
-      if (this.mr.ciStatusFaviconPath) {
-        return setFaviconOverlay(this.mr.ciStatusFaviconPath);
-      }
-      return Promise.resolve();
+    fetchDeployments(target) {
+      return this.service.fetchDeployments(target);
     },
-    fetchDeployments() {
-      return this.service
-        .fetchDeployments()
-        .then(res => res.data)
-        .then(data => {
+    fetchPreMergeDeployments() {
+      return this.fetchDeployments()
+        .then(({ data }) => {
           if (data.length) {
             this.mr.deployments = data;
           }
         })
-        .catch(() => {
-          createFlash(
-            'Something went wrong while fetching the environments for this merge request. Please try again.',
-          );
-        });
+        .catch(() => this.throwDeploymentsError());
+    },
+    fetchPostMergeDeployments(){
+      return this.fetchDeployments('merge_commit')
+        .then(({ data }) => {
+          if (data.length) {
+            this.mr.postMergeDeployments = data;
+          }
+        })
+      .catch(() => this.throwDeploymentsError());
+    },
+    throwDeploymentsError() {
+      createFlash(__('Something went wrong while fetching the environments for this merge request. Please try again.'));
     },
     fetchActionsContent() {
       this.service
@@ -199,7 +236,7 @@ export default {
             Project.initRefSwitcher();
           }
         })
-        .catch(() => createFlash('Something went wrong. Please try again.'));
+        .catch(() => createFlash(__('Something went wrong. Please try again.')));
     },
     handleNotification(data) {
       if (data.ci_status === this.mr.ciStatus) return;
@@ -267,7 +304,8 @@ export default {
     />
     <deployment
       v-for="deployment in mr.deployments"
-      :key="deployment.id"
+      :key="`pre-merge-deploy-${deployment.id}`"
+      class="js-pre-merge-deploy"
       :deployment="deployment"
     />
     <div class="mr-section-container">
@@ -308,5 +346,22 @@ export default {
         <mr-widget-merge-help />
       </div>
     </div>
+
+    <template v-if="shouldRenderMergedPipeline">
+      <mr-widget-pipeline
+        class="js-post-merge-pipeline prepend-top-default"
+        :pipeline="mr.mergePipeline"
+        :ci-status="mr.ciStatus"
+        :has-ci="mr.hasCI"
+        :source-branch="mr.targetBranch"
+        :source-branch-link="mr.targetBranch"
+      />
+      <deployment
+        v-for="postMergeDeployment in mr.postMergeDeployments"
+        :key="`post-merge-deploy-${postMergeDeployment.id}`"
+        :deployment="postMergeDeployment"
+        class="js-post-deployment"
+      />
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js b/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
index fecbfec2214..bf5b85b2ae6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
+++ b/app/assets/javascripts/vue_merge_request_widget/services/mr_widget_service.js
@@ -21,8 +21,12 @@ export default class MRWidgetService {
     return axios.delete(this.endpoints.sourceBranchPath);
   }
 
-  fetchDeployments() {
-    return axios.get(this.endpoints.ciEnvironmentsStatusPath);
+  fetchDeployments(targetParam) {
+    return axios.get(this.endpoints.ciEnvironmentsStatusPath, {
+      params: {
+        environment_target: targetParam
+      }
+    });
   }
 
   poll() {
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index e6655914700..a0c008e7314 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -32,7 +32,9 @@ export default class MergeRequestStore {
     this.commitsCount = data.commits_count;
     this.divergedCommitsCount = data.diverged_commits_count;
     this.pipeline = data.pipeline || {};
+    this.mergePipeline = data.merge_pipeline || {};
     this.deployments = this.deployments || data.deployments || [];
+    this.postMergeDeployments = this.postMergeDeployments || [];
     this.initRebase(data);
 
     if (data.issues_links) {