Commit c0e5e97d authored by Fatih Acet's avatar Fatih Acet

Merge branch 'jivanvl-add-percentile-support-single-stat-charts' into 'master'

Add percentile value support to single stat panel types

See merge request gitlab-org/gitlab!24813
parents 19eb43de dcd0169f
......@@ -19,8 +19,21 @@ export default {
queryInfo() {
return this.graphData.metrics[0];
},
engineeringNotation() {
return `${roundOffFloat(this.queryInfo.result[0].value[1], 1)}${this.queryInfo.unit}`;
queryResult() {
return this.queryInfo.result[0]?.value[1];
},
/**
* This method formats the query result from a promQL expression
* allowing a user to format the data in percentile values
* by using the `max_value` inner property from the graphData prop
* @returns {(String)}
*/
statValue() {
const chartValue = this.graphData?.max_value
? (this.queryResult / Number(this.graphData.max_value)) * 100
: this.queryResult;
return `${roundOffFloat(chartValue, 1)}${this.queryInfo.unit}`;
},
graphTitle() {
return this.queryInfo.label;
......@@ -33,6 +46,6 @@ export default {
<div class="prometheus-graph-header">
<h5 ref="graphTitle" class="prometheus-graph-title">{{ graphTitle }}</h5>
</div>
<gl-single-stat :value="engineeringNotation" :title="graphTitle" variant="success" />
<gl-single-stat :value="statValue" :title="graphTitle" variant="success" />
</div>
</template>
---
title: Add percentile value support to single stat panel types
merge_request: 24813
author:
type: changed
......@@ -18,9 +18,53 @@ describe('Single Stat Chart component', () => {
});
describe('computed', () => {
describe('engineeringNotation', () => {
describe('statValue', () => {
it('should interpolate the value and unit props', () => {
expect(singleStatChart.vm.engineeringNotation).toBe('91MB');
expect(singleStatChart.vm.statValue).toBe('91MB');
});
it('should change the value representation to a percentile one', () => {
singleStatChart.setProps({
graphData: {
...graphDataPrometheusQuery,
max_value: 120,
},
});
expect(singleStatChart.vm.statValue).toContain('75.8');
});
it('should display NaN for non numeric max_value values', () => {
singleStatChart.setProps({
graphData: {
...graphDataPrometheusQuery,
max_value: 'not a number',
},
});
expect(singleStatChart.vm.statValue).toContain('NaN');
});
it('should display NaN for missing query values', () => {
singleStatChart.setProps({
graphData: {
...graphDataPrometheusQuery,
metrics: [
{
...graphDataPrometheusQuery.metrics[0],
result: [
{
...graphDataPrometheusQuery.metrics[0].result[0],
value: [''],
},
],
},
],
max_value: 120,
},
});
expect(singleStatChart.vm.statValue).toContain('NaN');
});
});
});
......
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