Merge branch 'auto-pipelines-vue' into 'master'

Pipelines Vue

See merge request !7196

25 files changed, 1055 insertions, 31 deletions

diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6
index f084340a4f8..54f13e328bd 100644
--- a/app/assets/javascripts/dispatcher.js.es6
+++ b/app/assets/javascripts/dispatcher.js.es6
@@ -184,11 +184,6 @@
             new TreeView();
           }
           break;
-        case 'projects:pipelines:index':
-          new gl.MiniPipelineGraph({
-            container: '.js-pipeline-table',
-          });
-          break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:show':
           const { controllerAction } = document.querySelector('.js-pipeline-container').dataset;
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js.es6
index 31a71379af3..b8d637a9827 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js.es6
@@ -139,6 +139,21 @@
       }, 200);
     };
 
+    /**
+      this will take in the `name` of the param you want to parse in the url
+      if the name does not exist this function will return `null`
+      otherwise it will return the value of the param key provided
+    */
+    w.gl.utils.getParameterByName = (name) => {
+      const url = window.location.href;
+      name = name.replace(/[[\]]/g, '\\$&');
+      const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
+      const results = regex.exec(url);
+      if (!results) return null;
+      if (!results[2]) return '';
+      return decodeURIComponent(results[2].replace(/\+/g, ' '));
+    };
+
   })(window);
 
 }).call(this);
diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6
new file mode 100644
index 00000000000..605824fa939
--- /dev/null
+++ b/app/assets/javascripts/vue_pagination/index.js.es6
@@ -0,0 +1,148 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign, no-plusplus */
+
+((gl) => {
+  const PAGINATION_UI_BUTTON_LIMIT = 4;
+  const UI_LIMIT = 6;
+  const SPREAD = '...';
+  const PREV = 'Prev';
+  const NEXT = 'Next';
+  const FIRST = '<< First';
+  const LAST = 'Last >>';
+
+  gl.VueGlPagination = Vue.extend({
+    props: {
+
+      /**
+        This function will take the information given by the pagination component
+        And make a new Turbolinks call
+
+        Here is an example `change` method:
+
+        change(pagenum, apiScope) {
+          Turbolinks.visit(`?scope=${apiScope}&p=${pagenum}`);
+        },
+      */
+
+      change: {
+        type: Function,
+        required: true,
+      },
+
+      /**
+        pageInfo will come from the headers of the API call
+        in the `.then` clause of the VueResource API call
+        there should be a function that contructs the pageInfo for this component
+
+        This is an example:
+
+        const pageInfo = headers => ({
+          perPage: +headers['X-Per-Page'],
+          page: +headers['X-Page'],
+          total: +headers['X-Total'],
+          totalPages: +headers['X-Total-Pages'],
+          nextPage: +headers['X-Next-Page'],
+          previousPage: +headers['X-Prev-Page'],
+        });
+      */
+
+      pageInfo: {
+        type: Object,
+        required: true,
+      },
+    },
+    methods: {
+      changePage(e) {
+        let apiScope = gl.utils.getParameterByName('scope');
+
+        if (!apiScope) apiScope = 'all';
+
+        const text = e.target.innerText;
+        const { totalPages, nextPage, previousPage } = this.pageInfo;
+
+        switch (text) {
+          case SPREAD:
+            break;
+          case LAST:
+            this.change(totalPages, apiScope);
+            break;
+          case NEXT:
+            this.change(nextPage, apiScope);
+            break;
+          case PREV:
+            this.change(previousPage, apiScope);
+            break;
+          case FIRST:
+            this.change(1, apiScope);
+            break;
+          default:
+            this.change(+text, apiScope);
+            break;
+        }
+      },
+    },
+    computed: {
+      prev() {
+        return this.pageInfo.previousPage;
+      },
+      next() {
+        return this.pageInfo.nextPage;
+      },
+      getItems() {
+        const total = this.pageInfo.totalPages;
+        const page = this.pageInfo.page;
+        const items = [];
+
+        if (page > 1) items.push({ title: FIRST });
+
+        if (page > 1) {
+          items.push({ title: PREV, prev: true });
+        } else {
+          items.push({ title: PREV, disabled: true, prev: true });
+        }
+
+        if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true });
+
+        const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
+        const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total);
+
+        for (let i = start; i <= end; i++) {
+          const isActive = i === page;
+          items.push({ title: i, active: isActive, page: true });
+        }
+
+        if (total - page > PAGINATION_UI_BUTTON_LIMIT) {
+          items.push({ title: SPREAD, separator: true, page: true });
+        }
+
+        if (page === total) {
+          items.push({ title: NEXT, disabled: true, next: true });
+        } else if (total - page >= 1) {
+          items.push({ title: NEXT, next: true });
+        }
+
+        if (total - page >= 1) items.push({ title: LAST, last: true });
+
+        return items;
+      },
+    },
+    template: `
+      <div class="gl-pagination">
+        <ul class="pagination clearfix">
+          <li v-for='item in getItems'
+            :class='{
+              page: item.page,
+              prev: item.prev,
+              next: item.next,
+              separator: item.separator,
+              active: item.active,
+              disabled: item.disabled
+            }'
+          >
+            <a @click="changePage($event)">{{item.title}}</a>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6
new file mode 100644
index 00000000000..9dfbedd73ab
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6
@@ -0,0 +1,41 @@
+/* global Vue, VueResource, gl */
+/*= require vue_common_component/commit */
+/*= require vue-resource
+/*= require boards/vue_resource_interceptor */
+/*= require ./status.js.es6 */
+/*= require ./store.js.es6 */
+/*= require ./pipeline_url.js.es6 */
+/*= require ./stage.js.es6 */
+/*= require ./stages.js.es6 */
+/*= require ./pipeline_actions.js.es6 */
+/*= require ./time_ago.js.es6 */
+/*= require ./pipelines.js.es6 */
+
+(() => {
+  const project = document.querySelector('.pipelines');
+  const entry = document.querySelector('.vue-pipelines-index');
+  const svgs = document.querySelector('.pipeline-svgs');
+
+  Vue.use(VueResource);
+
+  if (!entry) return null;
+  return new Vue({
+    el: entry,
+    data: {
+      scope: project.dataset.url,
+      store: new gl.PipelineStore(),
+      svgs: svgs.dataset,
+    },
+    components: {
+      'vue-pipelines': gl.VuePipelines,
+    },
+    template: `
+      <vue-pipelines
+        :scope='scope'
+        :store='store'
+        :svgs='svgs'
+      >
+      </vue-pipelines>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
new file mode 100644
index 00000000000..ad5cb30cc42
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6
@@ -0,0 +1,99 @@
+/* global Vue, Flash, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VuePipelineActions = Vue.extend({
+    props: ['pipeline', 'svgs'],
+    computed: {
+      actions() {
+        return this.pipeline.details.manual_actions.length > 0;
+      },
+      artifacts() {
+        return this.pipeline.details.artifacts.length > 0;
+      },
+    },
+    methods: {
+      download(name) {
+        return `Download ${name} artifacts`;
+      },
+    },
+    template: `
+      <td class="pipeline-actions hidden-xs">
+        <div class="controls pull-right">
+          <div class="btn-group inline">
+            <div class="btn-group">
+              <a
+                v-if='actions'
+                class="dropdown-toggle btn btn-default js-pipeline-dropdown-manual-actions"
+                data-toggle="dropdown"
+                title="Manual build"
+                alt="Manual Build"
+              >
+                <span v-html='svgs.iconPlay'></span>
+                <i class="fa fa-caret-down"></i>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-align-right">
+                <li v-for='action in pipeline.details.manual_actions'>
+                  <a
+                    rel="nofollow"
+                    data-method="post"
+                    :href='action.path'
+                    title="Manual build"
+                  >
+                    <span v-html='svgs.iconPlay'></span>
+                    <span title="Manual build">{{action.name}}</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="btn-group">
+              <a
+                v-if='artifacts'
+                class="dropdown-toggle btn btn-default build-artifacts js-pipeline-dropdown-download"
+                data-toggle="dropdown"
+                type="button"
+              >
+                <i class="fa fa-download"></i>
+                <i class="fa fa-caret-down"></i>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-align-right">
+                <li v-for='artifact in pipeline.details.artifacts'>
+                  <a
+                    rel="nofollow"
+                    :href='artifact.path'
+                  >
+                    <i class="fa fa-download"></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"
+              :href='pipeline.retry_path'
+            >
+              <i class="fa fa-repeat"></i>
+            </a>
+            <a
+              v-if='pipeline.flags.cancelable'
+              class="btn btn-remove has-tooltip"
+              title="Cancel"
+              rel="nofollow"
+              data-method="post"
+              :href='pipeline.cancel_path'
+              data-original-title="Cancel"
+            >
+              <i class="fa fa-remove"></i>
+            </a>
+          </div>
+        </div>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6
new file mode 100644
index 00000000000..ae5649f0519
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/pipeline_url.js.es6
@@ -0,0 +1,63 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VuePipelineUrl = Vue.extend({
+    props: [
+      'pipeline',
+    ],
+    computed: {
+      user() {
+        return !!this.pipeline.user;
+      },
+    },
+    template: `
+      <td>
+        <a :href='pipeline.path'>
+          <span class="pipeline-id">#{{pipeline.id}}</span>
+        </a>
+        <span>by</span>
+        <a
+          v-if='user'
+          :href='pipeline.user.web_url'
+        >
+          <img
+            v-if='user'
+            class="avatar has-tooltip s20 "
+            :title='pipeline.user.name'
+            data-container="body"
+            :src='pipeline.user.avatar_url'
+          >
+        </a>
+        <span
+          v-if='!user'
+          class="api monospace"
+        >
+          API
+        </span>
+        <span
+          v-if='pipeline.flags.latest'
+          class="label label-success has-tooltip"
+          title="Latest pipeline for this branch"
+          data-original-title="Latest pipeline for this branch"
+        >
+          latest
+        </span>
+        <span
+          v-if='pipeline.flags.yaml_errors'
+          class="label label-danger has-tooltip"
+          :title='pipeline.yaml_errors'
+          :data-original-title='pipeline.yaml_errors'
+        >
+          yaml invalid
+        </span>
+        <span
+          v-if='pipeline.flags.stuck'
+          class="label label-warning"
+        >
+          stuck
+        </span>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
new file mode 100644
index 00000000000..73627e9ba50
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
@@ -0,0 +1,131 @@
+/* global Vue, Turbolinks, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VuePipelines = Vue.extend({
+    components: {
+      runningPipeline: gl.VueRunningPipeline,
+      pipelineActions: gl.VuePipelineActions,
+      stages: gl.VueStages,
+      commit: gl.CommitComponent,
+      pipelineUrl: gl.VuePipelineUrl,
+      pipelineHead: gl.VuePipelineHead,
+      glPagination: gl.VueGlPagination,
+      statusScope: gl.VueStatusScope,
+      timeAgo: gl.VueTimeAgo,
+    },
+    data() {
+      return {
+        pipelines: [],
+        timeLoopInterval: '',
+        intervalId: '',
+        apiScope: 'all',
+        pageInfo: {},
+        pagenum: 1,
+        count: { all: 0, running_or_pending: 0 },
+        pageRequest: false,
+      };
+    },
+    props: ['scope', 'store', 'svgs'],
+    created() {
+      const pagenum = gl.utils.getParameterByName('p');
+      const scope = gl.utils.getParameterByName('scope');
+      if (pagenum) this.pagenum = pagenum;
+      if (scope) this.apiScope = scope;
+      this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
+    },
+    methods: {
+      change(pagenum, apiScope) {
+        Turbolinks.visit(`?scope=${apiScope}&p=${pagenum}`);
+      },
+      author(pipeline) {
+        if (!pipeline.commit) return { avatar_url: '', web_url: '', username: '' };
+        if (pipeline.commit.author) return pipeline.commit.author;
+        return {
+          avatar_url: pipeline.commit.author_gravatar_url,
+          web_url: `mailto:${pipeline.commit.author_email}`,
+          username: pipeline.commit.author_name,
+        };
+      },
+      ref(pipeline) {
+        const { ref } = pipeline;
+        return { name: ref.name, tag: ref.tag, ref_url: ref.path };
+      },
+      commitTitle(pipeline) {
+        return pipeline.commit ? pipeline.commit.title : '';
+      },
+      commitSha(pipeline) {
+        return pipeline.commit ? pipeline.commit.short_id : '';
+      },
+      commitUrl(pipeline) {
+        return pipeline.commit ? pipeline.commit.commit_path : '';
+      },
+      match(string) {
+        return string.replace(/_([a-z])/g, (m, w) => w.toUpperCase());
+      },
+    },
+    template: `
+      <div>
+        <div class="pipelines realtime-loading" v-if='pipelines.length < 1'>
+          <i class="fa fa-spinner fa-spin"></i>
+        </div>
+        <div class="table-holder" v-if='pipelines.length'>
+          <table class="table ci-table">
+            <thead>
+              <tr>
+                <th>Status</th>
+                <th>Pipeline</th>
+                <th>Commit</th>
+                <th>Stages</th>
+                <th></th>
+                <th class="hidden-xs"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="commit" v-for='pipeline in pipelines'>
+                <status-scope
+                  :pipeline='pipeline'
+                  :match='match'
+                  :svgs='svgs'
+                >
+                </status-scope>
+                <pipeline-url :pipeline='pipeline'></pipeline-url>
+                <td>
+                  <commit
+                    :commit-icon-svg='svgs.commitIconSvg'
+                    :author='author(pipeline)'
+                    :tag="pipeline.ref.tag"
+                    :title='commitTitle(pipeline)'
+                    :commit-ref='ref(pipeline)'
+                    :short-sha='commitSha(pipeline)'
+                    :commit-url='commitUrl(pipeline)'
+                  >
+                  </commit>
+                </td>
+                <stages
+                  :pipeline='pipeline'
+                  :svgs='svgs'
+                  :match='match'
+                >
+                </stages>
+                <time-ago :pipeline='pipeline' :svgs='svgs'></time-ago>
+                <pipeline-actions :pipeline='pipeline' :svgs='svgs'></pipeline-actions>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="pipelines realtime-loading" v-if='pageRequest'>
+          <i class="fa fa-spinner fa-spin"></i>
+        </div>
+        <gl-pagination
+          v-if='pageInfo.total > pageInfo.perPage'
+          :pagenum='pagenum'
+          :change='change'
+          :count='count.all'
+          :pageInfo='pageInfo'
+        >
+        </gl-pagination>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
new file mode 100644
index 00000000000..74a79dcedae
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -0,0 +1,76 @@
+/* global Vue, Flash, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueStage = Vue.extend({
+    data() {
+      return {
+        request: false,
+        builds: '',
+        spinner: '<span class="fa fa-spinner fa-spin"></span>',
+      };
+    },
+    props: ['stage', 'svgs', 'match'],
+    methods: {
+      fetchBuilds() {
+        if (this.request) return this.clearBuilds();
+
+        return this.$http.get(this.stage.dropdown_path)
+          .then((response) => {
+            this.request = true;
+            this.builds = JSON.parse(response.body).html;
+          }, () => {
+            const flash = new Flash('Something went wrong on our end.');
+            this.request = false;
+            return flash;
+          });
+      },
+      clearBuilds() {
+        this.builds = '';
+        this.request = false;
+      },
+    },
+    computed: {
+      buildsOrSpinner() {
+        return this.request ? this.builds : this.spinner;
+      },
+      dropdownClass() {
+        if (this.request) return 'js-builds-dropdown-container';
+        return 'js-builds-dropdown-loading builds-dropdown-loading';
+      },
+      buildStatus() {
+        return `Build: ${this.stage.status.label}`;
+      },
+      tooltip() {
+        return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`;
+      },
+      svg() {
+        const icon = this.stage.status.icon;
+        const stageIcon = icon.replace(/icon/i, 'stage_icon');
+        return this.svgs[this.match(stageIcon)];
+      },
+      triggerButtonClass() {
+        return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
+      },
+    },
+    template: `
+      <div>
+        <button
+          @click='fetchBuilds'
+          @blur='fetchBuilds'
+          :class="triggerButtonClass"
+          :title='stage.title'
+          data-placement="top"
+          data-toggle="dropdown"
+          type="button">
+          <span v-html="svg"></span>
+          <i class="fa fa-caret-down "></i>
+        </button>
+        <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
+          <div class="arrow-up"></div>
+          <div :class="dropdownClass" class="js-builds-dropdown-list scrollable-menu" v-html="buildsOrSpinner"></div>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/stages.js.es6 b/app/assets/javascripts/vue_pipelines_index/stages.js.es6
new file mode 100644
index 00000000000..cb176b3f0c6
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/stages.js.es6
@@ -0,0 +1,21 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueStages = Vue.extend({
+    components: {
+      'vue-stage': gl.VueStage,
+    },
+    props: ['pipeline', 'svgs', 'match'],
+    template: `
+      <td class="stage-cell">
+        <div
+          class="stage-container dropdown js-mini-pipeline-graph"
+          v-for='stage in pipeline.details.stages'
+        >
+          <vue-stage :stage='stage' :svgs='svgs' :match='match'></vue-stage>
+        </div>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/status.js.es6 b/app/assets/javascripts/vue_pipelines_index/status.js.es6
new file mode 100644
index 00000000000..05175082704
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/status.js.es6
@@ -0,0 +1,34 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueStatusScope = Vue.extend({
+    props: [
+      'pipeline', 'svgs', 'match',
+    ],
+    computed: {
+      cssClasses() {
+        const cssObject = { 'ci-status': true };
+        cssObject[`ci-${this.pipeline.details.status.group}`] = true;
+        return cssObject;
+      },
+      svg() {
+        return this.svgs[this.match(this.pipeline.details.status.icon)];
+      },
+      detailsPath() {
+        const { status } = this.pipeline.details;
+        return status.has_details ? status.details_path : false;
+      },
+    },
+    template: `
+      <td class="commit-link">
+        <a
+          :class='cssClasses'
+          :href='detailsPath'
+          v-html='svg + pipeline.details.status.text'
+        >
+        </a>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6
new file mode 100644
index 00000000000..6b34839b030
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6
@@ -0,0 +1,59 @@
+/* global gl, Flash */
+/* eslint-disable no-param-reassign, no-underscore-dangle */
+/*= require vue_realtime_listener/index.js */
+
+((gl) => {
+  const pageValues = headers => ({
+    perPage: +headers['X-Per-Page'],
+    page: +headers['X-Page'],
+    total: +headers['X-Total'],
+    totalPages: +headers['X-Total-Pages'],
+    nextPage: +headers['X-Next-Page'],
+    previousPage: +headers['X-Prev-Page'],
+  });
+
+  gl.PipelineStore = class {
+    fetchDataLoop(Vue, pageNum, url, apiScope) {
+      const updatePipelineNums = (count) => {
+        const { all } = count;
+        const running = count.running_or_pending;
+        document.querySelector('.js-totalbuilds-count').innerHTML = all;
+        document.querySelector('.js-running-count').innerHTML = running;
+      };
+
+      const goFetch = () =>
+        this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
+          .then((response) => {
+            const pageInfo = pageValues(response.headers);
+            this.pageInfo = Object.assign({}, this.pageInfo, pageInfo);
+
+            const res = JSON.parse(response.body);
+            this.count = Object.assign({}, this.count, res.count);
+            this.pipelines = Object.assign([], this.pipelines, res.pipelines);
+
+            updatePipelineNums(this.count);
+            this.pageRequest = false;
+          }, () => {
+            this.pageRequest = false;
+            return new Flash('Something went wrong on our end.');
+          });
+
+      goFetch();
+
+      const startTimeLoops = () => {
+        this.timeLoopInterval = setInterval(() => {
+          this.$children
+            .filter(e => e.$options._componentTag === 'time-ago')
+            .forEach(e => e.changeTime());
+        }, 10000);
+      };
+
+      startTimeLoops();
+
+      const removeIntervals = () => clearInterval(this.timeLoopInterval);
+      const startIntervals = () => startTimeLoops();
+
+      gl.VueRealtimeListener(removeIntervals, startIntervals);
+    }
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6 b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
new file mode 100644
index 00000000000..655110feba1
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/time_ago.js.es6
@@ -0,0 +1,73 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueTimeAgo = Vue.extend({
+    data() {
+      return {
+        currentTime: new Date(),
+      };
+    },
+    props: ['pipeline', 'svgs'],
+    computed: {
+      timeAgo() {
+        return gl.utils.getTimeago();
+      },
+      localTimeFinished() {
+        return gl.utils.formatDate(this.pipeline.details.finished_at);
+      },
+      timeStopped() {
+        const changeTime = this.currentTime;
+        const options = {
+          weekday: 'long',
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+        };
+        options.timeZoneName = 'short';
+        const finished = this.pipeline.details.finished_at;
+        if (!finished && changeTime) return false;
+        return ({ words: this.timeAgo.format(finished) });
+      },
+      duration() {
+        const { duration } = this.pipeline.details;
+        const date = new Date(duration * 1000);
+
+        let hh = date.getUTCHours();
+        let mm = date.getUTCMinutes();
+        let ss = date.getSeconds();
+
+        if (hh < 10) hh = `0${hh}`;
+        if (mm < 10) mm = `0${mm}`;
+        if (ss < 10) ss = `0${ss}`;
+
+        if (duration !== null) return `${hh}:${mm}:${ss}`;
+        return false;
+      },
+    },
+    methods: {
+      changeTime() {
+        this.currentTime = new Date();
+      },
+    },
+    template: `
+      <td>
+        <p class="duration" v-if='duration'>
+          <span v-html='svgs.iconTimer'></span>
+          {{duration}}
+        </p>
+        <p class="finished-at" v-if='timeStopped'>
+          <i class="fa fa-calendar"></i>
+          <time
+            data-toggle="tooltip"
+            data-placement="top"
+            data-container="body"
+            :data-original-title='localTimeFinished'
+          >
+            {{timeStopped.words}}
+          </time>
+        </p>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_realtime_listener/index.js.es6 b/app/assets/javascripts/vue_realtime_listener/index.js.es6
new file mode 100644
index 00000000000..23cac1466d2
--- /dev/null
+++ b/app/assets/javascripts/vue_realtime_listener/index.js.es6
@@ -0,0 +1,18 @@
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueRealtimeListener = (removeIntervals, startIntervals) => {
+    const removeAll = () => {
+      removeIntervals();
+      window.removeEventListener('beforeunload', removeIntervals);
+      window.removeEventListener('focus', startIntervals);
+      window.removeEventListener('blur', removeIntervals);
+      document.removeEventListener('page:fetch', removeAll);
+    };
+
+    window.addEventListener('beforeunload', removeIntervals);
+    window.addEventListener('focus', startIntervals);
+    window.addEventListener('blur', removeIntervals);
+    document.addEventListener('page:fetch', removeAll);
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index ed53ad94021..8861315d776 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,4 +1,9 @@
 .pipelines {
+  .realtime-loading {
+    font-size: 40px;
+    text-align: center;
+  }
+
   .stage {
     max-width: 90px;
     width: 90px;
@@ -24,6 +29,10 @@
     min-width: 1200px;
     table-layout: fixed;
 
+    .label {
+      margin-bottom: 3px;
+    }
+
     .pipeline-id {
       color: $black;
     }
@@ -177,6 +186,7 @@
   .stage-cell {
     font-size: 0;
 
+    > .stage-container > div > button > span > svg,
     > .stage-container > button > svg {
       height: 22px;
       width: 22px;
diff --git a/app/controllers/projects/pipelines_controller.rb b/app/controllers/projects/pipelines_controller.rb
index cc347922c6a..84451257b98 100644
--- a/app/controllers/projects/pipelines_controller.rb
+++ b/app/controllers/projects/pipelines_controller.rb
@@ -7,11 +7,33 @@ class Projects::PipelinesController < Projects::ApplicationController
 
   def index
     @scope = params[:scope]
-    @pipelines = PipelinesFinder.new(project).execute(scope: @scope).page(params[:page]).per(30)
-    @pipelines = @pipelines.includes(project: :namespace)
+    @pipelines = PipelinesFinder
+      .new(project)
+      .execute(scope: @scope)
+      .page(params[:page])
+      .per(30)
 
-    @running_or_pending_count = PipelinesFinder.new(project).execute(scope: 'running').count
-    @pipelines_count = PipelinesFinder.new(project).execute.count
+    @running_or_pending_count = PipelinesFinder
+      .new(project).execute(scope: 'running').count
+
+    @pipelines_count = PipelinesFinder
+      .new(project).execute.count
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: {
+          pipelines: PipelineSerializer
+            .new(project: @project, user: @current_user)
+            .with_pagination(request, response)
+            .represent(@pipelines),
+          count: {
+            all: @pipelines_count,
+            running_or_pending: @running_or_pending_count
+          }
+        }
+      end
+    end
   end
 
   def new
diff --git a/app/models/ci/pipeline.rb b/app/models/ci/pipeline.rb
index abbbddaa4f6..2a97e8bae4a 100644
--- a/app/models/ci/pipeline.rb
+++ b/app/models/ci/pipeline.rb
@@ -142,7 +142,7 @@ module Ci
     end
 
     def artifacts
-      builds.latest.with_artifacts_not_expired
+      builds.latest.with_artifacts_not_expired.includes(project: [:namespace])
     end
 
     def project_id
@@ -191,7 +191,11 @@ module Ci
     end
 
     def manual_actions
-      builds.latest.manual_actions
+      builds.latest.manual_actions.includes(project: [:namespace])
+    end
+
+    def stuck?
+      builds.pending.any?(&:stuck?)
     end
 
     def retryable?
@@ -283,6 +287,10 @@ module Ci
       end
     end
 
+    def has_yaml_errors?
+      yaml_errors.present?
+    end
+
     def environments
       builds.where.not(environment: nil).success.pluck(:environment).uniq
     end
diff --git a/app/serializers/build_action_entity.rb b/app/serializers/build_action_entity.rb
new file mode 100644
index 00000000000..3e72892d584
--- /dev/null
+++ b/app/serializers/build_action_entity.rb
@@ -0,0 +1,14 @@
+class BuildActionEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :name do |build|
+    build.name.humanize
+  end
+
+  expose :path do |build|
+    play_namespace_project_build_path(
+      build.project.namespace,
+      build.project,
+      build)
+  end
+end
diff --git a/app/serializers/build_artifact_entity.rb b/app/serializers/build_artifact_entity.rb
new file mode 100644
index 00000000000..8b643d8e783
--- /dev/null
+++ b/app/serializers/build_artifact_entity.rb
@@ -0,0 +1,14 @@
+class BuildArtifactEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :name do |build|
+    build.name
+  end
+
+  expose :path do |build|
+    download_namespace_project_build_artifacts_path(
+      build.project.namespace,
+      build.project,
+      build)
+  end
+end
diff --git a/app/serializers/commit_entity.rb b/app/serializers/commit_entity.rb
index acc20f6dc52..49f4db36295 100644
--- a/app/serializers/commit_entity.rb
+++ b/app/serializers/commit_entity.rb
@@ -3,6 +3,10 @@ class CommitEntity < API::Entities::RepoCommit
 
   expose :author, using: UserEntity
 
+  expose :author_gravatar_url do |commit|
+    GravatarService.new.execute(commit.author_email)
+  end
+
   expose :commit_url do |commit|
     namespace_project_tree_url(
       request.project.namespace,
diff --git a/app/serializers/pipeline_entity.rb b/app/serializers/pipeline_entity.rb
new file mode 100644
index 00000000000..d04a4990cb0
--- /dev/null
+++ b/app/serializers/pipeline_entity.rb
@@ -0,0 +1,83 @@
+class PipelineEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :id
+  expose :user, using: UserEntity
+
+  expose :path do |pipeline|
+    namespace_project_pipeline_path(
+      pipeline.project.namespace,
+      pipeline.project,
+      pipeline)
+  end
+
+  expose :details do
+    expose :status do |pipeline, options|
+      StatusEntity.represent(
+        pipeline.detailed_status(request.user),
+        options)
+    end
+
+    expose :duration
+    expose :finished_at
+    expose :stages, using: StageEntity
+    expose :artifacts, using: BuildArtifactEntity
+    expose :manual_actions, using: BuildActionEntity
+  end
+
+  expose :flags do
+    expose :latest?, as: :latest
+    expose :triggered?, as: :triggered
+    expose :stuck?, as: :stuck
+    expose :has_yaml_errors?, as: :yaml_errors
+    expose :can_retry?, as: :retryable
+    expose :can_cancel?, as: :cancelable
+  end
+
+  expose :ref do
+    expose :name do |pipeline|
+      pipeline.ref
+    end
+
+    expose :path do |pipeline|
+      namespace_project_tree_path(
+        pipeline.project.namespace,
+        pipeline.project,
+        id: pipeline.ref)
+    end
+
+    expose :tag?, as: :tag
+    expose :branch?, as: :branch
+  end
+
+  expose :commit, using: CommitEntity
+  expose :yaml_errors, if: ->(pipeline, _) { pipeline.has_yaml_errors? }
+
+  expose :retry_path, if: proc { can_retry? }  do |pipeline|
+    retry_namespace_project_pipeline_path(pipeline.project.namespace,
+                                          pipeline.project,
+                                          pipeline.id)
+  end
+
+  expose :cancel_path, if: proc { can_cancel? } do |pipeline|
+    cancel_namespace_project_pipeline_path(pipeline.project.namespace,
+                                           pipeline.project,
+                                           pipeline.id)
+  end
+
+  expose :created_at, :updated_at
+
+  private
+
+  alias_method :pipeline, :object
+
+  def can_retry?
+    pipeline.retryable? &&
+      can?(request.user, :update_pipeline, pipeline)
+  end
+
+  def can_cancel?
+    pipeline.cancelable? &&
+      can?(request.user, :update_pipeline, pipeline)
+  end
+end
diff --git a/app/serializers/pipeline_serializer.rb b/app/serializers/pipeline_serializer.rb
new file mode 100644
index 00000000000..cfa86cc2553
--- /dev/null
+++ b/app/serializers/pipeline_serializer.rb
@@ -0,0 +1,40 @@
+class PipelineSerializer < BaseSerializer
+  entity PipelineEntity
+  class InvalidResourceError < StandardError; end
+  include API::Helpers::Pagination
+  Struct.new('Pagination', :request, :response)
+
+  def represent(resource, opts = {})
+    if paginated?
+      raise InvalidResourceError unless resource.respond_to?(:page)
+
+      super(paginate(resource.includes(project: :namespace)), opts)
+    else
+      super(resource, opts)
+    end
+  end
+
+  def paginated?
+    defined?(@pagination)
+  end
+
+  def with_pagination(request, response)
+    tap { @pagination = Struct::Pagination.new(request, response) }
+  end
+
+  private
+
+  # Methods needed by `API::Helpers::Pagination`
+  #
+  def params
+    @pagination.request.query_parameters
+  end
+
+  def request
+    @pagination.request
+  end
+
+  def header(header, value)
+    @pagination.response.headers[header] = value
+  end
+end
diff --git a/app/serializers/request_aware_entity.rb b/app/serializers/request_aware_entity.rb
index e159d750cb7..3039014aaaa 100644
--- a/app/serializers/request_aware_entity.rb
+++ b/app/serializers/request_aware_entity.rb
@@ -2,14 +2,11 @@ module RequestAwareEntity
   extend ActiveSupport::Concern
 
   included do
-    include Gitlab::Routing.url_helpers
+    include Gitlab::Routing
+    include Gitlab::Allowable
   end
 
   def request
-    @options.fetch(:request)
-  end
-
-  def can?(object, action, subject)
-    Ability.allowed?(object, action, subject)
+    options.fetch(:request)
   end
 end
diff --git a/app/serializers/stage_entity.rb b/app/serializers/stage_entity.rb
new file mode 100644
index 00000000000..7a047bdc712
--- /dev/null
+++ b/app/serializers/stage_entity.rb
@@ -0,0 +1,38 @@
+class StageEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :name
+
+  expose :title do |stage|
+    "#{stage.name}: #{detailed_status.label}"
+  end
+
+  expose :detailed_status,
+    as: :status,
+    with: StatusEntity
+
+  expose :path do |stage|
+    namespace_project_pipeline_path(
+      stage.pipeline.project.namespace,
+      stage.pipeline.project,
+      stage.pipeline,
+      anchor: stage.name)
+  end
+
+  expose :dropdown_path do |stage|
+    stage_namespace_project_pipeline_path(
+      stage.pipeline.project.namespace,
+      stage.pipeline.project,
+      stage.pipeline,
+      stage: stage.name,
+      format: :json)
+  end
+
+  private
+
+  alias_method :stage, :object
+
+  def detailed_status
+    stage.detailed_status(request.user)
+  end
+end
diff --git a/app/serializers/status_entity.rb b/app/serializers/status_entity.rb
new file mode 100644
index 00000000000..47066bebfb1
--- /dev/null
+++ b/app/serializers/status_entity.rb
@@ -0,0 +1,8 @@
+class StatusEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :icon, :text, :label, :group
+
+  expose :has_details?, as: :has_details
+  expose :details_path
+end
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 4bb3d4d35fb..abea6932567 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -35,21 +35,34 @@
 
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
-
-  .content-list.pipelines
+  .content-list.pipelines{ data: { url: namespace_project_pipelines_path(@project.namespace, @project, format: :json) } }
     - if @pipelines.blank?
       %div
         .nothing-here-block No pipelines to show
     - else
-      .table-holder
-        %table.table.ci-table.js-pipeline-table
-          %thead
-            %th.pipeline-status Status
-            %th.pipeline-info Pipeline
-            %th.pipeline-commit Commit
-            %th.pipeline-stages Stages
-            %th.pipeline-date
-            %th.pipeline-actions.hidden-xs
-          = render @pipelines, commit_sha: true, stage: true, allow_retry: true
-
-      = paginate @pipelines, theme: 'gitlab'
+      .pipeline-svgs{ "data" => {"commit_icon_svg" => custom_icon("icon_commit"),
+        "icon_status_canceled" => custom_icon("icon_status_canceled"),
+        "icon_status_running" => custom_icon("icon_status_running"),
+        "icon_status_skipped" => custom_icon("icon_status_skipped"),
+        "icon_status_created" => custom_icon("icon_status_created"),
+        "icon_status_pending" => custom_icon("icon_status_pending"),
+        "icon_status_success" => custom_icon("icon_status_success"),
+        "icon_status_failed" => custom_icon("icon_status_failed"),
+        "icon_status_warning" => custom_icon("icon_status_warning"),
+        "stage_icon_status_canceled" => custom_icon("icon_status_canceled_borderless"),
+        "stage_icon_status_running" => custom_icon("icon_status_running_borderless"),
+        "stage_icon_status_skipped" => custom_icon("icon_status_skipped_borderless"),
+        "stage_icon_status_created" => custom_icon("icon_status_created_borderless"),
+        "stage_icon_status_pending" => custom_icon("icon_status_pending_borderless"),
+        "stage_icon_status_success" => custom_icon("icon_status_success_borderless"),
+        "stage_icon_status_failed" => custom_icon("icon_status_failed_borderless"),
+        "stage_icon_status_warning" => custom_icon("icon_status_warning_borderless"),
+        "icon_play" => custom_icon("icon_play"),
+        "icon_timer" => custom_icon("icon_timer"),
+        "icon_status_manual" => custom_icon("icon_status_manual"),
+      } }
+
+      .vue-pipelines-index
+
+= page_specific_javascript_tag('vue_pagination/index.js')
+= page_specific_javascript_tag('vue_pipelines_index/index.js')