Skip to content

G
gitlab-ce
Commit 1fa34923 authored by Natalia Tepluhina's avatar Natalia Tepluhina
Browse files
Options

Merge branch '276949-pipeline-query-startup' into 'master' 

Pipeline Graph Structural Update: Get Performant

See merge request gitlab-org/gitlab!51899
parents 23a95b1a 48f6191c
Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 50 deletions
app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue
View file @ 1fa34923
<script> <script>
import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
import { __ } from '~/locale'; import { __ } from '~/locale';
import { DEFAULT, LOAD_FAILURE } from '../../constants'; import { DEFAULT, LOAD_FAILURE } from '../../constants';
import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query.graphql';
import PipelineGraph from './graph_component.vue'; import PipelineGraph from './graph_component.vue';
import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils'; import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils';
......
app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue
View file @ 1fa34923
<script> <script>
import getPipelineDetails from '../../graphql/queries/get_pipeline_details.query.graphql'; import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
import LinkedPipeline from './linked_pipeline.vue'; import LinkedPipeline from './linked_pipeline.vue';
import { LOAD_FAILURE } from '../../constants'; import { LOAD_FAILURE } from '../../constants';
import { UPSTREAM } from './constants'; import { UPSTREAM } from './constants';
......
app/assets/javascripts/pipelines/graphql/fragments/linked_pipelines.fragment.graphql deleted 100644 → 0
View file @ 23a95b1a
fragment LinkedPipelineData on Pipeline {
id
iid
path
status: detailedStatus {
group
label
icon
}
sourceJob {
name
}
project {
name
fullPath
}
}
app/assets/javascripts/pipelines/graphql/queries/get_pipeline_details.query.graphql → app/graphql/queries/pipelines/get_pipeline_details.query.graphql
View file @ 1fa34923
#import "../fragments/linked_pipelines.fragment.graphql" fragment LinkedPipelineData on Pipeline {
__typename
id
iid
path
status: detailedStatus {
__typename
group
label
icon
}
sourceJob {
__typename
name
}
project {
__typename
name
fullPath
}
}
query getPipelineDetails($projectPath: ID!, $iid: ID!) { query getPipelineDetails($projectPath: ID!, $iid: ID!) {
project(fullPath: $projectPath) { project(fullPath: $projectPath) {
__typename
pipeline(iid: $iid) { pipeline(iid: $iid) {
__typename
id id
iid iid
downstream { downstream {
__typename
nodes { nodes {
...LinkedPipelineData ...LinkedPipelineData
} }
...@@ -14,18 +37,25 @@ query getPipelineDetails($projectPath: ID!, $iid: ID!) { ...@@ -14,18 +37,25 @@ query getPipelineDetails($projectPath: ID!, $iid: ID!) {
...LinkedPipelineData ...LinkedPipelineData
} }
stages { stages {
__typename
nodes { nodes {
__typename
name name
status: detailedStatus { status: detailedStatus {
__typename
action { action {
__typename
icon icon
path path
title title
} }
} }
groups { groups {
__typename
nodes { nodes {
__typename
status: detailedStatus { status: detailedStatus {
__typename
label label
group group
icon icon
...@@ -33,21 +63,27 @@ query getPipelineDetails($projectPath: ID!, $iid: ID!) { ...@@ -33,21 +63,27 @@ query getPipelineDetails($projectPath: ID!, $iid: ID!) {
name name
size size
jobs { jobs {
__typename
nodes { nodes {
__typename
name name
scheduledAt scheduledAt
needs { needs {
__typename
nodes { nodes {
__typename
name name
} }
} }
status: detailedStatus { status: detailedStatus {
__typename
icon icon
tooltip tooltip
hasDetails hasDetails
detailsPath detailsPath
group group
action { action {
__typename
buttonTitle buttonTitle
icon icon
path path
......
app/views/projects/pipelines/show.html.haml
View file @ 1fa34923
...@@ -6,6 +6,9 @@ ...@@ -6,6 +6,9 @@
- add_page_specific_style 'page_bundles/reports' - add_page_specific_style 'page_bundles/reports'
- add_page_specific_style 'page_bundles/ci_status' - add_page_specific_style 'page_bundles/ci_status'
- if Feature.enabled?(:graphql_pipeline_details, @project)
- add_page_startup_graphql_call('pipelines/get_pipeline_details', { projectPath: @project.full_path, iid: @pipeline.iid })
.js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } } .js-pipeline-container{ data: { controller_action: "#{controller.action_name}" } }
#js-pipeline-header-vue.pipeline-header-container{ data: { full_path: @project.full_path, pipeline_iid: @pipeline.iid, pipeline_id: @pipeline.id, pipelines_path: project_pipelines_path(@project) } } #js-pipeline-header-vue.pipeline-header-container{ data: { full_path: @project.full_path, pipeline_iid: @pipeline.iid, pipeline_id: @pipeline.id, pipelines_path: project_pipelines_path(@project) } }
- if @pipeline.commit.present? - if @pipeline.commit.present?
......
spec/frontend/pipelines/graph/graph_component_wrapper_spec.js
View file @ 1fa34923
...@@ -3,9 +3,9 @@ import VueApollo from 'vue-apollo'; ...@@ -3,9 +3,9 @@ import VueApollo from 'vue-apollo';
import { shallowMount } from '@vue/test-utils'; import { shallowMount } from '@vue/test-utils';
import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
import PipelineGraphWrapper from '~/pipelines/components/graph/graph_component_wrapper.vue'; import PipelineGraphWrapper from '~/pipelines/components/graph/graph_component_wrapper.vue';
import PipelineGraph from '~/pipelines/components/graph/graph_component.vue'; import PipelineGraph from '~/pipelines/components/graph/graph_component.vue';
import getPipelineDetails from '~/pipelines/graphql/queries/get_pipeline_details.query.graphql';
import { mockPipelineResponse } from './mock_data'; import { mockPipelineResponse } from './mock_data';
const defaultProvide = { const defaultProvide = {
......
spec/frontend/pipelines/graph/linked_pipelines_column_spec.js
View file @ 1fa34923
import VueApollo from 'vue-apollo'; import VueApollo from 'vue-apollo';
import { mount, shallowMount, createLocalVue } from '@vue/test-utils'; import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
import createMockApollo from 'helpers/mock_apollo_helper'; import createMockApollo from 'helpers/mock_apollo_helper';
import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
import PipelineGraph from '~/pipelines/components/graph/graph_component.vue'; import PipelineGraph from '~/pipelines/components/graph/graph_component.vue';
import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue'; import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue';
import LinkedPipeline from '~/pipelines/components/graph/linked_pipeline.vue'; import LinkedPipeline from '~/pipelines/components/graph/linked_pipeline.vue';
import getPipelineDetails from '~/pipelines/graphql/queries/get_pipeline_details.query.graphql';
import { DOWNSTREAM, GRAPHQL } from '~/pipelines/components/graph/constants'; import { DOWNSTREAM, GRAPHQL } from '~/pipelines/components/graph/constants';
import { LOAD_FAILURE } from '~/pipelines/constants'; import { LOAD_FAILURE } from '~/pipelines/constants';
import { import {
......
spec/frontend/pipelines/graph/mock_data.js
View file @ 1fa34923
...@@ -56,7 +56,7 @@ export const mockPipelineResponse = { ...@@ -56,7 +56,7 @@ export const mockPipelineResponse = {
}, },
}, },
needs: { needs: {
__typename: 'CiJobConnection', __typename: 'CiBuildNeedConnection',
nodes: [], nodes: [],
}, },
}, },
...@@ -96,7 +96,7 @@ export const mockPipelineResponse = { ...@@ -96,7 +96,7 @@ export const mockPipelineResponse = {
}, },
}, },
needs: { needs: {
__typename: 'CiJobConnection', __typename: 'CiBuildNeedConnection',
nodes: [], nodes: [],
}, },
}, },
...@@ -136,7 +136,7 @@ export const mockPipelineResponse = { ...@@ -136,7 +136,7 @@ export const mockPipelineResponse = {
}, },
}, },
needs: { needs: {
__typename: 'CiJobConnection', __typename: 'CiBuildNeedConnection',
nodes: [], nodes: [],
}, },
}, },
...@@ -176,7 +176,7 @@ export const mockPipelineResponse = { ...@@ -176,7 +176,7 @@ export const mockPipelineResponse = {
}, },
}, },
needs: { needs: {
__typename: 'CiJobConnection', __typename: 'CiBuildNeedConnection',
nodes: [], nodes: [],
}, },
}, },
...@@ -200,7 +200,7 @@ export const mockPipelineResponse = { ...@@ -200,7 +200,7 @@ export const mockPipelineResponse = {
}, },
}, },
needs: { needs: {
__typename: 'CiJobConnection', __typename: 'CiBuildNeedConnection',
nodes: [], nodes: [],
}, },
}, },
...@@ -224,7 +224,7 @@ export const mockPipelineResponse = { ...@@ -224,7 +224,7 @@ export const mockPipelineResponse = {
}, },
}, },
needs: { needs: {
__typename: 'CiJobConnection', __typename: 'CiBuildNeedConnection',
nodes: [], nodes: [],
}, },
}, },
...@@ -277,18 +277,18 @@ export const mockPipelineResponse = { ...@@ -277,18 +277,18 @@ export const mockPipelineResponse = {
}, },
}, },
needs: { needs: {
__typename: 'CiJobConnection', __typename: 'CiBuildNeedConnection',
nodes: [ nodes: [
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_c', name: 'build_c',
}, },
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_b', name: 'build_b',
}, },
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: name:
'build_a_nlfjkdnlvskfnksvjknlfdjvlvnjdkjdf_nvjkenjkrlngjeknjkl', 'build_a_nlfjkdnlvskfnksvjknlfdjvlvnjdkjdf_nvjkenjkrlngjeknjkl',
}, },
...@@ -331,26 +331,26 @@ export const mockPipelineResponse = { ...@@ -331,26 +331,26 @@ export const mockPipelineResponse = {
}, },
}, },
needs: { needs: {
__typename: 'CiJobConnection', __typename: 'CiBuildNeedConnection',
nodes: [ nodes: [
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_d 3/3', name: 'build_d 3/3',
}, },
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_d 2/3', name: 'build_d 2/3',
}, },
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_d 1/3', name: 'build_d 1/3',
}, },
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_b', name: 'build_b',
}, },
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: name:
'build_a_nlfjkdnlvskfnksvjknlfdjvlvnjdkjdf_nvjkenjkrlngjeknjkl', 'build_a_nlfjkdnlvskfnksvjknlfdjvlvnjdkjdf_nvjkenjkrlngjeknjkl',
}, },
...@@ -377,26 +377,26 @@ export const mockPipelineResponse = { ...@@ -377,26 +377,26 @@ export const mockPipelineResponse = {
}, },
}, },
needs: { needs: {
__typename: 'CiJobConnection', __typename: 'CiBuildNeedConnection',
nodes: [ nodes: [
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_d 3/3', name: 'build_d 3/3',
}, },
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_d 2/3', name: 'build_d 2/3',
}, },
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_d 1/3', name: 'build_d 1/3',
}, },
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_b', name: 'build_b',
}, },
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: name:
'build_a_nlfjkdnlvskfnksvjknlfdjvlvnjdkjdf_nvjkenjkrlngjeknjkl', 'build_a_nlfjkdnlvskfnksvjknlfdjvlvnjdkjdf_nvjkenjkrlngjeknjkl',
}, },
...@@ -433,18 +433,18 @@ export const mockPipelineResponse = { ...@@ -433,18 +433,18 @@ export const mockPipelineResponse = {
action: null, action: null,
}, },
needs: { needs: {
__typename: 'CiJobConnection', __typename: 'CiBuildNeedConnection',
nodes: [ nodes: [
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_c', name: 'build_c',
}, },
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_b', name: 'build_b',
}, },
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: name:
'build_a_nlfjkdnlvskfnksvjknlfdjvlvnjdkjdf_nvjkenjkrlngjeknjkl', 'build_a_nlfjkdnlvskfnksvjknlfdjvlvnjdkjdf_nvjkenjkrlngjeknjkl',
}, },
...@@ -481,10 +481,10 @@ export const mockPipelineResponse = { ...@@ -481,10 +481,10 @@ export const mockPipelineResponse = {
action: null, action: null,
}, },
needs: { needs: {
__typename: 'CiJobConnection', __typename: 'CiBuildNeedConnection',
nodes: [ nodes: [
{ {
__typename: 'CiJob', __typename: 'CiBuildNeed',
name: 'build_b', name: 'build_b',
}, },
], ],
...@@ -578,41 +578,54 @@ export const upstream = { ...@@ -578,41 +578,54 @@ export const upstream = {
export const wrappedPipelineReturn = { export const wrappedPipelineReturn = {
data: { data: {
project: { project: {
__typename: 'Project',
pipeline: { pipeline: {
__typename: 'Pipeline',
id: 'gid://gitlab/Ci::Pipeline/175', id: 'gid://gitlab/Ci::Pipeline/175',
iid: '38', iid: '38',
downstream: { downstream: {
__typename: 'PipelineConnection',
nodes: [], nodes: [],
}, },
upstream: { upstream: {
id: 'gid://gitlab/Ci::Pipeline/174', id: 'gid://gitlab/Ci::Pipeline/174',
iid: '37', iid: '37',
path: '/root/elemenohpee/-/pipelines/174', path: '/root/elemenohpee/-/pipelines/174',
__typename: 'Pipeline',
status: { status: {
__typename: 'DetailedStatus',
group: 'success', group: 'success',
label: 'passed', label: 'passed',
icon: 'status_success', icon: 'status_success',
}, },
sourceJob: { sourceJob: {
name: 'test_c', name: 'test_c',
__typename: 'CiJob',
}, },
project: { project: {
id: 'gid://gitlab/Project/25', id: 'gid://gitlab/Project/25',
name: 'elemenohpee', name: 'elemenohpee',
fullPath: 'root/elemenohpee', fullPath: 'root/elemenohpee',
__typename: 'Project',
}, },
}, },
stages: { stages: {
__typename: 'CiStageConnection',
nodes: [ nodes: [
{ {
name: 'build', name: 'build',
__typename: 'CiStage',
status: { status: {
action: null, action: null,
__typename: 'DetailedStatus',
}, },
groups: { groups: {
__typename: 'CiGroupConnection',
nodes: [ nodes: [
{ {
__typename: 'CiGroup',
status: { status: {
__typename: 'DetailedStatus',
label: 'passed', label: 'passed',
group: 'success', group: 'success',
icon: 'status_success', icon: 'status_success',
...@@ -620,20 +633,25 @@ export const wrappedPipelineReturn = { ...@@ -620,20 +633,25 @@ export const wrappedPipelineReturn = {
name: 'build_n', name: 'build_n',
size: 1, size: 1,
jobs: { jobs: {
__typename: 'CiJobConnection',
nodes: [ nodes: [
{ {
__typename: 'CiJob',
name: 'build_n', name: 'build_n',
scheduledAt: null, scheduledAt: null,
needs: { needs: {
__typename: 'CiBuildNeedConnection',
nodes: [], nodes: [],
}, },
status: { status: {
__typename: 'DetailedStatus',
icon: 'status_success', icon: 'status_success',
tooltip: 'passed', tooltip: 'passed',
hasDetails: true, hasDetails: true,
detailsPath: '/root/elemenohpee/-/jobs/1662', detailsPath: '/root/elemenohpee/-/jobs/1662',
group: 'success', group: 'success',
action: { action: {
__typename: 'StatusAction',
buttonTitle: 'Retry this job', buttonTitle: 'Retry this job',
icon: 'retry', icon: 'retry',
path: '/root/elemenohpee/-/jobs/1662/retry', path: '/root/elemenohpee/-/jobs/1662/retry',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7