re-wired a lot of the application - need a few more API values

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

@@ -3,10 +3,13 @@
 
 ((gl) => {
   gl.VueBranchCommit = Vue.extend({
-    props: ['pipeline', 'shortsha'],
-    methods: {
-      commiturl(sha) {
-        return `./commit/${sha}`;
+    props: ['pipeline'],
+    computed: {
+      mailto() {
+        return `mailto:${this.pipeline.commit.author_email}`;
+      },
+      alt() {
+        return `${this.pipeline.commit.author_name}'s avatar`
       },
     },
     template: `
@@ -14,7 +17,7 @@
         <div class="icon-container">
           <i class="fa fa-code-fork"></i>
           </div>
-          <a class="monospace branch-name" href="./commits/master">master</a>
+          <a class="monospace branch-name" href="./commits/master">{{pipeline.ref.name}}</a>
           <div class="icon-container commit-icon">
           <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
             <path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"></path>
@@ -22,36 +25,28 @@
         </div>
         <a
           class="commit-id monospace"
-          :href='commiturl(pipeline.sha)'
+          :href='pipeline.commit.commit_url'
         >
-          {{shortsha(pipeline)}}
+          {{pipeline.commit.short_id}}
         </a>
         <p class="commit-title">
           <a
-            href="mailto:james@jameslopez.es"
+            :href='mailto'
           >
-            <!--
-              need Author Name
-              need Plural Version of Author Name: Rails has this built in
-              need gravatar HASH for author
-              need authors email
-            -->
+            <!-- still need gravatar url -->
             <img
               class="avatar has-tooltip s20 hidden-xs"
-              alt="James Lopez's avatar"
-              title="James Lopez"
+              :alt='alt'
+              :title='pipeline.commit.author_name'
               data-container="body"
               src="http://www.gravatar.com/avatar/80d3b651b4be1f1db39435c2d11f1f23?s=40&amp;d=identicon"
             >
           </a>
           <a
             class="commit-row-message"
-            :href='commiturl(pipeline.sha)'
+            :href='pipeline.commit.commit_url'
           >
-            <!--
-              need commit message/title for SHA
-            -->
-            fix broken repo 500 errors in UI and added relevant specs
+            {{pipeline.commit.title}}
           </a>
         </p>
       </td>

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

@@ -6,6 +6,7 @@
 //= require ./store.js.es6
 //= require ./pipeline_url.js.es6
 //= require ./pipeline_head.js.es6
+//= require ./stage.js.es6
 //= require ./stages.js.es6
 //= require ./pipeline_actions.js.es6
 //= require ./branch_commit.js.es6

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

@@ -8,15 +8,20 @@
     },
     props: [
       'pipeline',
-      'pipelineurl',
     ],
+    computed: {
+      user() {
+        if (!this.pipeline.user) return 'API';
+        return this.pipeline.user;
+      },
+    },
     template: `
       <td>
-        <a :href='pipelineurl(pipeline.id)'>
+        <a :href='pipeline.url'>
           <span class="pipeline-id">#{{pipeline.id}}</span>
         </a>
         <span>by</span>
-        <span class="api monospace">{{pipeline.user}}</span>
+        <span class="api monospace">{{user}}</span>
       </td>
     `,
   });

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

@@ -44,12 +44,8 @@
 
         window.history.pushState({}, null, `?p=${this.pagenum}`);
         clearInterval(this.intervalId);
-        debugger
         this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope);
       },
-      pipelineurl(id) {
-        return `pipelines/${id}`;
-      },
     },
     template: `
       <div>
@@ -58,22 +54,10 @@
             <vue-pipeline-head></vue-pipeline-head>
             <tbody>
               <tr class="commit" v-for='pipeline in pipelines'>
-                <vue-status-scope
-                  :scope='pipeline'
-                  :scopeurl='pipelineurl'
-                >
-                </vue-status-scope>
-                <vue-pipeline-url
-                  :pipeline='pipeline'
-                  :pipelineurl='pipelineurl'
-                >
-                </vue-pipeline-url>
-                <vue-branch-commit
-                  :pipeline='pipeline'
-                  :shortsha='pipeline.commit.shortsha'
-                >
-                </vue-branch-commit>
-                <vue-stages></vue-stages>
+                <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>
               </tr>

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

+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueStage = Vue.extend({
+    components: {
+      'running-icon': gl.VueRunningIcon,
+      'pending-icon': gl.VuePendingIcon,
+      'failed-icon': gl.VueFailedIcon,
+      'success-icon': gl.VueSuccessIcon,
+    },
+    props: ['stage'],
+    computed: {
+      buildStatus() {
+        return `Build: ${this.stage.status}`;
+      },
+    },
+    template: `
+      <a
+        class="has-tooltip ci-status-icon-failed"
+        :title='buildStatus'
+        :href='stage.url'
+      >
+        <running-icon v-if='stage.status === "running"'></running-icon>
+        <success-icon v-if='stage.status === "success"'></success-icon>
+        <failed-icon v-if='stage.status === "failed"'></failed-icon>
+        <pending-icon v-if='stage.status === "pending"'></pending-icon>
+      </a>
+    `,
+  });
+})(window.gl || (window.gl = {}));

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

@@ -7,8 +7,8 @@
       const goFetch = () =>
         this.$http.get(`${url}?page=${pageNum}`)
           .then((response) => {
+            const res = JSON.parse(response.body);
             debugger
-            const res = JSON.parse(response.body)
             Vue.set(this, 'pipelines', res.pipelines);
           }, () => new Flash(
             'Something went wrong on our end.'

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

@@ -24,7 +24,7 @@
       finishdate() {
         const date = new Date(
           new Date(
-            this.pipeline.finished_at
+            this.pipeline.details.finished_at
           ).getTime() - new Date(
             this.pipeline.started_at
           ).getTime()
@@ -51,7 +51,7 @@
 
         options.timeZoneName = 'short';
 
-        const finished = this.pipeline.finished_at;
+        const finished = this.pipeline.details.finished_at;
 
         if (!finished) return false;
 

app/assets/javascripts/vue_pipelines_status/failed.js.es6

@@ -7,12 +7,11 @@
       'vue-failed-icon': gl.VueFailedIcon,
     },
     props: [
-      'scope',
-      'scopeurl',
+      'pipeline',
     ],
     template: `
       <td class="commit-link">
-        <a :href='scopeurl(scope.id)'>
+        <a :href='pipeline.url'>
           <span class="ci-status ci-failed">
             <vue-failed-icon></vue-failed-icon>
             &nbsp;failed

app/assets/javascripts/vue_pipelines_status/pending.js.es6

@@ -7,12 +7,11 @@
       'vue-pending-icon': gl.VuePendingIcon,
     },
     props: [
-      'scope',
-      'scopeurl',
+      'pipeline',
     ],
     template: `
       <td class="commit-link">
-        <a :href='scopeurl(scope.id)'>
+        <a :href='pipeline.url'>
           <span class="ci-status ci-pending">
             <vue-pending-icon></vue-pending-icon>
             &nbsp;pending

app/assets/javascripts/vue_pipelines_status/running.js.es6

@@ -7,12 +7,11 @@
       'vue-running-icon': gl.VueRunningIcon,
     },
     props: [
-      'scope',
-      'scopeurl',
+      'pipeline',
     ],
     template: `
       <td class="commit-link">
-        <a :href='scopeurl(scope.id)'>
+        <a :href='pipeline.url'>
           <span class="ci-status ci-running">
             <vue-running-icon></vue-running-icon>
             &nbsp;running

app/assets/javascripts/vue_pipelines_status/status.js.es6

@@ -9,27 +9,23 @@
       'vue-failed-scope': gl.VueFailedScope,
     },
     props: [
-      'scope',
-      'scopeurl',
+      'pipeline',
     ],
     template: `
       <td class="commit-link">
         <vue-running-scope
-          v-if="scope.status === 'running'"
-          :scope='scope'
-          :scopeurl='scopeurl'
+          v-if="pipeline.details.status === 'running'"
+          :pipeline='pipeline'
         >
         </vue-running-scope>
         <vue-pending-scope
-          v-if="scope.status === 'pending'"
-          :scope='scope'
-          :scopeurl='scopeurl'
+          v-if="pipeline.details.status === 'pending'"
+          :pipeline='pipeline'
         >
         </vue-pending-scope>
         <vue-failed-scope
-          v-if="scope.status === 'failed'"
-          :scope='scope'
-          :scopeurl='scopeurl'
+          v-if="pipeline.details.status === 'failed'"
+          :pipeline='pipeline'
         >
         </vue-failed-scope>
       </td>