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

 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

 - 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

 - 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

-%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

 #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,20 +20,19 @@
           %i.fa.fa-warning-sign
           This build was retried.
 
-.row
-  .col-md-9
-    .build-head.alert{class: build_status_css_class(@build)}
+.gray-content-block
+  .build-head
     %h4
       - if @build.commit.tag?
         Build for tag
         %code #{@build.ref}
       - else
         Build for commit
-          %code #{@build.short_sha}
+        %strong.monospace= commit_link(@build.commit)
         from
 
         = link_to ci_project_path(@build.project, ref: @build.ref) do
-            %span.label.label-primary= "#{@build.ref}"
+          %strong.monospace= "#{@build.ref}"
 
       - if @build.duration
         .pull-right
@@ -41,12 +41,12 @@
             #{duration_in_words(@build.finished_at, @build.started_at)}
 
     .clearfix
-        = @build.status
+      = 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
-                = link_to ci_project_build_url(@project, build) do
-                  %span ##{build.id}
+                = ci_icon_for_status(build.status)
               %td
+                = 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{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

 .commit-info
+  .append-bottom-20
+    = ci_status_with_icon(@commit.status)
+
+  .gray-content-block.middle-block
     %pre.commit-message
       #{@commit.git_commit_message}
 
+  .gray-content-block.second-block
     .row
       .col-sm-6
         - if @commit.compare?
@@ -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

 - 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