diff --git a/CHANGELOG b/CHANGELOG
index b2693185368d37618f6f63c3a664e02ad5fef69d..d82cab6f36c0da451f6bc62451cae9108abea15d 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -28,6 +28,7 @@ v 8.2.0 (unreleased)
- New design for project graphs page
- Fix incoming email config defaults
- MR target branch is now visible on a list view when it is different from project's default one
+ - Improve Continuous Integration graphs page
v 8.1.4
- Fix bug where manually merged branches in a MR would end up with an empty diff (Stan Hu)
diff --git a/app/views/projects/graphs/ci.html.haml b/app/views/projects/graphs/ci.html.haml
index b2dfe97938ace72bcfb08afccb4a0ca3de3795af..6fa77cc10c663d2c160e74ccada3ca980b48ab45 100644
--- a/app/views/projects/graphs/ci.html.haml
+++ b/app/views/projects/graphs/ci.html.haml
@@ -1,10 +1,16 @@
- page_title "Continuous Integration", "Graphs"
= render "header_title"
= render 'head'
-.gray-content-block
- %ul.breadcrumb.repo-breadcrumb
- = commits_breadcrumbs
+.gray-content-block.append-bottom-default
+ .oneline
+ A collection of graphs for Continuous Integration
+
#charts.ci-charts
+ .row
+ .col-md-6
+ = render 'projects/graphs/ci/overall'
+ .col-md-6
+ = render 'projects/graphs/ci/build_times'
+
+ %hr
= render 'projects/graphs/ci/builds'
- = render 'projects/graphs/ci/build_times'
-= render 'projects/graphs/ci/overall'
diff --git a/app/views/projects/graphs/ci/_build_times.haml b/app/views/projects/graphs/ci/_build_times.haml
index c3c2f5724148aa6e2b4af15ad6784882e00e2b1f..c58223fd39e644c66e6d9f71e9a9dd97ab2e82fa 100644
--- a/app/views/projects/graphs/ci/_build_times.haml
+++ b/app/views/projects/graphs/ci/_build_times.haml
@@ -1,21 +1,22 @@
-%fieldset
- %legend
+%div
+ %p.light
Commit duration in minutes for last 30 commits
- %canvas#build_timesChart.padded{width: 800, height: 300}
+ %canvas#build_timesChart{height: 200}
:javascript
var data = {
labels : #{@charts[:build_times].labels.to_json},
datasets : [
{
- fillColor : "#4A3",
- strokeColor : "rgba(151,187,205,1)",
- pointColor : "rgba(151,187,205,1)",
- pointStrokeColor : "#fff",
+ fillColor : "rgba(220,220,220,0.5)",
+ strokeColor : "rgba(220,220,220,1)",
+ barStrokeWidth: 1,
+ barValueSpacing: 1,
+ barDatasetSpacing: 1,
data : #{@charts[:build_times].build_times.to_json}
}
]
}
var ctx = $("#build_timesChart").get(0).getContext("2d");
- new Chart(ctx).Line(data,{"scaleOverlay": true});
+ new Chart(ctx).Bar(data,{"scaleOverlay": true, responsive: true, maintainAspectRatio: false});
diff --git a/app/views/projects/graphs/ci/_builds.haml b/app/views/projects/graphs/ci/_builds.haml
index 1b0039fb8346e6f98e31fb438ba324ddacb35c79..8fca07114fad7d8577930924c7d4c7b955c68ee7 100644
--- a/app/views/projects/graphs/ci/_builds.haml
+++ b/app/views/projects/graphs/ci/_builds.haml
@@ -1,20 +1,30 @@
-%fieldset
- %legend
- Builds chart for last week
- (#{date_from_to(Date.today - 7.days, Date.today)})
+%h4 Build charts
+%p
+
+ %span.cgreen
+ = icon("circle")
+ success
+
+ %span.cgray
+ = icon("circle")
+ all
- %canvas#weekChart.padded{width: 800, height: 200}
+.prepend-top-default
+ %p.light
+ Builds for last week
+ (#{date_from_to(Date.today - 7.days, Date.today)})
+ %canvas#weekChart{height: 200}
-%fieldset
- %legend
- Builds chart for last month
+.prepend-top-default
+ %p.light
+ Builds for last month
(#{date_from_to(Date.today - 30.days, Date.today)})
+ %canvas#monthChart{height: 200}
- %canvas#monthChart.padded{width: 800, height: 300}
-
-%fieldset
- %legend Builds chart for last year
- %canvas#yearChart.padded{width: 800, height: 400}
+.prepend-top-default
+ %p.light
+ Builds for last year
+ %canvas#yearChart.padded{height: 250}
- [:week, :month, :year].each do |scope|
:javascript
@@ -22,20 +32,20 @@
labels : #{@charts[scope].labels.to_json},
datasets : [
{
- fillColor : "rgba(220,220,220,0.5)",
- strokeColor : "rgba(220,220,220,1)",
- pointColor : "rgba(220,220,220,1)",
+ fillColor : "#7f8fa4",
+ strokeColor : "#7f8fa4",
+ pointColor : "#7f8fa4",
pointStrokeColor : "#EEE",
data : #{@charts[scope].total.to_json}
},
{
- fillColor : "#4A3",
- strokeColor : "rgba(151,187,205,1)",
- pointColor : "rgba(151,187,205,1)",
+ fillColor : "#44aa22",
+ strokeColor : "#44aa22",
+ pointColor : "#44aa22",
pointStrokeColor : "#fff",
data : #{@charts[scope].success.to_json}
}
]
}
var ctx = $("##{scope}Chart").get(0).getContext("2d");
- new Chart(ctx).Line(data,{"scaleOverlay": true});
+ new Chart(ctx).Line(data,{"scaleOverlay": true, responsive: true, maintainAspectRatio: false});
diff --git a/app/views/projects/graphs/ci/_overall.haml b/app/views/projects/graphs/ci/_overall.haml
index 9550d71947195ba2525559360f2d0edf5fc8db3b..cf4285a2671dc0d505834e5294f0471f6c040533 100644
--- a/app/views/projects/graphs/ci/_overall.haml
+++ b/app/views/projects/graphs/ci/_overall.haml
@@ -1,22 +1,20 @@
- ci_project = @project.gitlab_ci_project
-%fieldset
- %legend Overall
- %p
+%h4 Overall stats
+%ul
+ %li
Total:
%strong= pluralize ci_project.builds.count(:all), 'build'
- %p
+ %li
Successful:
%strong= pluralize ci_project.builds.success.count(:all), 'build'
- %p
+ %li
Failed:
%strong= pluralize ci_project.builds.failed.count(:all), 'build'
-
- %p
+ %li
Success ratio:
%strong
#{success_ratio(ci_project.builds.success, ci_project.builds.failed)}%
-
- %p
+ %li
Commits covered:
%strong
= ci_project.commits.count(:all)
diff --git a/app/views/projects/graphs/commits.html.haml b/app/views/projects/graphs/commits.html.haml
index eb33da7a5bbc221035e34eb508616ce6d3245a35..fc465ab273bd96bb1d8a838af53755546f470b5d 100644
--- a/app/views/projects/graphs/commits.html.haml
+++ b/app/views/projects/graphs/commits.html.haml
@@ -2,7 +2,7 @@
= render "header_title"
= render 'head'
-.gray-content-block
+.gray-content-block.append-bottom-default
.tree-ref-holder
= render 'shared/ref_switcher', destination: 'graphs_commits'
%ul.breadcrumb.repo-breadcrumb
diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml
index 9e1feadeb26eb706c72c00bc116bd31f170866a4..882e7d6b6ee42c320cd529563af8a845d15215e4 100644
--- a/app/views/projects/graphs/show.html.haml
+++ b/app/views/projects/graphs/show.html.haml
@@ -2,7 +2,7 @@
= render "header_title"
= render 'head'
-.gray-content-block
+.gray-content-block.append-bottom-default
.tree-ref-holder
= render 'shared/ref_switcher', destination: 'graphs'
%ul.breadcrumb.repo-breadcrumb
diff --git a/features/steps/project/graph.rb b/features/steps/project/graph.rb
index 4abd5288d51de108d9467bafed76fa1ddb2de36f..98f31f3b76a194d854087e70264c45910dc5f24f 100644
--- a/features/steps/project/graph.rb
+++ b/features/steps/project/graph.rb
@@ -25,9 +25,9 @@ class Spinach::Features::ProjectGraph < Spinach::FeatureSteps
step 'page should have CI graphs' do
expect(page).to have_content 'Overall'
- expect(page).to have_content 'Builds chart for last week'
- expect(page).to have_content 'Builds chart for last month'
- expect(page).to have_content 'Builds chart for last year'
+ expect(page).to have_content 'Builds for last week'
+ expect(page).to have_content 'Builds for last month'
+ expect(page).to have_content 'Builds for last year'
expect(page).to have_content 'Commit duration in minutes for last 30 commits'
end
diff --git a/lib/ci/charts.rb b/lib/ci/charts.rb
index 915a4f526a6f4a334ec107a89a188ca5fd7383fc..5ff7407c6fe7775244b9bf85d8c0e59c47e234c4 100644
--- a/lib/ci/charts.rb
+++ b/lib/ci/charts.rb
@@ -60,7 +60,8 @@ module Ci
class BuildTime < Chart
def collect
- commits = project.commits.joins(:builds).where("#{Ci::Build.table_name}.finished_at is NOT NULL AND #{Ci::Build.table_name}.started_at is NOT NULL").last(30)
+ commits = project.commits.last(30)
+
commits.each do |commit|
@labels << commit.short_sha
@build_times << (commit.duration / 60)