All files / ee/app/assets/javascripts/analytics/merge_request_analytics/components app.vue

50% Statements 2/4
100% Branches 0/0
50% Functions 1/2
50% Lines 2/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69                1x                                             7x                                                                          
<script>
import DateRange from '~/analytics/shared/components/daterange.vue';
import { dateFormats } from '~/analytics/shared/constants';
import dateFormat from '~/lib/dateformat';
import UrlSync from '~/vue_shared/components/url_sync.vue';
import { DEFAULT_NUMBER_OF_DAYS } from '../constants';
import FilterBar from './filter_bar.vue';
import ThroughputChart from './throughput_chart.vue';
import ThroughputTable from './throughput_table.vue';
 
export default {
  name: 'MergeRequestAnalyticsApp',
  components: {
    DateRange,
    FilterBar,
    ThroughputChart,
    ThroughputTable,
    UrlSync,
  },
  props: {
    startDate: {
      type: Date,
      required: true,
    },
    endDate: {
      type: Date,
      required: true,
    },
  },
  computed: {
    query() {
      return {
        start_date: dateFormat(this.startDate, dateFormats.isoDate),
        end_date: dateFormat(this.endDate, dateFormats.isoDate),
      };
    },
  },
  methods: {
    setDateRange({ startDate, endDate }) {
      // eslint-disable-next-line vue/no-mutating-props
      this.startDate = startDate;
      // eslint-disable-next-line vue/no-mutating-props
      this.endDate = endDate;
    },
  },
  dateRangeLimit: DEFAULT_NUMBER_OF_DAYS,
};
</script>
<template>
  <div class="merge-request-analytics-wrapper">
    <h3 data-testid="pageTitle" class="gl-mb-5">{{ __('Merge Request Analytics') }}</h3>
    <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 gl-mb-2 gl-lg-mb-0" />
      <date-range
        :start-date="startDate"
        :end-date="endDate"
        :max-date-range="$options.dateRangeLimit"
        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" />
    <url-sync :query="query" />
  </div>
</template>