Add latest changes from gitlab-org/gitlab@master

3 files changed, 312 insertions, 1 deletions

diff --git a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
index 34784a88ba9..3eaf06e0656 100644
--- a/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
+++ b/spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
@@ -30,10 +30,16 @@ import * as Api from '~/pipelines/components/graph_shared/api';
 import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue';
 import * as parsingUtils from '~/pipelines/components/parsing_utils';
 import getPipelineHeaderData from '~/pipelines/graphql/queries/get_pipeline_header_data.query.graphql';
+import getPerformanceInsights from '~/pipelines/graphql/queries/get_performance_insights.query.graphql';
 import * as sentryUtils from '~/pipelines/utils';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { mockRunningPipelineHeaderData } from '../mock_data';
-import { mapCallouts, mockCalloutsResponse, mockPipelineResponse } from './mock_data';
+import {
+  mapCallouts,
+  mockCalloutsResponse,
+  mockPipelineResponse,
+  mockPerformanceInsightsResponse,
+} from './mock_data';
 
 const defaultProvide = {
   graphqlResourceEtag: 'frog/amphibirama/etag/',
@@ -89,11 +95,15 @@ describe('Pipeline graph wrapper', () => {
     const callouts = mapCallouts(calloutsList);
     const getUserCalloutsHandler = jest.fn().mockResolvedValue(mockCalloutsResponse(callouts));
     const getPipelineHeaderDataHandler = jest.fn().mockResolvedValue(mockRunningPipelineHeaderData);
+    const getPerformanceInsightsHandler = jest
+      .fn()
+      .mockResolvedValue(mockPerformanceInsightsResponse);
 
     const requestHandlers = [
       [getPipelineHeaderData, getPipelineHeaderDataHandler],
       [getPipelineDetails, getPipelineDetailsHandler],
       [getUserCallouts, getUserCalloutsHandler],
+      [getPerformanceInsights, getPerformanceInsightsHandler],
     ];
 
     const apolloProvider = createMockApollo(requestHandlers);
diff --git a/spec/frontend/pipelines/graph/graph_view_selector_spec.js b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
index 4e79c7e73cc..1397500bdc7 100644
--- a/spec/frontend/pipelines/graph/graph_view_selector_spec.js
+++ b/spec/frontend/pipelines/graph/graph_view_selector_spec.js
@@ -1,10 +1,19 @@
 import { GlAlert, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import { LAYER_VIEW, STAGE_VIEW } from '~/pipelines/components/graph/constants';
 import GraphViewSelector from '~/pipelines/components/graph/graph_view_selector.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import getPerformanceInsights from '~/pipelines/graphql/queries/get_performance_insights.query.graphql';
+import { mockPerformanceInsightsResponse } from './mock_data';
+
+Vue.use(VueApollo);
 
 describe('the graph view selector component', () => {
   let wrapper;
+  let trackingSpy;
 
   const findDependenciesToggle = () => wrapper.find('[data-testid="show-links-toggle"]');
   const findViewTypeSelector = () => wrapper.findComponent(GlButtonGroup);
@@ -13,11 +22,13 @@ describe('the graph view selector component', () => {
   const findSwitcherLoader = () => wrapper.find('[data-testid="switcher-loading-state"]');
   const findToggleLoader = () => findDependenciesToggle().find(GlLoadingIcon);
   const findHoverTip = () => wrapper.findComponent(GlAlert);
+  const findPipelineInsightsBtn = () => wrapper.find('[data-testid="pipeline-insights-btn"]');
 
   const defaultProps = {
     showLinks: false,
     tipPreviouslyDismissed: false,
     type: STAGE_VIEW,
+    isPipelineComplete: true,
   };
 
   const defaultData = {
@@ -27,6 +38,14 @@ describe('the graph view selector component', () => {
     showLinksActive: false,
   };
 
+  const getPerformanceInsightsHandler = jest
+    .fn()
+    .mockResolvedValue(mockPerformanceInsightsResponse);
+
+  const requestHandlers = [[getPerformanceInsights, getPerformanceInsightsHandler]];
+
+  const apolloProvider = createMockApollo(requestHandlers);
+
   const createComponent = ({ data = {}, mountFn = shallowMount, props = {} } = {}) => {
     wrapper = mountFn(GraphViewSelector, {
       propsData: {
@@ -39,6 +58,7 @@ describe('the graph view selector component', () => {
           ...data,
         };
       },
+      apolloProvider,
     });
   };
 
@@ -202,5 +222,44 @@ describe('the graph view selector component', () => {
         expect(findHoverTip().exists()).toBe(false);
       });
     });
+
+    describe('pipeline insights', () => {
+      it.each`
+        isPipelineComplete | shouldShow
+        ${true}            | ${true}
+        ${false}           | ${false}
+      `(
+        'button should display $shouldShow if isPipelineComplete is $isPipelineComplete ',
+        ({ isPipelineComplete, shouldShow }) => {
+          createComponent({
+            props: {
+              isPipelineComplete,
+            },
+          });
+
+          expect(findPipelineInsightsBtn().exists()).toBe(shouldShow);
+        },
+      );
+    });
+
+    describe('tracking', () => {
+      beforeEach(() => {
+        createComponent();
+
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+      });
+
+      afterEach(() => {
+        unmockTracking();
+      });
+
+      it('tracks performance insights button click', () => {
+        findPipelineInsightsBtn().vm.$emit('click');
+
+        expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_insights_button', {
+          label: 'performance_insights',
+        });
+      });
+    });
   });
 });
diff --git a/spec/frontend/pipelines/graph/mock_data.js b/spec/frontend/pipelines/graph/mock_data.js
index 6124d67af09..959bbcefc98 100644
--- a/spec/frontend/pipelines/graph/mock_data.js
+++ b/spec/frontend/pipelines/graph/mock_data.js
@@ -1038,3 +1038,245 @@ export const triggerJob = {
     action: null,
   },
 };
+
+export const mockPerformanceInsightsResponse = {
+  data: {
+    project: {
+      __typename: 'Project',
+      id: 'gid://gitlab/Project/20',
+      pipeline: {
+        __typename: 'Pipeline',
+        id: 'gid://gitlab/Ci::Pipeline/97',
+        jobs: {
+          __typename: 'CiJobConnection',
+          pageInfo: {
+            __typename: 'PageInfo',
+            hasNextPage: false,
+          },
+          nodes: [
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Bridge/2502',
+              duration: null,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2502-2502',
+                detailsPath: '/root/lots-of-jobs-project/-/pipelines/98',
+              },
+              name: 'trigger_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/303',
+                name: 'deploy',
+              },
+              startedAt: null,
+              queuedDuration: 424850.376278,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2501',
+              duration: 10,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2501-2501',
+                detailsPath: '/root/ci-project/-/jobs/2501',
+              },
+              name: 'artifact_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/303',
+                name: 'deploy',
+              },
+              startedAt: '2022-07-01T16:31:41Z',
+              queuedDuration: 2.621553,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2500',
+              duration: 4,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2500-2500',
+                detailsPath: '/root/ci-project/-/jobs/2500',
+              },
+              name: 'coverage_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/302',
+                name: 'test',
+              },
+              startedAt: '2022-07-01T16:31:33Z',
+              queuedDuration: 14.388869,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2499',
+              duration: 4,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2499-2499',
+                detailsPath: '/root/ci-project/-/jobs/2499',
+              },
+              name: 'test_job_two',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/302',
+                name: 'test',
+              },
+              startedAt: '2022-07-01T16:31:28Z',
+              queuedDuration: 15.792664,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2498',
+              duration: 4,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2498-2498',
+                detailsPath: '/root/ci-project/-/jobs/2498',
+              },
+              name: 'test_job_one',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/302',
+                name: 'test',
+              },
+              startedAt: '2022-07-01T16:31:17Z',
+              queuedDuration: 8.317072,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2497',
+              duration: 5,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'failed-2497-2497',
+                detailsPath: '/root/ci-project/-/jobs/2497',
+              },
+              name: 'allow_failure_test_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/302',
+                name: 'test',
+              },
+              startedAt: '2022-07-01T16:31:22Z',
+              queuedDuration: 3.547553,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2496',
+              duration: null,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'manual-2496-2496',
+                detailsPath: '/root/ci-project/-/jobs/2496',
+              },
+              name: 'test_manual_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/302',
+                name: 'test',
+              },
+              startedAt: null,
+              queuedDuration: null,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2495',
+              duration: 5,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2495-2495',
+                detailsPath: '/root/ci-project/-/jobs/2495',
+              },
+              name: 'large_log_output',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/301',
+                name: 'build',
+              },
+              startedAt: '2022-07-01T16:31:11Z',
+              queuedDuration: 79.128625,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2494',
+              duration: 5,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2494-2494',
+                detailsPath: '/root/ci-project/-/jobs/2494',
+              },
+              name: 'build_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/301',
+                name: 'build',
+              },
+              startedAt: '2022-07-01T16:31:05Z',
+              queuedDuration: 73.286895,
+            },
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Build/2493',
+              duration: 16,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2493-2493',
+                detailsPath: '/root/ci-project/-/jobs/2493',
+              },
+              name: 'wait_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/301',
+                name: 'build',
+              },
+              startedAt: '2022-07-01T16:30:48Z',
+              queuedDuration: 56.258856,
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export const mockPerformanceInsightsNextPageResponse = {
+  data: {
+    project: {
+      __typename: 'Project',
+      id: 'gid://gitlab/Project/20',
+      pipeline: {
+        __typename: 'Pipeline',
+        id: 'gid://gitlab/Ci::Pipeline/97',
+        jobs: {
+          __typename: 'CiJobConnection',
+          pageInfo: {
+            __typename: 'PageInfo',
+            hasNextPage: true,
+          },
+          nodes: [
+            {
+              __typename: 'CiJob',
+              id: 'gid://gitlab/Ci::Bridge/2502',
+              duration: null,
+              detailedStatus: {
+                __typename: 'DetailedStatus',
+                id: 'success-2502-2502',
+                detailsPath: '/root/lots-of-jobs-project/-/pipelines/98',
+              },
+              name: 'trigger_job',
+              stage: {
+                __typename: 'CiStage',
+                id: 'gid://gitlab/Ci::Stage/303',
+                name: 'deploy',
+              },
+              startedAt: null,
+              queuedDuration: 424850.376278,
+            },
+          ],
+        },
+      },
+    },
+  },
+};