Moves mr_widget_memory_usage to a vue filefl-mr-widget-3

5 files changed, 235 insertions, 214 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.vue
index d561d900ea4..88ee34a6c8e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.vue
@@ -4,7 +4,7 @@
   import Flash from '~/flash';
   import { s__ } from '~/locale';
   import tooltip from '~/vue_shared/directives/tooltip';
-  import memoryUsage from './mr_widget_memory_usage';
+  import memoryUsage from './mr_widget_memory_usage.vue';
   import statusIcon from './mr_widget_status_icon.vue';
   import MRWidgetService from '../services/mr_widget_service';
 
@@ -122,7 +122,7 @@
             {{ s__("mrWidget|Stop environment") }}
           </button>
 
-          <mr-widget-memory-usage
+          <memory-usage
             v-if="deployment.metrics_url"
             :metrics-url="deployment.metrics_url"
             :metrics-monitoring-url="deployment.metrics_monitoring_url"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
deleted file mode 100644
index 69e70ba1dd6..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import statusCodes from '../../lib/utils/http_status';
-import { bytesToMiB } from '../../lib/utils/number_utils';
-import { backOff } from '../../lib/utils/common_utils';
-import MemoryGraph from '../../vue_shared/components/memory_graph';
-import MRWidgetService from '../services/mr_widget_service';
-
-export default {
-  name: 'MemoryUsage',
-  props: {
-    metricsUrl: {
-      type: String,
-      required: true,
-    },
-    metricsMonitoringUrl: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      memoryFrom: 0,
-      memoryTo: 0,
-      memoryMetrics: [],
-      deploymentTime: 0,
-      hasMetrics: false,
-      loadFailed: false,
-      loadingMetrics: true,
-      backOffRequestCounter: 0,
-    };
-  },
-  components: {
-    'mr-memory-graph': MemoryGraph,
-  },
-  computed: {
-    shouldShowLoading() {
-      return this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
-    },
-    shouldShowMemoryGraph() {
-      return !this.loadingMetrics && this.hasMetrics && !this.loadFailed;
-    },
-    shouldShowLoadFailure() {
-      return !this.loadingMetrics && !this.hasMetrics && this.loadFailed;
-    },
-    shouldShowMetricsUnavailable() {
-      return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
-    },
-    memoryChangeType() {
-      const memoryTo = Number(this.memoryTo);
-      const memoryFrom = Number(this.memoryFrom);
-
-      if (memoryTo > memoryFrom) {
-        return 'increased';
-      } else if (memoryTo < memoryFrom) {
-        return 'decreased';
-      }
-
-      return 'unchanged';
-    },
-  },
-  methods: {
-    getMegabytes(bytesString) {
-      const valueInBytes = Number(bytesString).toFixed(2);
-      return (bytesToMiB(valueInBytes)).toFixed(2);
-    },
-    computeGraphData(metrics, deploymentTime) {
-      this.loadingMetrics = false;
-      const { memory_before, memory_after, memory_values } = metrics;
-
-      // Both `memory_before` and `memory_after` objects
-      // have peculiar structure where accessing only a specific
-      // index yeilds correct value that we can use to show memory delta.
-      if (memory_before.length > 0) {
-        this.memoryFrom = this.getMegabytes(memory_before[0].value[1]);
-      }
-
-      if (memory_after.length > 0) {
-        this.memoryTo = this.getMegabytes(memory_after[0].value[1]);
-      }
-
-      if (memory_values.length > 0) {
-        this.hasMetrics = true;
-        this.memoryMetrics = memory_values[0].values;
-        this.deploymentTime = deploymentTime;
-      }
-    },
-    loadMetrics() {
-      backOff((next, stop) => {
-        MRWidgetService.fetchMetrics(this.metricsUrl)
-          .then((res) => {
-            if (res.status === statusCodes.NO_CONTENT) {
-              this.backOffRequestCounter = this.backOffRequestCounter += 1;
-              /* eslint-disable no-unused-expressions */
-              this.backOffRequestCounter < 3 ? next() : stop(res);
-            } else {
-              stop(res);
-            }
-          })
-          .catch(stop);
-      })
-        .then((res) => {
-          if (res.status === statusCodes.NO_CONTENT) {
-            return res;
-          }
-
-          return res.data;
-        })
-        .then((data) => {
-          this.computeGraphData(data.metrics, data.deployment_time);
-          return data;
-        })
-        .catch(() => {
-          this.loadFailed = true;
-          this.loadingMetrics = false;
-        });
-    },
-  },
-  mounted() {
-    this.loadingMetrics = true;
-    this.loadMetrics();
-  },
-  template: `
-    <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
-      <p
-        v-if="shouldShowLoading"
-        class="usage-info js-usage-info usage-info-loading">
-        <i
-          class="fa fa-spinner fa-spin usage-info-load-spinner"
-          aria-hidden="true" />Loading deployment statistics
-      </p>
-      <p
-        v-if="shouldShowMemoryGraph"
-        class="usage-info js-usage-info">
-        <a :href="metricsMonitoringUrl">Memory</a> usage <b>{{memoryChangeType}}</b> from {{memoryFrom}}MB to {{memoryTo}}MB
-      </p>
-      <p
-        v-if="shouldShowLoadFailure"
-        class="usage-info js-usage-info usage-info-failed">
-        Failed to load deployment statistics
-      </p>
-      <p
-        v-if="shouldShowMetricsUnavailable"
-        class="usage-info js-usage-info usage-info-unavailable">
-        Deployment statistics are not available currently
-      </p>
-      <mr-memory-graph
-        v-if="shouldShowMemoryGraph"
-        :metrics="memoryMetrics"
-        :deploymentTime="deploymentTime"
-        height="25"
-        width="100" />
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.vue
new file mode 100644
index 00000000000..658fcfc7a1a
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_memory_usage.vue
@@ -0,0 +1,184 @@
+<script>
+  import _ from 'underscore';
+  import statusCodes from '~/lib/utils/http_status';
+  import { bytesToMiB } from '~/lib/utils/number_utils';
+  import { backOff } from '~/lib/utils/common_utils';
+  import { sprintf, s__ } from '~/locale';
+  import memoryGraph from '~/vue_shared/components/memory_graph';
+  import MRWidgetService from '../services/mr_widget_service';
+
+  export default {
+    name: 'MemoryUsage',
+    components: {
+      memoryGraph,
+    },
+    props: {
+      metricsUrl: {
+        type: String,
+        required: true,
+      },
+      metricsMonitoringUrl: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        memoryFrom: 0,
+        memoryTo: 0,
+        memoryMetrics: [],
+        deploymentTime: 0,
+        hasMetrics: false,
+        loadFailed: false,
+        loadingMetrics: true,
+        backOffRequestCounter: 0,
+      };
+    },
+    computed: {
+      shouldShowLoading() {
+        return this.loadingMetrics
+          && !this.hasMetrics
+          && !this.loadFailed;
+      },
+      shouldShowMemoryGraph() {
+        return !this.loadingMetrics
+          && this.hasMetrics
+          && !this.loadFailed;
+      },
+      shouldShowLoadFailure() {
+        return !this.loadingMetrics
+          && !this.hasMetrics
+          && this.loadFailed;
+      },
+      shouldShowMetricsUnavailable() {
+        return !this.loadingMetrics
+          && !this.hasMetrics
+          && !this.loadFailed;
+      },
+      memoryChangeType() {
+        const memoryTo = parseInt(this.memoryTo, 10);
+        const memoryFrom = parseInt(this.memoryFrom, 10);
+
+        if (memoryTo > memoryFrom) {
+          return 'increased';
+        } else if (memoryTo < memoryFrom) {
+          return 'decreased';
+        }
+
+        return 'unchanged';
+      },
+      memoryText() {
+        return sprintf(
+          _.escape(s__('mrWidget|usage %{boldMemoryChangeType} from %{memoryFrom}MB to %{memoryTo}MB')), {
+            boldMemoryChangeType: `<b>${this.memoryChangeType}</b>`,
+            memoryFrom: this.memoryFrom,
+            memoryTo: this.memoryTo,
+          },
+          false,
+        );
+      },
+    },
+    mounted() {
+      this.loadingMetrics = true;
+      this.loadMetrics();
+    },
+    methods: {
+      getMegabytes(bytesString) {
+        const valueInBytes = Number(bytesString).toFixed(2);
+        return (bytesToMiB(valueInBytes)).toFixed(2);
+      },
+      computeGraphData(metrics, deploymentTime) {
+        this.loadingMetrics = false;
+        const { memory_before, memory_after, memory_values } = metrics;
+
+        // Both `memory_before` and `memory_after` objects
+        // have peculiar structure where accessing only a specific
+        // index yeilds correct value that we can use to show memory delta.
+        if (memory_before.length > 0) {
+          this.memoryFrom = this.getMegabytes(memory_before[0].value[1]);
+        }
+
+        if (memory_after.length > 0) {
+          this.memoryTo = this.getMegabytes(memory_after[0].value[1]);
+        }
+
+        if (memory_values.length > 0) {
+          this.hasMetrics = true;
+          this.memoryMetrics = memory_values[0].values;
+          this.deploymentTime = deploymentTime;
+        }
+      },
+      loadMetrics() {
+        backOff((next, stop) => {
+          MRWidgetService.fetchMetrics(this.metricsUrl)
+            .then((res) => {
+              if (res.status === statusCodes.NO_CONTENT) {
+                this.backOffRequestCounter = this.backOffRequestCounter += 1;
+                /* eslint-disable no-unused-expressions */
+                this.backOffRequestCounter < 3 ? next() : stop(res);
+              } else {
+                stop(res);
+              }
+            })
+            .catch(stop);
+        })
+          .then((res) => {
+            if (res.status === statusCodes.NO_CONTENT) {
+              return res;
+            }
+
+            return res.data;
+          })
+          .then((data) => {
+            this.computeGraphData(data.metrics, data.deployment_time);
+            return data;
+          })
+          .catch(() => {
+            this.loadFailed = true;
+            this.loadingMetrics = false;
+          });
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-info-list clearfix mr-memory-usage js-mr-memory-usage">
+    <p
+      v-if="shouldShowLoading"
+      class="usage-info js-usage-info usage-info-loading"
+    >
+      <i
+        class="fa fa-spinner fa-spin usage-info-load-spinner"
+        aria-hidden="true"
+      >
+      </i>
+      {{ s__("mrWidget|Loading deployment statistics") }}
+    </p>
+    <p
+      v-if="shouldShowMemoryGraph"
+      class="usage-info js-usage-info">
+
+      <a :href="metricsMonitoringUrl">{{ s__("mrWidget|Memory") }}</a> <span v-html="memoryText"></span>
+    </p>
+    <p
+      v-if="shouldShowLoadFailure"
+      class="usage-info js-usage-info usage-info-failed"
+    >
+      {{ s__ ("mrWidget|Failed to load deployment statistics") }}
+    </p>
+    <p
+      v-if="shouldShowMetricsUnavailable"
+      class="usage-info js-usage-info usage-info-unavailable"
+    >
+      {{ s__("mrWidget|Deployment statistics are not available currently") }}
+    </p>
+
+    <memory-graph
+      v-if="shouldShowMemoryGraph"
+      :metrics="memoryMetrics"
+      :deployment-time="deploymentTime"
+      height="25"
+      width="100"
+    />
+  </div>
+</template>
diff --git a/spec/features/merge_request/user_sees_deployment_widget_spec.rb b/spec/features/merge_request/user_sees_deployment_widget_spec.rb
index 3abe363d523..f744d7941f5 100644
--- a/spec/features/merge_request/user_sees_deployment_widget_spec.rb
+++ b/spec/features/merge_request/user_sees_deployment_widget_spec.rb
@@ -22,7 +22,7 @@ describe 'Merge request > User sees deployment widget', :js do
       wait_for_requests
 
       expect(page).to have_content("Deployed to #{environment.name}")
-      expect(find('.js-deploy-time')['data-title']).to eq(deployment.created_at.to_time.in_time_zone.to_s(:medium))
+      expect(find('.js-deploy-time')['data-original-title']).to eq(deployment.created_at.to_time.in_time_zone.to_s(:medium))
     end
 
     context 'with stop action' do
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
index 07ed7f7f532..526cbe57b2f 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
@@ -1,44 +1,44 @@
 import Vue from 'vue';
-import memoryUsageComponent from '~/vue_merge_request_widget/components/mr_widget_memory_usage';
+import memoryUsageComponent from '~/vue_merge_request_widget/components/mr_widget_memory_usage.vue';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
-const url = '/root/acets-review-apps/environments/15/deployments/1/metrics';
-const monitoringUrl = '/root/acets-review-apps/environments/15/metrics';
-
-const metricsMockData = {
-  success: true,
-  metrics: {
-    memory_before: [
-      {
-        metric: {},
-        value: [1495785220.607, '9572875.906976745'],
-      },
-    ],
-    memory_after: [
-      {
-        metric: {},
-        value: [1495787020.607, '4485853.130206379'],
-      },
-    ],
-    memory_values: [
-      {
-        metric: {},
-        values: [
-          [1493716685, '4.30859375'],
-        ],
-      },
-    ],
-  },
-  last_update: '2017-05-02T12:34:49.628Z',
-  deployment_time: 1493718485,
-};
-
-const createComponent = () => {
-  const Component = Vue.extend(memoryUsageComponent);
-
-  return new Component({
-    el: document.createElement('div'),
-    propsData: {
+describe('MemoryUsage', () => {
+  const url = '/root/acets-review-apps/environments/15/deployments/1/metrics';
+  const monitoringUrl = '/root/acets-review-apps/environments/15/metrics';
+
+  const metricsMockData = {
+    success: true,
+    metrics: {
+      memory_before: [
+        {
+          metric: {},
+          value: [1495785220.607, '9572875.906976745'],
+        },
+      ],
+      memory_after: [
+        {
+          metric: {},
+          value: [1495787020.607, '4485853.130206379'],
+        },
+      ],
+      memory_values: [
+        {
+          metric: {},
+          values: [
+            [1493716685, '4.30859375'],
+          ],
+        },
+      ],
+    },
+    last_update: '2017-05-02T12:34:49.628Z',
+    deployment_time: 1493718485,
+  };
+
+  const createComponent = () => {
+    const Component = Vue.extend(memoryUsageComponent);
+
+    return mountComponent(Component, {
       metricsUrl: url,
       metricsMonitoringUrl: monitoringUrl,
       memoryMetrics: [],
@@ -47,18 +47,16 @@ const createComponent = () => {
       loadFailed: false,
       loadingMetrics: true,
       backOffRequestCounter: 0,
-    },
-  });
-};
+    });
+  };
 
-const messages = {
-  loadingMetrics: 'Loading deployment statistics',
-  hasMetrics: 'Memory usage unchanged from 0MB to 0MB',
-  loadFailed: 'Failed to load deployment statistics',
-  metricsUnavailable: 'Deployment statistics are not available currently',
-};
+  const messages = {
+    loadingMetrics: 'Loading deployment statistics',
+    hasMetrics: 'Memory usage unchanged from 0MB to 0MB',
+    loadFailed: 'Failed to load deployment statistics',
+    metricsUnavailable: 'Deployment statistics are not available currently',
+  };
 
-describe('MemoryUsage', () => {
   let vm;
   let el;
 
@@ -67,16 +65,8 @@ describe('MemoryUsage', () => {
     el = vm.$el;
   });
 
-  describe('props', () => {
-    it('should have props with defaults', () => {
-      const { metricsUrl } = memoryUsageComponent.props;
-      const MetricsUrlTypeClass = metricsUrl.type;
-
-      Vue.nextTick(() => {
-        expect(new MetricsUrlTypeClass() instanceof String).toBeTruthy();
-        expect(metricsUrl.required).toBeTruthy();
-      });
-    });
+  afterEach(() => {
+    vm.$destroy();
   });
 
   describe('data', () => {