Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
b01dacff
Commit
b01dacff
authored
Oct 17, 2018
by
Winnie Hellmann
Committed by
Phil Hughes
Oct 17, 2018
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Replace job with group in frontend components to be consistent with backend
parent
b2da681f
Changes
9
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
60 additions
and
81 deletions
+60
-81
app/assets/javascripts/pipelines/components/graph/graph_component.vue
...avascripts/pipelines/components/graph/graph_component.vue
+1
-1
app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
...scripts/pipelines/components/graph/job_group_dropdown.vue
+19
-35
app/assets/javascripts/pipelines/components/graph/job_item.vue
...ssets/javascripts/pipelines/components/graph/job_item.vue
+0
-0
app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
...pts/pipelines/components/graph/stage_column_component.vue
+16
-20
app/assets/javascripts/pipelines/components/stage.vue
app/assets/javascripts/pipelines/components/stage.vue
+3
-3
qa/qa/page/project/pipeline/show.rb
qa/qa/page/project/pipeline/show.rb
+1
-1
spec/javascripts/pipelines/graph/job_group_dropdown_spec.js
spec/javascripts/pipelines/graph/job_group_dropdown_spec.js
+9
-9
spec/javascripts/pipelines/graph/job_item_spec.js
spec/javascripts/pipelines/graph/job_item_spec.js
+3
-3
spec/javascripts/pipelines/graph/stage_column_component_spec.js
...avascripts/pipelines/graph/stage_column_component_spec.js
+8
-9
No files found.
app/assets/javascripts/pipelines/components/graph/graph_component.vue
View file @
b01dacff
...
@@ -70,7 +70,7 @@ export default {
...
@@ -70,7 +70,7 @@ export default {
v-for=
"(stage, index) in graph"
v-for=
"(stage, index) in graph"
:key=
"stage.name"
:key=
"stage.name"
:title=
"capitalizeStageName(stage.name)"
:title=
"capitalizeStageName(stage.name)"
:
job
s=
"stage.groups"
:
group
s=
"stage.groups"
:stage-connector-class=
"stageConnectorClass(index, stage)"
:stage-connector-class=
"stageConnectorClass(index, stage)"
:is-first-column=
"isFirstColumn(index)"
:is-first-column=
"isFirstColumn(index)"
@
refreshPipelineGraph=
"refreshPipelineGraph"
@
refreshPipelineGraph=
"refreshPipelineGraph"
...
...
app/assets/javascripts/pipelines/components/graph/
dropdown_job_component
.vue
→
app/assets/javascripts/pipelines/components/graph/
job_group_dropdown
.vue
View file @
b01dacff
<
script
>
<
script
>
import
$
from
'
jquery
'
;
import
$
from
'
jquery
'
;
import
JobNameComponent
from
'
./job_name_component
.vue
'
;
import
CiIcon
from
'
~/vue_shared/components/ci_icon
.vue
'
;
import
Job
Component
from
'
./job_component
.vue
'
;
import
Job
Item
from
'
./job_item
.vue
'
;
import
tooltip
from
'
../../../vue_shared/directives/tooltip
'
;
import
tooltip
from
'
../../../vue_shared/directives/tooltip
'
;
/**
/**
* Renders the dropdown for the pipeline graph.
* 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
{
export
default
{
directives
:
{
directives
:
{
...
@@ -33,12 +16,12 @@ export default {
...
@@ -33,12 +16,12 @@ export default {
},
},
components
:
{
components
:
{
Job
Component
,
Job
Item
,
JobNameComponent
,
CiIcon
,
},
},
props
:
{
props
:
{
job
:
{
group
:
{
type
:
Object
,
type
:
Object
,
required
:
true
,
required
:
true
,
},
},
...
@@ -46,7 +29,8 @@ export default {
...
@@ -46,7 +29,8 @@ export default {
computed
:
{
computed
:
{
tooltipText
()
{
tooltipText
()
{
return
`
${
this
.
job
.
name
}
-
${
this
.
job
.
status
.
label
}
`
;
const
{
name
,
status
}
=
this
.
group
;
return
`
${
name
}
-
${
status
.
label
}
`
;
},
},
},
},
...
@@ -56,7 +40,7 @@ export default {
...
@@ -56,7 +40,7 @@ export default {
methods
:
{
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
* the dropdown should not be closed so we stop propagation
* of the click event inside the dropdown.
* of the click event inside the dropdown.
*
*
...
@@ -90,14 +74,14 @@ export default {
...
@@ -90,14 +74,14 @@ export default {
data-display=
"static"
data-display=
"static"
class=
"dropdown-menu-toggle build-content"
class=
"dropdown-menu-toggle build-content"
>
>
<ci-icon
:status=
"group.status"
/>
<job-name-component
<span
class=
"ci-status-text"
>
:name=
"job.name"
{{
group
.
name
}}
:status=
"job.status"
</span>
/>
<span
class=
"dropdown-counter-badge"
>
<span
class=
"dropdown-counter-badge"
>
{{
job
.
size
}}
{{
group
.
size
}}
</span>
</span>
</button>
</button>
...
@@ -105,12 +89,12 @@ export default {
...
@@ -105,12 +89,12 @@ export default {
<li
class=
"scrollable-menu"
>
<li
class=
"scrollable-menu"
>
<ul>
<ul>
<li
<li
v-for=
"
(item, i) in job
.jobs"
v-for=
"
job in group
.jobs"
:key=
"
i
"
:key=
"
job.id
"
>
>
<job-
component
<job-
item
:dropdown-length=
"
job
.size"
:dropdown-length=
"
group
.size"
:job=
"
item
"
:job=
"
job
"
css-class-job-name=
"mini-pipeline-graph-dropdown-item"
css-class-job-name=
"mini-pipeline-graph-dropdown-item"
@
pipelineActionRequestComplete=
"pipelineActionRequestComplete"
@
pipelineActionRequestComplete=
"pipelineActionRequestComplete"
/>
/>
...
...
app/assets/javascripts/pipelines/components/graph/job_
component
.vue
→
app/assets/javascripts/pipelines/components/graph/job_
item
.vue
View file @
b01dacff
File moved
app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
View file @
b01dacff
<
script
>
<
script
>
import
_
from
'
underscore
'
;
import
_
from
'
underscore
'
;
import
Job
Component
from
'
./job_component
.vue
'
;
import
Job
Item
from
'
./job_item
.vue
'
;
import
DropdownJobComponent
from
'
./dropdown_job_component
.vue
'
;
import
JobGroupDropdown
from
'
./job_group_dropdown
.vue
'
;
export
default
{
export
default
{
components
:
{
components
:
{
Job
Component
,
Job
Item
,
DropdownJobComponent
,
JobGroupDropdown
,
},
},
props
:
{
props
:
{
title
:
{
title
:
{
...
@@ -14,7 +14,7 @@ export default {
...
@@ -14,7 +14,7 @@ export default {
required
:
true
,
required
:
true
,
},
},
job
s
:
{
group
s
:
{
type
:
Array
,
type
:
Array
,
required
:
true
,
required
:
true
,
},
},
...
@@ -33,12 +33,8 @@ export default {
...
@@ -33,12 +33,8 @@ export default {
},
},
methods
:
{
methods
:
{
firstJob
(
list
)
{
groupId
(
group
)
{
return
list
[
0
];
return
`ci-badge-
${
_
.
escape
(
group
.
name
)}
`
;
},
jobId
(
job
)
{
return
`ci-badge-
${
_
.
escape
(
job
.
name
)}
`
;
},
},
buildConnnectorClass
(
index
)
{
buildConnnectorClass
(
index
)
{
...
@@ -61,25 +57,25 @@ export default {
...
@@ -61,25 +57,25 @@ export default {
<div
class=
"builds-container"
>
<div
class=
"builds-container"
>
<ul>
<ul>
<li
<li
v-for=
"(
job, index) in job
s"
v-for=
"(
group, index) in group
s"
:id=
"
jobId(job
)"
:id=
"
groupId(group
)"
:key=
"
job
.id"
:key=
"
group
.id"
:class=
"buildConnnectorClass(index)"
:class=
"buildConnnectorClass(index)"
class=
"build"
class=
"build"
>
>
<div
class=
"curve"
></div>
<div
class=
"curve"
></div>
<job-
component
<job-
item
v-if=
"
job
.size === 1"
v-if=
"
group
.size === 1"
:job=
"
job
"
:job=
"
group.jobs[0]
"
css-class-job-name=
"build-content"
css-class-job-name=
"build-content"
@
pipelineActionRequestComplete=
"pipelineActionRequestComplete"
@
pipelineActionRequestComplete=
"pipelineActionRequestComplete"
/>
/>
<
dropdown-job-component
<
job-group-dropdown
v-if=
"
job
.size > 1"
v-if=
"
group
.size > 1"
:
job=
"job
"
:
group=
"group
"
@
pipelineActionRequestComplete=
"pipelineActionRequestComplete"
@
pipelineActionRequestComplete=
"pipelineActionRequestComplete"
/>
/>
...
...
app/assets/javascripts/pipelines/components/stage.vue
View file @
b01dacff
...
@@ -18,14 +18,14 @@ import Flash from '../../flash';
...
@@ -18,14 +18,14 @@ import Flash from '../../flash';
import
axios
from
'
../../lib/utils/axios_utils
'
;
import
axios
from
'
../../lib/utils/axios_utils
'
;
import
eventHub
from
'
../event_hub
'
;
import
eventHub
from
'
../event_hub
'
;
import
Icon
from
'
../../vue_shared/components/icon.vue
'
;
import
Icon
from
'
../../vue_shared/components/icon.vue
'
;
import
Job
Component
from
'
./graph/job_component
.vue
'
;
import
Job
Item
from
'
./graph/job_item
.vue
'
;
import
tooltip
from
'
../../vue_shared/directives/tooltip
'
;
import
tooltip
from
'
../../vue_shared/directives/tooltip
'
;
import
{
PIPELINES_TABLE
}
from
'
../constants
'
;
import
{
PIPELINES_TABLE
}
from
'
../constants
'
;
export
default
{
export
default
{
components
:
{
components
:
{
Icon
,
Icon
,
Job
Component
,
Job
Item
,
},
},
directives
:
{
directives
:
{
...
@@ -198,7 +198,7 @@ export default {
...
@@ -198,7 +198,7 @@ export default {
v-for=
"job in dropdownContent"
v-for=
"job in dropdownContent"
:key=
"job.id"
:key=
"job.id"
>
>
<job-
component
<job-
item
:dropdown-length=
"dropdownContent.length"
:dropdown-length=
"dropdownContent.length"
:job=
"job"
:job=
"job"
css-class-job-name=
"mini-pipeline-graph-dropdown-item"
css-class-job-name=
"mini-pipeline-graph-dropdown-item"
...
...
qa/qa/page/project/pipeline/show.rb
View file @
b01dacff
...
@@ -9,7 +9,7 @@ module QA::Page
...
@@ -9,7 +9,7 @@ module QA::Page
element
:pipeline_graph
,
/class.*pipeline-graph.*/
# rubocop:disable QA/ElementWithPattern
element
:pipeline_graph
,
/class.*pipeline-graph.*/
# rubocop:disable QA/ElementWithPattern
end
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_component
,
/class.*ci-job-component.*/
# rubocop:disable QA/ElementWithPattern
element
:job_link
,
/class.*js-pipeline-graph-job-link.*/
# rubocop:disable QA/ElementWithPattern
element
:job_link
,
/class.*js-pipeline-graph-job-link.*/
# rubocop:disable QA/ElementWithPattern
end
end
...
...
spec/javascripts/pipelines/graph/
dropdown_job_component
_spec.js
→
spec/javascripts/pipelines/graph/
job_group_dropdown
_spec.js
View file @
b01dacff
import
Vue
from
'
vue
'
;
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
'
;
import
mountComponent
from
'
spec/helpers/vue_mount_component_helper
'
;
describe
(
'
dropdown job
component
'
,
()
=>
{
describe
(
'
job group dropdown
component
'
,
()
=>
{
const
Component
=
Vue
.
extend
(
component
);
const
Component
=
Vue
.
extend
(
JobGroupDropdown
);
let
vm
;
let
vm
;
const
mock
=
{
const
group
=
{
jobs
:
[
jobs
:
[
{
{
id
:
4256
,
id
:
4256
,
...
@@ -71,15 +71,15 @@ describe('dropdown job component', () => {
...
@@ -71,15 +71,15 @@ describe('dropdown job component', () => {
});
});
beforeEach
(()
=>
{
beforeEach
(()
=>
{
vm
=
mountComponent
(
Component
,
{
job
:
mock
});
vm
=
mountComponent
(
Component
,
{
group
});
});
});
it
(
'
renders button with
job
name and size
'
,
()
=>
{
it
(
'
renders button with
group
name and size
'
,
()
=>
{
expect
(
vm
.
$el
.
querySelector
(
'
button
'
).
textContent
).
toContain
(
mock
.
name
);
expect
(
vm
.
$el
.
querySelector
(
'
button
'
).
textContent
).
toContain
(
group
.
name
);
expect
(
vm
.
$el
.
querySelector
(
'
button
'
).
textContent
).
toContain
(
mock
.
size
);
expect
(
vm
.
$el
.
querySelector
(
'
button
'
).
textContent
).
toContain
(
group
.
size
);
});
});
it
(
'
renders dropdown with jobs
'
,
()
=>
{
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
);
});
});
});
});
spec/javascripts/pipelines/graph/job_
component
_spec.js
→
spec/javascripts/pipelines/graph/job_
item
_spec.js
View file @
b01dacff
import
Vue
from
'
vue
'
;
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
'
;
import
mountComponent
from
'
spec/helpers/vue_mount_component_helper
'
;
describe
(
'
pipeline graph job
component
'
,
()
=>
{
describe
(
'
pipeline graph job
item
'
,
()
=>
{
const
JobComponent
=
Vue
.
extend
(
jobComponent
);
const
JobComponent
=
Vue
.
extend
(
JobItem
);
let
component
;
let
component
;
const
mockJob
=
{
const
mockJob
=
{
...
...
spec/javascripts/pipelines/graph/stage_column_component_spec.js
View file @
b01dacff
...
@@ -25,17 +25,16 @@ describe('stage column component', () => {
...
@@ -25,17 +25,16 @@ describe('stage column component', () => {
};
};
beforeEach
(()
=>
{
beforeEach
(()
=>
{
const
mockGroups
=
[];
const
mockJobs
=
[];
for
(
let
i
=
0
;
i
<
3
;
i
+=
1
)
{
for
(
let
i
=
0
;
i
<
3
;
i
+=
1
)
{
const
mockedJob
=
Object
.
assign
({},
mockJob
);
const
mockedJob
=
Object
.
assign
({},
mockJob
);
mockedJob
.
id
+=
i
;
mockedJob
.
id
+=
i
;
mock
Job
s
.
push
(
mockedJob
);
mock
Group
s
.
push
(
mockedJob
);
}
}
component
=
mountComponent
(
StageColumnComponent
,
{
component
=
mountComponent
(
StageColumnComponent
,
{
title
:
'
foo
'
,
title
:
'
foo
'
,
jobs
:
mockJob
s
,
groups
:
mockGroup
s
,
});
});
});
});
...
@@ -43,14 +42,14 @@ describe('stage column component', () => {
...
@@ -43,14 +42,14 @@ describe('stage column component', () => {
expect
(
component
.
$el
.
querySelector
(
'
.stage-name
'
).
textContent
.
trim
()).
toEqual
(
'
foo
'
);
expect
(
component
.
$el
.
querySelector
(
'
.stage-name
'
).
textContent
.
trim
()).
toEqual
(
'
foo
'
);
});
});
it
(
'
should render the provided
job
s
'
,
()
=>
{
it
(
'
should render the provided
group
s
'
,
()
=>
{
expect
(
component
.
$el
.
querySelectorAll
(
'
.builds-container > ul > li
'
).
length
).
toEqual
(
3
);
expect
(
component
.
$el
.
querySelectorAll
(
'
.builds-container > ul > li
'
).
length
).
toEqual
(
3
);
});
});
describe
(
'
jobId
'
,
()
=>
{
describe
(
'
jobId
'
,
()
=>
{
it
(
'
escapes job name
'
,
()
=>
{
it
(
'
escapes job name
'
,
()
=>
{
component
=
mountComponent
(
StageColumnComponent
,
{
component
=
mountComponent
(
StageColumnComponent
,
{
job
s
:
[
group
s
:
[
{
{
id
:
4259
,
id
:
4259
,
name
:
'
<img src=x onerror=alert(document.domain)>
'
,
name
:
'
<img src=x onerror=alert(document.domain)>
'
,
...
@@ -64,9 +63,9 @@ describe('stage column component', () => {
...
@@ -64,9 +63,9 @@ describe('stage column component', () => {
title
:
'
test
'
,
title
:
'
test
'
,
});
});
expect
(
expect
(
component
.
$el
.
querySelector
(
'
.builds-container li
'
).
getAttribute
(
'
id
'
)).
toEqual
(
component
.
$el
.
querySelector
(
'
.builds-container li
'
).
getAttribute
(
'
id
'
)
,
'
ci-badge-<img src=x onerror=alert(document.domain)>
'
,
)
.
toEqual
(
'
ci-badge-<img src=x onerror=alert(document.domain)>
'
)
;
);
});
});
});
});
});
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment