add artifact and action functionality - branch name back in

app/assets/javascripts/vue_pipelines_index/branch_commit.js.es6

@@ -21,6 +21,7 @@
           <a
             class="monospace branch-name"
             :href='pipeline.commit.commit_url'
+          >
             {{pipeline.ref.name}}
           </a>
           <div class="icon-container commit-icon">

app/assets/javascripts/vue_pipelines_index/pipeline_actions.js.es6

@@ -3,7 +3,14 @@
 
 ((gl) => {
   gl.VuePipelineActions = Vue.extend({
-    // props: ['builds'],
+    props: [
+      'pipeline',
+    ],
+    methods: {
+      download(name) {
+        return `Download ${name} artifacts`;
+      },
+    },
     template: `
       <td class="pipeline-actions hidden-xs">
         <div class="controls pull-right">
@@ -20,11 +27,8 @@
               <i class="fa fa-caret-down"></i>
             </a>
             <ul class="dropdown-menu dropdown-menu-align-right">
-              <li>
-              <!--
-                Need builds ID for Play
-              -->
-                <a rel="nofollow" data-method="post" href="./builds/449/play">
+              <li v-for='action in pipeline.details.manual_actions'>
+                <a rel="nofollow" data-method="post" :href='action.url'>
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 11" class="icon-play">
                     <path
                       fill-rule="evenodd"
@@ -32,7 +36,7 @@
                     >
                     </path>
                   </svg>
-                  <span>Production</span>
+                  <span>{{action.name}}</span>
                 </a>
               </li>
             </ul>
@@ -43,19 +47,13 @@
                 <i class="fa fa-caret-down"></i>
               </a>
               <ul class="dropdown-menu dropdown-menu-align-right">
-                <li>
-                  <!--
-                    Need builds ID for OSX and LINUX
-                  -->
-                  <a rel="nofollow" href="./builds/437/artifacts/download">
-                    <i class="fa fa-download"></i>
-                    <span>Download 'build:osx' artifacts</span>
-                  </a>
-                </li>
-                <li>
-                  <a rel="nofollow" href="./builds/436/artifacts/download">
+                <li v-for='artifact in pipeline.details.artifacts'>
+                  <a
+                    rel="nofollow"
+                    :href='artifact.url'
+                  >
                     <i class="fa fa-download"></i>
-                    <span>Download 'build:linux' artifacts</span>
+                    <span>{{download(artifact.name)}}</span>
                   </a>
                 </li>
               </ul>
@@ -63,13 +61,26 @@
           </div>
           <div class="cancel-retry-btns inline">
             <a
+              v-if='!pipeline.cancel_url'
               class="btn has-tooltip"
               title="Retry"
               rel="nofollow"
               data-method="post"
-              href="pipelines/retry">
+              :href='pipeline.retry_url'
+            >
               <i class="fa fa-repeat"></i>
             </a>
+            <a
+              v-if='pipeline.cancel_url'
+              class="btn btn-remove has-tooltip"
+              title=""
+              rel="nofollow"
+              data-method="post"
+              href="/gitlab-org/gitlab-ce/pipelines/4950216/cancel"
+              data-original-title="Cancel"
+            >
+              <i class="fa fa-remove"></i>
+            </a>
           </div>
         </div>
       </td>

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

@@ -4,15 +4,15 @@
 ((gl) => {
   gl.VuePipeLines = Vue.extend({
     components: {
-      'vue-running-pipeline': gl.VueRunningPipeline,
-      'vue-stages': gl.VueStages,
-      'vue-pipeline-actions': gl.VuePipelineActions,
-      'vue-branch-commit': gl.VueBranchCommit,
-      'vue-pipeline-url': gl.VuePipelineUrl,
-      'vue-pipeline-head': gl.VuePipelineHead,
-      'vue-gl-pagination': gl.VueGlPagination,
-      'vue-status-scope': gl.VueStatusScope,
-      'vue-time-ago': gl.VueTimeAgo,
+      'running-pipeline': gl.VueRunningPipeline,
+      'stages': gl.VueStages,
+      'pipeline-actions': gl.VuePipelineActions,
+      'branch-commit': gl.VueBranchCommit,
+      'pipeline-url': gl.VuePipelineUrl,
+      'pipeline-head': gl.VuePipelineHead,
+      'gl-pagination': gl.VueGlPagination,
+      'status-scope': gl.VueStatusScope,
+      'time-ago': gl.VueTimeAgo,
     },
     data() {
       return {
@@ -54,26 +54,26 @@
       <div>
         <div class="table-holder">
           <table class="table ci-table">
-            <vue-pipeline-head></vue-pipeline-head>
+            <pipeline-head></pipeline-head>
             <tbody>
               <tr class="commit" v-for='pipeline in pipelines'>
-                <vue-status-scope :pipeline='pipeline'></vue-status-scope>
-                <vue-pipeline-url :pipeline='pipeline'></vue-pipeline-url>
-                <vue-branch-commit :pipeline='pipeline'></vue-branch-commit>
-                <vue-stages :pipeline='pipeline'></vue-stages>
-                <vue-time-ago :pipeline='pipeline'></vue-time-ago>
-                <vue-pipeline-actions></vue-pipeline-actions>
+                <status-scope :pipeline='pipeline'></status-scope>
+                <pipeline-url :pipeline='pipeline'></pipeline-url>
+                <branch-commit :pipeline='pipeline'></branch-commit>
+                <stages :pipeline='pipeline'></stages>
+                <time-ago :pipeline='pipeline'></time-ago>
+                <pipeline-actions :pipeline='pipeline'></pipeline-actions>
               </tr>
             </tbody>
           </table>
         </div>
-        <vue-gl-pagination
+        <gl-pagination
           v-if='count.all > 0'
           :pagenum='pagenum'
           :changepage='changepage'
           :count='count.all'
         >
-        </vue-gl-pagination>
+        </gl-pagination>
       </div>
     `,
   });

app/assets/javascripts/vue_pipelines_index/store.js.es6

@@ -32,6 +32,7 @@
         this.$http.get(`${url}?page=${pageNum}`)
           .then((response) => {
             const res = JSON.parse(response.body);
+            debugger
             Vue.set(this, 'updatedAt', res.updated_at);
             Vue.set(this, 'pipelines', res.pipelines);
             Vue.set(this, 'count', res.count);