Commit e02cd451 authored by Jose Vargas's avatar Jose Vargas

Add single_stat chart component to the monitoring bundle

This merge requests just adds the component without integrating it
to the dashboard, it adds tests as well
parent 92744638
<script>
import { GlSingleStat } from '@gitlab/ui/dist/charts';
export default {
components: {
GlSingleStat,
},
inheritAttrs: false,
props: {
title: {
type: String,
required: true,
},
value: {
type: Number,
required: true,
},
unit: {
type: String,
required: true,
},
},
computed: {
valueWithUnit() {
return `${this.value}${this.unit}`;
},
},
};
</script>
<template>
<div class="prometheus-graph col-12 col-lg-6">
<div class="prometheus-graph-header">
<h5 ref="graphTitle" class="prometheus-graph-title">{{ title }}</h5>
</div>
<gl-single-stat :value="valueWithUnit" :title="title" variant="success" />
</div>
</template>
import { shallowMount } from '@vue/test-utils';
import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
describe('Single Stat Chart component', () => {
let singleStatChart;
beforeEach(() => {
singleStatChart = shallowMount(SingleStatChart, {
propsData: {
title: 'Time to render',
value: 1,
unit: 'sec',
},
});
});
afterEach(() => {
singleStatChart.destroy();
});
describe('computed', () => {
describe('valueWithUnit', () => {
it('should interpolate the value and unit props', () => {
expect(singleStatChart.vm.valueWithUnit).toBe('1sec');
});
});
});
});
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