Add i18n support for the mrWidget prometheus memory widget

app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue

 <script>
+import { sprintf, s__ } from '~/locale';
 import statusCodes from '../../lib/utils/http_status';
 import { bytesToMiB } from '../../lib/utils/number_utils';
 import { backOff } from '../../lib/utils/common_utils';
@@ -45,17 +46,28 @@ export default {
     shouldShowMetricsUnavailable() {
       return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed;
     },
-    memoryChangeType() {
+    memoryChangeMessage() {
+      const messageProps = {
+        memoryFrom: this.memoryFrom,
+        memoryTo: this.memoryTo,
+        metricsLinkStart: `<a href="${this.metricsMonitoringUrl}">`,
+        metricsLinkEnd: '</a>',
+        emphasisStart: '<b>',
+        emphasisEnd: '</b>',
+      };
       const memoryTo = Number(this.memoryTo);
       const memoryFrom = Number(this.memoryFrom);
+      let memoryUsageMsg = '';
 
       if (memoryTo > memoryFrom) {
-        return 'increased';
+        memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB'), messageProps, false);
       } else if (memoryTo < memoryFrom) {
-        return 'decreased';
+        memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB'), messageProps, false);
+      } else {
+        memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB'), messageProps, false);
       }
 
-      return 'unchanged';
+      return memoryUsageMsg;
     },
   },
   mounted() {
@@ -130,24 +142,22 @@ export default {
       <i
         class="fa fa-spinner fa-spin usage-info-load-spinner"
         aria-hidden="true">
-      </i>Loading deployment statistics
+      </i>{{ s__('mrWidget|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
+      {{ memoryChangeMessage }}
     </p>
     <p
       v-if="shouldShowLoadFailure"
       class="usage-info js-usage-info usage-info-failed">
-      Failed to load deployment statistics
+      {{ s__('mrWidget|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
+      {{ s__('mrWidget|Deployment statistics are not available currently') }}
     </p>
     <memory-graph
       v-if="shouldShowMemoryGraph"

changelogs/unreleased/44218-add-internationalization-support-for-the-prometheus-merge-request-widget.yml

+---
+title: Added i18n support for the prometheus memory widget
+merge_request: 17753
+author:
+type: other

spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js

@@ -23,9 +23,7 @@ const metricsMockData = {
     memory_values: [
       {
         metric: {},
-        values: [
-          [1493716685, '4.30859375'],
-        ],
+        values: [[1493716685, '4.30859375']],
       },
     ],
   },
@@ -53,7 +51,8 @@ const createComponent = () => {
 
 const messages = {
   loadingMetrics: 'Loading deployment statistics',
-  hasMetrics: 'Memory usage unchanged from 0MB to 0MB',
+  hasMetrics:
+    '<a href="/root/acets-review-apps/environments/15/metrics"> Memory </a> usage is <b> unchanged </b> at 0MB',
   loadFailed: 'Failed to load deployment statistics',
   metricsUnavailable: 'Deployment statistics are not available currently',
 };
@@ -92,26 +91,26 @@ describe('MemoryUsage', () => {
   });
 
   describe('computed', () => {
-    describe('memoryChangeType', () => {
-      it('should return "increased" if memoryFrom value is less than memoryTo value', () => {
+    describe('memoryChangeMessage', () => {
+      it('should contain "increased" if memoryFrom value is less than memoryTo value', () => {
         vm.memoryFrom = 4.28;
         vm.memoryTo = 9.13;
 
-        expect(vm.memoryChangeType).toEqual('increased');
+        expect(vm.memoryChangeMessage.indexOf('increased')).not.toEqual('-1');
       });
 
-      it('should return "decreased" if memoryFrom value is less than memoryTo value', () => {
+      it('should contain "decreased" if memoryFrom value is less than memoryTo value', () => {
         vm.memoryFrom = 9.13;
         vm.memoryTo = 4.28;
 
-        expect(vm.memoryChangeType).toEqual('decreased');
+        expect(vm.memoryChangeMessage.indexOf('decreased')).not.toEqual('-1');
       });
 
-      it('should return "unchanged" if memoryFrom value equal to memoryTo value', () => {
+      it('should contain "unchanged" if memoryFrom value equal to memoryTo value', () => {
         vm.memoryFrom = 1;
         vm.memoryTo = 1;
 
-        expect(vm.memoryChangeType).toEqual('unchanged');
+        expect(vm.memoryChangeMessage.indexOf('unchanged')).not.toEqual('-1');
       });
     });
   });
@@ -130,7 +129,13 @@ describe('MemoryUsage', () => {
     describe('computeGraphData', () => {
       it('should populate sparkline graph', () => {
         vm.computeGraphData(metrics, deployment_time);
-        const { hasMetrics, memoryMetrics, deploymentTime, memoryFrom, memoryTo } = vm;
+        const {
+          hasMetrics,
+          memoryMetrics,
+          deploymentTime,
+          memoryFrom,
+          memoryTo,
+        } = vm;
 
         expect(hasMetrics).toBeTruthy();
         expect(memoryMetrics.length > 0).toBeTruthy();
@@ -141,20 +146,26 @@ describe('MemoryUsage', () => {
     });
 
     describe('loadMetrics', () => {
-      const returnServicePromise = () => new Promise((resolve) => {
+      const returnServicePromise = () =>
+        new Promise(resolve => {
           resolve({
             data: metricsMockData,
           });
         });
 
-      it('should load metrics data using MRWidgetService', (done) => {
-        spyOn(MRWidgetService, 'fetchMetrics').and.returnValue(returnServicePromise(true));
+      it('should load metrics data using MRWidgetService', done => {
+        spyOn(MRWidgetService, 'fetchMetrics').and.returnValue(
+          returnServicePromise(true),
+        );
         spyOn(vm, 'computeGraphData');
 
         vm.loadMetrics();
         setTimeout(() => {
           expect(MRWidgetService.fetchMetrics).toHaveBeenCalledWith(url);
-          expect(vm.computeGraphData).toHaveBeenCalledWith(metrics, deployment_time);
+          expect(vm.computeGraphData).toHaveBeenCalledWith(
+            metrics,
+            deployment_time,
+          );
           done();
         }, 333);
       });
@@ -167,51 +178,67 @@ describe('MemoryUsage', () => {
       expect(el.querySelector('.js-usage-info')).toBeDefined();
     });
 
-    it('should show loading metrics message while metrics are being loaded', (done) => {
+    it('should show loading metrics message while metrics are being loaded', done => {
       vm.loadingMetrics = true;
       vm.hasMetrics = false;
       vm.loadFailed = false;
 
       Vue.nextTick(() => {
-        expect(el.querySelector('.js-usage-info.usage-info-loading')).toBeDefined();
-        expect(el.querySelector('.js-usage-info .usage-info-load-spinner')).toBeDefined();
-        expect(el.querySelector('.js-usage-info').innerText).toContain(messages.loadingMetrics);
+        expect(
+          el.querySelector('.js-usage-info.usage-info-loading'),
+        ).toBeDefined();
+        expect(
+          el.querySelector('.js-usage-info .usage-info-load-spinner'),
+        ).toBeDefined();
+        expect(el.querySelector('.js-usage-info').innerText).toContain(
+          messages.loadingMetrics,
+        );
         done();
       });
     });
 
-    it('should show deployment memory usage when metrics are loaded', (done) => {
+    it('should show deployment memory usage when metrics are loaded', done => {
       vm.loadingMetrics = false;
       vm.hasMetrics = true;
       vm.loadFailed = false;
 
       Vue.nextTick(() => {
         expect(el.querySelector('.memory-graph-container')).toBeDefined();
-        expect(el.querySelector('.js-usage-info').innerText).toContain(messages.hasMetrics);
+        expect(el.querySelector('.js-usage-info').innerText).toContain(
+          messages.hasMetrics,
+        );
         done();
       });
     });
 
-    it('should show failure message when metrics loading failed', (done) => {
+    it('should show failure message when metrics loading failed', done => {
       vm.loadingMetrics = false;
       vm.hasMetrics = false;
       vm.loadFailed = true;
 
       Vue.nextTick(() => {
-        expect(el.querySelector('.js-usage-info.usage-info-failed')).toBeDefined();
-        expect(el.querySelector('.js-usage-info').innerText).toContain(messages.loadFailed);
+        expect(
+          el.querySelector('.js-usage-info.usage-info-failed'),
+        ).toBeDefined();
+        expect(el.querySelector('.js-usage-info').innerText).toContain(
+          messages.loadFailed,
+        );
         done();
       });
     });
 
-    it('should show metrics unavailable message when metrics loading failed', (done) => {
+    it('should show metrics unavailable message when metrics loading failed', done => {
       vm.loadingMetrics = false;
       vm.hasMetrics = false;
       vm.loadFailed = false;
 
       Vue.nextTick(() => {
-        expect(el.querySelector('.js-usage-info.usage-info-unavailable')).toBeDefined();
-        expect(el.querySelector('.js-usage-info').innerText).toContain(messages.metricsUnavailable);
+        expect(
+          el.querySelector('.js-usage-info.usage-info-unavailable'),
+        ).toBeDefined();
+        expect(el.querySelector('.js-usage-info').innerText).toContain(
+          messages.metricsUnavailable,
+        );
         done();
       });
     });