diff options
author | Jose Vargas <jvargas@gitlab.com> | 2019-05-30 13:47:32 -0500 |
---|---|---|
committer | Jose Vargas <jvargas@gitlab.com> | 2019-06-04 11:41:13 -0500 |
commit | e02cd451b2d6a81f4847f26b29ed1eb6c74f8dab (patch) | |
tree | 3fd534cce9c9028a87bcc134344f6ba80cccff17 | |
parent | 9274463812106e920459b774d3cf889e45905d8f (diff) | |
download | gitlab-ce-e02cd451b2d6a81f4847f26b29ed1eb6c74f8dab.tar.gz |
Add single_stat chart component to the monitoring bundlejivanvl-add-single-stat-chart-component
This merge requests just adds the component without integrating it
to the dashboard, it adds tests as well
-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'); + }); + }); + }); +}); |