diff options
Diffstat (limited to 'app/assets/javascripts/cycle_analytics/components/base.vue')
-rw-r--r-- | app/assets/javascripts/cycle_analytics/components/base.vue | 57 |
1 files changed, 22 insertions, 35 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/base.vue b/app/assets/javascripts/cycle_analytics/components/base.vue index c9ecac6829b..ae78ce33263 100644 --- a/app/assets/javascripts/cycle_analytics/components/base.vue +++ b/app/assets/javascripts/cycle_analytics/components/base.vue @@ -1,9 +1,10 @@ <script> -import { GlIcon, GlLoadingIcon, GlSprintf } from '@gitlab/ui'; +import { GlLoadingIcon } from '@gitlab/ui'; import Cookies from 'js-cookie'; import { mapActions, mapState, mapGetters } from 'vuex'; import PathNavigation from '~/cycle_analytics/components/path_navigation.vue'; import StageTable from '~/cycle_analytics/components/stage_table.vue'; +import ValueStreamFilters from '~/cycle_analytics/components/value_stream_filters.vue'; import ValueStreamMetrics from '~/cycle_analytics/components/value_stream_metrics.vue'; import { __ } from '~/locale'; import { SUMMARY_METRICS_REQUEST, METRICS_REQUESTS } from '../constants'; @@ -13,11 +14,10 @@ const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed'; export default { name: 'CycleAnalytics', components: { - GlIcon, GlLoadingIcon, - GlSprintf, PathNavigation, StageTable, + ValueStreamFilters, ValueStreamMetrics, }, props: { @@ -45,11 +45,12 @@ export default { 'selectedStageError', 'stages', 'summary', - 'daysInPast', 'permissions', 'stageCounts', 'endpoints', 'features', + 'createdBefore', + 'createdAfter', ]), ...mapGetters(['pathNavigationData', 'filterParams']), displayStageEvents() { @@ -98,14 +99,12 @@ export default { }, }, methods: { - ...mapActions([ - 'fetchCycleAnalyticsData', - 'fetchStageData', - 'setSelectedStage', - 'setDateRange', - ]), - handleDateSelect(daysInPast) { - this.setDateRange(daysInPast); + ...mapActions(['fetchStageData', 'setSelectedStage', 'setDateRange']), + onSetDateRange({ startDate, endDate }) { + this.setDateRange({ + createdAfter: new Date(startDate), + createdBefore: new Date(endDate), + }); }, onSelectStage(stage) { this.setSelectedStage(stage); @@ -133,35 +132,22 @@ export default { <div class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row"> <path-navigation v-if="displayPathNavigation" - class="js-path-navigation gl-w-full gl-pb-2" + data-testid="vsa-path-navigation" + class="gl-w-full gl-pb-2" :loading="isLoading || isLoadingStage" :stages="pathNavigationData" :selected-stage="selectedStage" @selected="onSelectStage" /> - <div class="gl-flex-grow gl-align-self-end"> - <div class="js-ca-dropdown dropdown inline"> - <!-- eslint-disable-next-line @gitlab/vue-no-data-toggle --> - <button class="dropdown-menu-toggle" data-toggle="dropdown" type="button"> - <span class="dropdown-label"> - <gl-sprintf :message="$options.i18n.dropdownText"> - <template #days>{{ daysInPast }}</template> - </gl-sprintf> - <gl-icon name="chevron-down" class="dropdown-menu-toggle-icon gl-top-3" /> - </span> - </button> - <ul class="dropdown-menu dropdown-menu-right"> - <li v-for="days in $options.dayRangeOptions" :key="`day-range-${days}`"> - <a href="#" @click.prevent="handleDateSelect(days)"> - <gl-sprintf :message="$options.i18n.dropdownText"> - <template #days>{{ days }}</template> - </gl-sprintf> - </a> - </li> - </ul> - </div> - </div> </div> + <value-stream-filters + :group-id="endpoints.groupId" + :group-path="endpoints.groupPath" + :has-project-filter="false" + :start-date="createdAfter" + :end-date="createdBefore" + @setDateRange="onSetDateRange" + /> <value-stream-metrics :request-path="endpoints.fullPath" :request-params="filterParams" @@ -178,6 +164,7 @@ export default { :empty-state-message="emptyStageText" :no-data-svg-path="noDataSvgPath" :pagination="null" + :sortable="false" /> </div> </template> |