Cleanup GitLab CI UI

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/ci/projects.scss

@@ -13,48 +13,6 @@
 
   .builds,
   .projects-table {
-    .build-danger {
-      .ci-status {
-        color: $gl-danger;
-        border-color: $gl-danger;
-      }
-    }
-
-    .build-success {
-      .ci-status {
-        color: $gl-success;
-        border-color: $gl-success;
-      }
-    }
-
-    .build-info {
-      .ci-status {
-        color: $gl-info;
-        border-color: $gl-info;
-      }
-    }
-
-    .build-disabled {
-      .ci-status {
-        color: $gl-gray;
-        border-color: $gl-gray;
-      }
-    }
-
-    .build-warning {
-      .ci-status {
-        color: $gl-warning;
-        border-color: $gl-warning;
-      }
-    }
-
-    .ci-status {
-      padding: 2px 5px;
-      margin-right: 5px;
-      border: 1px solid #EEE;
-      @include border-radius(4px);
-    }
-
     .light {
       border-color: $border-color;
     }
@@ -75,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;
     }
   }
@@ -105,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/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_css_class(build)
-      if build.success?
-        'build-success'
-      elsif build.failed?
-        'build-danger'
-      elsif build.canceled?
-        'build-disabled'
-      else
-        'build-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

@@ -1,20 +1,5 @@
 module Ci
   module CommitsHelper
-    def commit_status_css_class(commit)
-      return 'build-info' unless commit
-
-      case commit.status
-      when 'success'
-        'build-success'
-      when 'failed', 'canceled'
-        'build-danger'
-      when 'skipped'
-        'build-disabled'
-      else
-        'build-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

@@ -1,11 +1,11 @@
 - if build.commit && build.project
-  %tr.build{class: build_status_css_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

@@ -1,5 +1,5 @@
 - last_commit = project.last_commit
-%tr{class: commit_status_css_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_css_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

@@ -1,7 +1,6 @@
-%tr.build{class: build_status_css_class(build)}
+%tr.build
   %td.status
-    %span.ci-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

@@ -1,15 +1,16 @@
 #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_css_class(@build)}
-      %h4
-        - if @build.commit.tag?
-          Build for tag
-          %code #{@build.ref}
-        - else
-          Build for commit
-          %code #{@build.short_sha}
-          from
+.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
 
-          = link_to ci_project_path(@build.project, ref: @build.ref) do
-            %span.label.label-primary= "#{@build.ref}"
+        = 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
-        = @build.status
+      - if @build.duration
         .pull-right
-          = @build.updated_at.stamp('19:00 Aug 27')
-
+          %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_css_class(build)}
+            %tr.build
+              %td
+                = ci_icon_for_status(build.status)
               %td
                 = link_to ci_project_build_url(@project, build) do
-                  %span ##{build.id}
-              %td
-                - if build.name
-                  = build.name
+                  - if build.name
+                    = build.name
+                  - else
+                    %span ##{build.id}
+
               %td.status= build.status
 
 

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

@@ -1,7 +1,6 @@
-%tr.build{class: commit_status_css_class(commit)}
+%tr.build
   %td.status
-    %span.ci-status<
-      = commit.status
+    = ci_status_with_icon(commit.status)
     - if commit.running?
       &middot;
       = commit.stage

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

@@ -1,29 +1,34 @@
 .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{class: commit_status_css_class(@commit)}
-  .ci-status
-    = @commit.status.titleize
-
 %h3
   Builds
   - if @commit.duration > 0

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

@@ -1,14 +1,13 @@
 - if project.gitlab_ci_project
   - ci_project = project.gitlab_ci_project
   - last_commit = ci_project.last_commit
-  %tr{class: commit_status_css_class(last_commit) }
+  %tr
     %td
       = link_to [:ci, ci_project] do
         = ci_project.name
     %td
       - if last_commit
-        %span.ci-status<
-          = last_commit.status
+        = ci_status_with_icon(last_commit.status)
         = commit_link(last_commit)
         &middot;
         - if ci_project.last_commit_date