Commit a9610ba3 authored by Brandon Labuschagne's avatar Brandon Labuschagne Committed by Phil Hughes

Add MR Analytics datepicker

Add a date range picker to the MR Analytics page.
Change the date range util to include start and end dates.
parent c4372c85
<script>
import { getDateInPast } from '~/lib/utils/datetime_utility';
import DateRange from '../../shared/components/daterange.vue';
import { DEFAULT_NUMBER_OF_DAYS } from '../constants';
import FilterBar from './filter_bar.vue';
import ThroughputChart from './throughput_chart.vue';
......@@ -8,6 +9,7 @@ import ThroughputTable from './throughput_table.vue';
export default {
name: 'MergeRequestAnalyticsApp',
components: {
DateRange,
FilterBar,
ThroughputChart,
ThroughputTable,
......@@ -18,12 +20,28 @@ export default {
endDate: new Date(),
};
},
methods: {
setDateRange({ startDate, endDate }) {
this.startDate = startDate;
this.endDate = endDate;
},
},
};
</script>
<template>
<div class="merge-request-analytics-wrapper">
<h3 data-testid="pageTitle" class="gl-mb-5">{{ __('Merge Request Analytics') }}</h3>
<filter-bar />
<div
class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-justify-content-space-between gl-bg-gray-10 gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-py-3"
>
<filter-bar class="gl-flex-grow-1 gl-lg-ml-3" />
<date-range
:start-date="startDate"
:end-date="endDate"
class="gl-lg-mx-3"
@change="setDateRange"
/>
</div>
<throughput-chart :start-date="startDate" :end-date="endDate" />
<throughput-table :start-date="startDate" :end-date="endDate" class="gl-mt-6" />
</div>
......
......@@ -41,5 +41,10 @@ export const computeMonthRangeData = (startDate, endDate, format = dateFormats.i
});
}
if (monthData.length) {
monthData[0].mergedAfter = dateFormat(startDate, format); // Set first item to startDate
monthData[monthData.length - 1].mergedBefore = dateFormat(endDate, format); // Set last item to endDate
}
return monthData;
};
import { shallowMount } from '@vue/test-utils';
import MergeRequestAnalyticsApp from 'ee/analytics/merge_request_analytics/components/app.vue';
import DateRange from 'ee/analytics/shared/components/daterange.vue';
import FilterBar from 'ee/analytics/merge_request_analytics/components/filter_bar.vue';
import ThroughputChart from 'ee/analytics/merge_request_analytics/components/throughput_chart.vue';
import ThroughputTable from 'ee/analytics/merge_request_analytics/components/throughput_table.vue';
......@@ -30,6 +31,10 @@ describe('MergeRequestAnalyticsApp', () => {
expect(wrapper.find(FilterBar).exists()).toBe(true);
});
it('displays the date range component', () => {
expect(wrapper.find(DateRange).exists()).toBe(true);
});
it('displays the throughput chart component', () => {
expect(wrapper.find(ThroughputChart).exists()).toBe(true);
});
......
......@@ -14,7 +14,7 @@ export const expectedMonthData = [
{
year: 2020,
month: 'May',
mergedAfter: '2020-05-01',
mergedAfter: '2020-05-17',
mergedBefore: '2020-06-01',
},
{
......@@ -27,19 +27,19 @@ export const expectedMonthData = [
year: 2020,
month: 'Jul',
mergedAfter: '2020-07-01',
mergedBefore: '2020-08-01',
mergedBefore: '2020-07-17',
},
];
export const throughputChartQuery = `query ($fullPath: ID!, $labels: [String!], $authorUsername: String, $assigneeUsername: String, $milestoneTitle: String, $sourceBranches: [String!], $targetBranches: [String!]) {
throughputChartData: project(fullPath: $fullPath) {
May_2020: mergeRequests(first: 0, mergedBefore: "2020-06-01", mergedAfter: "2020-05-01", labels: $labels, authorUsername: $authorUsername, assigneeUsername: $assigneeUsername, milestoneTitle: $milestoneTitle, sourceBranches: $sourceBranches, targetBranches: $targetBranches) {
May_2020: mergeRequests(first: 0, mergedBefore: "2020-06-01", mergedAfter: "2020-05-17", labels: $labels, authorUsername: $authorUsername, assigneeUsername: $assigneeUsername, milestoneTitle: $milestoneTitle, sourceBranches: $sourceBranches, targetBranches: $targetBranches) {
count
}
Jun_2020: mergeRequests(first: 0, mergedBefore: "2020-07-01", mergedAfter: "2020-06-01", labels: $labels, authorUsername: $authorUsername, assigneeUsername: $assigneeUsername, milestoneTitle: $milestoneTitle, sourceBranches: $sourceBranches, targetBranches: $targetBranches) {
count
}
Jul_2020: mergeRequests(first: 0, mergedBefore: "2020-08-01", mergedAfter: "2020-07-01", labels: $labels, authorUsername: $authorUsername, assigneeUsername: $assigneeUsername, milestoneTitle: $milestoneTitle, sourceBranches: $sourceBranches, targetBranches: $targetBranches) {
Jul_2020: mergeRequests(first: 0, mergedBefore: "2020-07-17", mergedAfter: "2020-07-01", labels: $labels, authorUsername: $authorUsername, assigneeUsername: $assigneeUsername, milestoneTitle: $milestoneTitle, sourceBranches: $sourceBranches, targetBranches: $targetBranches) {
count
}
}
......
......@@ -3,22 +3,16 @@ import { expectedMonthData } from './mock_data';
describe('computeMonthRangeData', () => {
const start = new Date('2020-05-17T00:00:00.000Z');
const end = new Date('2020-07-17T00:00:00.000Z');
it.each`
startDate | endDate
${start} | ${new Date('2020-07-17T00:00:00.000Z')}
${start} | ${new Date('2020-07-31T00:00:00.000Z')}
`('returns the data as expected', ({ startDate, endDate }) => {
const monthData = utils.computeMonthRangeData(startDate, endDate);
it('returns the data es acpected', () => {
const monthData = utils.computeMonthRangeData(start, end);
expect(monthData).toStrictEqual(expectedMonthData);
});
it('returns an empty array on an invalid date range', () => {
const startDate = new Date('2021-05-17T00:00:00.000Z');
const endDate = new Date('2020-07-17T00:00:00.000Z');
const monthData = utils.computeMonthRangeData(startDate, endDate);
const monthData = utils.computeMonthRangeData(end, start);
expect(monthData).toStrictEqual([]);
});
......
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