4 files changed, 61 insertions, 35 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
deleted file mode 100644
index 4c44aac4e2a..00000000000
--- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-
-export default {
-  components: {
-    GlIcon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    count: {
-      type: Number,
-      required: true,
-    },
-  },
-};
-</script>
-<template>
-  <span v-if="count === 50" class="events-info float-right">
-    <gl-icon
-      v-gl-tooltip="{
-        title: n__(
-          'Limited to showing %d event at most',
-          'Limited to showing %d events at most',
-          50,
-        ),
-      }"
-      name="warning"
-    />
-    {{ n__('Showing %d event', 'Showing %d events', 50) }}
-  </span>
-</template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_table.vue b/app/assets/javascripts/cycle_analytics/components/stage_table.vue
index ea5a1291a17..6a45969fd1a 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_table.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_table.vue
@@ -18,7 +18,7 @@ import {
   PAGINATION_SORT_DIRECTION_ASC,
   PAGINATION_SORT_DIRECTION_DESC,
 } from '../constants';
-import TotalTime from './total_time_component.vue';
+import TotalTime from './total_time.vue';
 
 const DEFAULT_WORKFLOW_TITLE_PROPERTIES = {
   thClass: 'gl-w-half',
diff --git a/app/assets/javascripts/cycle_analytics/components/total_time_component.vue b/app/assets/javascripts/cycle_analytics/components/total_time.vue
index a5a90a56974..a5a90a56974 100644
--- a/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/total_time.vue
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"