diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2019-06-05 08:56:35 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2019-06-05 08:56:35 +0000 |
commit | 85d1444977cf6dcb14c49a6b3267ae335cac00cc (patch) | |
tree | 4d7dd3aeb492addb301d2e0e5e6165fb992a72d4 | |
parent | ac1662e67929d0b7543977a2fb303c1751d2290d (diff) | |
parent | e02cd451b2d6a81f4847f26b29ed1eb6c74f8dab (diff) | |
download | gitlab-ce-85d1444977cf6dcb14c49a6b3267ae335cac00cc.tar.gz |
Merge branch 'jivanvl-add-single-stat-chart-component' into 'master'
Add single_stat chart component to the monitoring bundle
See merge request gitlab-org/gitlab-ce!28948
-rw-r--r-- | app/assets/javascripts/monitoring/components/charts/single_stat.vue | 37 | ||||
-rw-r--r-- | spec/javascripts/monitoring/charts/single_stat_spec.js | 28 |
2 files changed, 65 insertions, 0 deletions
diff --git a/app/assets/javascripts/monitoring/components/charts/single_stat.vue b/app/assets/javascripts/monitoring/components/charts/single_stat.vue new file mode 100644 index 00000000000..b03a6ca1806 --- /dev/null +++ b/app/assets/javascripts/monitoring/components/charts/single_stat.vue @@ -0,0 +1,37 @@ +<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> diff --git a/spec/javascripts/monitoring/charts/single_stat_spec.js b/spec/javascripts/monitoring/charts/single_stat_spec.js new file mode 100644 index 00000000000..12b73002f97 --- /dev/null +++ b/spec/javascripts/monitoring/charts/single_stat_spec.js @@ -0,0 +1,28 @@ +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'); + }); + }); + }); +}); |