Commit 9af61b3f authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch...

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
parents a6507eed 3cda5c6a
<script> <script>
import { sprintf, s__ } from '~/locale';
import statusCodes from '../../lib/utils/http_status'; import statusCodes from '../../lib/utils/http_status';
import { bytesToMiB } from '../../lib/utils/number_utils'; import { bytesToMiB } from '../../lib/utils/number_utils';
import { backOff } from '../../lib/utils/common_utils'; import { backOff } from '../../lib/utils/common_utils';
...@@ -45,17 +46,28 @@ export default { ...@@ -45,17 +46,28 @@ export default {
shouldShowMetricsUnavailable() { shouldShowMetricsUnavailable() {
return !this.loadingMetrics && !this.hasMetrics && !this.loadFailed; 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 memoryTo = Number(this.memoryTo);
const memoryFrom = Number(this.memoryFrom); const memoryFrom = Number(this.memoryFrom);
let memoryUsageMsg = '';
if (memoryTo > memoryFrom) { 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) { } 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() { mounted() {
...@@ -130,24 +142,22 @@ export default { ...@@ -130,24 +142,22 @@ export default {
<i <i
class="fa fa-spinner fa-spin usage-info-load-spinner" class="fa fa-spinner fa-spin usage-info-load-spinner"
aria-hidden="true"> aria-hidden="true">
</i>Loading deployment statistics </i>{{ s__('mrWidget|Loading deployment statistics') }}
</p> </p>
<p <p
v-if="shouldShowMemoryGraph" v-if="shouldShowMemoryGraph"
class="usage-info js-usage-info"> class="usage-info js-usage-info">
<a {{ memoryChangeMessage }}
:href="metricsMonitoringUrl"
>Memory</a> usage <b>{{ memoryChangeType }}</b> from {{ memoryFrom }}MB to {{ memoryTo }}MB
</p> </p>
<p <p
v-if="shouldShowLoadFailure" v-if="shouldShowLoadFailure"
class="usage-info js-usage-info usage-info-failed"> class="usage-info js-usage-info usage-info-failed">
Failed to load deployment statistics {{ s__('mrWidget|Failed to load deployment statistics') }}
</p> </p>
<p <p
v-if="shouldShowMetricsUnavailable" v-if="shouldShowMetricsUnavailable"
class="usage-info js-usage-info usage-info-unavailable"> class="usage-info js-usage-info usage-info-unavailable">
Deployment statistics are not available currently {{ s__('mrWidget|Deployment statistics are not available currently') }}
</p> </p>
<memory-graph <memory-graph
v-if="shouldShowMemoryGraph" v-if="shouldShowMemoryGraph"
......
---
title: Added i18n support for the prometheus memory widget
merge_request: 17753
author:
type: other
...@@ -23,9 +23,7 @@ const metricsMockData = { ...@@ -23,9 +23,7 @@ const metricsMockData = {
memory_values: [ memory_values: [
{ {
metric: {}, metric: {},
values: [ values: [[1493716685, '4.30859375']],
[1493716685, '4.30859375'],
],
}, },
], ],
}, },
...@@ -53,7 +51,8 @@ const createComponent = () => { ...@@ -53,7 +51,8 @@ const createComponent = () => {
const messages = { const messages = {
loadingMetrics: 'Loading deployment statistics', 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', loadFailed: 'Failed to load deployment statistics',
metricsUnavailable: 'Deployment statistics are not available currently', metricsUnavailable: 'Deployment statistics are not available currently',
}; };
...@@ -92,26 +91,26 @@ describe('MemoryUsage', () => { ...@@ -92,26 +91,26 @@ describe('MemoryUsage', () => {
}); });
describe('computed', () => { describe('computed', () => {
describe('memoryChangeType', () => { describe('memoryChangeMessage', () => {
it('should return "increased" if memoryFrom value is less than memoryTo value', () => { it('should contain "increased" if memoryFrom value is less than memoryTo value', () => {
vm.memoryFrom = 4.28; vm.memoryFrom = 4.28;
vm.memoryTo = 9.13; 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.memoryFrom = 9.13;
vm.memoryTo = 4.28; 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.memoryFrom = 1;
vm.memoryTo = 1; vm.memoryTo = 1;
expect(vm.memoryChangeType).toEqual('unchanged'); expect(vm.memoryChangeMessage.indexOf('unchanged')).not.toEqual('-1');
}); });
}); });
}); });
...@@ -130,7 +129,13 @@ describe('MemoryUsage', () => { ...@@ -130,7 +129,13 @@ describe('MemoryUsage', () => {
describe('computeGraphData', () => { describe('computeGraphData', () => {
it('should populate sparkline graph', () => { it('should populate sparkline graph', () => {
vm.computeGraphData(metrics, deployment_time); vm.computeGraphData(metrics, deployment_time);
const { hasMetrics, memoryMetrics, deploymentTime, memoryFrom, memoryTo } = vm; const {
hasMetrics,
memoryMetrics,
deploymentTime,
memoryFrom,
memoryTo,
} = vm;
expect(hasMetrics).toBeTruthy(); expect(hasMetrics).toBeTruthy();
expect(memoryMetrics.length > 0).toBeTruthy(); expect(memoryMetrics.length > 0).toBeTruthy();
...@@ -141,20 +146,26 @@ describe('MemoryUsage', () => { ...@@ -141,20 +146,26 @@ describe('MemoryUsage', () => {
}); });
describe('loadMetrics', () => { describe('loadMetrics', () => {
const returnServicePromise = () => new Promise((resolve) => { const returnServicePromise = () =>
resolve({ new Promise(resolve => {
data: metricsMockData, resolve({
data: metricsMockData,
});
}); });
});
it('should load metrics data using MRWidgetService', (done) => { it('should load metrics data using MRWidgetService', done => {
spyOn(MRWidgetService, 'fetchMetrics').and.returnValue(returnServicePromise(true)); spyOn(MRWidgetService, 'fetchMetrics').and.returnValue(
returnServicePromise(true),
);
spyOn(vm, 'computeGraphData'); spyOn(vm, 'computeGraphData');
vm.loadMetrics(); vm.loadMetrics();
setTimeout(() => { setTimeout(() => {
expect(MRWidgetService.fetchMetrics).toHaveBeenCalledWith(url); expect(MRWidgetService.fetchMetrics).toHaveBeenCalledWith(url);
expect(vm.computeGraphData).toHaveBeenCalledWith(metrics, deployment_time); expect(vm.computeGraphData).toHaveBeenCalledWith(
metrics,
deployment_time,
);
done(); done();
}, 333); }, 333);
}); });
...@@ -167,51 +178,67 @@ describe('MemoryUsage', () => { ...@@ -167,51 +178,67 @@ describe('MemoryUsage', () => {
expect(el.querySelector('.js-usage-info')).toBeDefined(); 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.loadingMetrics = true;
vm.hasMetrics = false; vm.hasMetrics = false;
vm.loadFailed = false; vm.loadFailed = false;
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.querySelector('.js-usage-info.usage-info-loading')).toBeDefined(); expect(
expect(el.querySelector('.js-usage-info .usage-info-load-spinner')).toBeDefined(); el.querySelector('.js-usage-info.usage-info-loading'),
expect(el.querySelector('.js-usage-info').innerText).toContain(messages.loadingMetrics); ).toBeDefined();
expect(
el.querySelector('.js-usage-info .usage-info-load-spinner'),
).toBeDefined();
expect(el.querySelector('.js-usage-info').innerText).toContain(
messages.loadingMetrics,
);
done(); 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.loadingMetrics = false;
vm.hasMetrics = true; vm.hasMetrics = true;
vm.loadFailed = false; vm.loadFailed = false;
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.querySelector('.memory-graph-container')).toBeDefined(); 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(); 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.loadingMetrics = false;
vm.hasMetrics = false; vm.hasMetrics = false;
vm.loadFailed = true; vm.loadFailed = true;
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.querySelector('.js-usage-info.usage-info-failed')).toBeDefined(); expect(
expect(el.querySelector('.js-usage-info').innerText).toContain(messages.loadFailed); el.querySelector('.js-usage-info.usage-info-failed'),
).toBeDefined();
expect(el.querySelector('.js-usage-info').innerText).toContain(
messages.loadFailed,
);
done(); 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.loadingMetrics = false;
vm.hasMetrics = false; vm.hasMetrics = false;
vm.loadFailed = false; vm.loadFailed = false;
Vue.nextTick(() => { Vue.nextTick(() => {
expect(el.querySelector('.js-usage-info.usage-info-unavailable')).toBeDefined(); expect(
expect(el.querySelector('.js-usage-info').innerText).toContain(messages.metricsUnavailable); el.querySelector('.js-usage-info.usage-info-unavailable'),
).toBeDefined();
expect(el.querySelector('.js-usage-info').innerText).toContain(
messages.metricsUnavailable,
);
done(); done();
}); });
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment