diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-03-23 18:48:31 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-03-23 18:48:31 +0000 |
commit | 9af61b3fe3192df0deaf05597643efb8d0630eba (patch) | |
tree | b2f74832b3d448638c75679e104bb7ed1d7c16b4 | |
parent | a6507eed909093ed27b4f186f47311e610f08c06 (diff) | |
parent | 3cda5c6a7e47b270d07ef3556bdf017e7ec8494b (diff) | |
download | gitlab-ce-9af61b3fe3192df0deaf05597643efb8d0630eba.tar.gz |
Merge branch '44218-add-internationalization-support-for-the-prometheus-merge-request-widget' into 'master'
Resolve "Add internationalization support for the Prometheus Merge Request widget"
Closes #44218
See merge request gitlab-org/gitlab-ce!17753
3 files changed, 83 insertions, 41 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue index a16f9055a6d..95c8b0a4c55 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue @@ -1,4 +1,5 @@ <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" diff --git a/changelogs/unreleased/44218-add-internationalization-support-for-the-prometheus-merge-request-widget.yml b/changelogs/unreleased/44218-add-internationalization-support-for-the-prometheus-merge-request-widget.yml new file mode 100644 index 00000000000..12c73281998 --- /dev/null +++ b/changelogs/unreleased/44218-add-internationalization-support-for-the-prometheus-merge-request-widget.yml @@ -0,0 +1,5 @@ +--- +title: Added i18n support for the prometheus memory widget +merge_request: 17753 +author: +type: other 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 31710551399..d9c03296857 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 @@ -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) => { - resolve({ - data: metricsMockData, + 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(); }); }); |