diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 11adf2568a1..889366d6ddf 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -98,7 +98,7 @@
   @extend .dropdown-toggle;
   padding-right: 20px;
   position: relative;
-  width: 160px;
+  width: 163px;
   text-overflow: ellipsis;
   overflow: hidden;
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 9a4685504ff..267fcd77b38 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -524,3 +524,9 @@ $body-text-shadow: rgba(255,255,255,0.01);
 */
 $ui-dev-kit-example-color: #bbb;
 $ui-dev-kit-example-border: #ddd;
+
+/*
+Pipeline Graph
+*/
+$stage-hover-bg: #eaf3fc;
+$stage-hover-border: #d1e7fc;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index d5f9a7088be..be22e7bdc79 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -288,15 +288,40 @@
 }
 
 // Pipeline visualization
+.pipeline-actions {
+  border-bottom: none;
+}
 
-.toggle-pipeline-btn {
-  background-color: $white-normal;
+.tab-pane {
+  &.pipelines {
+    .ci-table {
+      min-width: 900px;
+    }
 
-  &.graph-collapsed {
-    background-color: $white-light;
+    .content-list.pipelines {
+      overflow: auto;
+    }
+
+    .stage {
+      max-width: 100px;
+      width: 100px;
+    }
+
+    .pipeline-actions {
+      min-width: initial;
+    }
+  }
+
+  &.builds {
+    .ci-table {
+      tr {
+        height: 71px;
+      }
+    }
   }
 }
 
+// Pipeline graph
 .pipeline-graph {
   width: 100%;
   background-color: $gray-light;
@@ -305,52 +330,120 @@
   white-space: nowrap;
   transition: max-height 0.3s, padding 0.3s;
 
-  &.graph-collapsed {
-    max-height: 0;
-    padding: 0 16px;
-  }
-}
-
-.pipeline-visualization {
-  position: relative;
-
   ul {
     padding: 0;
   }
-}
 
-.stage-column {
-  display: inline-block;
-  vertical-align: top;
-
-  &:not(:last-child) {
-    margin-right: 44px;
+  a {
+    text-decoration: none;
+    color: $gl-text-color-light;
   }
 
-  &.left-margin {
-    &:not(:first-child) {
-      margin-left: 44px;
+  svg {
+    vertical-align: middle;
+    margin-right: 3px;
+  }
 
-      .left-connector {
-        &::before {
-          content: '';
-          position: absolute;
-          top: 48%;
-          left: -48px;
-          border-top: 2px solid $border-color;
-          width: 48px;
-          height: 1px;
+  .stage-column {
+    display: inline-block;
+    vertical-align: top;
+
+    &:not(:last-child) {
+      margin-right: 44px;
+    }
+
+    &.left-margin {
+      &:not(:first-child) {
+        margin-left: 44px;
+
+        .left-connector {
+          &::before {
+            content: '';
+            position: absolute;
+            top: 48%;
+            left: -48px;
+            border-top: 2px solid $border-color;
+            width: 48px;
+            height: 1px;
+          }
         }
       }
     }
-  }
 
-  &.no-margin {
-    margin: 0;
-  }
+    &.no-margin {
+      margin: 0;
+    }
 
-  li {
-    list-style: none;
+    li {
+      list-style: none;
+    }
+
+    &:last-child {
+      .build {
+        // Remove right connecting horizontal line from first build in last stage
+        &:first-child {
+          &::after {
+            border: none;
+          }
+        }
+        // Remove right curved connectors from all builds in last stage
+        &:not(:first-child) {
+          &::after {
+            border: none;
+          }
+        }
+        // Remove opposite curve
+        .curve {
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &:first-child {
+      .build {
+        // Remove left curved connectors from all builds in first stage
+        &:not(:first-child) {
+          &::before {
+            border: none;
+          }
+        }
+        // Remove opposite curve
+        .curve {
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+
+    // Curve first child connecting lines in opposite direction
+    .curve {
+      display: none;
+
+      &::before,
+      &::after {
+        content: '';
+        width: 21px;
+        height: 25px;
+        position: absolute;
+        top: -32px;
+        border-top: 2px solid $border-color;
+      }
+
+      &::after {
+        left: -44px;
+        border-right: 2px solid $border-color;
+        border-radius: 0 20px;
+      }
+
+      &::before {
+        right: -44px;
+        border-left: 2px solid $border-color;
+        border-radius: 20px 0 0;
+      }
+    }
   }
 
   .stage-name {
@@ -364,166 +457,69 @@
 
   .build {
     border: 1px solid $border-color;
+    border-radius: 30px;
     background-color: $white-light;
     position: relative;
-    padding: 7px 10px 8px;
-    border-radius: 30px;
+    padding: 8px 4px 9px 10px;
     width: 186px;
     margin-bottom: 10px;
+    white-space: normal;
 
     &:hover {
-      background-color: $gray-lighter;
-    }
-
-    &.playable {
-
-      svg {
-        height: 13px;
-        width: 20px;
-        position: relative;
-        top: 1px;
-
-        path {
-          fill: $layout-link-gray;
-        }
-      }
-    }
-
-    .build-content {
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-      width: 164px;
-
-      .ci-status-icon {
-        svg {
-          height: 20px;
-          width: 20px;
-        }
-      }
-
-      .tooltip {
-        white-space: nowrap;
-
-        .tooltip-inner {
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-
-      .ci-status-text {
-        width: 135px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-        display: inline-block;
-        position: relative;
-        top: -1px;
-      }
-
-      a {
-        color: $gl-text-color-light;
-        text-decoration: none;
-      }
+      background-color: $stage-hover-bg;
+      border: 1px solid $stage-hover-border;
 
+      a,
+      .dropdown-counter-badge,
       .dropdown-menu-toggle {
-        background-color: transparent;
-        border: none;
-        width: auto;
-        padding: 0;
-        color: $gl-text-color-light;
-        flex-grow: 1;
-
-        .ci-status-text {
-          max-width: 112px;
-          width: auto;
-        }
+        color: $gl-text-color;
       }
 
-      .grouped-pipeline-dropdown {
-        padding: 0;
-        width: 186px;
-        left: auto;
-        right: -197px;
-        top: -9px;
+      .grouped-pipeline-dropdown a {
+        color: $gl-text-color-light;
 
-        ul {
-          max-height: 245px;
-          overflow: auto;
-
-          li:first-child {
-            padding-top: 8px;
-          }
-
-          li:last-child {
-            padding-bottom: 8px;
-          }
-        }
-
-        a {
+        &:hover {
           color: $gl-text-color;
-          padding: 7px 8px 8px;
-
-          &:hover {
-            background-color: $blue-light-transparent;
-            border-radius: 3px;
-
-            .ci-status-text {
-              text-decoration: none;
-            }
-          }
         }
-
-        svg {
-          width: 14px;
-          height: 14px;
-        }
-
-        .ci-status-text {
-          width: 112px;
-        }
-
-        .arrow {
-          &::before,
-          &::after {
-            content: '';
-            display: inline-block;
-            position: absolute;
-            width: 0;
-            height: 0;
-            border-color: transparent;
-            border-style: solid;
-            top: 18px;
-          }
-
-          &::before {
-            left: -5px;
-            margin-top: -6px;
-            border-width: 7px 5px 7px 0;
-            border-right-color: $border-color;
-          }
-
-          &::after {
-            left: -4px;
-            margin-top: -9px;
-            border-width: 10px 7px 10px 0;
-            border-right-color: $white-light;
-          }
-        }
-      }
-
-      .badge {
-        background-color: $gray-darker;
-        color: $gl-text-color-light;
-        font-weight: normal;
-        margin-left: $btn-xs-side-margin;
       }
     }
 
-    svg {
-      vertical-align: middle;
-      margin-right: 5px;
+    .ci-status-icon {
+      position: relative;
+      top: 1px;
+    }
+
+    .ci-status-icon svg {
+      height: 20px;
+      width: 20px;
+    }
+
+    .arrow {
+      &::before,
+      &::after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+        top: 18px;
+      }
+
+      &::before {
+        left: -5px;
+        margin-top: -6px;
+        border-width: 7px 5px 7px 0;
+        border-right-color: $border-color;
+      }
+
+      &::after {
+        left: -4px;
+        margin-top: -9px;
+        border-width: 10px 7px 10px 0;
+        border-right-color: $white-light;
+      }
     }
 
     // Connect first build in each stage with right horizontal line
@@ -532,7 +528,7 @@
         content: '';
         position: absolute;
         top: 48%;
-        right: -48px;
+        right: -49px;
         border-top: 2px solid $border-color;
         width: 48px;
         height: 1px;
@@ -580,109 +576,161 @@
     }
   }
 
-  &:last-child {
-    .build {
-      // Remove right connecting horizontal line from first build in last stage
-      &:first-child {
-        &::after {
-          border: none;
-        }
-      }
-      // Remove right curved connectors from all builds in last stage
-      &:not(:first-child) {
-        &::after {
-          border: none;
-        }
-      }
-      // Remove opposite curve
-      .curve {
-        &::before {
-          display: none;
-        }
+  .ci-status-text {
+    max-width: 110px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+    display: inline-block;
+    position: relative;
+    font-weight: 100;
+  }
+
+  .dropdown-menu-toggle {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    color: $gl-text-color-light;
+    white-space: normal;
+    overflow: visible;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      color: $gl-text-color;
+
+      .dropdown-counter-badge {
+        color: $gl-text-color;
       }
     }
   }
 
-  &:first-child {
-    .build {
-      // Remove left curved connectors from all builds in first stage
-      &:not(:first-child) {
-        &::before {
-          border: none;
+  .dropdown-counter-badge {
+    float: right;
+    clear: right;
+    color: $border-color;
+    font-weight: 100;
+    font-size: 15px;
+    margin-right: 2px;
+  }
+
+  .grouped-pipeline-dropdown {
+    padding: 0;
+    width: 191px;
+    left: auto;
+    right: -206px;
+    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;
+      margin: 5px 0;
+
+      li {
+        margin: 0 5px;
+        padding-left: 0;
+        padding-bottom: 0;
+        margin-bottom: 0;
+        line-height: 1.2;
+      }
+    }
+
+    .dropdown-build {
+      color: $gl-text-color-light;
+
+      a.ci-action-icon-container {
+        padding: 0;
+        font-size: 11px;
+        float: right;
+        margin-top: 4px;
+        display: inline-block;
+        position: relative;
+
+        i {
+          font-size: 11px;
+          margin-top: 0;
         }
       }
-      // Remove opposite curve
-      .curve {
-        &::after {
-          display: none;
+
+      &:hover {
+        background-color: $stage-hover-bg;
+        border-radius: 3px;
+        color: $gl-text-color;
+      }
+
+      .ci-action-icon-container {
+        i {
+          width: 25px;
+          height: 25px;
+
+          &::before {
+            top: 1px;
+            left: 1px;
+          }
         }
       }
+
+      .stage {
+        max-width: 100px;
+        width: 100px;
+      }
+
+      .ci-status-icon svg {
+        height: 18px;
+        width: 18px;
+      }
+
+      .ci-status-text {
+        max-width: 95px;
+        padding-bottom: 3px;
+        position: relative;
+        top: 3px;
+      }
     }
   }
+}
 
-  // Curve first child connecting lines in opposite direction
-  .curve {
-    display: none;
+// Action Icons
+.ci-action-icon-container .ci-action-icon-wrapper {
+  float: right;
+  margin-top: -4px;
 
-    &::before,
-    &::after {
-      content: '';
-      width: 21px;
-      height: 25px;
-      position: absolute;
-      top: -32px;
-      border-top: 2px solid $border-color;
-    }
-
-    &::after {
-      left: -44px;
-      border-right: 2px solid $border-color;
-      border-radius: 0 20px;
-    }
+  i {
+    color: $border-color;
+    border-radius: 100%;
+    border: 1px solid $border-color;
+    padding: 5px 6px;
+    font-size: 13px;
+    background: $white-light;
+    height: 30px;
+    width: 30px;
 
     &::before {
-      right: -44px;
-      border-left: 2px solid $border-color;
-      border-radius: 20px 0 0;
-    }
-  }
-}
-
-.pipeline-actions {
-  border-bottom: none;
-}
-
-.toggle-pipeline-btn {
-
-  .fa {
-    color: $gl-gray-light;
-  }
-}
-
-.tab-pane {
-
-  &.pipelines {
-
-    .ci-table {
-      min-width: 900px;
+      position: relative;
+      top: 3px;
+      left: 3px;
     }
 
-    .stage {
-      max-width: 100px;
-      width: 100px;
-    }
-
-    .pipeline-actions {
-      min-width: initial;
+    &:hover {
+      color: $gl-text-color;
+      background-color: $stage-hover-bg;
+      border: 1px solid $stage-hover-bg;
     }
   }
 
-  &.builds {
-
-    .ci-table {
-      tr {
-        height: 71px;
-      }
-    }
+  .ci-play-icon {
+    padding: 5px 5px 5px 7px;
   }
 }
diff --git a/app/views/ci/status/_graph_badge.html.haml b/app/views/ci/status/_graph_badge.html.haml
new file mode 100644
index 00000000000..c7d04ab61e9
--- /dev/null
+++ b/app/views/ci/status/_graph_badge.html.haml
@@ -0,0 +1,19 @@
+-# Renders the graph node with both the status icon, status name and action icon
+
+- subject = local_assigns.fetch(:subject)
+- status = subject.detailed_status(current_user)
+- klass = "ci-status-icon ci-status-icon-#{status}"
+
+- if status.has_details?
+  = link_to status.details_path, data: { toggle: 'tooltip', title: "#{subject.name} - #{status.label}" } do
+    %span{ class: klass }= custom_icon(status.icon)
+    .ci-status-text= subject.name
+- else
+  %span{ class: klass }= custom_icon(status.icon)
+  .ci-status-text= subject.name
+
+- if status.has_action?
+  = link_to status.action_path, method: status.action_method,
+    title: status.action_title, class: 'ci-action-icon-container' do
+    %i.ci-action-icon-wrapper
+      = icon(status.action_icon, class: status.action_class)
diff --git a/app/views/projects/ci/builds/_build_pipeline.html.haml b/app/views/projects/ci/builds/_build_pipeline.html.haml
deleted file mode 100644
index ad1a7360a8b..00000000000
--- a/app/views/projects/ci/builds/_build_pipeline.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-- is_playable = subject.playable? && can?(current_user, :update_build, @project)
-- if is_playable
-  = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, data: { toggle: 'tooltip', title: "#{subject.name} - play", container: '.js-pipeline-graph', placement: 'bottom' } do
-    = ci_icon_for_status('play')
-    .ci-status-text= subject.name
-- elsif 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: '.js-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
-- else
-  %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
-    = ci_icon_for_status(subject.status)
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
deleted file mode 100644
index 1bba0443154..00000000000
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-%a{ data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.js-pipeline-graph', placement: 'bottom' } }
-  - if subject.target_url
-    = link_to subject.target_url do
-      %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
-        = ci_icon_for_status(subject.status)
-      %span.ci-status-text= subject.name
-  - else
-    %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
-      = ci_icon_for_status(subject.status)
-    %span.ci-status-text= subject.name
diff --git a/app/views/projects/stage/_graph.html.haml b/app/views/projects/stage/_graph.html.haml
index bf8c75b6e5c..b70b574e687 100644
--- a/app/views/projects/stage/_graph.html.haml
+++ b/app/views/projects/stage/_graph.html.haml
@@ -10,11 +10,10 @@
       - status_groups.each do |group_name, grouped_statuses|
         - if grouped_statuses.one?
           - status = grouped_statuses.first
-          - is_playable = status.playable? && can?(current_user, :update_build, @project)
-          %li.build{ class: ("playable" if is_playable) }
+          %li.build
             .curve
             .build-content
-              = render "projects/#{status.to_partial_path}_pipeline", subject: status
+              = render 'ci/status/graph_badge', subject: status
         - else
           %li.build
             .curve
diff --git a/app/views/projects/stage/_in_stage_group.html.haml b/app/views/projects/stage/_in_stage_group.html.haml
index 2b26ad9d6fa..b03837d1211 100644
--- a/app/views/projects/stage/_in_stage_group.html.haml
+++ b/app/views/projects/stage/_in_stage_group.html.haml
@@ -4,10 +4,10 @@
     = ci_icon_for_status(group_status)
   %span.ci-status-text
     = name
-  %span.badge= subject.size
+  %span.dropdown-counter-badge= subject.size
 .dropdown-menu.grouped-pipeline-dropdown
   .arrow
   %ul
     - subject.each do |status|
-      %li
-        = render "projects/#{status.to_partial_path}_pipeline", subject: status
+      %li.dropdown-build
+        = render 'ci/status/graph_badge', subject: status
diff --git a/app/views/shared/icons/_icon_status_canceled.svg b/app/views/shared/icons/_icon_status_canceled.svg
old mode 100644
new mode 100755
index 41a210a8ed9..bd5d04e1cd7
--- a/app/views/shared/icons/_icon_status_canceled.svg
+++ b/app/views/shared/icons/_icon_status_canceled.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><rect width="8" height="2" x="3" y="6" transform="rotate(45 7 7)" rx=".5"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M5.2 3.8l4.9 4.9c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0L3.8 5.2c-.2-.2-.2-.5 0-.7l.7-.7c.2-.2.5-.2.7 0"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_created.svg b/app/views/shared/icons/_icon_status_created.svg
old mode 100644
new mode 100755
index 1f5c3b51b03..326ad04e017
--- a/app/views/shared/icons/_icon_status_created.svg
+++ b/app/views/shared/icons/_icon_status_created.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" enable-background="new 0 0 14 14"><path d="M12.5,7 C12.5,4 10,1.5 7,1.5 C4,1.5 1.5,4 1.5,7 C1.5,10 4,12.5 7,12.5 C10,12.5 12.5,10 12.5,7 L12.5,7 Z M0,7 C0,3.1 3.1,0 7,0 C10.9,0 14,3.1 14,7 C14,10.9 10.9,14 7,14 C3.1,14 0,10.9 0,7 L0,7 Z" /><circle cx="7" cy="7" r="3.25"/></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><circle cx="7" cy="7" r="3.25"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_failed.svg b/app/views/shared/icons/_icon_status_failed.svg
old mode 100644
new mode 100755
index af267b8938a..64da5aa31fc
--- a/app/views/shared/icons/_icon_status_failed.svg
+++ b/app/views/shared/icons/_icon_status_failed.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M7.72916667,6.27083333 L7.72916667,4.28939247 C7.72916667,4.12531853 7.59703895,4 7.43405116,4 L6.56594884,4 C6.40541585,4 6.27083333,4.12956542 6.27083333,4.28939247 L6.27083333,6.27083333 L4.28939247,6.27083333 C4.12531853,6.27083333 4,6.40296105 4,6.56594884 L4,7.43405116 C4,7.59458415 4.12956542,7.72916667 4.28939247,7.72916667 L6.27083333,7.72916667 L6.27083333,9.71060753 C6.27083333,9.87468147 6.40296105,10 6.56594884,10 L7.43405116,10 C7.59458415,10 7.72916667,9.87043458 7.72916667,9.71060753 L7.72916667,7.72916667 L9.71060753,7.72916667 C9.87468147,7.72916667 10,7.59703895 10,7.43405116 L10,6.56594884 C10,6.40541585 9.87043458,6.27083333 9.71060753,6.27083333 L7.72916667,6.27083333 Z" transform="rotate(-45 7 7)"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7 5.969L5.599 4.568a.29.29 0 0 0-.413.004l-.614.614a.294.294 0 0 0-.004.413L5.968 7l-1.4 1.401a.29.29 0 0 0 .004.413l.614.614c.113.114.3.117.413.004L7 8.032l1.401 1.4a.29.29 0 0 0 .413-.004l.614-.614a.294.294 0 0 0 .004-.413L8.032 7l1.4-1.401a.29.29 0 0 0-.004-.413l-.614-.614a.294.294 0 0 0-.413-.004L7 5.968z"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_pending.svg b/app/views/shared/icons/_icon_status_pending.svg
old mode 100644
new mode 100755
index 516231d1b44..02d5da407e3
--- a/app/views/shared/icons/_icon_status_pending.svg
+++ b/app/views/shared/icons/_icon_status_pending.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M4.69999981,5.30065012 C4.69999981,5.13460564 4.83842754,5 5.00354719,5 L5.89645243,5 C6.06409702,5 6.19999981,5.13308716 6.19999981,5.30065012 L6.19999981,8.69934988 C6.19999981,8.86539436 6.06157207,9 5.89645243,9 L5.00354719,9 C4.8359026,9 4.69999981,8.86691284 4.69999981,8.69934988 L4.69999981,5.30065012 Z M7.69999981,5.30065012 C7.69999981,5.13460564 7.83842754,5 8.00354719,5 L8.89645243,5 C9.06409702,5 9.19999981,5.13308716 9.19999981,5.30065012 L9.19999981,8.69934988 C9.19999981,8.86539436 9.06157207,9 8.89645243,9 L8.00354719,9 C7.8359026,9 7.69999981,8.86691284 7.69999981,8.69934988 L7.69999981,5.30065012 Z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M4.7 5.3c0-.2.1-.3.3-.3h.9c.2 0 .3.1.3.3v3.4c0 .2-.1.3-.3.3H5c-.2 0-.3-.1-.3-.3V5.3m3 0c0-.2.1-.3.3-.3h.9c.2 0 .3.1.3.3v3.4c0 .2-.1.3-.3.3H8c-.2 0-.3-.1-.3-.3V5.3"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_running.svg b/app/views/shared/icons/_icon_status_running.svg
old mode 100644
new mode 100755
index d2618bce200..532f4fee33c
--- a/app/views/shared/icons/_icon_status_running.svg
+++ b/app/views/shared/icons/_icon_status_running.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M7,3 C9.209139,3 11,4.790861 11,7 C11,9.209139 9.209139,11 7,11 C5.65802855,11 4.47040669,10.3391508 3.74481446,9.32513253 L7,7 L7,3 L7,3 Z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7 3c2.2 0 4 1.8 4 4s-1.8 4-4 4c-1.3 0-2.5-.7-3.3-1.7L7 7V3"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_skipped.svg b/app/views/shared/icons/_icon_status_skipped.svg
old mode 100644
new mode 100755
index 701f33bcbea..1998dfef9ea
--- a/app/views/shared/icons/_icon_status_skipped.svg
+++ b/app/views/shared/icons/_icon_status_skipped.svg
@@ -1 +1 @@
-<svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M10 17.857c4.286 0 7.857-3.571 7.857-7.857S14.286 2.143 10 2.143 2.143 5.714 2.143 10 5.714 17.857 10 17.857M10 0c5.571 0 10 4.429 10 10s-4.429 10-10 10S0 15.571 0 10 4.429 0 10 0"/><path d="M10.986 11l-1.293 1.293a1 1 0 0 0 1.414 1.414l2.644-2.644a1.505 1.505 0 0 0 0-2.126l-2.644-2.644a1 1 0 0 0-1.414 1.414L10.986 9H6.4a1 1 0 0 0 0 2h4.586z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7.69 7.7l-.905.905a.7.7 0 0 0 .99.99l1.85-1.85c.411-.412.411-1.078 0-1.49l-1.85-1.85a.7.7 0 0 0-.99.99l.905.905H4.48a.7.7 0 0 0 0 1.4h3.21z"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_success.svg b/app/views/shared/icons/_icon_status_success.svg
old mode 100644
new mode 100755
index b7c21ba6971..eed5006bebe
--- a/app/views/shared/icons/_icon_status_success.svg
+++ b/app/views/shared/icons/_icon_status_success.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M7.29166667,7.875 L5.54840803,7.875 C5.38293028,7.875 5.25,8.00712771 5.25,8.17011551 L5.25,9.03821782 C5.25,9.19875081 5.38360183,9.33333333 5.54840803,9.33333333 L8.24853534,9.33333333 C8.52035522,9.33333333 8.75,9.11228506 8.75,8.83960819 L8.75,8.46475969 L8.75,4.07392947 C8.75,3.92144267 8.61787229,3.79166667 8.45488449,3.79166667 L7.58678218,3.79166667 C7.42624919,3.79166667 7.29166667,3.91804003 7.29166667,4.07392947 L7.29166667,7.875 Z" transform="rotate(45 7 6.563)"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_warning.svg b/app/views/shared/icons/_icon_status_warning.svg
old mode 100644
new mode 100755
index 9191e0050a6..cb785635b7e
--- a/app/views/shared/icons/_icon_status_warning.svg
+++ b/app/views/shared/icons/_icon_status_warning.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><g fill-rule="evenodd"><path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/><path d="M6,3.49769878 C6,3.22282734 6.21403503,3 6.50468445,3 L7.49531555,3 C7.77404508,3 8,3.21484375 8,3.49769878 L8,7.50230122 C8,7.77717266 7.78596497,8 7.49531555,8 L6.50468445,8 C6.22595492,8 6,7.78515625 6,7.50230122 L6,3.49769878 Z M6,9.50468445 C6,9.22595492 6.21403503,9 6.50468445,9 L7.49531555,9 C7.77404508,9 8,9.21403503 8,9.50468445 L8,10.4953156 C8,10.7740451 7.78596497,11 7.49531555,11 L6.50468445,11 C6.22595492,11 6,10.785965 6,10.4953156 L6,9.50468445 Z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M6 3.5c0-.3.2-.5.5-.5h1c.3 0 .5.2.5.5v4c0 .3-.2.5-.5.5h-1c-.3 0-.5-.2-.5-.5v-4m0 6c0-.3.2-.5.5-.5h1c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5h-1c-.3 0-.5-.2-.5-.5v-1"/></g></svg>
diff --git a/changelogs/unreleased/22604-manual-actions.yml b/changelogs/unreleased/22604-manual-actions.yml
new file mode 100644
index 00000000000..7335e597292
--- /dev/null
+++ b/changelogs/unreleased/22604-manual-actions.yml
@@ -0,0 +1,4 @@
+---
+title: Resolve "Manual actions on pipeline graph"
+merge_request: 7931
+author:
diff --git a/spec/features/commits_spec.rb b/spec/features/commits_spec.rb
index 23a504ff965..8f561c8f90b 100644
--- a/spec/features/commits_spec.rb
+++ b/spec/features/commits_spec.rb
@@ -107,7 +107,7 @@ describe 'Commits' do
         describe 'Cancel build' do
           it 'cancels build' do
             visit ci_status_path(pipeline)
-            click_on 'Cancel'
+            find('a.btn[title="Cancel"]').click
             expect(page).to have_content 'canceled'
           end
         end
diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb
index 3350a3aeefc..0a77eaa123c 100644
--- a/spec/features/projects/pipelines/pipeline_spec.rb
+++ b/spec/features/projects/pipelines/pipeline_spec.rb
@@ -38,6 +38,91 @@ describe "Pipelines", feature: true, js: true do
       expect(page).to have_css('#js-tab-pipeline.active')
     end
 
+    describe 'pipeline graph' do
+      context 'when pipeline has running builds' do
+        it 'shows a running icon and a cancel action for the running build' do
+          page.within('a[data-title="deploy - running"]') do
+            expect(page).to have_selector('.ci-status-icon-running')
+            expect(page).to have_content('deploy')
+          end
+
+          page.within('a[data-title="deploy - running"] + .ci-action-icon-container') do
+            expect(page).to have_selector('.ci-action-icon-container .fa-ban')
+          end
+        end
+
+        it 'should be possible to cancel the running build' do
+          find('a[data-title="deploy - running"] + .ci-action-icon-container').trigger('click')
+
+          expect(page).not_to have_content('Cancel running')
+        end
+      end
+
+      context 'when pipeline has successful builds' do
+        it 'shows the success icon and a retry action for the successfull build' do
+          page.within('a[data-title="build - passed"]') do
+            expect(page).to have_selector('.ci-status-icon-success')
+            expect(page).to have_content('build')
+          end
+
+          page.within('a[data-title="build - passed"] + .ci-action-icon-container') do
+            expect(page).to have_selector('.ci-action-icon-container .fa-refresh')
+          end
+        end
+
+        it 'should be possible to retry the success build' do
+          find('a[data-title="build - passed"] + .ci-action-icon-container').trigger('click')
+
+          expect(page).not_to have_content('Retry build')
+        end
+      end
+
+      context 'when pipeline has failed builds' do
+        it 'shows the failed icon and a retry action for the failed build' do
+          page.within('a[data-title="test - failed"]') do
+            expect(page).to have_selector('.ci-status-icon-failed')
+            expect(page).to have_content('test')
+          end
+
+          page.within('a[data-title="test - failed"] + .ci-action-icon-container') do
+            expect(page).to have_selector('.ci-action-icon-container .fa-refresh')
+          end
+        end
+
+        it 'should be possible to retry the failed build' do
+          find('a[data-title="test - failed"] + .ci-action-icon-container').trigger('click')
+
+          expect(page).not_to have_content('Retry build')
+        end
+      end
+
+      context 'when pipeline has manual builds' do
+        it 'shows the skipped icon and a play action for the manual build' do
+          page.within('a[data-title="manual build - manual play action"]') do
+            expect(page).to have_selector('.ci-status-icon-skipped')
+            expect(page).to have_content('manual')
+          end
+
+          page.within('a[data-title="manual build - manual play action"] + .ci-action-icon-container') do
+            expect(page).to have_selector('.ci-action-icon-container .fa-play')
+          end
+        end
+
+        it 'should be possible to play the manual build' do
+          find('a[data-title="manual build - manual play action"] + .ci-action-icon-container').trigger('click')
+
+          expect(page).not_to have_content('Play build')
+        end
+      end
+
+      context 'when pipeline has external build' do
+        it 'shows the success icon and the generic comit status build' do
+          expect(page).to have_selector('.ci-status-icon-success')
+          expect(page).to have_content('jenkins')
+        end
+      end
+    end
+
     context 'page tabs' do
       it 'shows Pipeline and Builds tabs with link' do
         expect(page).to have_link('Pipeline')