integrate vue components, use intance variables to pass data to vue

app/assets/javascripts/pipeline.vue.js.es6

+//= require vue
+
+(gl => {
+  gl.VuePipeLine = Vue.extend({
+    props: ['pipeline'],
+    template: `
+      <div>
+        <td>
+          {{ pipeline.status }}
+        </td>
+      </div>
+    `
+  })
+})(window.gl || (window.gl = {}))

app/assets/javascripts/pipelines.vue.js.es6

+//= require vue
+
+(gl => {
+  gl.VuePipeLines = Vue.extend({
+    props: ['pipelines', 'count'],
+    template: `
+      <section class="table-holder">
+        <table class="table ci-table">
+          <tr>
+            <th>Status</th>
+            <th>Pipeline</th>
+            <th>Commit</th>
+            <th>Stages</th>
+            <th></th>
+            <th class="hidden-xs"></th>
+          <tr>
+          <tr>
+            <div v-for='pipeline in pipes'>
+              <vue-pipeline :pipeline='pipeline'></vue-pipeline>
+            </div>
+          </tr>
+        </table>
+      </section>
+    `,
+    computed: {
+      pipes() {
+        return this.pipelines
+      }
+    }
+  })
+})(window.gl || (window.gl = {}))

app/views/projects/pipelines/index.html.haml

@@ -36,21 +36,41 @@
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
-  %div.content-list.pipelines
-    - stages = @pipelines.stages
-    - 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, stages: stages
+        .app
+  -# %div.content-list.pipelines
+  -#   - stages = @pipelines.stages
+  -#   - 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, stages: stages
       = paginate @pipelines, theme: 'gitlab'
+
+:javascript
+  var VuePipeLines = gl.VuePipeLines
+  var VuePipeLine = gl.VuePipeLine
+
+  Vue.component('vue-pipelines', VuePipeLines)
+  Vue.component('vue-pipeline', VuePipeLine)
+
+  new Vue({
+    el: ".app",
+    data:{
+      pipelines: JSON.parse('#{@pipelines.to_json}'),
+      count: JSON.parse('#{@pipeline_count.to_json}')
+    },
+    template: ""
+      + "<div>"
+      + "<vue-pipelines :pipelines='pipelines' :count='count'></vue-pipelines>"
+      + "</div>"
+  })

db/schema.rb

@@ -86,8 +86,8 @@ ActiveRecord::Schema.define(version: 20161024042317) do
     t.string "health_check_access_token"
     t.boolean "send_user_confirmation_email", default: false
     t.integer "container_registry_token_expire_delay", default: 5
-    t.text "after_sign_up_text"
     t.boolean "user_default_external", default: false, null: false
+    t.text "after_sign_up_text"
     t.string "repository_storage", default: "default"
     t.string "enabled_git_access_protocol"
     t.boolean "domain_blacklist_enabled", default: false
@@ -182,8 +182,8 @@ ActiveRecord::Schema.define(version: 20161024042317) do
     t.text "artifacts_metadata"
     t.integer "erased_by_id"
     t.datetime "erased_at"
-    t.datetime "artifacts_expire_at"
     t.string "environment"
+    t.datetime "artifacts_expire_at"
     t.integer "artifacts_size", limit: 8
     t.string "when"
     t.text "yaml_variables"
@@ -825,10 +825,10 @@ ActiveRecord::Schema.define(version: 20161024042317) do
     t.integer "user_id", null: false
     t.string "token", null: false
     t.string "name", null: false
-    t.boolean "revoked", default: false
-    t.datetime "expires_at"
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.boolean "revoked", default: false
+    t.datetime "expires_at"
   end
   add_index "personal_access_tokens", ["token"], name: "index_personal_access_tokens_on_token", unique: true, using: :btree
@@ -899,8 +899,8 @@ ActiveRecord::Schema.define(version: 20161024042317) do
     t.boolean "only_allow_merge_if_build_succeeds", default: false, null: false
     t.boolean "has_external_issue_tracker"
     t.string "repository_storage", default: "default", null: false
-    t.boolean "request_access_enabled", default: true, null: false
     t.boolean "has_external_wiki"
+    t.boolean "request_access_enabled", default: true, null: false
     t.boolean "lfs_enabled"
     t.text "description_html"
   end