summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFilipa Lacerda <filipa@gitlab.com>2018-03-23 18:48:31 +0000
committerFilipa Lacerda <filipa@gitlab.com>2018-03-23 18:48:31 +0000
commit9af61b3fe3192df0deaf05597643efb8d0630eba (patch)
treeb2f74832b3d448638c75679e104bb7ed1d7c16b4
parenta6507eed909093ed27b4f186f47311e610f08c06 (diff)
parent3cda5c6a7e47b270d07ef3556bdf017e7ec8494b (diff)
downloadgitlab-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
-rw-r--r--app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue30
-rw-r--r--changelogs/unreleased/44218-add-internationalization-support-for-the-prometheus-merge-request-widget.yml5
-rw-r--r--spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js89
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();
});
});