1 files changed, 60 insertions, 1 deletions

diff --git a/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue b/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue
index 64461797c46..66bccf19496 100644
--- a/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue
+++ b/app/assets/javascripts/cycle_analytics/components/value_stream_filters.vue
@@ -1,16 +1,28 @@
 <script>
+import { GlIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import DateRange from '~/analytics/shared/components/daterange.vue';
 import ProjectsDropdownFilter from '~/analytics/shared/components/projects_dropdown_filter.vue';
 import { DATE_RANGE_LIMIT, PROJECTS_PER_PAGE } from '~/analytics/shared/constants';
 import FilterBar from './filter_bar.vue';
 
+export const AGGREGATION_TOGGLE_LABEL = s__('CycleAnalytics|Filter by stop date');
+export const AGGREGATION_DESCRIPTION = s__(
+  'CycleAnalytics|When enabled, the results show items with a stop event within the date range. When disabled, the results show items with a start event within the date range.',
+);
+
 export default {
   name: 'ValueStreamFilters',
   components: {
+    GlIcon,
+    GlToggle,
     DateRange,
     ProjectsDropdownFilter,
     FilterBar,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     selectedProjects: {
       type: Array,
@@ -45,6 +57,21 @@ export default {
       required: false,
       default: null,
     },
+    canToggleAggregation: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isAggregationEnabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isUpdatingAggregationData: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     projectsQueryParams() {
@@ -54,8 +81,19 @@ export default {
       };
     },
   },
+  methods: {
+    onUpdateAggregation(ev) {
+      if (!this.isUpdatingAggregationData) {
+        this.$emit('toggleAggregation', ev);
+      }
+    },
+  },
   multiProjectSelect: true,
   maxDateRange: DATE_RANGE_LIMIT,
+  i18n: {
+    AGGREGATION_TOGGLE_LABEL,
+    AGGREGATION_DESCRIPTION,
+  },
 };
 </script>
 <template>
@@ -84,7 +122,28 @@ export default {
           @selected="$emit('selectProject', $event)"
         />
       </div>
-      <div>
+      <div class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row">
+        <div
+          v-if="canToggleAggregation"
+          class="gl-display-flex gl-text-align-center gl-my-2 gl-lg-mt-0 gl-lg-mb-0 gl-mr-5"
+        >
+          <gl-toggle
+            class="gl-flex-direction-row"
+            :value="isAggregationEnabled"
+            :label="$options.i18n.AGGREGATION_TOGGLE_LABEL"
+            :disabled="isUpdatingAggregationData"
+            label-position="left"
+            @change="onUpdateAggregation"
+          >
+            <template #label>
+              {{ $options.i18n.AGGREGATION_TOGGLE_LABEL }}&nbsp;<gl-icon
+                v-gl-tooltip.hover
+                :title="$options.i18n.AGGREGATION_DESCRIPTION"
+                name="information-o"
+              />
+            </template>
+          </gl-toggle>
+        </div>
         <date-range
           v-if="hasDateRangeFilter"
           :start-date="startDate"