Commit cd0d2a56 authored by Brandon Labuschagne's avatar Brandon Labuschagne

Merge branch '226987-add-percentage-change-to-performance-mr-widgets' into 'master'

Add percentage change to performance widgets

See merge request gitlab-org/gitlab!68390
parents 38734960 7026db3a
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
* Renders Perfomance issue body text * Renders Perfomance issue body text
* [name] :[score] [symbol] [delta] in [link] * [name] :[score] [symbol] [delta] in [link]
*/ */
import { formattedChangeInPercent } from '~/lib/utils/number_utils';
import ReportLink from '~/reports/components/report_link.vue'; import ReportLink from '~/reports/components/report_link.vue';
function formatScore(value) { function formatScore(value) {
...@@ -34,10 +35,16 @@ export default { ...@@ -34,10 +35,16 @@ export default {
if (!this.issue.delta) { if (!this.issue.delta) {
return false; return false;
} }
if (this.issue.delta >= 0) { return this.issue.delta >= 0
return `+${formatScore(this.issue.delta)}`; ? `+${formatScore(this.issue.delta)}`
: formatScore(this.issue.delta);
},
issueDeltaPercentage() {
if (!this.issue.delta || !this.issue.score || !Number(this.issue.score)) {
return false;
} }
return formatScore(this.issue.delta); const oldScore = parseFloat(this.issue.score) - this.issue.delta;
return formattedChangeInPercent(oldScore, this.issue.score);
}, },
}, },
}; };
...@@ -52,6 +59,7 @@ export default { ...@@ -52,6 +59,7 @@ export default {
{{ issue.name }} {{ issue.name }}
</template> </template>
<template v-if="issueDelta"> ({{ issueDelta }}) </template> <template v-if="issueDelta"> ({{ issueDelta }}) </template>
<template v-if="issueDeltaPercentage"> ({{ issueDeltaPercentage }}) </template>
</div> </div>
<report-link v-if="issue.path" :issue="issue" /> <report-link v-if="issue.path" :issue="issue" />
......
...@@ -4,17 +4,25 @@ import component from 'ee/vue_merge_request_widget/components/performance_issue_ ...@@ -4,17 +4,25 @@ import component from 'ee/vue_merge_request_widget/components/performance_issue_
describe('performance issue body', () => { describe('performance issue body', () => {
let wrapper; let wrapper;
const performanceIssue = { describe.each`
delta: 0.1999999999998181, name | score | delta | expectedScore | expectedDelta | expectedPercentage
name: 'Transfer Size (KB)', ${'Transfer Size (KB)'} | ${'4974.8'} | ${0.1999999999998181} | ${'4974.80'} | ${'(+0.19)'} | ${'(+0%)'}
path: '/', ${'Speed Index'} | ${1474} | ${727} | ${'1474'} | ${'(+727)'} | ${'(+97%)'}
score: 4974.8, ${'Checks'} | ${'97.73%'} | ${-2.27} | ${'97.73%'} | ${'(-2.27)'} | ${null}
}; ${'RPS'} | ${22.699900441941768} | ${-1} | ${'22.69'} | ${'(-1)'} | ${'(-4%)'}
${'TTFB P95'} | ${205.02902265} | ${0} | ${'205.02'} | ${null} | ${null}
`(
'with an example $name performance metric',
({ name, score, delta, expectedScore, expectedDelta, expectedPercentage }) => {
beforeEach(() => { beforeEach(() => {
wrapper = shallowMount(component, { wrapper = shallowMount(component, {
propsData: { propsData: {
issue: performanceIssue, issue: {
path: '/',
name,
score,
delta,
},
}, },
}); });
}); });
...@@ -25,14 +33,33 @@ describe('performance issue body', () => { ...@@ -25,14 +33,33 @@ describe('performance issue body', () => {
}); });
it('renders issue name', () => { it('renders issue name', () => {
expect(wrapper.text()).toContain(performanceIssue.name); expect(wrapper.text()).toContain(name);
}); });
it('renders issue score formatted', () => { it('renders issue score formatted', () => {
expect(wrapper.text()).toContain('4974.80'); expect(wrapper.text()).toContain(expectedScore);
}); });
if (delta) {
it('renders issue delta formatted', () => { it('renders issue delta formatted', () => {
expect(wrapper.text()).toContain('(+0.19)'); expect(wrapper.text()).toContain(expectedDelta);
});
} else {
it('does not render issue delta formatted', () => {
expect(wrapper.text()).not.toContain('(+');
expect(wrapper.text()).not.toContain('(-');
}); });
}
if (expectedPercentage) {
it('renders issue delta as a percentage', () => {
expect(wrapper.text()).toContain(expectedPercentage);
});
} else {
it('does not render issue delta as a percentage', () => {
expect(wrapper.text()).not.toContain('%)');
});
}
},
);
}); });
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