diff options
| -rw-r--r-- | app/assets/javascripts/pipelines/components/graph/graph_component.vue | 2 | ||||
| -rw-r--r-- | app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue (renamed from app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue) | 54 | ||||
| -rw-r--r-- | app/assets/javascripts/pipelines/components/graph/job_item.vue (renamed from app/assets/javascripts/pipelines/components/graph/job_component.vue) | 0 | ||||
| -rw-r--r-- | app/assets/javascripts/pipelines/components/graph/stage_column_component.vue | 36 | ||||
| -rw-r--r-- | app/assets/javascripts/pipelines/components/stage.vue | 6 | ||||
| -rw-r--r-- | qa/qa/page/project/pipeline/show.rb | 2 | ||||
| -rw-r--r-- | spec/javascripts/pipelines/graph/job_group_dropdown_spec.js (renamed from spec/javascripts/pipelines/graph/dropdown_job_component_spec.js) | 18 | ||||
| -rw-r--r-- | spec/javascripts/pipelines/graph/job_item_spec.js (renamed from spec/javascripts/pipelines/graph/job_component_spec.js) | 6 | ||||
| -rw-r--r-- | spec/javascripts/pipelines/graph/stage_column_component_spec.js | 17 |
9 files changed, 60 insertions, 81 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index 9b4ba0c1a9a..23c0be7742e 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -70,7 +70,7 @@ export default { v-for="(stage, index) in graph" :key="stage.name" :title="capitalizeStageName(stage.name)" - :jobs="stage.groups" + :groups="stage.groups" :stage-connector-class="stageConnectorClass(index, stage)" :is-first-column="isFirstColumn(index)" @refreshPipelineGraph="refreshPipelineGraph" diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue index 2ad66f4fe86..34bada533df 100644 --- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue @@ -1,31 +1,14 @@ <script> import $ from 'jquery'; -import JobNameComponent from './job_name_component.vue'; -import JobComponent from './job_component.vue'; +import CiIcon from '~/vue_shared/components/ci_icon.vue'; +import JobItem from './job_item.vue'; import tooltip from '../../../vue_shared/directives/tooltip'; /** * Renders the dropdown for the pipeline graph. * - * The following object should be provided as `job`: + * The object provided as `group` corresponds to app/serializers/job_group_entity.rb. * - * { - * "id": 4256, - * "name": "test", - * "status": { - * "icon": "status_success", - * "text": "passed", - * "label": "passed", - * "group": "success", - * "details_path": "/root/ci-mock/builds/4256", - * "action": { - * "icon": "retry", - * "title": "Retry", - * "path": "/root/ci-mock/builds/4256/retry", - * "method": "post" - * } - * } - * } */ export default { directives: { @@ -33,12 +16,12 @@ export default { }, components: { - JobComponent, - JobNameComponent, + JobItem, + CiIcon, }, props: { - job: { + group: { type: Object, required: true, }, @@ -46,7 +29,8 @@ export default { computed: { tooltipText() { - return `${this.job.name} - ${this.job.status.label}`; + const { name, status } = this.group; + return `${name} - ${status.label}`; }, }, @@ -56,7 +40,7 @@ export default { methods: { /** - * When the user right clicks or cmd/ctrl + click in the job name or the action icon + * When the user right clicks or cmd/ctrl + click in the group name or the action icon * the dropdown should not be closed so we stop propagation * of the click event inside the dropdown. * @@ -90,14 +74,14 @@ export default { data-display="static" class="dropdown-menu-toggle build-content" > + <ci-icon :status="group.status" /> - <job-name-component - :name="job.name" - :status="job.status" - /> + <span class="ci-status-text"> + {{ group.name }} + </span> <span class="dropdown-counter-badge"> - {{ job.size }} + {{ group.size }} </span> </button> @@ -105,12 +89,12 @@ export default { <li class="scrollable-menu"> <ul> <li - v-for="(item, i) in job.jobs" - :key="i" + v-for="job in group.jobs" + :key="job.id" > - <job-component - :dropdown-length="job.size" - :job="item" + <job-item + :dropdown-length="group.size" + :job="job" css-class-job-name="mini-pipeline-graph-dropdown-item" @pipelineActionRequestComplete="pipelineActionRequestComplete" /> diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue index a1504592bbc..a1504592bbc 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue index 567ea119343..efbab51d200 100644 --- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue @@ -1,12 +1,12 @@ <script> import _ from 'underscore'; -import JobComponent from './job_component.vue'; -import DropdownJobComponent from './dropdown_job_component.vue'; +import JobItem from './job_item.vue'; +import JobGroupDropdown from './job_group_dropdown.vue'; export default { components: { - JobComponent, - DropdownJobComponent, + JobItem, + JobGroupDropdown, }, props: { title: { @@ -14,7 +14,7 @@ export default { required: true, }, - jobs: { + groups: { type: Array, required: true, }, @@ -33,12 +33,8 @@ export default { }, methods: { - firstJob(list) { - return list[0]; - }, - - jobId(job) { - return `ci-badge-${_.escape(job.name)}`; + groupId(group) { + return `ci-badge-${_.escape(group.name)}`; }, buildConnnectorClass(index) { @@ -61,25 +57,25 @@ export default { <div class="builds-container"> <ul> <li - v-for="(job, index) in jobs" - :id="jobId(job)" - :key="job.id" + v-for="(group, index) in groups" + :id="groupId(group)" + :key="group.id" :class="buildConnnectorClass(index)" class="build" > <div class="curve"></div> - <job-component - v-if="job.size === 1" - :job="job" + <job-item + v-if="group.size === 1" + :job="group.jobs[0]" css-class-job-name="build-content" @pipelineActionRequestComplete="pipelineActionRequestComplete" /> - <dropdown-job-component - v-if="job.size > 1" - :job="job" + <job-group-dropdown + v-if="group.size > 1" + :group="group" @pipelineActionRequestComplete="pipelineActionRequestComplete" /> diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue index 47c15b1a9c4..7ec55792850 100644 --- a/app/assets/javascripts/pipelines/components/stage.vue +++ b/app/assets/javascripts/pipelines/components/stage.vue @@ -18,14 +18,14 @@ import Flash from '../../flash'; import axios from '../../lib/utils/axios_utils'; import eventHub from '../event_hub'; import Icon from '../../vue_shared/components/icon.vue'; -import JobComponent from './graph/job_component.vue'; +import JobItem from './graph/job_item.vue'; import tooltip from '../../vue_shared/directives/tooltip'; import { PIPELINES_TABLE } from '../constants'; export default { components: { Icon, - JobComponent, + JobItem, }, directives: { @@ -198,7 +198,7 @@ export default { v-for="job in dropdownContent" :key="job.id" > - <job-component + <job-item :dropdown-length="dropdownContent.length" :job="job" css-class-job-name="mini-pipeline-graph-dropdown-item" diff --git a/qa/qa/page/project/pipeline/show.rb b/qa/qa/page/project/pipeline/show.rb index 06df1238738..b22396fd67a 100644 --- a/qa/qa/page/project/pipeline/show.rb +++ b/qa/qa/page/project/pipeline/show.rb @@ -9,7 +9,7 @@ module QA::Page element :pipeline_graph, /class.*pipeline-graph.*/ # rubocop:disable QA/ElementWithPattern end - view 'app/assets/javascripts/pipelines/components/graph/job_component.vue' do + view 'app/assets/javascripts/pipelines/components/graph/job_item.vue' do element :job_component, /class.*ci-job-component.*/ # rubocop:disable QA/ElementWithPattern element :job_link, /class.*js-pipeline-graph-job-link.*/ # rubocop:disable QA/ElementWithPattern end diff --git a/spec/javascripts/pipelines/graph/dropdown_job_component_spec.js b/spec/javascripts/pipelines/graph/job_group_dropdown_spec.js index 2b47ca236b2..24631cc1c89 100644 --- a/spec/javascripts/pipelines/graph/dropdown_job_component_spec.js +++ b/spec/javascripts/pipelines/graph/job_group_dropdown_spec.js @@ -1,12 +1,12 @@ import Vue from 'vue'; -import component from '~/pipelines/components/graph/dropdown_job_component.vue'; +import JobGroupDropdown from '~/pipelines/components/graph/job_group_dropdown.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; -describe('dropdown job component', () => { - const Component = Vue.extend(component); +describe('job group dropdown component', () => { + const Component = Vue.extend(JobGroupDropdown); let vm; - const mock = { + const group = { jobs: [ { id: 4256, @@ -71,15 +71,15 @@ describe('dropdown job component', () => { }); beforeEach(() => { - vm = mountComponent(Component, { job: mock }); + vm = mountComponent(Component, { group }); }); - it('renders button with job name and size', () => { - expect(vm.$el.querySelector('button').textContent).toContain(mock.name); - expect(vm.$el.querySelector('button').textContent).toContain(mock.size); + it('renders button with group name and size', () => { + expect(vm.$el.querySelector('button').textContent).toContain(group.name); + expect(vm.$el.querySelector('button').textContent).toContain(group.size); }); it('renders dropdown with jobs', () => { - expect(vm.$el.querySelectorAll('.scrollable-menu>ul>li').length).toEqual(mock.jobs.length); + expect(vm.$el.querySelectorAll('.scrollable-menu>ul>li').length).toEqual(group.jobs.length); }); }); diff --git a/spec/javascripts/pipelines/graph/job_component_spec.js b/spec/javascripts/pipelines/graph/job_item_spec.js index 0ae448f2ea8..88bc4676699 100644 --- a/spec/javascripts/pipelines/graph/job_component_spec.js +++ b/spec/javascripts/pipelines/graph/job_item_spec.js @@ -1,9 +1,9 @@ import Vue from 'vue'; -import jobComponent from '~/pipelines/components/graph/job_component.vue'; +import JobItem from '~/pipelines/components/graph/job_item.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; -describe('pipeline graph job component', () => { - const JobComponent = Vue.extend(jobComponent); +describe('pipeline graph job item', () => { + const JobComponent = Vue.extend(JobItem); let component; const mockJob = { diff --git a/spec/javascripts/pipelines/graph/stage_column_component_spec.js b/spec/javascripts/pipelines/graph/stage_column_component_spec.js index f6e6bd3132e..d0b8f877d6f 100644 --- a/spec/javascripts/pipelines/graph/stage_column_component_spec.js +++ b/spec/javascripts/pipelines/graph/stage_column_component_spec.js @@ -25,17 +25,16 @@ describe('stage column component', () => { }; beforeEach(() => { - - const mockJobs = []; + const mockGroups = []; for (let i = 0; i < 3; i += 1) { const mockedJob = Object.assign({}, mockJob); mockedJob.id += i; - mockJobs.push(mockedJob); + mockGroups.push(mockedJob); } component = mountComponent(StageColumnComponent, { title: 'foo', - jobs: mockJobs, + groups: mockGroups, }); }); @@ -43,14 +42,14 @@ describe('stage column component', () => { expect(component.$el.querySelector('.stage-name').textContent.trim()).toEqual('foo'); }); - it('should render the provided jobs', () => { + it('should render the provided groups', () => { expect(component.$el.querySelectorAll('.builds-container > ul > li').length).toEqual(3); }); describe('jobId', () => { it('escapes job name', () => { component = mountComponent(StageColumnComponent, { - jobs: [ + groups: [ { id: 4259, name: '<img src=x onerror=alert(document.domain)>', @@ -64,9 +63,9 @@ describe('stage column component', () => { title: 'test', }); - expect( - component.$el.querySelector('.builds-container li').getAttribute('id'), - ).toEqual('ci-badge-<img src=x onerror=alert(document.domain)>'); + expect(component.$el.querySelector('.builds-container li').getAttribute('id')).toEqual( + 'ci-badge-<img src=x onerror=alert(document.domain)>', + ); }); }); }); |