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
0
Merge Requests
0
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
Tatuya Kamada
gitlab-ce
Commits
b1613e54
Commit
b1613e54
authored
8 years ago
by
Filipa Lacerda
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Makes API call when stage is clicked
parent
7269df28
No related merge requests found
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
95 additions
and
22 deletions
+95
-22
app/assets/javascripts/dispatcher.js.es6
app/assets/javascripts/dispatcher.js.es6
+15
-0
app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6
app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6
+69
-0
app/views/projects/ci/pipelines/_pipeline.html.haml
app/views/projects/ci/pipelines/_pipeline.html.haml
+3
-7
app/views/projects/commit/_pipelines_list.haml
app/views/projects/commit/_pipelines_list.haml
+1
-1
app/views/projects/pipelines/_stage.html.haml
app/views/projects/pipelines/_stage.html.haml
+6
-13
app/views/projects/pipelines/index.html.haml
app/views/projects/pipelines/index.html.haml
+1
-1
No files found.
app/assets/javascripts/dispatcher.js.es6
View file @
b1613e54
...
...
@@ -141,6 +141,11 @@
case 'projects:merge_requests:builds':
new MergedButtons();
break;
case 'projects:merge_requests:pipelines':
new gl.MiniPipelineGraph({
container: '.js-pipeline-table',
});
break;
case "projects:merge_requests:diffs":
new gl.Diff();
new ZenMode();
...
...
@@ -158,6 +163,11 @@
new ZenMode();
shortcut_handler = new ShortcutsNavigation();
break;
case 'projects:commit:pipelines':
new gl.MiniPipelineGraph({
container: '.js-pipeline-table',
});
break;
case 'projects:commit:builds':
new gl.Pipelines();
break;
...
...
@@ -172,6 +182,11 @@
new TreeView();
}
break;
case 'projects:pipelines:index':
new gl.MiniPipelineGraph({
container: '.js-pipeline-table',
});
break;
case 'projects:pipelines:builds':
case 'projects:pipelines:show':
const { controllerAction } = document.querySelector('.js-pipeline-container').dataset;
...
...
This diff is collapsed.
Click to expand it.
app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6
0 → 100644
View file @
b1613e54
/* global Flash */
/**
* In each pipelines table we have a mini pipeline graph for each pipeline.
*
* When we click in a pipeline stage, we need to make an API call to get the
* builds list to render in a dropdown.
*
* The container should be the table element.
*
* The stage icon clicked needs to have the following HTML structure:
* <div>
* <button class="dropdown js-builds-dropdown-button"></button>
* <div class="js-builds-dropdown-container"></div>
* </div>
*/
(() => {
class MiniPipelineGraph {
constructor({ container }) {
this.container = container;
this.getBuildsList = this.getBuildsList.bind(this);
this.bindEvents();
}
/**
* Adds an removes the event listener.
* TODO: Remove jQuery when we have a way to handle events properly.
*/
bindEvents() {
$(this.container).off('click', 'button.js-builds-dropdown-button', this.getBuildsList);
$(this.container).on('click', 'button.js-builds-dropdown-button', this.getBuildsList);
}
/**
* For the clicked stage, renders the received html in the sibiling
* element with the `js-builds-dropdown-container` clas
*
* @param {Element} stageContainer
* @param {Object} data
*/
renderBuildsList(stageContainer, data) {
const dropdownContainer = stageContainer.parentElement.querySelector('.js-builds-dropdown-container');
dropdownContainer.innerHTML = data.html;
}
/**
* For the clicked stage, gets the list of builds.
*
* @param {Object} e
* @return {Promise}
*/
getBuildsList(e) {
const endpoint = e.currentTarget.dataset.stageEndpoint;
return $.ajax({
dataType: 'json',
type: 'GET',
url: endpoint,
success: data => this.renderBuildsList(e.currentTarget, data),
error: () => new Flash('An error occurred while fetching the builds.', 'alert'),
});
}
}
window.gl = window.gl || {};
window.gl.MiniPipelineGraph = MiniPipelineGraph;
})();
This diff is collapsed.
Click to expand it.
app/views/projects/ci/pipelines/_pipeline.html.haml
View file @
b1613e54
...
...
@@ -53,17 +53,13 @@
.stage-container.mini-pipeline-graph
-
if
hasMultipleBuilds
.dropdown.inline.build-content
%button
.has-tooltip.builds-dropdown
{
type:
'button'
,
data:
{
toggle:
'dropdown'
,
title:
tooltip
}
}
%button
.has-tooltip.builds-dropdown
.js-builds-dropdown-button
{
type:
'button'
,
data:
{
toggle:
'dropdown'
,
title:
tooltip
,
"stage-endpoint"
=>
stage_namespace_project_pipeline_path
(
pipeline
.
project
.
namespace
,
pipeline
.
project
,
pipeline
,
stage:
stage
.
name
)}
}
%span
{
class:
klass
}
%span
.mini-pipeline-graph-icon-container
%span
{
class:
icon_status_klass
}=
custom_icon
(
icon_status
)
=
icon
(
'caret-down'
,
class:
'dropdown-caret'
)
.dropdown-menu.grouped-pipeline-dropdown
.arrow-up
%ul
-
stage
.
statuses
.
each
do
|
status
|
%li
.dropdown-build
=
render
'ci/status/graph_badge'
,
subject:
status
%div
.js-builds-dropdown-container
-
else
-
if
detailed_status
.
has_details?
=
link_to
detailed_status
.
details_path
,
class:
klass
,
title:
tooltip
do
...
...
This diff is collapsed.
Click to expand it.
app/views/projects/commit/_pipelines_list.haml
View file @
b1613e54
...
...
@@ -4,7 +4,7 @@
.nothing-here-block
No pipelines to show
-
else
.table-holder
%table
.table.ci-table
%table
.table.ci-table
.js-pipeline-table
%thead
%th
.pipeline-status
Status
%th
.pipeline-info
Pipeline
...
...
This diff is collapsed.
Click to expand it.
app/views/projects/pipelines/_stage.html.haml
View file @
b1613e54
-
detailed_status
=
@stage
.
detailed_status
(
current_user
)
-
klass
=
"has-tooltip ci-status-icon ci-status-icon-
#{
detailed_status
}
"
-
hasMultipleBuilds
=
@stage
.
statuses
.
count
>
1
-
icon_status
=
"
#{
detailed_status
.
icon
}
_borderless"
-
icon_status_klass
=
"ci-status-icon ci-status-icon-
#{
detailed_status
}
"
-
tooltip
=
"
#{
@stage
.
name
}
:
#{
detailed_status
.
label
||
'not found'
}
"
.dropdown.inline.build-content
%button
.has-tooltip.builds-dropdown
{
type:
'button'
,
data:
{
toggle:
'dropdown'
,
title:
tooltip
}
}
%span
{
class:
klass
}
%span
.mini-pipeline-graph-icon-container
%span
{
class:
icon_status_klass
}=
custom_icon
(
icon_status
)
=
icon
(
'caret-down'
,
class:
'dropdown-caret'
)
.dropdown-menu.grouped-pipeline-dropdown
.arrow-up
%ul
-
@stage
.
statuses
.
each
do
|
status
|
%li
.dropdown-build
=
render
'ci/status/graph_badge'
,
subject:
status
This diff is collapsed.
Click to expand it.
app/views/projects/pipelines/index.html.haml
View file @
b1613e54
...
...
@@ -42,7 +42,7 @@
.nothing-here-block
No pipelines to show
-
else
.table-holder
%table
.table.ci-table
%table
.table.ci-table
.js-pipeline-table
%thead
%th
.pipeline-status
Status
%th
.pipeline-info
Pipeline
...
...
This diff is collapsed.
Click to expand it.
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