Adds actions to the nodes

Improve CSS for dropdown actions

app/assets/stylesheets/framework/variables.scss

@@ -577,4 +577,4 @@ Pipeline Graph
 */
 $stage-hover-bg: #eaf3fc;
 $stage-hover-border: #d1e7fc;
-$stage-bagde-text: #d4d4d4;
+$stage-badge-text: #d4d4d4;

app/assets/stylesheets/pages/pipelines.scss

@@ -463,19 +463,6 @@
     width: 186px;
     margin-bottom: 10px;
 
-    &.playable {
-      svg {
-        height: 13px;
-        width: 20px;
-        position: relative;
-        top: 1px;
-
-        path {
-          fill: $layout-link-gray;
-        }
-      }
-    }
-
     &:hover {
       background-color: $stage-hover-bg;
       border: 1px solid $stage-hover-border;
@@ -607,15 +594,15 @@
     &:hover {
       color: $gl-text-color;
 
-      .dropdown-counter-bagde {
+      .dropdown-counter-badge {
         color: $gl-text-color;
       }
     }
   }
 
-  .dropdown-counter-bagde {
+  .dropdown-counter-badge {
     float: right;
-    color: $stage-bagde-text;
+    color: $stage-badge-text;
     font-weight: 100;
     font-size: 13px;
     margin-top: 1px;
@@ -630,27 +617,49 @@
     top: -11px;
     box-shadow: 0 1px 5px $black-transparent;
 
+    a {
+      display: inline-block;
+
+      &:hover {
+        background-color: $stage-hover-bg;
+      }
+    }
+
     ul {
       max-height: 245px;
       overflow: auto;
 
       li {
-        padding-top: 1px;
-        padding-bottom: 1px;
+        padding-top: 2px;
+        margin: 0 5px;
       }
 
       li:first-child {
-        padding-top: 9px;
+        padding-top: 6px;
       }
 
       li:last-child {
-        padding-bottom: 9px;
+        padding-bottom: 6px;
       }
     }
 
-    a {
+    .dropdown-build {
       color: $gl-text-color-light;
+
+      a {
         padding: 7px 8px 8px;
+      }
+
+      a.ci-action-icon-container {
+        padding: 0;
+        font-size: 11px;
+        float: right;
+        margin-top: 5px;
+
+        i {
+          font-size: 11px;
+        }
+      }
 
       &:hover {
         background-color: $stage-hover-bg;
@@ -665,3 +674,34 @@
     }
   }
 }
+
+// Action Icons
+.ci-action-icon-container {
+  padding: 0;
+
+  .ci-action-icon-wrapper {
+    display: inline-block;
+    float: right;
+
+    i {
+      color: $stage-badge-text;
+      border-radius: 100%;
+      border: 1px solid $stage-badge-text;
+      text-align: center;
+      display: table-cell;
+      vertical-align: middle;
+      padding: 5px;
+      font-size: 13px;
+
+      &:hover {
+        color: $gl-text-color;
+        background-color: $stage-hover-bg;
+        border: 1px solid $gl-text-color;
+      }
+    }
+
+    .ci-play-icon {
+      padding: 5px 4px 5px 7px;
+    }
+  }
+}

app/views/projects/ci/builds/_build_pipeline.html.haml

 - is_playable = subject.playable? && can?(current_user, :update_build, @project)
+- can_cancel = subject.active? && can?(current_user, :update_build, @project)
+- can_retry = subject.retryable? && can?(current_user, :update_build, @project)
+- can_stop = subject.complete? && subject.stops_environment? && can?(current_user, :update_build, @project)
+
 - if can?(current_user, :read_build, @project)
   = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject), data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } do
     %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
       = ci_icon_for_status(subject.status)
     .ci-status-text= subject.name
+
+  - if is_playable
+    = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: "#{subject.name} - Play", class: 'ci-action-icon-container' do
+      %i.ci-action-icon-wrapper
+        = icon('play', class: 'ci-play-icon')
+  - elsif can_cancel
+    = link_to cancel_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: "#{subject.name} - Cancel", class: 'ci-action-icon-container' do
+      %i.ci-action-icon-wrapper
+        = icon('ban')
+  - elsif can_retry
+    = link_to retry_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: "#{subject.name} - Retry", class: 'ci-action-icon-container' do
+      %i.ci-action-icon-wrapper
+        = icon('refresh')
+  - elsif can_stop
+    = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: "#{subject.name} - Stop", class: 'ci-action-icon-container' do
+      %i.ci-action-icon-wrapper
+        = icon('stop')
+
 - else
   %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
     = ci_icon_for_status(subject.status)

app/views/projects/commit/_pipeline_status_group.html.haml

@@ -9,5 +9,5 @@
   .arrow
   %ul
     - subject.each do |status|
-      %li
+      %li.dropdown-build
         = render "projects/#{status.to_partial_path}_pipeline", subject: status