Merge branch 'master' into 'add-svg-loader'

# Conflicts:
#   app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6

37 files changed, 467 insertions, 386 deletions

diff --git a/app/assets/javascripts/files_comment_button.js b/app/assets/javascripts/files_comment_button.js
index 698870d0ce1..6d86888dcb8 100644
--- a/app/assets/javascripts/files_comment_button.js
+++ b/app/assets/javascripts/files_comment_button.js
@@ -1,16 +1,16 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, max-len, one-var, one-var-declaration-per-line, quotes, prefer-template, newline-per-chained-call, comma-dangle, new-cap, no-else-return, consistent-return */
 /* global FilesCommentButton */
+/* global notes */
 
 (function() {
+  let $commentButtonTemplate;
   var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.FilesCommentButton = (function() {
-    var COMMENT_BUTTON_CLASS, COMMENT_BUTTON_TEMPLATE, DEBOUNCE_TIMEOUT_DURATION, EMPTY_CELL_CLASS, LINE_COLUMN_CLASSES, LINE_CONTENT_CLASS, LINE_HOLDER_CLASS, LINE_NUMBER_CLASS, OLD_LINE_CLASS, TEXT_FILE_SELECTOR, UNFOLDABLE_LINE_CLASS;
+    var COMMENT_BUTTON_CLASS, EMPTY_CELL_CLASS, LINE_COLUMN_CLASSES, LINE_CONTENT_CLASS, LINE_HOLDER_CLASS, LINE_NUMBER_CLASS, OLD_LINE_CLASS, TEXT_FILE_SELECTOR, UNFOLDABLE_LINE_CLASS;
 
     COMMENT_BUTTON_CLASS = '.add-diff-note';
 
-    COMMENT_BUTTON_TEMPLATE = _.template('<button name="button" type="submit" class="btn <%- COMMENT_BUTTON_CLASS %> js-add-diff-note-button" title="Add a comment to this line"><i class="fa fa-comment-o"></i></button>');
-
     LINE_HOLDER_CLASS = '.line_holder';
 
     LINE_NUMBER_CLASS = 'diff-line-num';
@@ -27,26 +27,29 @@
 
     TEXT_FILE_SELECTOR = '.text-file';
 
-    DEBOUNCE_TIMEOUT_DURATION = 100;
-
     function FilesCommentButton(filesContainerElement) {
-      var debounce;
-      this.filesContainerElement = filesContainerElement;
-      this.destroy = bind(this.destroy, this);
       this.render = bind(this.render, this);
-      this.VIEW_TYPE = $('input#view[type=hidden]').val();
-      debounce = _.debounce(this.render, DEBOUNCE_TIMEOUT_DURATION);
-      $(this.filesContainerElement).off('mouseover', LINE_COLUMN_CLASSES).off('mouseleave', LINE_COLUMN_CLASSES).on('mouseover', LINE_COLUMN_CLASSES, debounce).on('mouseleave', LINE_COLUMN_CLASSES, this.destroy);
+      this.hideButton = bind(this.hideButton, this);
+      this.isParallelView = notes.isParallelView();
+      filesContainerElement.on('mouseover', LINE_COLUMN_CLASSES, this.render)
+        .on('mouseleave', LINE_COLUMN_CLASSES, this.hideButton);
     }
 
     FilesCommentButton.prototype.render = function(e) {
-      var $currentTarget, buttonParentElement, lineContentElement, textFileElement;
+      var $currentTarget, buttonParentElement, lineContentElement, textFileElement, $button;
       $currentTarget = $(e.currentTarget);
-
-      buttonParentElement = this.getButtonParent($currentTarget);
-      if (!this.validateButtonParent(buttonParentElement)) return;
       lineContentElement = this.getLineContent($currentTarget);
-      if (!this.validateLineContent(lineContentElement)) return;
+      buttonParentElement = this.getButtonParent($currentTarget);
+
+      if (!this.validateButtonParent(buttonParentElement) || !this.validateLineContent(lineContentElement)) return;
+
+      $button = $(COMMENT_BUTTON_CLASS, buttonParentElement);
+      buttonParentElement.addClass('is-over')
+        .nextUntil(`.${LINE_CONTENT_CLASS}`).addClass('is-over');
+
+      if ($button.length) {
+        return;
+      }
 
       textFileElement = this.getTextFileElement($currentTarget);
       buttonParentElement.append(this.buildButton({
@@ -61,19 +64,16 @@
       }));
     };
 
-    FilesCommentButton.prototype.destroy = function(e) {
-      if (this.isMovingToSameType(e)) {
-        return;
-      }
-      $(COMMENT_BUTTON_CLASS, this.getButtonParent($(e.currentTarget))).remove();
+    FilesCommentButton.prototype.hideButton = function(e) {
+      var $currentTarget = $(e.currentTarget);
+      var buttonParentElement = this.getButtonParent($currentTarget);
+
+      buttonParentElement.removeClass('is-over')
+        .nextUntil(`.${LINE_CONTENT_CLASS}`).removeClass('is-over');
     };
 
     FilesCommentButton.prototype.buildButton = function(buttonAttributes) {
-      var initializedButtonTemplate;
-      initializedButtonTemplate = COMMENT_BUTTON_TEMPLATE({
-        COMMENT_BUTTON_CLASS: COMMENT_BUTTON_CLASS.substr(1)
-      });
-      return $(initializedButtonTemplate).attr({
+      return $commentButtonTemplate.clone().attr({
         'data-noteable-type': buttonAttributes.noteableType,
         'data-noteable-id': buttonAttributes.noteableID,
         'data-commit-id': buttonAttributes.commitID,
@@ -86,14 +86,14 @@
     };
 
     FilesCommentButton.prototype.getTextFileElement = function(hoveredElement) {
-      return $(hoveredElement.closest(TEXT_FILE_SELECTOR));
+      return hoveredElement.closest(TEXT_FILE_SELECTOR);
     };
 
     FilesCommentButton.prototype.getLineContent = function(hoveredElement) {
       if (hoveredElement.hasClass(LINE_CONTENT_CLASS)) {
         return hoveredElement;
       }
-      if (this.VIEW_TYPE === 'inline') {
+      if (!this.isParallelView) {
         return $(hoveredElement).closest(LINE_HOLDER_CLASS).find("." + LINE_CONTENT_CLASS);
       } else {
         return $(hoveredElement).next("." + LINE_CONTENT_CLASS);
@@ -101,7 +101,7 @@
     };
 
     FilesCommentButton.prototype.getButtonParent = function(hoveredElement) {
-      if (this.VIEW_TYPE === 'inline') {
+      if (!this.isParallelView) {
         if (hoveredElement.hasClass(OLD_LINE_CLASS)) {
           return hoveredElement;
         }
@@ -114,17 +114,8 @@
       }
     };
 
-    FilesCommentButton.prototype.isMovingToSameType = function(e) {
-      var newButtonParent;
-      newButtonParent = this.getButtonParent($(e.toElement));
-      if (!newButtonParent) {
-        return false;
-      }
-      return newButtonParent.is(this.getButtonParent($(e.currentTarget)));
-    };
-
     FilesCommentButton.prototype.validateButtonParent = function(buttonParentElement) {
-      return !buttonParentElement.hasClass(EMPTY_CELL_CLASS) && !buttonParentElement.hasClass(UNFOLDABLE_LINE_CLASS) && $(COMMENT_BUTTON_CLASS, buttonParentElement).length === 0;
+      return !buttonParentElement.hasClass(EMPTY_CELL_CLASS) && !buttonParentElement.hasClass(UNFOLDABLE_LINE_CLASS);
     };
 
     FilesCommentButton.prototype.validateLineContent = function(lineContentElement) {
@@ -135,6 +126,8 @@
   })();
 
   $.fn.filesCommentButton = function() {
+    $commentButtonTemplate = $('<button name="button" type="submit" class="add-diff-note js-add-diff-note-button" title="Add a comment to this line"><i class="fa fa-comment-o"></i></button>');
+
     if (!(this && (this.parent().data('can-create-note') != null))) {
       return;
     }
diff --git a/app/assets/javascripts/lib/utils/common_utils.js.es6 b/app/assets/javascripts/lib/utils/common_utils.js.es6
index 643c28dd046..a1423b6fda5 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js.es6
+++ b/app/assets/javascripts/lib/utils/common_utils.js.es6
@@ -285,5 +285,58 @@
      * @returns {Boolean}
      */
     w.gl.utils.convertPermissionToBoolean = permission => permission === 'true';
+
+    /**
+     * Back Off exponential algorithm
+     * backOff :: (Function<next, stop>, Number) -> Promise<Any, Error>
+     *
+     * @param {Function<next, stop>} fn function to be called
+     * @param {Number} timeout
+     * @return {Promise<Any, Error>}
+     * @example
+     * ```
+     *  backOff(function (next, stop) {
+     *    // Let's perform this function repeatedly for 60s or for the timeout provided.
+     *
+     *    ourFunction()
+     *      .then(function (result) {
+     *        // continue if result is not what we need
+     *        next();
+     *
+     *        // when result is what we need let's stop with the repetions and jump out of the cycle
+     *        stop(result);
+     *      })
+     *      .catch(function (error) {
+     *        // if there is an error, we need to stop this with an error.
+     *        stop(error);
+     *      })
+     *  }, 60000)
+     *  .then(function (result) {})
+     *  .catch(function (error) {
+     *    // deal with errors passed to stop()
+     *  })
+     * ```
+     */
+    w.gl.utils.backOff = (fn, timeout = 60000) => {
+      const maxInterval = 32000;
+      let nextInterval = 2000;
+
+      const startTime = Date.now();
+
+      return new Promise((resolve, reject) => {
+        const stop = arg => ((arg instanceof Error) ? reject(arg) : resolve(arg));
+
+        const next = () => {
+          if (Date.now() - startTime < timeout) {
+            setTimeout(fn.bind(null, next, stop), nextInterval);
+            nextInterval = Math.min(nextInterval + nextInterval, maxInterval);
+          } else {
+            reject(new Error('BACKOFF_TIMEOUT'));
+          }
+        };
+
+        fn(next, stop);
+      });
+    };
   })(window);
 }).call(window);
diff --git a/app/assets/javascripts/lib/utils/http_status.js b/app/assets/javascripts/lib/utils/http_status.js
new file mode 100644
index 00000000000..bc109a69c20
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/http_status.js
@@ -0,0 +1,10 @@
+/**
+ * exports HTTP status codes
+ */
+
+const statusCodes = {
+  NO_CONTENT: 204,
+  OK: 200,
+};
+
+module.exports = statusCodes;
diff --git a/app/assets/javascripts/profile/profile.js.es6 b/app/assets/javascripts/profile/profile.js.es6
index 81374296522..4ccea0624ee 100644
--- a/app/assets/javascripts/profile/profile.js.es6
+++ b/app/assets/javascripts/profile/profile.js.es6
@@ -84,13 +84,14 @@
   }
 
   $(function() {
-    $(document).on('focusout.ssh_key', '#key_key', function() {
+    $(document).on('input.ssh_key', '#key_key', function() {
       const $title = $('#key_title');
       const comment = $(this).val().match(/^\S+ \S+ (.+)\n?$/);
-      if (comment && comment.length > 1 && $title.val() === '') {
+
+      // Extract the SSH Key title from its comment
+      if (comment && comment.length > 1) {
         return $title.val(comment[1]).change();
       }
-    // Extract the SSH Key title from its comment
     });
     if (global.utils.getPagePath() === 'profiles') {
       return new Profile();
diff --git a/app/assets/javascripts/task_list.js b/app/assets/javascripts/task_list.js
index dfe24d1fb33..b1402c0a880 100644
--- a/app/assets/javascripts/task_list.js
+++ b/app/assets/javascripts/task_list.js
@@ -1,3 +1,4 @@
+/* global Flash */
 require('vendor/task_list');
 
 class TaskList {
@@ -6,6 +7,16 @@ class TaskList {
     this.dataType = options.dataType;
     this.fieldName = options.fieldName;
     this.onSuccess = options.onSuccess || (() => {});
+    this.onError = function showFlash(response) {
+      let errorMessages = '';
+
+      if (response.responseJSON) {
+        errorMessages = response.responseJSON.errors.join(' ');
+      }
+
+      return new Flash(errorMessages || 'Update failed', 'alert');
+    };
+
     this.init();
   }
 
@@ -32,6 +43,7 @@ class TaskList {
       url: $target.data('update-url') || $('form.js-issuable-update').attr('action'),
       data: patchData,
       success: this.onSuccess,
+      error: this.onError,
     });
   }
 }
diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
index 1ffb1543f71..f643213ee54 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
@@ -39,17 +39,15 @@ const playIconSvg = require('icons/_icon_play.svg');
 
     template: `
       <td class="pipeline-actions hidden-xs">
-        <div class="controls pull-right">
-          <div class="btn-group inline">
-            <div class="btn-group">
+        <div class="pull-right">
+          <div class="btn-group">
+            <div class="btn-group" v-if="actions">
               <button
-                v-if='actions'
                 class="dropdown-toggle btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
                 data-toggle="dropdown"
                 title="Manual job"
                 data-placement="top"
-                aria-label="Manual job"
-              >
+                aria-label="Manual job">
                 <span v-html="playIconSvg" aria-hidden="true"></span>
                 <i class="fa fa-caret-down" aria-hidden="true"></i>
               </button>
@@ -58,23 +56,21 @@ const playIconSvg = require('icons/_icon_play.svg');
                   <a
                     rel="nofollow"
                     data-method="post"
-                    :href='action.path'
-                  >
+                    :href="action.path" >
                     <span v-html="playIconSvg" aria-hidden="true"></span>
                     <span>{{action.name}}</span>
                   </a>
                 </li>
               </ul>
             </div>
-            <div class="btn-group">
+
+            <div class="btn-group" v-if="artifacts">
               <button
-                v-if='artifacts'
                 class="dropdown-toggle btn btn-default build-artifacts has-tooltip js-pipeline-dropdown-download"
                 title="Artifacts"
                 data-placement="top"
                 data-toggle="dropdown"
-                aria-label="Artifacts"
-              >
+                aria-label="Artifacts">
                 <i class="fa fa-download" aria-hidden="true"></i>
                 <i class="fa fa-caret-down" aria-hidden="true"></i>
               </button>
@@ -82,42 +78,39 @@ const playIconSvg = require('icons/_icon_play.svg');
                 <li v-for='artifact in pipeline.details.artifacts'>
                   <a
                     rel="nofollow"
-                    download
-                    :href='artifact.path'
-                  >
+                    :href="artifact.path">
                     <i class="fa fa-download" aria-hidden="true"></i>
                     <span>{{download(artifact.name)}}</span>
                   </a>
                 </li>
               </ul>
             </div>
-          </div>
-          <div class="cancel-retry-btns inline">
-            <a
-              v-if='pipeline.flags.retryable'
-              class="btn has-tooltip"
-              title="Retry"
-              rel="nofollow"
-              data-method="post"
-              data-placement="top"
-              data-toggle="dropdown"
-              :href='pipeline.retry_path'
-              aria-label="Retry">
-              <i class="fa fa-repeat" aria-hidden="true"></i>
-            </a>
-            <a
-              v-if='pipeline.flags.cancelable'
-              @click="confirmAction"
-              class="btn btn-remove has-tooltip"
-              title="Cancel"
-              rel="nofollow"
-              data-method="post"
-              data-placement="top"
-              data-toggle="dropdown"
-              :href='pipeline.cancel_path'
-              aria-label="Cancel">
-              <i class="fa fa-remove" aria-hidden="true"></i>
-            </a>
+            <div class="btn-group" v-if="pipeline.flags.retryable">
+              <a
+                class="btn btn-default btn-retry has-tooltip"
+                title="Retry"
+                rel="nofollow"
+                data-method="post"
+                data-placement="top"
+                data-toggle="dropdown"
+                :href='pipeline.retry_path'
+                aria-label="Retry">
+                <i class="fa fa-repeat" aria-hidden="true"></i>
+              </a>
+            </div>
+            <div class="btn-group" v-if="pipeline.flags.cancelable">
+              <a
+                class="btn btn-remove has-tooltip"
+                title="Cancel"
+                rel="nofollow"
+                data-method="post"
+                data-placement="top"
+                data-toggle="dropdown"
+                :href='pipeline.cancel_path'
+                aria-label="Cancel">
+                <i class="fa fa-remove" aria-hidden="true"></i>
+              </a>
+            </div>
           </div>
         </div>
       </td>
diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
index 22f1b1a8483..a383570857d 100644
--- a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
@@ -57,7 +57,7 @@ const iconTimerSvg = require('../../../views/shared/icons/_icon_timer.svg');
       },
     },
     template: `
-      <td>
+      <td class="pipelines-time-ago">
         <p class="duration" v-if='duration'>
           <span v-html="iconTimerSvg"></span>
           {{duration}}
@@ -68,8 +68,7 @@ const iconTimerSvg = require('../../../views/shared/icons/_icon_timer.svg');
             data-toggle="tooltip"
             data-placement="top"
             data-container="body"
-            :data-original-title='localTimeFinished'
-          >
+            :data-original-title='localTimeFinished'>
             {{timeStopped.words}}
           </time>
         </p>
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 0f9213b98e3..9a4129cdc8d 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -229,7 +229,7 @@
   .controls {
     float: right;
     margin-top: 8px;
-    padding-bottom: 7px;
+    padding-bottom: 8px;
     border-bottom: 1px solid $border-color;
   }
 }
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index 6f2e746d4b0..9c76e58dfc8 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -20,6 +20,7 @@ $dark-highlight-bg: #ffe792;
 $dark-highlight-color: $black;
 $dark-pre-hll-bg: #373b41;
 $dark-hll-bg: #373b41;
+$dark-over-bg: #9f9ab5;
 $dark-c: #969896;
 $dark-err: #c66;
 $dark-k: #b294bb;
@@ -139,6 +140,18 @@ $dark-il: #de935f;
       }
     }
 
+    .diff-line-num {
+      &.is-over,
+      &.hll:not(.empty-cell).is-over {
+        background-color: $dark-over-bg;
+        border-color: darken($dark-over-bg, 5%);
+
+        a {
+          color: darken($dark-over-bg, 15%);
+        }
+      }
+    }
+
     .line_content.match {
       @include dark-diff-match-line;
     }
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index 2144a5f7466..6488a099c74 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -13,6 +13,7 @@ $monokai-line-empty-bg: #49483e;
 $monokai-line-empty-border: darken($monokai-line-empty-bg, 15%);
 $monokai-diff-border: #808080;
 $monokai-highlight-bg: #ffe792;
+$monokai-over-bg: #9f9ab5;
 
 $monokai-new-bg: rgba(166, 226, 46, 0.1);
 $monokai-new-idiff: rgba(166, 226, 46, 0.15);
@@ -139,6 +140,18 @@ $monokai-gi: #a6e22e;
       }
     }
 
+    .diff-line-num {
+      &.is-over,
+      &.hll:not(.empty-cell).is-over {
+        background-color: $monokai-over-bg;
+        border-color: darken($monokai-over-bg, 5%);
+
+        a {
+          color: darken($monokai-over-bg, 15%);
+        }
+      }
+    }
+
     .line_content.match {
       @include dark-diff-match-line;
     }
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index 2cb1d18f12f..00079cc2b5b 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -17,6 +17,7 @@ $solarized-dark-line-color-new: #5a766c;
 $solarized-dark-line-color-old: #7a6c71;
 $solarized-dark-highlight: #094554;
 $solarized-dark-hll-bg: #174652;
+$solarized-dark-over-bg: #9f9ab5;
 $solarized-dark-c: #586e75;
 $solarized-dark-err: #93a1a1;
 $solarized-dark-g: #93a1a1;
@@ -143,6 +144,18 @@ $solarized-dark-il: #2aa198;
       }
     }
 
+    .diff-line-num {
+      &.is-over,
+      &.hll:not(.empty-cell).is-over {
+        background-color: $solarized-dark-over-bg;
+        border-color: darken($solarized-dark-over-bg, 5%);
+
+        a {
+          color: darken($solarized-dark-over-bg, 15%);
+        }
+      }
+    }
+
     .line_content.match {
       @include dark-diff-match-line;
     }
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index b72c4326730..2e3b68f1a58 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -18,6 +18,7 @@ $solarized-light-line-color-new: #a1a080;
 $solarized-light-line-color-old: #ad9186;
 $solarized-light-highlight: #eee8d5;
 $solarized-light-hll-bg: #ddd8c5;
+$solarized-light-over-bg: #ded7fc;
 $solarized-light-c: #93a1a1;
 $solarized-light-err: #586e75;
 $solarized-light-g: #586e75;
@@ -150,6 +151,18 @@ $solarized-light-il: #2aa198;
       }
     }
 
+    .diff-line-num {
+      &.is-over,
+      &.hll:not(.empty-cell).is-over {
+        background-color: $solarized-light-over-bg;
+        border-color: darken($solarized-light-over-bg, 5%);
+
+        a {
+          color: darken($solarized-light-over-bg, 15%);
+        }
+      }
+    }
+
     .line_content.match {
       @include matchLine;
     }
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 398fbfd3b18..0eca30e570f 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -7,6 +7,7 @@ $white-code-color: $gl-text-color;
 $white-highlight: #fafe3d;
 $white-pre-hll-bg: #f8eec7;
 $white-hll-bg: #f8f8f8;
+$white-over-bg: #ded7fc;
 $white-c: #998;
 $white-err: #a61717;
 $white-err-bg: #e3d2d2;
@@ -123,6 +124,16 @@ $white-gc-bg: #eaf2f5;
         }
       }
 
+      &.is-over,
+      &.hll:not(.empty-cell).is-over {
+        background-color: $white-over-bg;
+        border-color: darken($white-over-bg, 5%);
+
+        a {
+          color: darken($white-over-bg, 15%);
+        }
+      }
+
       &.hll:not(.empty-cell) {
         background-color: $line-number-select;
         border-color: $line-select-yellow-dark;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 92d7772da57..339cdcde480 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -89,6 +89,10 @@
 
       .diff-line-num {
         width: 50px;
+
+        a {
+          transition: none;
+        }
       }
 
       .line_holder td {
@@ -109,10 +113,6 @@
       td.line_content.parallel {
         width: 46%;
       }
-
-      .add-diff-note {
-        margin-left: -65px;
-      }
     }
 
     .old_line,
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index aa130a1abb0..00f5f2645b3 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -452,36 +452,37 @@ ul.notes {
  * Line note button on the side of diffs
  */
 
-.diff-file tr.line_holder {
-  @mixin show-add-diff-note {
-    display: inline-block;
-  }
+.add-diff-note {
+  display: none;
+  margin-top: -2px;
+  border-radius: 50%;
+  background: $white-light;
+  padding: 1px 5px;
+  font-size: 12px;
+  color: $gl-link-color;
+  margin-left: -55px;
+  position: absolute;
+  z-index: 10;
+  width: 23px;
+  height: 23px;
+  border: 1px solid $border-color;
+  transition: transform .1s ease-in-out;
 
-  .add-diff-note {
-    margin-top: -8px;
-    border-radius: 40px;
-    background: $white-light;
-    padding: 4px;
-    font-size: 16px;
-    color: $gl-link-color;
-    margin-left: -56px;
-    position: absolute;
-    z-index: 10;
-    width: 32px;
-    // "hide" it by default
-    display: none;
+  &:hover {
+    background: $gl-info;
+    color: $white-light;
+    transform: scale(1.15);
+  }
 
-    &:hover {
-      background: $gl-info;
-      color: $white-light;
-      @include show-add-diff-note;
-    }
+  &:active {
+    outline: 0;
   }
+}
 
-  // "show" the icon also if we just hover somewhere over the line
-  &:hover > td {
+.diff-file {
+  .is-over {
     .add-diff-note {
-      @include show-add-diff-note;
+      display: inline-block;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 3fe1eef307e..08b3206f31e 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -13,21 +13,16 @@
     white-space: nowrap;
   }
 
-  .commit-title {
-    margin: 0;
-  }
-
-  .controls {
-    white-space: nowrap;
+  .table-holder {
+    width: 100%;
+    overflow: auto;
   }
 
-  .btn {
-    margin: 4px;
+  .commit-title {
+    margin: 0;
   }
 
   .table.ci-table {
-    min-width: 1200px;
-    table-layout: fixed;
 
     .label {
       margin-bottom: 3px;
@@ -37,16 +32,72 @@
       color: $black;
     }
 
-    .pipeline-date,
-    .pipeline-status {
-      width: 10%;
+    .stage-cell {
+      min-width: 130px; // Guarantees we show at least 4 stages in line
+      width: 20%;
+    }
+
+    .pipelines-time-ago {
+      text-align: right;
     }
 
-    .pipeline-info,
-    .pipeline-commit,
-    .pipeline-stages,
     .pipeline-actions {
-      width: 20%;
+      padding-right: 0;
+      min-width: 170px; //Guarantees buttons don't break in several lines.
+
+      .btn-default {
+        color: $gl-text-color-secondary;
+      }
+
+      .btn.btn-retry:hover,
+      .btn.btn-retry:focus {
+        border-color: $gray-darkest;
+        background-color: $white-normal;
+      }
+
+      svg path {
+        fill: $gl-text-color-secondary;
+      }
+
+      .dropdown-menu {
+        max-height: 250px;
+        overflow-y: auto;
+      }
+
+      .dropdown-toggle,
+      .dropdown-menu {
+        color: $gl-text-color-secondary;
+
+        .fa {
+          color: $gl-text-color-secondary;
+          font-size: 14px;
+        }
+
+        svg,
+        .fa {
+          margin-right: 0;
+        }
+      }
+
+      .btn-group {
+        &.open {
+          .btn-default {
+            background-color: $white-normal;
+            border-color: $border-white-normal;
+          }
+        }
+
+        .btn {
+          .icon-play {
+            height: 13px;
+            width: 12px;
+          }
+        }
+      }
+
+      .tooltip {
+        white-space: nowrap;
+      }
     }
   }
 }
@@ -61,27 +112,10 @@
   }
 }
 
-.content-list.pipelines .table-holder {
-  min-height: 300px;
-}
-
-.pipeline-holder {
-  width: 100%;
-  overflow: auto;
-}
-
 .table.ci-table {
-  min-width: 900px;
 
-  &.pipeline {
-    min-width: 650px;
-  }
-
-  &.builds-page {
-
-    tr {
-      height: 71px;
-    }
+  &.builds-page tr {
+    height: 71px;
   }
 
   tr {
@@ -99,7 +133,7 @@
     }
 
     .commit-link {
-      padding: 9px 8px 10px;
+      padding: 9px 8px 10px 2px;
     }
   }
 
@@ -206,72 +240,8 @@
     }
   }
 
-  .pipeline-actions {
-    min-width: 140px;
-
-    .btn {
-      margin: 0;
-      color: $gl-text-color-secondary;
-    }
-
-    .cancel-retry-btns {
-      vertical-align: middle;
-
-      .btn:not(:first-child) {
-        margin-left: 8px;
-      }
-    }
-
-    .dropdown-menu {
-      max-height: 250px;
-      overflow-y: auto;
-    }
-
-    .dropdown-toggle,
-    .dropdown-menu {
-      color: $gl-text-color-secondary;
-
-      .fa {
-        color: $gl-text-color-secondary;
-        font-size: 14px;
-      }
-
-      svg,
-      .fa {
-        margin-right: 0;
-      }
-    }
-
-    .btn-remove {
-      color: $white-light;
-    }
-
-    .btn-group {
-      &.open {
-        .btn-default {
-          background-color: $white-normal;
-          border-color: $border-white-normal;
-        }
-      }
-
-      .btn {
-        .icon-play {
-          height: 13px;
-          width: 12px;
-        }
-      }
-    }
-
-    .tooltip {
-      white-space: nowrap;
-    }
-  }
-
-  .build-link {
-
-    a {
-      color: $gl-text-color;
-    }
+  .build-link a {
+    color: $gl-text-color;
   }
 
   .btn-group.open .dropdown-toggle {
@@ -335,31 +305,8 @@
 }
 
 .tab-pane {
-  &.pipelines {
-    .ci-table {
-      min-width: 900px;
-    }
-
-    .content-list.pipelines {
-      overflow: auto;
-    }
-
-    .stage {
-      max-width: 100px;
-      width: 100px;
-    }
-
-    .pipeline-actions {
-      min-width: initial;
-    }
-  }
-
-  &.builds {
-    .ci-table {
-      tr {
-        height: 71px;
-      }
-    }
+  &.builds .ci-table tr {
+    height: 71px;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 67110813abb..07b93430442 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -638,14 +638,6 @@ pre.light-well {
   margin: 0;
 }
 
-.activity-filter-block {
-  .controls {
-    padding-bottom: 7px;
-    margin-top: 8px;
-    border-bottom: 1px solid $border-color;
-  }
-}
-
 .commits-search-form {
   .input-short {
     min-width: 200px;
diff --git a/app/controllers/concerns/issuable_actions.rb b/app/controllers/concerns/issuable_actions.rb
index 0821974aa93..3ccf2a9ce33 100644
--- a/app/controllers/concerns/issuable_actions.rb
+++ b/app/controllers/concerns/issuable_actions.rb
@@ -26,6 +26,23 @@ module IssuableActions
 
   private
 
+  def render_conflict_response
+    respond_to do |format|
+      format.html do
+        @conflict = true
+        render :edit
+      end
+
+      format.json do
+        render json: {
+          errors: [
+            "Someone edited this #{issuable.human_class_name} at the same time you did. Please refresh your browser and make sure your changes will not unintentionally remove theirs."
+          ]
+        }, status: 409
+      end
+    end
+  end
+
   def labels
     @labels ||= LabelsFinder.new(current_user, project_id: @project.id).execute
   end
diff --git a/app/controllers/concerns/service_params.rb b/app/controllers/concerns/service_params.rb
index e610ccaec96..2992568ae66 100644
--- a/app/controllers/concerns/service_params.rb
+++ b/app/controllers/concerns/service_params.rb
@@ -33,6 +33,7 @@ module ServiceParams
     :issues_url,
     :jira_issue_transition_id,
     :merge_requests_events,
+    :mock_service_url,
     :namespace,
     :new_issue_url,
     :notify,
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index ca5e81100da..1151555b8fa 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -134,8 +134,7 @@ class Projects::IssuesController < Projects::ApplicationController
     end
 
   rescue ActiveRecord::StaleObjectError
-    @conflict = true
-    render :edit
+    render_conflict_response
   end
 
   def referenced_merge_requests
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index d122c7fdcb2..53f30a24312 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -296,22 +296,21 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   def update
     @merge_request = MergeRequests::UpdateService.new(project, current_user, merge_request_params).execute(@merge_request)
 
-    if @merge_request.valid?
-      respond_to do |format|
-        format.html do
-          redirect_to([@merge_request.target_project.namespace.becomes(Namespace),
-                       @merge_request.target_project, @merge_request])
-        end
-        format.json do
-          render json: @merge_request.to_json(include: { milestone: {}, assignee: { methods: :avatar_url }, labels: { methods: :text_color } }, methods: [:task_status, :task_status_short])
+    respond_to do |format|
+      format.html do
+        if @merge_request.valid?
+          redirect_to([@merge_request.target_project.namespace.becomes(Namespace), @merge_request.target_project, @merge_request])
+        else
+          render :edit
         end
       end
-    else
-      render "edit"
+
+      format.json do
+        render json: @merge_request.to_json(include: { milestone: {}, assignee: { methods: :avatar_url }, labels: { methods: :text_color } }, methods: [:task_status, :task_status_short])
+      end
     end
   rescue ActiveRecord::StaleObjectError
-    @conflict = true
-    render :edit
+    render_conflict_response
   end
 
   def remove_wip
diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb
index 4c7c16d694c..195094730aa 100644
--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@@ -34,7 +34,7 @@ module ButtonHelper
 
     content_tag (append_link ? :a : :span), protocol,
       class: klass,
-      href: (project.http_url_to_repo if append_link),
+      href: (project.http_url_to_repo(current_user) if append_link),
       data: {
         html: true,
         placement: placement,
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index 735a355c25a..4befeacc135 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -241,7 +241,7 @@ module ProjectsHelper
     when 'ssh'
       project.ssh_url_to_repo
     else
-      project.http_url_to_repo
+      project.http_url_to_repo(current_user)
     end
   end
 
diff --git a/app/models/event.rb b/app/models/event.rb
index 4b8eac9accf..d7ca8e3c599 100644
--- a/app/models/event.rb
+++ b/app/models/event.rb
@@ -36,7 +36,7 @@ class Event < ActiveRecord::Base
   scope :code_push, -> { where(action: PUSHED) }
 
   scope :in_projects, ->(projects) do
-    where(project_id: projects).recent
+    where(project_id: projects.pluck(:id)).recent
   end
 
   scope :with_associations, -> { includes(:author, :project, project: :namespace).preload(:target) }
diff --git a/app/models/project.rb b/app/models/project.rb
index aedd5bedcb9..e06fc30dc8a 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -869,8 +869,14 @@ class Project < ActiveRecord::Base
     url_to_repo
   end
 
-  def http_url_to_repo
-    "#{web_url}.git"
+  def http_url_to_repo(user = nil)
+    url = web_url
+
+    if user
+      url.sub!(%r{\Ahttps?://}) { |protocol| "#{protocol}#{user.username}@" }
+    end
+
+    "#{url}.git"
   end
 
   # Check if current branch name is marked as protected in the system
diff --git a/app/models/project_services/mattermost_service.rb b/app/models/project_services/mattermost_service.rb
index 4ebc5318da1..c13538e9fea 100644
--- a/app/models/project_services/mattermost_service.rb
+++ b/app/models/project_services/mattermost_service.rb
@@ -15,10 +15,10 @@ class MattermostService < ChatNotificationService
     'This service sends notifications about projects events to Mattermost channels.<br />
     To set up this service:
     <ol>
-      <li><a href="https://docs.mattermost.com/developer/webhooks-incoming.html#enabling-incoming-webhooks">Enable incoming webhooks</a> in your Mattermost installation. </li>
-      <li><a href="https://docs.mattermost.com/developer/webhooks-incoming.html#creating-integrations-using-incoming-webhooks">Add an incoming webhook</a> in your Mattermost team. The default channel can be overridden for each event. </li>
-      <li>Paste the webhook <strong>URL</strong> into the field bellow. </li>
-      <li>Select events below to enable notifications. The channel and username are optional. </li>
+      <li><a href="https://docs.mattermost.com/developer/webhooks-incoming.html#enabling-incoming-webhooks">Enable incoming webhooks</a> in your Mattermost installation.</li>
+      <li><a href="https://docs.mattermost.com/developer/webhooks-incoming.html#creating-integrations-using-incoming-webhooks">Add an incoming webhook</a> in your Mattermost team. The default channel can be overridden for each event.</li>
+      <li>Paste the webhook <strong>URL</strong> into the field below.</li>
+      <li>Select events below to enable notifications. The <strong>Channel handle</strong> and <strong>Username</strong> fields are optional.</li>
     </ol>'
   end
 
@@ -28,14 +28,14 @@ class MattermostService < ChatNotificationService
 
   def default_fields
     [
-      { type: 'text', name: 'webhook', placeholder: 'http://mattermost_host/hooks/...' },
-      { type: 'text', name: 'username', placeholder: 'username' },
+      { type: 'text', name: 'webhook', placeholder: 'e.g. http://mattermost_host/hooks/…' },
+      { type: 'text', name: 'username', placeholder: 'e.g. GitLab' },
       { type: 'checkbox', name: 'notify_only_broken_builds' },
       { type: 'checkbox', name: 'notify_only_broken_pipelines' },
     ]
   end
 
   def default_channel_placeholder
-    "town-square"
+    "Channel handle (e.g. town-square)"
   end
 end
diff --git a/app/models/project_services/mock_ci_service.rb b/app/models/project_services/mock_ci_service.rb
new file mode 100644
index 00000000000..a8d581a1f67
--- /dev/null
+++ b/app/models/project_services/mock_ci_service.rb
@@ -0,0 +1,82 @@
+# For an example companion mocking service, see https://gitlab.com/gitlab-org/gitlab-mock-ci-service
+class MockCiService < CiService
+  ALLOWED_STATES = %w[failed canceled running pending success success_with_warnings skipped not_found].freeze
+
+  prop_accessor :mock_service_url
+  validates :mock_service_url, presence: true, url: true, if: :activated?
+
+  def title
+    'MockCI'
+  end
+
+  def description
+    'Mock an external CI'
+  end
+
+  def self.to_param
+    'mock_ci'
+  end
+
+  def fields
+    [
+      { type: 'text',
+        name: 'mock_service_url',
+        placeholder: 'http://localhost:4004' },
+    ]
+  end
+
+  # Return complete url to build page
+  #
+  # Ex.
+  #   http://jenkins.example.com:8888/job/test1/scm/bySHA1/12d65c
+  #
+  def build_page(sha, ref)
+    url = [mock_service_url,
+           "#{project.namespace.path}/#{project.path}/status/#{sha}"]
+
+    URI.join(*url).to_s
+  end
+
+  # Return string with build status or :error symbol
+  #
+  # Allowed states: 'success', 'failed', 'running', 'pending', 'skipped'
+  #
+  #
+  # Ex.
+  #   @service.commit_status('13be4ac', 'master')
+  #   # => 'success'
+  #
+  #   @service.commit_status('2abe4ac', 'dev')
+  #   # => 'running'
+  #
+  #
+  def commit_status(sha, ref)
+    response = HTTParty.get(commit_status_path(sha), verify: false)
+    read_commit_status(response)
+  rescue Errno::ECONNREFUSED
+    :error
+  end
+
+  def commit_status_path(sha)
+    url = [mock_service_url,
+           "#{project.namespace.path}/#{project.path}/status/#{sha}.json"]
+
+    URI.join(*url).to_s
+  end
+
+  def read_commit_status(response)
+    return :error unless response.code == 200 || response.code == 404
+
+    status = if response.code == 404
+               'pending'
+             else
+               response['status']
+             end
+
+    if status.present? && ALLOWED_STATES.include?(status)
+      status
+    else
+      :error
+    end
+  end
+end
diff --git a/app/models/project_services/slack_service.rb b/app/models/project_services/slack_service.rb
index f77d2d7c60b..da7496573ef 100644
--- a/app/models/project_services/slack_service.rb
+++ b/app/models/project_services/slack_service.rb
@@ -13,11 +13,11 @@ class SlackService < ChatNotificationService
 
   def help
     'This service sends notifications about projects events to Slack channels.<br />
-    To setup this service:
+    To set up this service:
     <ol>
-      <li><a href="https://slack.com/apps/A0F7XDUAZ-incoming-webhooks">Add an incoming webhook</a> in your Slack team. The default channel can be overridden for each event. </li>
-      <li>Paste the <strong>Webhook URL</strong> into the field below. </li>
-      <li>Select events below to enable notifications. The channel and username are optional. </li>
+      <li><a href="https://slack.com/apps/A0F7XDUAZ-incoming-webhooks">Add an incoming webhook</a> in your Slack team. The default channel can be overridden for each event.</li>
+      <li>Paste the <strong>Webhook URL</strong> into the field below.</li>
+      <li>Select events below to enable notifications. The <strong>Channel name</strong> and <strong>Username</strong> fields are optional.</li>
     </ol>'
   end
 
@@ -27,14 +27,14 @@ class SlackService < ChatNotificationService
 
   def default_fields
     [
-      { type: 'text', name: 'webhook', placeholder: 'https://hooks.slack.com/services/...' },
-      { type: 'text', name: 'username', placeholder: 'username' },
+      { type: 'text', name: 'webhook', placeholder: 'e.g. https://hooks.slack.com/services/…' },
+      { type: 'text', name: 'username', placeholder: 'e.g. GitLab' },
       { type: 'checkbox', name: 'notify_only_broken_builds' },
       { type: 'checkbox', name: 'notify_only_broken_pipelines' },
     ]
   end
 
   def default_channel_placeholder
-    "#general"
+    "Channel name (e.g. general)"
   end
 end
diff --git a/app/models/repository.rb b/app/models/repository.rb
index 1762118278a..0dbf246c3a4 100644
--- a/app/models/repository.rb
+++ b/app/models/repository.rb
@@ -109,9 +109,7 @@ class Repository
       offset: offset,
       after: after,
       before: before,
-      # --follow doesn't play well with --skip. See:
-      # https://gitlab.com/gitlab-org/gitlab-ce/issues/3574#note_3040520
-      follow: false,
+      follow: path.present?,
       skip_merges: skip_merges
     }
 
diff --git a/app/models/service.rb b/app/models/service.rb
index facaaf9b331..3ef4cbead10 100644
--- a/app/models/service.rb
+++ b/app/models/service.rb
@@ -210,7 +210,7 @@ class Service < ActiveRecord::Base
   end
 
   def self.available_services_names
-    %w[
+    service_names = %w[
       asana
       assembla
       bamboo
@@ -238,6 +238,9 @@ class Service < ActiveRecord::Base
       slack
       teamcity
     ]
+    service_names << 'mock_ci' if Rails.env.development?
+
+    service_names.sort_by(&:downcase)
   end
 
   def self.build_from_template(project_id, template)
diff --git a/app/services/groups/destroy_service.rb b/app/services/groups/destroy_service.rb
index 2e2d7f884ac..497fdb09cdc 100644
--- a/app/services/groups/destroy_service.rb
+++ b/app/services/groups/destroy_service.rb
@@ -18,7 +18,8 @@ module Groups
       end
 
       group.children.each do |group|
-        DestroyService.new(group, current_user).async_execute
+        # This needs to be synchronous since the namespace gets destroyed below
+        DestroyService.new(group, current_user).execute
       end
 
       group.really_destroy!
diff --git a/app/views/admin/runners/_runner.html.haml b/app/views/admin/runners/_runner.html.haml
index deb62845e1c..d4d166ab7b6 100644
--- a/app/views/admin/runners/_runner.html.haml
+++ b/app/views/admin/runners/_runner.html.haml
@@ -15,6 +15,8 @@
   %td
     = runner.description
   %td
+    = runner.version
+  %td
     - if runner.shared?
       n/a
     - else
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index d725e477044..7d26864d0f3 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -67,6 +67,7 @@
           %th Type
           %th Runner token
           %th Description
+          %th Version
           %th Projects
           %th Jobs
           %th Tags
diff --git a/app/views/dashboard/_activities.html.haml b/app/views/dashboard/_activities.html.haml
index dc76599b776..0dbb0ca6958 100644
--- a/app/views/dashboard/_activities.html.haml
+++ b/app/views/dashboard/_activities.html.haml
@@ -4,7 +4,7 @@
 .nav-block
   - if current_user
     .controls
-      = link_to dashboard_projects_path(:atom, { private_token: current_user.private_token }), class: 'btn rss-btn' do
+      = link_to dashboard_projects_path(:atom, { private_token: current_user.private_token }), class: 'btn rss-btn has-tooltip', title: 'Subscribe' do
         %i.fa.fa-rss
   = render 'shared/event_filter'
 
diff --git a/app/views/groups/_activities.html.haml b/app/views/groups/_activities.html.haml
index 71cc4d87b1f..c442cf056c3 100644
--- a/app/views/groups/_activities.html.haml
+++ b/app/views/groups/_activities.html.haml
@@ -4,7 +4,7 @@
 .nav-block
   - if current_user
     .controls
-      = link_to group_path(@group, format: :atom, private_token: current_user.private_token), class: 'btn rss-btn' do
+      = link_to group_path(@group, format: :atom, private_token: current_user.private_token), class: 'btn rss-btn has-tooltip' , title: 'Subscribe' do
         %i.fa.fa-rss
   = render 'shared/event_filter'
 
diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index 0ea733cb978..4268337fd6d 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -4,7 +4,7 @@
   .nav-block.activity-filter-block
     - if current_user
       .controls
-        = link_to namespace_project_path(@project.namespace, @project, format: :atom, private_token: current_user.private_token), title: "Feed", class: 'btn rss-btn' do
+        = link_to namespace_project_path(@project.namespace, @project, format: :atom, private_token: current_user.private_token), title: "Subscribe", class: 'btn rss-btn has-tooltip' do
           = icon('rss')
 
     = render 'shared/event_filter'
diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml
deleted file mode 100644
index 3475fa5f960..00000000000
--- a/app/views/projects/ci/pipelines/_pipeline.html.haml
+++ /dev/null
@@ -1,92 +0,0 @@
-- status = pipeline.status
-- show_commit = local_assigns.fetch(:show_commit, true)
-- show_branch = local_assigns.fetch(:show_branch, true)
-
-%tr.commit
-  %td.commit-link
-    = render 'ci/status/badge', status: pipeline.detailed_status(current_user)
-
-  %td
-    = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id) do
-      %span.pipeline-id ##{pipeline.id}
-    %span by
-    - if pipeline.user
-      = user_avatar(user: pipeline.user, size: 20)
-    - else
-      %span.api.monospace API
-    - if pipeline.latest?
-      %span.label.label-success.has-tooltip{ title: 'Latest pipeline for this branch' } latest
-    - if pipeline.triggered?
-      %span.label.label-primary triggered
-    - if pipeline.yaml_errors.present?
-      %span.label.label-danger.has-tooltip{ title: "#{pipeline.yaml_errors}" } yaml invalid
-    - if pipeline.builds.any?(&:stuck?)
-      %span.label.label-warning stuck
-
-  %td.branch-commit
-    - if pipeline.ref && show_branch
-      .icon-container
-        = pipeline.tag? ? icon('tag') : icon('code-fork')
-      = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace branch-name"
-    - if show_commit
-      .icon-container.commit-icon
-        = custom_icon("icon_commit")
-      = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "commit-id monospace"
-
-    %p.commit-title
-      - if commit = pipeline.commit
-        = author_avatar(commit, size: 20)
-        = link_to_gfm truncate(commit.title, length: 60, escape: false), namespace_project_commit_path(pipeline.project.namespace, pipeline.project, commit.id), class: "commit-row-message"
-      - else
-        Cant find HEAD commit for this branch
-
-  %td
-    = render 'shared/mini_pipeline_graph', pipeline: pipeline, klass: 'js-mini-pipeline-graph'
-
-  %td
-    - if pipeline.duration
-      %p.duration
-        = custom_icon("icon_timer")
-        = duration_in_numbers(pipeline.duration)
-    - if pipeline.finished_at
-      %p.finished-at
-        = icon("calendar")
-        #{time_ago_with_tooltip(pipeline.finished_at, short_format: false)}
-
-  %td.pipeline-actions.hidden-xs
-    .controls.pull-right
-      - artifacts = pipeline.builds.latest.with_artifacts_not_expired
-      - actions = pipeline.manual_actions
-      - if artifacts.present? || actions.any?
-        .btn-group.inline
-          - if actions.any?
-            .btn-group
-              %button.dropdown-toggle.btn.btn-default.has-tooltip.js-pipeline-dropdown-manual-actions{ type: 'button', title: 'Manual pipeline', data: { toggle: 'dropdown', placement: 'top' }, 'aria-label' => 'Manual pipeline' }
-                = custom_icon('icon_play')
-                = icon('caret-down', 'aria-hidden' => 'true')
-              %ul.dropdown-menu.dropdown-menu-align-right
-                - actions.each do |build|
-                  %li
-                    = link_to play_namespace_project_build_path(pipeline.project.namespace, pipeline.project, build), method: :post, rel: 'nofollow' do
-                      = custom_icon('icon_play')
-                      %span= build.name
-          - if artifacts.present?
-            .btn-group
-              %button.dropdown-toggle.btn.btn-default.build-artifacts.has-tooltip.js-pipeline-dropdown-download{ type: 'button', title: 'Artifacts', data: { toggle: 'dropdown', placement: 'top' }, 'aria-label' => 'Artifacts' }
-                = icon("download")
-                = icon('caret-down')
-              %ul.dropdown-menu.dropdown-menu-align-right
-                - artifacts.each do |build|
-                  %li
-                    = link_to download_namespace_project_build_artifacts_path(pipeline.project.namespace, pipeline.project, build), rel: 'nofollow', download: '' do
-                      = icon("download")
-                      %span Download '#{build.name}' artifacts
-
-      - if can?(current_user, :update_pipeline, pipeline.project)
-        .cancel-retry-btns.inline
-          - if pipeline.retryable?
-            = link_to retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn has-tooltip', title: 'Retry', data: { toggle: 'dropdown', placement: 'top' }, 'aria-label' => 'Retry' , method: :post do
-              = icon("repeat")
-          - if pipeline.cancelable?
-            = link_to cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-remove has-tooltip', title: 'Cancel', data: { toggle: 'dropdown', placement: 'top' }, 'aria-label' => 'Cancel' , method: :post do
-              = icon("remove")