4 files changed, 36 insertions, 21 deletions
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index 229bdfb0e8d..ca76f13ef5e 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -1,6 +1,6 @@
 .page-content-header
   .header-main-content
-    = ci_status_with_icon(@pipeline.detailed_status)
+    = render 'ci/status/badge', status: @pipeline.detailed_status(current_user)
     %strong Pipeline ##{@commit.pipelines.last.id}
     triggered #{time_ago_with_tooltip(@commit.authored_date)} by
     = author_avatar(@commit, size: 24)
@@ -23,7 +23,7 @@
 .info-well
   - if @commit.status
     .well-segment.pipeline-info
-      %div{class: "icon-container ci-status-icon-#{@commit.status}"}
+      %div{ class: "icon-container ci-status-icon-#{@commit.status}" }
         = ci_icon_for_status(@commit.status)
       = pluralize @pipeline.statuses.count(:id), "build"
       - if @pipeline.ref
diff --git a/app/views/projects/pipelines/_stage.html.haml b/app/views/projects/pipelines/_stage.html.haml
new file mode 100644
index 00000000000..a0b14a7274a
--- /dev/null
+++ b/app/views/projects/pipelines/_stage.html.haml
@@ -0,0 +1,3 @@
+- @stage.statuses.latest.each do |status|
+  %li
+    = render 'ci/status/dropdown_graph_badge', subject: status
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index e1e787dbde4..df36279ed75 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -5,23 +5,23 @@
 %div{ class: container_class }
   .top-area
     %ul.nav-links
-      %li{class: ('active' if @scope.nil?)}
+      %li{ class: ('active' if @scope.nil?) }>
         = link_to project_pipelines_path(@project) do
           All
           %span.badge.js-totalbuilds-count
             = number_with_delimiter(@pipelines_count)
 
-      %li{class: ('active' if @scope == 'running')}
+      %li{ class: ('active' if @scope == 'running') }>
         = link_to project_pipelines_path(@project, scope: :running) do
           Running
           %span.badge.js-running-count
             = number_with_delimiter(@running_or_pending_count)
 
-      %li{class: ('active' if @scope == 'branches')}
+      %li{ class: ('active' if @scope == 'branches') }>
         = link_to project_pipelines_path(@project, scope: :branches) do
           Branches
 
-      %li{class: ('active' if @scope == 'tags')}
+      %li{ class: ('active' if @scope == 'tags') }>
         = link_to project_pipelines_path(@project, scope: :tags) do
           Tags
 
@@ -35,21 +35,33 @@
 
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
-
-  %div.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
-          %thead
-            %th Status
-            %th Pipeline
-            %th Commit
-            %th Stages
-            %th
-            %th.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_pipelines_index/index.js')
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index 29a41bc664b..49c1d886423 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -2,7 +2,7 @@
 - page_title "Pipeline"
 = render "projects/pipelines/head"
 
-%div.js-pipeline-container{ class: container_class, data: { controller_action: "#{controller.action_name}" } }
+.js-pipeline-container{ class: container_class, data: { controller_action: "#{controller.action_name}" } }
   - if @commit
     = render "projects/pipelines/info"