Merge branch 'ci-build-list' into 'master'

Style CI project/build list

* return `bs-callout` css class to fix few UI issues
* refactor build status helpers
* style CI project page (#2545)
* style build page by re-using existing UI components
* style CI commit page  by re-using existing UI components
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

See merge request !1339

app/assets/stylesheets/ci/projects.scss

@@ -13,31 +13,6 @@
 
   .builds,
   .projects-table {
-    .alert-success {
-      background-color: #6fc995;
-      border-color: #5bba83;
-    }
-
-    .alert-danger {
-      background-color: #eb897f;
-      border-color: #d4776e;
-    }
-
-    .alert-info {
-      background-color: #3498db;
-      border-color: #2e8ece;
-    }
-
-    .alert-warning {
-      background-color: #EB974E;
-      border-color: #E87E04;
-    }
-
-    .alert-disabled {
-      background: $background-color;
-      border-color: $border-color;
-    }
-
     .light {
       border-color: $border-color;
     }
@@ -47,8 +22,8 @@
     }
 
     td {
+      color: $gl-gray;
       vertical-align: middle !important;
-      border-color: inherit !important;
 
       a {
         font-weight: normal;
@@ -58,23 +33,16 @@
   }
 
   .commit-info {
-    font-size: 14px;
-
     .attr-name {
-      font-weight: 300;
-      color: #666;
       margin-right: 5px;
     }
 
     pre.commit-message {
-      font-size: 14px;
       background: none;
       padding: 0;
       margin: 0;
       border: none;
       margin: 20px 0;
-      border-bottom: 1px solid #EEE;
-      padding-bottom: 20px;
       border-radius: 0;
     }
   }
@@ -88,4 +56,38 @@
       margin-bottom: 16px;
     }
   }
+
+  .ci-status {
+    padding: 2px 7px;
+    margin-right: 5px;
+    border: 1px solid #EEE;
+    white-space: nowrap;
+    @include border-radius(4px);
+
+    &.ci-failed {
+      color: $gl-danger;
+      border-color: $gl-danger;
+    }
+
+    &.ci-success {
+      color: $gl-success;
+      border-color: $gl-success;
+    }
+
+    &.ci-info {
+      color: $gl-info;
+      border-color: $gl-info;
+    }
+
+    &.ci-disabled {
+      color: $gl-gray;
+      border-color: $gl-gray;
+    }
+
+    &.ci-pending,
+    &.ci-running {
+      color: $gl-warning;
+      border-color: $gl-warning;
+    }
+  }
 }

app/assets/stylesheets/generic/callout.scss

+/*
+ * Callouts from Bootstrap3 docs
+ *
+ * Not quite alerts, but custom and helpful notes for folks reading the docs.
+ * Requires a base and modifier class.
+ */
+
+/* Common styles for all types */
+.bs-callout {
+  margin: 20px 0;
+  padding: 20px;
+  border-left: 3px solid #eee;
+  color: #666;
+  background: #f9f9f9;
+}
+.bs-callout h4 {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.bs-callout p:last-child {
+  margin-bottom: 0;
+}
+
+/* Variations */
+.bs-callout-danger {
+  background-color: #fdf7f7;
+  border-color: #eed3d7;
+  color: #b94a48;
+}
+.bs-callout-warning {
+  background-color: #faf8f0;
+  border-color: #faebcc;
+  color: #8a6d3b;
+}
+.bs-callout-info {
+  background-color: #f4f8fa;
+  border-color: #bce8f1;
+  color: #34789a;
+}
+.bs-callout-success {
+  background-color: #dff0d8;
+  border-color: #5cA64d;
+  color: #3c763d;
+}
+

app/helpers/ci/application_helper.rb

@@ -28,5 +28,27 @@ module Ci
         "#{pluralize(seconds, "second")}"
       end
     end
+
+    def ci_icon_for_status(status)
+      icon_name =
+        case status
+        when 'success'
+          'check-square'
+        when 'failed'
+          'close'
+        when 'running', 'pending'
+          'clock-o'
+        else
+          'circle'
+        end
+
+      icon(icon_name)
+    end
+
+    def ci_status_with_icon(status)
+      content_tag :span, class: "ci-status ci-#{status}" do
+        ci_icon_for_status(status) + ' '.html_safe + status
+      end
+    end
   end
 end

app/helpers/ci/builds_helper.rb

@@ -15,27 +15,5 @@ module Ci
     def build_url(build)
       ci_project_build_url(build.project, build)
     end
-
-    def build_status_alert_class(build)
-      if build.success?
-        'alert-success'
-      elsif build.failed?
-        'alert-danger'
-      elsif build.canceled?
-        'alert-disabled'
-      else
-        'alert-warning'
-      end
-    end
-
-    def build_icon_css_class(build)
-      if build.success?
-        'fa-circle cgreen'
-      elsif build.failed?
-        'fa-circle cred'
-      else
-        'fa-circle light'
-      end
-    end
   end
 end

app/helpers/ci/commits_helper.rb

 module Ci
   module CommitsHelper
-    def commit_status_alert_class(commit)
-      return 'alert-info' unless commit
-
-      case commit.status
-      when 'success'
-        'alert-success'
-      when 'failed', 'canceled'
-        'alert-danger'
-      when 'skipped'
-        'alert-disabled'
-      else
-        'alert-warning'
-      end
-    end
-
     def ci_commit_path(commit)
       ci_project_ref_commits_path(commit.project, commit.ref, commit.sha)
     end

app/views/ci/admin/builds/_build.html.haml

 - if build.commit && build.project
-  %tr.build.alert{class: build_status_alert_class(build)}
+  %tr.build
     %td.build-link
       = link_to ci_project_build_url(build.project, build) do
         %strong #{build.id}
 
     %td.status
-      = build.status
+      = ci_status_with_icon(build.status)
 
     %td.commit-link
       = commit_link(build.commit)

app/views/ci/admin/projects/_project.html.haml

 - last_commit = project.last_commit
-%tr.alert{class: commit_status_alert_class(last_commit) }
+%tr
   %td
     = project.id
   %td
@@ -7,8 +7,9 @@
       %strong= project.name
   %td
     - if last_commit
-      #{last_commit.status} (#{commit_link(last_commit)})
+      = ci_status_with_icon(last_commit.status)
       - if project.last_commit_date
+        ·
         = time_ago_in_words project.last_commit_date
         ago
     - else

app/views/ci/admin/runners/show.html.haml

@@ -102,9 +102,9 @@
           %th Finished at
 
       - @builds.each do |build|
-        %tr.build.alert{class: build_status_alert_class(build)}
+        %tr.build
           %td.status
-            = build.status
+            = ci_status_with_icon(build.status)
 
           %td.status
             = build.project.name

app/views/ci/builds/_build.html.haml

-%tr.build.alert{class: build_status_alert_class(build)}
+%tr.build
   %td.status
-    = build.status
+    = ci_status_with_icon(build.status)
 
   %td.build-link
     = link_to ci_project_build_path(build.project, build) do

app/views/ci/builds/show.html.haml

 #up-build-trace
 - if @commit.matrix?
-  %ul.nav.nav-tabs.append-bottom-10
+  %ul.center-top-menu
     - @commit.builds_without_retry_sorted.each do |build|
       %li{class: ('active' if build == @build) }
         = link_to ci_project_build_url(@project, build) do
-          %i{class: build_icon_css_class(build)}
+          = ci_icon_for_status(build.status)
           %span
-            Build ##{build.id}
             - if build.name
-              ·
               = build.name
+            - else
+              = build.id
+
 
     - unless @commit.builds_without_retry.include?(@build)
       %li.active
@@ -19,34 +20,33 @@
           %i.fa.fa-warning-sign
           This build was retried.
 
-.row
-  .col-md-9
-    .build-head.alert{class: build_status_alert_class(@build)}
-      %h4
-        - if @build.commit.tag?
-          Build for tag
-          %code #{@build.ref}
-        - else
-          Build for commit
-          %code #{@build.short_sha}
-          from
-
-          = link_to ci_project_path(@build.project, ref: @build.ref) do
-            %span.label.label-primary= "#{@build.ref}"
-
-        - if @build.duration
-          .pull-right
-            %span
-              %i.fa.fa-time
-              #{duration_in_words(@build.finished_at, @build.started_at)}
+.gray-content-block
+  .build-head
+    %h4
+      - if @build.commit.tag?
+        Build for tag
+        %code #{@build.ref}
+      - else
+        Build for commit
+        %strong.monospace= commit_link(@build.commit)
+        from
 
-      .clearfix
-        = @build.status
-        .pull-right
-          = @build.updated_at.stamp('19:00 Aug 27')
+        = link_to ci_project_path(@build.project, ref: @build.ref) do
+          %strong.monospace= "#{@build.ref}"
 
+      - if @build.duration
+        .pull-right
+          %span
+            %i.fa.fa-time
+            #{duration_in_words(@build.finished_at, @build.started_at)}
 
+    .clearfix
+      = ci_status_with_icon(@build.status)
+      .pull-right
+        = @build.updated_at.stamp('19:00 Aug 27')
 
+.row.prepend-top-default
+  .col-md-9
     .clearfix
       - if @build.active?
         .autoscroll-container
@@ -150,13 +150,16 @@
         %h4.title #{pluralize(@builds.count, "other build")} for #{@build.short_sha}:
         %table.builds
           - @builds.each_with_index do |build, i|
-            %tr.build.alert{class: build_status_alert_class(build)}
+            %tr.build
               %td
-                = link_to ci_project_build_url(@project, build) do
-                  %span ##{build.id}
+                = ci_icon_for_status(build.status)
               %td
-                - if build.name
-                  = build.name
+                = link_to ci_project_build_url(@project, build) do
+                  - if build.name
+                    = build.name
+                  - else
+                    %span ##{build.id}
+
               %td.status= build.status
 
 

app/views/ci/commits/_commit.html.haml

-%tr.build.alert{class: commit_status_alert_class(commit)}
+%tr.build
   %td.status
-    = commit.status
+    = ci_status_with_icon(commit.status)
     - if commit.running?
       ·
       = commit.stage

app/views/ci/commits/show.html.haml

 .commit-info
-  %pre.commit-message
-    #{@commit.git_commit_message}
+  .append-bottom-20
+    = ci_status_with_icon(@commit.status)
 
-  .row
-    .col-sm-6
-      - if @commit.compare?
-        %p
-          %span.attr-name Compare:
-          #{gitlab_compare_link(@project, @commit.short_before_sha, @commit.short_sha)}
-      - else
-        %p
-          %span.attr-name Commit:
-          #{gitlab_commit_link(@project, @commit.sha)}
+  .gray-content-block.middle-block
+    %pre.commit-message
+      #{@commit.git_commit_message}
+
+  .gray-content-block.second-block
+    .row
+      .col-sm-6
+        - if @commit.compare?
+          %p
+            %span.attr-name Compare:
+            #{gitlab_compare_link(@project, @commit.short_before_sha, @commit.short_sha)}
+        - else
+          %p
+            %span.attr-name Commit:
+            #{gitlab_commit_link(@project, @commit.sha)}
 
-      %p
-        %span.attr-name Branch:
-        #{gitlab_ref_link(@project, @commit.ref)}
-    .col-sm-6
-      %p
-        %span.attr-name Author:
-        #{@commit.git_author_name} (#{@commit.git_author_email})
-      - if @commit.created_at
         %p
-          %span.attr-name Created at:
-          #{@commit.created_at.to_s(:short)}
+          %span.attr-name Branch:
+          #{gitlab_ref_link(@project, @commit.ref)}
+      .col-sm-6
+        %p
+          %span.attr-name Author:
+          #{@commit.git_author_name} (#{@commit.git_author_email})
+        - if @commit.created_at
+          %p
+            %span.attr-name Created at:
+            #{@commit.created_at.to_s(:short)}
 
 - if current_user && can?(current_user, :manage_builds, gl_project)
   .pull-right
@@ -42,12 +47,6 @@
   .bs-callout.bs-callout-warning
     \.gitlab-ci.yml not found in this commit
 
-%h3 Status
-
-.build.alert{class: commit_status_alert_class(@commit)}
-  .status
-    = @commit.status.titleize
-
 %h3
   Builds
   - if @commit.duration > 0

app/views/ci/projects/_project.html.haml

 - if project.gitlab_ci_project
   - ci_project = project.gitlab_ci_project
   - last_commit = ci_project.last_commit
-  %tr.alert{class: commit_status_alert_class(last_commit) }
+  %tr
     %td
       = link_to [:ci, ci_project] do
         = ci_project.name
     %td
       - if last_commit
-        #{last_commit.status} (#{commit_link(last_commit)})
+        = ci_status_with_icon(last_commit.status)
+        = commit_link(last_commit)
+        ·
         - if ci_project.last_commit_date
           = time_ago_in_words ci_project.last_commit_date
           ago
@@ -33,4 +35,3 @@
       = form_tag ci_projects_path do
         = hidden_field_tag :project, project.to_json(methods: [:name_with_namespace, :path_with_namespace, :ssh_url_to_repo])
         = submit_tag 'Add project to CI', class: 'btn btn-default btn-sm'
-    
\ No newline at end of file