diff options
author | Luke "Jared" Bennett <lbennett@gitlab.com> | 2017-01-14 18:27:50 +0300 |
---|---|---|
committer | Luke "Jared" Bennett <lbennett@gitlab.com> | 2017-02-07 20:44:04 +0300 |
commit | a0d0ffe53bff7cd849c978c12d686af0f82c2100 (patch) | |
tree | e206f5a24e247ac648397a2dfb4a7b8a2ea8f2eb /app | |
parent | 1bbc99f1c83b29f3ec8626ecebe773e7a46b1952 (diff) |
added inline pipeline graph
Added tests
review changes
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/dispatcher.js.es6 | 5 | ||||
-rw-r--r-- | app/assets/javascripts/merge_request_widget.js.es6 | 20 | ||||
-rw-r--r-- | app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6 | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/merge_requests.scss | 43 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 84 | ||||
-rw-r--r-- | app/views/projects/ci/pipelines/_pipeline.html.haml | 21 | ||||
-rw-r--r-- | app/views/projects/merge_requests/widget/_heading.html.haml | 16 | ||||
-rw-r--r-- | app/views/shared/_mini_pipeline_graph.html.haml | 18 |
8 files changed, 136 insertions, 73 deletions
diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6 index 048ceaa41f1..e1d8efe6848 100644 --- a/app/assets/javascripts/dispatcher.js.es6 +++ b/app/assets/javascripts/dispatcher.js.es6 @@ -159,6 +159,11 @@ new ZenMode(); shortcut_handler = new ShortcutsNavigation(); break; + case 'projects:commit:pipelines': + new gl.MiniPipelineGraph({ + container: '.js-pipeline-table', + }).bindEvents(); + break; case 'projects:commits:show': case 'projects:activity': shortcut_handler = new ShortcutsNavigation(); diff --git a/app/assets/javascripts/merge_request_widget.js.es6 b/app/assets/javascripts/merge_request_widget.js.es6 index 05b9a63765f..e5d2d706fc7 100644 --- a/app/assets/javascripts/merge_request_widget.js.es6 +++ b/app/assets/javascripts/merge_request_widget.js.es6 @@ -51,6 +51,8 @@ require('./smart_interval'); this.getCIStatus(false); this.retrieveSuccessIcon(); + this.initMiniPipelineGraph(); + this.ciStatusInterval = new global.SmartInterval({ callback: this.getCIStatus.bind(this, true), startingInterval: 10000, @@ -66,6 +68,7 @@ require('./smart_interval'); incrementByFactorOf: 15000, immediateExecution: true, }); + notifyPermissions(); } @@ -236,17 +239,20 @@ require('./smart_interval'); case "failed": case "canceled": case "not_found": - return this.setMergeButtonClass('btn-danger'); + this.setMergeButtonClass('btn-danger'); + break; case "running": - return this.setMergeButtonClass('btn-info'); + this.setMergeButtonClass('btn-info'); + break; case "success": case "success_with_warnings": - return this.setMergeButtonClass('btn-create'); + this.setMergeButtonClass('btn-create'); } } else { $('.ci_widget.ci-error').show(); - return this.setMergeButtonClass('btn-danger'); + this.setMergeButtonClass('btn-danger'); } + this.initMiniPipelineGraph(); }; MergeRequestWidget.prototype.showCICoverage = function(coverage) { @@ -269,6 +275,12 @@ require('./smart_interval'); $('.js-commit-link').text(`#${id}`).attr('href', [commitsUrl, id].join('/')); }; + MergeRequestWidget.prototype.initMiniPipelineGraph = function() { + new gl.MiniPipelineGraph({ + container: '.js-pipeline-inline-mr-widget-graph:visible', + }).bindEvents(); + }; + return MergeRequestWidget; })(); })(window.gl || (window.gl = {})); diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6 b/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6 index 80549532ea9..4becbc32681 100644 --- a/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6 +++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js.es6 @@ -21,8 +21,6 @@ this.container = opts.container || ''; this.dropdownListSelector = '.js-builds-dropdown-container'; this.getBuildsList = this.getBuildsList.bind(this); - - this.bindEvents(); } /** diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 0c013915a63..b01d8d695d6 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -80,6 +80,10 @@ .ci_widget { border-bottom: 1px solid $well-inner-border; color: $gl-text-color; + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + align-items: center; svg { margin-right: 4px; @@ -88,12 +92,20 @@ overflow: visible; } + &> span { + padding-right: 4px; + } + &.ci-success_with_warnings { i { color: $gl-warning; } } + + @media (max-width: $screen-xs-max) { + flex-wrap: wrap; + } } .mr-widget-body, @@ -102,6 +114,37 @@ padding: $gl-padding; } + .mr-widget-pipeline-graph { + flex-shrink: 0; + + .dropdown-menu { + margin-top: 11px; + } + + .ci-action-icon-wrapper { + line-height: 16px; + } + + @media (max-width: $screen-xs-max) { + order: 1; + margin-top: $gl-padding-top; + border-radius: 3px; + background-color: $white-light; + border: 1px solid $gray-darker; + width: 100%; + text-align: center; + + .dropdown-menu { + margin-left: -97.5px; + } + + .arrow-up::before, + .arrow-up::after, { + margin-left: 97.5px; + } + } + } + .normal { color: $gl-text-color; } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 367a468e1ba..fdc9132a988 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -183,48 +183,6 @@ } } - .stage-cell { - font-size: 0; - padding: 10px 4px; - - > .stage-container > div > button > span > svg, - > .stage-container > button > svg { - height: 22px; - width: 22px; - position: absolute; - top: -1px; - left: -1px; - z-index: 2; - overflow: visible; - } - - .stage-container { - display: inline-block; - position: relative; - height: 22px; - margin: 3px 6px 3px 0; - - .tooltip { - white-space: nowrap; - } - - .tooltip-inner { - padding: 3px 4px; - } - - &:not(:last-child) { - &::after { - content: ''; - width: 7px; - position: absolute; - right: -7px; - top: 10px; - border-bottom: 2px solid $border-color; - } - } - } - } - .duration, .finished-at { color: $gl-text-color-secondary; @@ -311,6 +269,48 @@ } } +.stage-cell { + font-size: 0; + padding: 10px 4px; + + > .stage-container > div > button > span > svg, + > .stage-container > button > svg { + height: 22px; + width: 22px; + position: absolute; + top: -1px; + left: -1px; + z-index: 2; + overflow: visible; + } + + .stage-container { + display: inline-block; + position: relative; + height: 22px; + margin: 3px 6px 3px 0; + + .tooltip { + white-space: nowrap; + } + + .tooltip-inner { + padding: 3px 4px; + } + + &:not(:last-child) { + &::after { + content: ''; + width: 7px; + position: absolute; + right: -7px; + top: 10px; + border-bottom: 2px solid $border-color; + } + } + } +} + .admin-builds-table { .ci-table td:last-child { min-width: 120px; diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml index cdab1e1b1a6..ac0fd87fd8d 100644 --- a/app/views/projects/ci/pipelines/_pipeline.html.haml +++ b/app/views/projects/ci/pipelines/_pipeline.html.haml @@ -40,25 +40,8 @@ - else Cant find HEAD commit for this branch - %td.stage-cell - - pipeline.stages.each do |stage| - - if stage.status - - detailed_status = stage.detailed_status(current_user) - - icon_status = "#{detailed_status.icon}_borderless" - - status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}" - - .stage-container.dropdown.js-mini-pipeline-graph - %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name) } } - = custom_icon(icon_status) - = icon('caret-down') - - %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container - .arrow-up - .js-builds-dropdown-list.scrollable-menu - - .js-builds-dropdown-loading.builds-dropdown-loading.hidden - %span.fa.fa-spinner.fa-spin - + %td + = render 'shared/mini_pipeline_graph', pipeline: pipeline, klass: 'js-mini-pipeline-graph' %td - if pipeline.duration diff --git a/app/views/projects/merge_requests/widget/_heading.html.haml b/app/views/projects/merge_requests/widget/_heading.html.haml index ae134563ead..bef76f16ca7 100644 --- a/app/views/projects/merge_requests/widget/_heading.html.haml +++ b/app/views/projects/merge_requests/widget/_heading.html.haml @@ -1,16 +1,20 @@ - if @pipeline .mr-widget-heading - %w[success success_with_warnings skipped canceled failed running pending].each do |status| - .ci_widget{ class: "ci-#{status} ci-status-icon-#{status}", style: ("display:none" unless @pipeline.status == status) } - = link_to namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'icon-link' do - = ci_icon_for_status(status) + .ci_widget{ class: "ci-#{status}", style: ("display:none" unless @pipeline.status == status) } + %div{ class: "ci-status-icon-#{status}" } + = link_to namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'icon-link' do + = ci_icon_for_status(status) %span Pipeline = link_to "##{@pipeline.id}", namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'pipeline' = ci_label_for_status(status) - for - = succeed "." do - = link_to @pipeline.short_sha, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, @pipeline.sha), class: "monospace js-commit-link" + .mr-widget-pipeline-graph + = render 'shared/mini_pipeline_graph', pipeline: @pipeline, klass: 'js-pipeline-inline-mr-widget-graph' + %span + for + = succeed "." do + = link_to @pipeline.short_sha, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, @pipeline.sha), class: "monospace js-commit-link" %span.ci-coverage - elsif @merge_request.has_ci? diff --git a/app/views/shared/_mini_pipeline_graph.html.haml b/app/views/shared/_mini_pipeline_graph.html.haml new file mode 100644 index 00000000000..b0778653d4e --- /dev/null +++ b/app/views/shared/_mini_pipeline_graph.html.haml @@ -0,0 +1,18 @@ +.stage-cell + - pipeline.stages.each do |stage| + - if stage.status + - detailed_status = stage.detailed_status(current_user) + - icon_status = "#{detailed_status.icon}_borderless" + - status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}" + + .stage-container.dropdown{ class: klass } + %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name) } } + = custom_icon(icon_status) + = icon('caret-down') + + %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container + .arrow-up + .js-builds-dropdown-list.scrollable-menu + + .js-builds-dropdown-loading.builds-dropdown-loading.hidden + %span.fa.fa-spinner.fa-spin |