1 files changed, 28 insertions, 8 deletions

diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index b56e08175cc..b3ae47af750 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -1,7 +1,10 @@
 import $ from 'jquery';
 import Vue from 'vue';
 import Cookies from 'js-cookie';
+import { GlEmptyState } from '@gitlab/ui';
+import filterMixins from 'ee_else_ce/analytics/cycle_analytics/mixins/filter_mixins';
 import Flash from '../flash';
+import { __ } from '~/locale';
 import Translate from '../vue_shared/translate';
 import banner from './components/banner.vue';
 import stageCodeComponent from './components/stage_code_component.vue';
@@ -9,20 +12,22 @@ import stageComponent from './components/stage_component.vue';
 import stageReviewComponent from './components/stage_review_component.vue';
 import stageStagingComponent from './components/stage_staging_component.vue';
 import stageTestComponent from './components/stage_test_component.vue';
+import stageNavItem from './components/stage_nav_item.vue';
 import CycleAnalyticsService from './cycle_analytics_service';
 import CycleAnalyticsStore from './cycle_analytics_store';
-import { __ } from '~/locale';
 
 Vue.use(Translate);
 
 export default () => {
   const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
+  const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
 
   // eslint-disable-next-line no-new
   new Vue({
     el: '#cycle-analytics',
     name: 'CycleAnalytics',
     components: {
+      GlEmptyState,
       banner,
       'stage-issue-component': stageComponent,
       'stage-plan-component': stageComponent,
@@ -31,13 +36,16 @@ export default () => {
       'stage-review-component': stageReviewComponent,
       'stage-staging-component': stageStagingComponent,
       'stage-production-component': stageComponent,
+      GroupsDropdownFilter: () =>
+        import('ee_component/analytics/shared/components/groups_dropdown_filter.vue'),
+      ProjectsDropdownFilter: () =>
+        import('ee_component/analytics/shared/components/projects_dropdown_filter.vue'),
+      DateRangeDropdown: () =>
+        import('ee_component/analytics/shared/components/date_range_dropdown.vue'),
+      'stage-nav-item': stageNavItem,
     },
+    mixins: [filterMixins],
     data() {
-      const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
-      const cycleAnalyticsService = new CycleAnalyticsService({
-        requestPath: cycleAnalyticsEl.dataset.requestPath,
-      });
-
       return {
         store: CycleAnalyticsStore,
         state: CycleAnalyticsStore.state,
@@ -47,7 +55,7 @@ export default () => {
         hasError: false,
         startDate: 30,
         isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
-        service: cycleAnalyticsService,
+        service: this.createCycleAnalyticsService(cycleAnalyticsEl.dataset.requestPath),
       };
     },
     computed: {
@@ -56,7 +64,13 @@ export default () => {
       },
     },
     created() {
-      this.fetchCycleAnalyticsData();
+      // Conditional check placed here to prevent this method from being called on the
+      // new Cycle Analytics page (i.e. the new page will be initialized blank and only
+      // after a group is selected the cycle analyitcs data will be fetched). Once the
+      // old (current) page has been removed this entire created method as well as the
+      // variable itself can be completely removed.
+      // Follow up issue: https://gitlab.com/gitlab-org/gitlab-ce/issues/64490
+      if (cycleAnalyticsEl.dataset.requestPath) this.fetchCycleAnalyticsData();
     },
     methods: {
       handleError() {
@@ -118,6 +132,7 @@ export default () => {
           .fetchStageData({
             stage,
             startDate: this.startDate,
+            projectIds: this.selectedProjectIds,
           })
           .then(response => {
             this.isEmptyStage = !response.events.length;
@@ -133,6 +148,11 @@ export default () => {
         this.isOverviewDialogDismissed = true;
         Cookies.set(OVERVIEW_DIALOG_COOKIE, '1', { expires: 365 });
       },
+      createCycleAnalyticsService(requestPath) {
+        return new CycleAnalyticsService({
+          requestPath,
+        });
+      },
     },
   });
 };