Commit 4cbbef9e authored by Brandon Labuschagne's avatar Brandon Labuschagne Committed by Jose Ivan Vargas

Add Throughput chart skeleton

Introduce the skeleton code which is needed for the
throughput chart. This includes a basic error message
for when there is no data.
parent a22b50dc
<script>
import ThroughputChart from './throughput_chart.vue';
export default {
name: 'MergeRequestAnalyticsApp',
components: {
ThroughputChart,
},
};
</script>
<template>
<div>
<h3 data-testid="pageTitle">{{ __('Merge Request Analytics') }}</h3>
<h3 data-testid="pageTitle" class="gl-mb-5">{{ __('Merge Request Analytics') }}</h3>
<throughput-chart />
</div>
</template>
<script>
import { GlAreaChart } from '@gitlab/ui/dist/charts';
import { GlAlert } from '@gitlab/ui';
import { __ } from '~/locale';
export default {
name: 'ThroughputChart',
components: {
GlAreaChart,
GlAlert,
},
data() {
return {
throughputChartData: [],
};
},
computed: {
chartOptions() {
return {
xAxis: {
name: '',
},
yAxis: {
name: __('Merge Requests closed'),
},
};
},
chartDataAvailable() {
return this.throughputChartData.length;
},
},
chartTitle: __('Throughput'),
chartDescription: __('The number of merge requests merged to the master branch by month.'),
};
</script>
<template>
<div>
<h4 data-testid="chartTitle">{{ $options.chartTitle }}</h4>
<div class="gl-text-gray-700" data-testid="chartDescription">
{{ $options.chartDescription }}
</div>
<gl-area-chart v-if="chartDataAvailable" :data="throughputChartData" :option="chartOptions" />
<gl-alert v-else :dismissible="false" class="gl-mt-4">{{
__('There is no data available.')
}}</gl-alert>
</div>
</template>
import { shallowMount } from '@vue/test-utils';
import MergeRequestAnalyticsApp from 'ee/analytics/merge_request_analytics/components/app.vue';
import ThroughputChart from 'ee/analytics/merge_request_analytics/components/throughput_chart.vue';
describe('MergeRequestAnalyticsApp', () => {
let wrapper;
......@@ -20,6 +21,12 @@ describe('MergeRequestAnalyticsApp', () => {
it('displays the page title', () => {
const pageTitle = wrapper.find('[data-testid="pageTitle"').text();
expect(pageTitle).toEqual('Merge Request Analytics');
expect(pageTitle).toBe('Merge Request Analytics');
});
it('displays the throughput chart component', () => {
const throughputChartComponent = wrapper.find(ThroughputChart);
expect(throughputChartComponent.exists()).toBe(true);
});
});
import { shallowMount } from '@vue/test-utils';
import { GlAlert } from '@gitlab/ui';
import ThroughputChart from 'ee/analytics/merge_request_analytics/components/throughput_chart.vue';
describe('ThroughputChart', () => {
let wrapper;
const createComponent = () => {
wrapper = shallowMount(ThroughputChart);
};
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
it('displays the chart title', () => {
const chartTitle = wrapper.find('[data-testid="chartTitle"').text();
expect(chartTitle).toBe('Throughput');
});
it('displays the chart description', () => {
const chartDescription = wrapper.find('[data-testid="chartDescription"').text();
expect(chartDescription).toBe(
'The number of merge requests merged to the master branch by month.',
);
});
it('displays an empty state message when there is no data', () => {
const alert = wrapper.find(GlAlert);
expect(alert.exists()).toBe(true);
expect(alert.text()).toBe('There is no data available.');
});
});
......@@ -14696,6 +14696,9 @@ msgstr ""
msgid "Merge Requests"
msgstr ""
msgid "Merge Requests closed"
msgstr ""
msgid "Merge Requests created"
msgstr ""
......@@ -23840,6 +23843,9 @@ msgstr ""
msgid "The number of changes to be fetched from GitLab when cloning a repository. This can speed up Pipelines execution. Keep empty or set to 0 to disable shallow clone by default and make GitLab CI fetch all branches and tags each time."
msgstr ""
msgid "The number of merge requests merged to the master branch by month."
msgstr ""
msgid "The number of times an upload record could not find its file"
msgstr ""
......@@ -24071,6 +24077,9 @@ msgstr ""
msgid "There is already a repository with that name on disk"
msgstr ""
msgid "There is no data available."
msgstr ""
msgid "There is no data available. Please change your selection."
msgstr ""
......@@ -24809,6 +24818,9 @@ msgstr ""
msgid "ThreatMonitoring|While it's rare to have no traffic coming to your application, it can happen. In any event, we ask that you double check your settings to make sure you've set up the WAF correctly."
msgstr ""
msgid "Throughput"
msgstr ""
msgid "Thursday"
msgstr ""
......
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