diff options
-rw-r--r-- | app/assets/javascripts/dispatcher.js.es6 | 15 | ||||
-rw-r--r-- | app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6 | 69 | ||||
-rw-r--r-- | app/views/projects/ci/pipelines/_pipeline.html.haml | 10 | ||||
-rw-r--r-- | app/views/projects/commit/_pipelines_list.haml | 2 | ||||
-rw-r--r-- | app/views/projects/pipelines/_stage.html.haml | 19 | ||||
-rw-r--r-- | app/views/projects/pipelines/index.html.haml | 2 |
6 files changed, 95 insertions, 22 deletions
diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 1e259a16f06..752f35e6356 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -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; diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6 b/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6 new file mode 100644 index 00000000000..ce24cbdb705 --- /dev/null +++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6 @@ -0,0 +1,69 @@ +/* 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; +})(); diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml index 74ad9557130..d488eeda2fe 100644 --- a/app/views/projects/ci/pipelines/_pipeline.html.haml +++ b/app/views/projects/ci/pipelines/_pipeline.html.haml @@ -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 diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml index 0c2f45c6035..5a9f7295135 100644 --- a/app/views/projects/commit/_pipelines_list.haml +++ b/app/views/projects/commit/_pipelines_list.haml @@ -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 diff --git a/app/views/projects/pipelines/_stage.html.haml b/app/views/projects/pipelines/_stage.html.haml index 44533b77eba..83fd518726d 100644 --- a/app/views/projects/pipelines/_stage.html.haml +++ b/app/views/projects/pipelines/_stage.html.haml @@ -1,13 +1,6 @@ -- 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 diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml index 4d009871f0d..28026ccf861 100644 --- a/app/views/projects/pipelines/index.html.haml +++ b/app/views/projects/pipelines/index.html.haml @@ -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 |