Skip to content

G
gitlab-ce
Commit 23833900 authored by Sarah Groff Hennigh-Palermo's avatar Sarah Groff Hennigh-Palermo Committed by Andrew Fontaine
Browse files
Options

Pipeline Graph: Add Stage Name to Needs/Layers VIew

parent fb0738b3
Hide whitespace changes
Inline Side-by-side
Showing with 165 additions and 57 deletions
app/assets/javascripts/pipelines/components/graph/graph_component.vue
View file @ 23833900
......@@ -54,6 +54,7 @@ export default {
data() {
return {
hoveredJobName: '',
hoveredSourceJobName: '',
highlightedJobs: [],
measurements: {
width: 0,
......@@ -93,6 +94,9 @@ export default {
shouldHideLinks() {
return this.isStageView;
},
shouldShowStageName() {
return !this.isStageView;
},
// The show downstream check prevents showing redundant linked columns
showDownstreamPipelines() {
return (
......@@ -148,6 +152,9 @@ export default {
setJob(jobName) {
this.hoveredJobName = jobName;
},
setSourceJob(jobName) {
this.hoveredSourceJobName = jobName;
},
slidePipelineContainer() {
this.$refs.mainPipelineContainer.scrollBy({
left: ONE_COL_WIDTH,
......@@ -204,11 +211,13 @@ export default {
<stage-column-component
v-for="column in layout"
:key="column.id || column.name"
:title="column.name"
:name="column.name"
:groups="column.groups"
:action="column.status.action"
:highlighted-jobs="highlightedJobs"
:show-stage-name="shouldShowStageName"
:job-hovered="hoveredJobName"
:source-job-hovered="hoveredSourceJobName"
:pipeline-expanded="pipelineExpanded"
:pipeline-id="pipeline.id"
@refreshPipelineGraph="$emit('refreshPipelineGraph')"
......@@ -227,7 +236,7 @@ export default {
:column-title="__('Downstream')"
:type="$options.pipelineTypeConstants.DOWNSTREAM"
:view-type="viewType"
@downstreamHovered="setJob"
@downstreamHovered="setSourceJob"
@pipelineExpandToggle="togglePipelineExpanded"
@scrollContainer="slidePipelineContainer"
@error="onError"
......
app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
View file @ 23833900
<script>
import { GlTooltipDirective } from '@gitlab/ui';
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import { reportToSentry } from '../../utils';
import JobItem from './job_item.vue';
......@@ -11,12 +9,8 @@ import JobItem from './job_item.vue';
*
*/
export default {
directives: {
GlTooltip: GlTooltipDirective,
},
components: {
JobItem,
CiIcon,
},
props: {
group: {
......@@ -28,6 +22,11 @@ export default {
required: false,
default: -1,
},
stageName: {
type: String,
required: false,
default: '',
},
},
computed: {
computedJobId() {
......@@ -51,22 +50,21 @@ export default {
<template>
<div :id="computedJobId" class="ci-job-dropdown-container dropdown dropright">
<button
v-gl-tooltip.hover="{ boundary: 'viewport' }"
:title="tooltipText"
type="button"
data-toggle="dropdown"
data-display="static"
class="dropdown-menu-toggle build-content gl-build-content gl-pipeline-job-width! gl-pr-4!"
>
<div class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
<span class="gl-display-flex gl-align-items-center gl-min-w-0">
<ci-icon :status="group.status" :size="24" class="gl-line-height-0" />
<span class="gl-text-truncate mw-70p gl-pl-3">
{{ group.name }}
</span>
</span>
<job-item
:dropdown-length="group.size"
:group-tooltip="tooltipText"
:job="group"
:stage-name="stageName"
@pipelineActionRequestComplete="pipelineActionRequestComplete"
/>
<span class="gl-font-weight-100 gl-font-size-lg"> {{ group.size }} </span>
<div class="gl-font-weight-100 gl-font-size-lg gl-ml-n4">{{ group.size }}</div>
</div>
</button>
......
app/assets/javascripts/pipelines/components/graph/job_item.vue
View file @ 23833900
......@@ -3,6 +3,7 @@ import { GlTooltipDirective, GlLink } from '@gitlab/ui';
import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
import { sprintf } from '~/locale';
import CiIcon from '~/vue_shared/components/ci_icon.vue';
import { reportToSentry } from '../../utils';
import ActionComponent from '../jobs_shared/action_component.vue';
import JobNameComponent from '../jobs_shared/job_name_component.vue';
......@@ -38,6 +39,7 @@ export default {
hoverClass: 'gl-shadow-x0-y0-b3-s1-blue-500',
components: {
ActionComponent,
CiIcon,
JobNameComponent,
GlLink,
},
......@@ -65,6 +67,11 @@ export default {
required: false,
default: Infinity,
},
groupTooltip: {
type: String,
required: false,
default: '',
},
jobHovered: {
type: String,
required: false,
......@@ -80,24 +87,47 @@ export default {
required: false,
default: -1,
},
sourceJobHovered: {
type: String,
required: false,
default: '',
},
stageName: {
type: String,
required: false,
default: '',
},
},
computed: {
boundary() {
return this.dropdownLength === 1 ? 'viewport' : 'scrollParent';
},
computedJobId() {
return this.pipelineId > -1 ? `${this.job.name}-${this.pipelineId}` : '';
},
detailsPath() {
return accessValue(this.dataMethod, 'detailsPath', this.status);
},
hasDetails() {
return accessValue(this.dataMethod, 'hasDetails', this.status);
},
computedJobId() {
return this.pipelineId > -1 ? `${this.job.name}-${this.pipelineId}` : '';
nameComponent() {
return this.hasDetails ? 'gl-link' : 'div';
},
showStageName() {
return Boolean(this.stageName);
},
status() {
return this.job && this.job.status ? this.job.status : {};
},
testId() {
return this.hasDetails ? 'job-with-link' : 'job-without-link';
},
tooltipText() {
if (this.groupTooltip) {
return this.groupTooltip;
}
const textBuilder = [];
const { name: jobName } = this.job;
......@@ -129,7 +159,7 @@ export default {
return this.job.status && this.job.status.action && this.job.status.action.path;
},
relatedDownstreamHovered() {
return this.job.name === this.jobHovered;
return this.job.name === this.sourceJobHovered;
},
relatedDownstreamExpanded() {
return this.job.name === this.pipelineExpanded.jobName && this.pipelineExpanded.expanded;
......@@ -156,44 +186,45 @@ export default {
<template>
<div
:id="computedJobId"
class="ci-job-component gl-display-flex gl-align-items-center gl-justify-content-space-between"
class="ci-job-component gl-display-flex gl-align-items-center gl-justify-content-space-between gl-w-full"
data-qa-selector="job_item_container"
>
<gl-link
v-if="hasDetails"
<component
:is="nameComponent"
v-gl-tooltip="{
boundary: 'viewport',
placement: 'bottom',
customClass: 'gl-pointer-events-none',
}"
:href="detailsPath"
:title="tooltipText"
:class="jobClasses"
class="js-pipeline-graph-job-link qa-job-link menu-item gl-text-gray-900 gl-active-text-decoration-none gl-focus-text-decoration-none gl-hover-text-decoration-none"
data-testid="job-with-link"
:href="detailsPath"
class="js-pipeline-graph-job-link qa-job-link menu-item gl-text-gray-900 gl-active-text-decoration-none gl-focus-text-decoration-none gl-hover-text-decoration-none gl-w-full"
:data-testid="testId"
@click.stop="hideTooltips"
@mouseout="hideTooltips"
>
<job-name-component :name="job.name" :status="job.status" :icon-size="24" />
</gl-link>
<div
v-else
v-gl-tooltip="{ boundary, placement: 'bottom', customClass: 'gl-pointer-events-none' }"
:title="tooltipText"
:class="jobClasses"
class="js-job-component-tooltip non-details-job-component menu-item"
data-testid="job-without-link"
@mouseout="hideTooltips"
>
<job-name-component :name="job.name" :status="job.status" :icon-size="24" />
</div>
<div class="ci-job-name-component gl-display-flex gl-align-items-center">
<ci-icon :size="24" :status="job.status" class="gl-line-height-0" />
<div class="gl-pl-3 gl-display-flex gl-flex-direction-column gl-w-full">
<div class="gl-text-truncate mw-70p gl-line-height-normal">{{ job.name }}</div>
<div
v-if="showStageName"
data-testid="stage-name-in-job"
class="gl-text-truncate mw-70p gl-font-sm gl-text-gray-500 gl-line-height-normal"
>
{{ stageName }}
</div>
</div>
</div>
</component>
<action-component
v-if="hasAction"
:tooltip-text="status.action.title"
:link="status.action.path"
:action-icon="status.action.icon"
class="gl-mr-1"
data-qa-selector="action_button"
@pipelineActionRequestComplete="pipelineActionRequestComplete"
/>
......
app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
View file @ 23833900
......@@ -22,12 +22,12 @@ export default {
type: Array,
required: true,
},
pipelineId: {
type: Number,
name: {
type: String,
required: true,
},
title: {
type: String,
pipelineId: {
type: Number,
required: true,
},
action: {
......@@ -50,6 +50,16 @@ export default {
required: false,
default: () => ({}),
},
showStageName: {
type: Boolean,
required: false,
default: false,
},
sourceJobHovered: {
type: String,
required: false,
default: '',
},
},
titleClasses: [
'gl-font-weight-bold',
......@@ -75,7 +85,7 @@ export default {
});
},
formattedTitle() {
return capitalize(escape(this.title));
return capitalize(escape(this.name));
},
hasAction() {
return !isEmpty(this.action);
......@@ -145,14 +155,20 @@ export default {
v-if="singleJobExists(group)"
:job="group.jobs[0]"
:job-hovered="jobHovered"
:source-job-hovered="sourceJobHovered"
:pipeline-expanded="pipelineExpanded"
:pipeline-id="pipelineId"
:stage-name="showStageName ? group.stageName : ''"
css-class-job-name="gl-build-content"
:class="{ 'gl-opacity-3': isFadedOut(group.name) }"
@pipelineActionRequestComplete="$emit('refreshPipelineGraph')"
/>
<div v-else-if="isParallel(group)" :class="{ 'gl-opacity-3': isFadedOut(group.name) }">
<job-group-dropdown :group="group" :pipeline-id="pipelineId" />
<job-group-dropdown
:group="group"
:stage-name="showStageName ? group.stageName : ''"
:pipeline-id="pipelineId"
/>
</div>
</div>
</template>
......
app/assets/javascripts/pipelines/components/unwrapping_utils.js
View file @ 23833900
......@@ -5,7 +5,19 @@ const unwrapGroups = (stages) => {
const {
groups: { nodes: groups },
} = stage;
return { node: { ...stage, groups }, lookup: { stageIdx: idx } };
/*
Being peformance conscious here means we don't want to spread and copy the
group value just to add one parameter.
*/
/* eslint-disable no-param-reassign */
const groupsWithStageName = groups.map((group) => {
group.stageName = stage.name;
return group;
});
/* eslint-enable no-param-reassign */
return { node: { ...stage, groups: groupsWithStageName }, lookup: { stageIdx: idx } };
});
};
......
app/assets/stylesheets/page_bundles/pipeline.scss
View file @ 23833900
......@@ -148,7 +148,19 @@
}
.gl-build-content {
@include build-content();
display: inline-block;
padding: 8px 10px 9px;
width: 100%;
border: 1px solid var(--border-color, $border-color);
border-radius: 30px;
background-color: var(--white, $white);
&:hover,
&:focus {
background-color: var(--gray-50, $gray-50);
border: 1px solid $dropdown-toggle-active-border-color;
color: var(--gl-text-color, $gl-text-color);
}
}
.gl-ci-action-icon-container {
......
spec/frontend/pipelines/graph/graph_component_spec.js
View file @ 23833900
import { mount, shallowMount } from '@vue/test-utils';
import { GRAPHQL, STAGE_VIEW } from '~/pipelines/components/graph/constants';
import { GRAPHQL, LAYER_VIEW, STAGE_VIEW } from '~/pipelines/components/graph/constants';
import PipelineGraph from '~/pipelines/components/graph/graph_component.vue';
import JobItem from '~/pipelines/components/graph/job_item.vue';
import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue';
import StageColumnComponent from '~/pipelines/components/graph/stage_column_component.vue';
import LinksLayer from '~/pipelines/components/graph_shared/links_layer.vue';
import { listByLayers } from '~/pipelines/components/parsing_utils';
import {
generateResponse,
mockPipelineResponse,
......@@ -17,6 +18,7 @@ describe('graph component', () => {
const findLinkedColumns = () => wrapper.findAll(LinkedPipelinesColumn);
const findLinksLayer = () => wrapper.find(LinksLayer);
const findStageColumns = () => wrapper.findAll(StageColumnComponent);
const findStageNameInJob = () => wrapper.find('[data-testid="stage-name-in-job"]');
const defaultProps = {
pipeline: generateResponse(mockPipelineResponse, 'root/fungi-xoxo'),
......@@ -82,6 +84,10 @@ describe('graph component', () => {
expect(findLinksLayer().exists()).toBe(true);
});
it('does not display stage name on the job in default (stage) mode', () => {
expect(findStageNameInJob().exists()).toBe(false);
});
describe('when column requests a refresh', () => {
beforeEach(() => {
findStageColumns().at(0).vm.$emit('refreshPipelineGraph');
......@@ -93,7 +99,7 @@ describe('graph component', () => {
});
describe('when links are present', () => {
beforeEach(async () => {
beforeEach(() => {
createComponent({
mountFn: mount,
stubOverride: { 'job-item': false },
......@@ -132,4 +138,24 @@ describe('graph component', () => {
expect(findLinkedColumns()).toHaveLength(2);
});
});
describe('in layers mode', () => {
beforeEach(() => {
createComponent({
mountFn: mount,
stubOverride: {
'job-item': false,
'job-group-dropdown': false,
},
props: {
viewType: LAYER_VIEW,
pipelineLayers: listByLayers(defaultProps.pipeline),
},
});
});
it('displays the stage name on the job', () => {
expect(findStageNameInJob().exists()).toBe(true);
});
});
});
spec/frontend/pipelines/graph/job_group_dropdown_spec.js
View file @ 23833900
import { shallowMount } from '@vue/test-utils';
import { shallowMount, mount } from '@vue/test-utils';
import JobGroupDropdown from '~/pipelines/components/graph/job_group_dropdown.vue';
describe('job group dropdown component', () => {
......@@ -65,12 +65,16 @@ describe('job group dropdown component', () => {
let wrapper;
const findButton = () => wrapper.find('button');
const createComponent = ({ mountFn = shallowMount }) => {
wrapper = mountFn(JobGroupDropdown, { propsData: { group } });
};
afterEach(() => {
wrapper.destroy();
});
beforeEach(() => {
wrapper = shallowMount(JobGroupDropdown, { propsData: { group } });
createComponent({ mountFn: mount });
});
it('renders button with group name and size', () => {
......
spec/frontend/pipelines/graph/job_item_spec.js
View file @ 23833900
......@@ -122,7 +122,7 @@ describe('pipeline graph job item', () => {
},
});
expect(wrapper.find('.js-job-component-tooltip').attributes('title')).toBe('test');
expect(findJobWithoutLink().attributes('title')).toBe('test');
});
it('should not render status label when it is provided', () => {
......@@ -138,7 +138,7 @@ describe('pipeline graph job item', () => {
},
});
expect(wrapper.find('.js-job-component-tooltip').attributes('title')).toBe('test - success');
expect(findJobWithoutLink().attributes('title')).toBe('test - success');
});
});
......
spec/frontend/pipelines/graph/stage_column_component_spec.js
View file @ 23833900
......@@ -28,7 +28,7 @@ const mockGroups = Array(4)
});
const defaultProps = {
title: 'Fish',
name: 'Fish',
groups: mockGroups,
pipelineId: 159,
};
......@@ -62,7 +62,7 @@ describe('stage column component', () => {
});
it('should render provided title', () => {
expect(findStageColumnTitle().text()).toBe(defaultProps.title);
expect(findStageColumnTitle().text()).toBe(defaultProps.name);
});
it('should render the provided groups', () => {
......@@ -119,7 +119,7 @@ describe('stage column component', () => {
],
},
],
title: 'test <img src=x onerror=alert(document.domain)>',
name: 'test <img src=x onerror=alert(document.domain)>',
},
});
});
......
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