Don't show memory usage graph for unmerged MRs

4 files changed, 40 insertions, 3 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 4ec925aa8a6..fe741dc60cb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -33,6 +33,10 @@ export default {
       type: Object,
       required: true,
     },
+    showMetrics: {
+      type: Boolean,
+      required: true,
+    },
   },
   deployedTextMap: {
     running: __('Deploying to'),
@@ -74,6 +78,9 @@ export default {
     shouldRenderDropdown() {
       return this.deployment.changes && this.deployment.changes.length > 0;
     },
+    showMemoryUsage() {
+      return this.hasMetrics && this.showMetrics;
+    },
   },
   methods: {
     stopEnvironment() {
@@ -136,7 +143,7 @@ export default {
               {{ deployTimeago }}
             </span>
             <memory-usage
-              v-if="hasMetrics"
+              v-if="showMemoryUsage"
               :metrics-url="deployment.metrics_url"
               :metrics-monitoring-url="deployment.metrics_monitoring_url"
             />
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 063d1e15544..3b840540657 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
@@ -312,6 +312,7 @@ export default {
       :key="`pre-merge-deploy-${deployment.id}`"
       class="js-pre-merge-deploy"
       :deployment="deployment"
+      :show-metrics="false"
     />
     <div class="mr-section-container">
       <grouped-test-reports-app
@@ -366,6 +367,7 @@ export default {
         v-for="postMergeDeployment in mr.postMergeDeployments"
         :key="`post-merge-deploy-${postMergeDeployment.id}`"
         :deployment="postMergeDeployment"
+        :show-metrics="true"
         class="js-post-deployment"
       />
     </template>
diff --git a/changelogs/unreleased/49479-hide-unmerged-env-perf-stats.yml b/changelogs/unreleased/49479-hide-unmerged-env-perf-stats.yml
new file mode 100644
index 00000000000..5118949f8a3
--- /dev/null
+++ b/changelogs/unreleased/49479-hide-unmerged-env-perf-stats.yml
@@ -0,0 +1,5 @@
+---
+title: Don't show Memory Usage for unmerged MRs
+merge_request:
+author:
+type: changed
diff --git a/spec/javascripts/vue_mr_widget/components/deployment_spec.js b/spec/javascripts/vue_mr_widget/components/deployment_spec.js
index ebbcaeb6f30..056b4df8fdc 100644
--- a/spec/javascripts/vue_mr_widget/components/deployment_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/deployment_spec.js
@@ -41,7 +41,7 @@ describe('Deployment component', () => {
 
   describe('', () => {
     beforeEach(() => {
-      vm = mountComponent(Component, { deployment: { ...deploymentMockData } });
+      vm = mountComponent(Component, { deployment: { ...deploymentMockData }, showMetrics: true });
     });
 
     describe('deployTimeago', () => {
@@ -174,11 +174,31 @@ describe('Deployment component', () => {
     });
   });
 
+  describe('with showMetrics enabled', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, { deployment: { ...deploymentMockData }, showMetrics: true });
+    });
+
+    it('shows metrics', () => {
+      expect(vm.$el).toContainElement('.js-mr-memory-usage');
+    });
+  });
+
+  describe('with showMetrics disabled', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, { deployment: { ...deploymentMockData }, showMetrics: false });
+    });
+
+    it('hides metrics', () => {
+      expect(vm.$el).not.toContainElement('.js-mr-memory-usage');
+    });
+  });
+
   describe('without changes', () => {
     beforeEach(() => {
       delete deploymentMockData.changes;
 
-      vm = mountComponent(Component, { deployment: { ...deploymentMockData } });
+      vm = mountComponent(Component, { deployment: { ...deploymentMockData }, showMetrics: true });
     });
 
     it('renders the link to the review app without dropdown', () => {
@@ -192,6 +212,7 @@ describe('Deployment component', () => {
       beforeEach(() => {
         vm = mountComponent(Component, {
           deployment: Object.assign({}, deploymentMockData, { status: 'running' }),
+          showMetrics: true,
         });
       });
 
@@ -208,6 +229,7 @@ describe('Deployment component', () => {
       beforeEach(() => {
         vm = mountComponent(Component, {
           deployment: Object.assign({}, deploymentMockData, { status: 'success' }),
+          showMetrics: true,
         });
       });
 
@@ -220,6 +242,7 @@ describe('Deployment component', () => {
       beforeEach(() => {
         vm = mountComponent(Component, {
           deployment: Object.assign({}, deploymentMockData, { status: 'failed' }),
+          showMetrics: true,
         });
       });