Improve Continuous Integration graphs page

* fix commit duration graph
* make graphs responsive
* fix wrong padding
* add a bit of explanation to colors

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
This commit is contained in:
Dmitriy Zaporozhets 2015-11-10 11:49:38 +01:00
parent 354b69dde2
commit 1b7a2fc536
No known key found for this signature in database
GPG key ID: 627C5F589F467F17
7 changed files with 60 additions and 44 deletions

View file

@ -1,10 +1,16 @@
- page_title "Continuous Integration", "Graphs" - page_title "Continuous Integration", "Graphs"
= render "header_title" = render "header_title"
= render 'head' = render 'head'
.gray-content-block .gray-content-block.append-bottom-default
%ul.breadcrumb.repo-breadcrumb .oneline
= commits_breadcrumbs A collection of graphs for Continuous Integration
#charts.ci-charts #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/builds'
= render 'projects/graphs/ci/build_times'
= render 'projects/graphs/ci/overall'

View file

@ -1,21 +1,22 @@
%fieldset %div
%legend %p.light
Commit duration in minutes for last 30 commits Commit duration in minutes for last 30 commits
%canvas#build_timesChart.padded{width: 800, height: 300} %canvas#build_timesChart{height: 200}
:javascript :javascript
var data = { var data = {
labels : #{@charts[:build_times].labels.to_json}, labels : #{@charts[:build_times].labels.to_json},
datasets : [ datasets : [
{ {
fillColor : "#4A3", fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(151,187,205,1)", strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(151,187,205,1)", barStrokeWidth: 1,
pointStrokeColor : "#fff", barValueSpacing: 1,
barDatasetSpacing: 1,
data : #{@charts[:build_times].build_times.to_json} data : #{@charts[:build_times].build_times.to_json}
} }
] ]
} }
var ctx = $("#build_timesChart").get(0).getContext("2d"); 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});

View file

@ -1,20 +1,30 @@
%fieldset %h4 Build charts
%legend %p
Builds chart for last week &nbsp;
%span.cgreen
= icon("circle")
success
&nbsp;
%span.cgray
= icon("circle")
all
.prepend-top-default
%p.light
Builds for last week
(#{date_from_to(Date.today - 7.days, Date.today)}) (#{date_from_to(Date.today - 7.days, Date.today)})
%canvas#weekChart{height: 200}
%canvas#weekChart.padded{width: 800, height: 200} .prepend-top-default
%p.light
%fieldset
%legend
Builds chart for last month Builds chart for last month
(#{date_from_to(Date.today - 30.days, Date.today)}) (#{date_from_to(Date.today - 30.days, Date.today)})
%canvas#monthChart{height: 200}
%canvas#monthChart.padded{width: 800, height: 300} .prepend-top-default
%p.light
%fieldset Builds chart for last year
%legend Builds chart for last year %canvas#yearChart.padded{height: 250}
%canvas#yearChart.padded{width: 800, height: 400}
- [:week, :month, :year].each do |scope| - [:week, :month, :year].each do |scope|
:javascript :javascript
@ -22,20 +32,20 @@
labels : #{@charts[scope].labels.to_json}, labels : #{@charts[scope].labels.to_json},
datasets : [ datasets : [
{ {
fillColor : "rgba(220,220,220,0.5)", fillColor : "#7f8fa4",
strokeColor : "rgba(220,220,220,1)", strokeColor : "#7f8fa4",
pointColor : "rgba(220,220,220,1)", pointColor : "#7f8fa4",
pointStrokeColor : "#EEE", pointStrokeColor : "#EEE",
data : #{@charts[scope].total.to_json} data : #{@charts[scope].total.to_json}
}, },
{ {
fillColor : "#4A3", fillColor : "#44aa22",
strokeColor : "rgba(151,187,205,1)", strokeColor : "#44aa22",
pointColor : "rgba(151,187,205,1)", pointColor : "#44aa22",
pointStrokeColor : "#fff", pointStrokeColor : "#fff",
data : #{@charts[scope].success.to_json} data : #{@charts[scope].success.to_json}
} }
] ]
} }
var ctx = $("##{scope}Chart").get(0).getContext("2d"); 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});

View file

@ -1,22 +1,20 @@
- ci_project = @project.gitlab_ci_project - ci_project = @project.gitlab_ci_project
%fieldset %h4 Overall stats
%legend Overall %ul
%p %li
Total: Total:
%strong= pluralize ci_project.builds.count(:all), 'build' %strong= pluralize ci_project.builds.count(:all), 'build'
%p %li
Successful: Successful:
%strong= pluralize ci_project.builds.success.count(:all), 'build' %strong= pluralize ci_project.builds.success.count(:all), 'build'
%p %li
Failed: Failed:
%strong= pluralize ci_project.builds.failed.count(:all), 'build' %strong= pluralize ci_project.builds.failed.count(:all), 'build'
%li
%p
Success ratio: Success ratio:
%strong %strong
#{success_ratio(ci_project.builds.success, ci_project.builds.failed)}% #{success_ratio(ci_project.builds.success, ci_project.builds.failed)}%
%li
%p
Commits covered: Commits covered:
%strong %strong
= ci_project.commits.count(:all) = ci_project.commits.count(:all)

View file

@ -2,7 +2,7 @@
= render "header_title" = render "header_title"
= render 'head' = render 'head'
.gray-content-block .gray-content-block.append-bottom-default
.tree-ref-holder .tree-ref-holder
= render 'shared/ref_switcher', destination: 'graphs_commits' = render 'shared/ref_switcher', destination: 'graphs_commits'
%ul.breadcrumb.repo-breadcrumb %ul.breadcrumb.repo-breadcrumb

View file

@ -2,7 +2,7 @@
= render "header_title" = render "header_title"
= render 'head' = render 'head'
.gray-content-block .gray-content-block.append-bottom-default
.tree-ref-holder .tree-ref-holder
= render 'shared/ref_switcher', destination: 'graphs' = render 'shared/ref_switcher', destination: 'graphs'
%ul.breadcrumb.repo-breadcrumb %ul.breadcrumb.repo-breadcrumb

View file

@ -60,7 +60,8 @@ module Ci
class BuildTime < Chart class BuildTime < Chart
def collect 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| commits.each do |commit|
@labels << commit.short_sha @labels << commit.short_sha
@build_times << (commit.duration / 60) @build_times << (commit.duration / 60)