make last 5 builds work

app/components/branch-row.coffee

@@ -9,7 +9,7 @@ BranchRowComponent = Ember.Component.extend
   tagName: 'li'
   classNameBindings: ['build.last_build.state']
   classNames: ['branch-row']
-  isLoading: true
+  isLoading: false
 
   urlGithubCommit: (->
     githubCommitUrl(@get('build.repository.slug'), @get('build.last_build.commit.sha'))
@@ -17,25 +17,37 @@ BranchRowComponent = Ember.Component.extend
 
   getLast5Builds: (->
 
-    array = [{}, {}, {}, {}, {}]
+    lastBuilds = Ember.ArrayProxy.create(
+      content: [{}, {}, {}, {}, {}]
+      isLoading: true,
+      count: 0
+    )
 
-    if @get('build.last_build') == null
-      @set('isLoading', false)
-      array
+    if !@get('build.last_build')
+      lastBuilds.set('isLoading', false)
     else
-      array
+      apiEndpoint = config.apiEndpoint
+      repoId = @get('build.repository.id')
+      branchName = @get('build.name')
 
-    # apiEndpoint = config.apiEndpoint
-    # repoId = @get('build.repository.id')
+      options = {}
+      if @get('auth.signedIn')
+        options.headers = { Authorization: "token #{@auth.token()}" }
 
-    # options = {}
-    # if @get('auth.signedIn')
-    #   options.headers = { Authorization: "token #{@auth.token()}" }
+      $.ajax("#{apiEndpoint}/v3/repo/#{repoId}/builds?branch.name=#{branchName}&limit=5&offset=1", options).then (response) ->
+        array = response.builds.map( (build) ->
+          Ember.Object.create(build)
+        )
+        if array.length < 5
+          for i in [1..5 - array.length] by 1
+            array.push({})
 
-    # $.ajax("#{apiEndpoint}/v3/repo/269284/builds?branch.name=master&limit=5", options).then (response) ->
-    #   console.log(response)
-    #   @set('isLoading', false)
-  ).property('build')
+        lastBuilds.set('count', response['@pagination'].count)
+        lastBuilds.set('content', array)
+        lastBuilds.set('isLoading', false)
+
+    lastBuilds
+  ).property()
 
   actions:
     tiggerBuild: (branch) ->

app/components/request-icon.coffee

@@ -4,22 +4,25 @@ RequestIconComponent = Ember.Component.extend
 
   tagName: 'span'
   classNames: ['icon-request']
-  classNameBindings: ['build.last_build.state']
+  classNameBindings: ['build.last_build.state', 'build.state']
 
   isPush: (->
-    @get('build.last_build.event_type') == 'push'
+    @get('build.last_build.event_type') == 'push' ||
+    @get('build.event_type') == 'push'
   ).property('build.last_build')
 
   isPR: (->
-    @get('build.last_build.event_type') == 'pull_request'
+    @get('build.last_build.event_type') == 'pull_request' ||
+    @get('build.event_type') == 'pull_request'
   ).property('build.last_build')
 
   isAPI: (->
-    @get('build.last_build.event_type') == 'api'
+    @get('build.last_build.event_type') == 'api' ||
+    @get('build.event_type') == 'api'
   ).property('build.last_build')
 
   isEmpty: (->
-    true if @get('build.last_build') == null
+    true if @get('build.last_build') == null || @get('build') == null
   ).property('build.last_build')
 
 

app/components/status-icon.coffee

@@ -7,31 +7,44 @@ StatusIconComponent = Ember.Component.extend
   classNameBindings: ['build.last_build.state']
 
   hasPassed: (->
-    @get('build.last_build.state') == 'passed'
-  ).property('build.last_build.state')
+    @get('build.last_build.state') == 'passed' ||
+    @get('build.state') == 'passed'
+  ).property('build')
 
   hasFailed: (->
-    @get('build.last_build.state') == 'failed'
-  ).property('build.last_build.state')
+    @get('build.last_build.state') == 'failed' ||
+    @get('build.state') == 'failed'
+  ).property('build')
 
   hasErrored: (->
-    @get('build.last_build.state') == 'errored'
-  ).property('build.last_build.state')
+    @get('build.last_build.state') == 'errored' ||
+    @get('build.state') == 'errored'
+  ).property('build')
 
   wasCanceled: (->
-    @get('build.last_build.state') == 'canceled'
-  ).property('build.last_build.state')
+    @get('build.last_build.state') == 'canceled' ||
+    @get('build.state') == 'canceled'
+  ).property('build')
 
   isRunning: (->
     @get('build.last_build.state') == 'started' || 
     @get('build.last_build.state') == 'queued' ||
     @get('build.last_build.state') == 'booting' ||
     @get('build.last_build.state') == 'received' ||
-    @get('build.last_build.state') == 'created'
-  ).property('build.last_build.state')
+    @get('build.last_build.state') == 'created' ||
+    @get('build.state') == 'started' || 
+    @get('build.state') == 'queued' ||
+    @get('build.state') == 'booting' ||
+    @get('build.state') == 'received' ||
+    @get('build.state') == 'created'
+  ).property('build')
 
   isEmpty: (->
-    true if @get('build.last_build') == null
-  ).property('build.last_build')
+    if @get('build.@type') == 'branch'
+      true if @get('build.last_build.state') == null
+    else if @get('build.@type') == 'build'
+      false if @get('build.state') != ''
+
+  ).property('build')
 
 `export default StatusIconComponent`

app/controllers/branches.coffee

@@ -14,6 +14,9 @@ BranchesController = Ember.Controller.extend
     repos = @get('model')
     repos = repos.filter (item, index) ->
       item if item.exists_on_github == true
+    .sort (a, b) ->
+      return 0
+
   ).property('model')
 
   inactiveBranches: (->

app/styles/app/components/build-tile.sass

@@ -28,6 +28,7 @@
     display: inline-block
     height: 100%
     width: 18.8%
+    background-color: #F7F7F7
     .status-icon
       position: absolute
       top: 0
@@ -36,7 +37,7 @@
       left: 0
       width: 2rem
       height: 2rem
-      margin: auto
+      margin: auto !important
       background-color: transparent
       .is-rotating
         width: 100%

app/styles/app/layouts/branches.sass

@@ -22,7 +22,7 @@
   color: $grey-dark
   background: linear-gradient(to right, #CACECE 0%, #CACECE 9px, white 10px, white 100%) no-repeat
 
-  span
+  span[class*="icon"]
     width: 1.3em
     height: 1.3em
     margin-right: .2em

app/templates/branches.hbs

@@ -6,27 +6,27 @@
     </ul>
   </section>
 
-  <section>
-    <h2 class="small-title">Active Branches</h2>
-    <ul class="blank-list">
-      {{#each branch in activeBranches}}
-        {{branch-row build=branch}}
-      {{else}}
-        <li>There are no active branches</li>
-      {{/each}}
-    </ul>
-  </section>
+  {{#if activeBranches}}
+    <section>
+      <h2 class="small-title">Active Branches</h2>
+      <ul class="blank-list">
+        {{#each branch in activeBranches}}
+          {{branch-row build=branch}}
+        {{/each}}
+      </ul>
+    </section>
+  {{/if}}
 
-  <section>
-    <h2 class="small-title">Inactive Branches</h2>
-    <ul class="blank-list">
-      {{#each branch in inactiveBranches}}
-        {{branch-row build=branch}}
-      {{else}}
-        <li>There are no inactive branches</li>
-      {{/each}}
-    </ul>
-  </section>
+  {{#if inactiveBranches}}
+    <section>
+      <h2 class="small-title">Inactive Branches</h2>
+      <ul class="blank-list">
+        {{#each branch in inactiveBranches}}
+          {{branch-row build=branch}}
+        {{/each}}
+      </ul>
+    </section>
+  {{/if}}
 
 
   {{!-- {{#if content.isLoaded}} --}}

app/templates/components/branch-row.hbs

@@ -3,7 +3,7 @@
     <h2 class="row-item">{{status-icon build=build}}{{build.name}}</h2>
   </div>
   <div class="branch-builds">
-    <div class="row-item"><a href="#">
+    <div class="row-item">
     <span class="icon-line-build">
       <svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve" enable-background="new 0 0 20 20">
       <g id="Build">
@@ -20,11 +20,15 @@
       </g>
     </svg></span>
     {{#if build.last_build}}
-      ~ builds
+      {{#if getLast5Builds.isLoading}}
+        {{loading-indicator inline=true}}
+      {{else}}
+        {{getLast5Builds.count}} builds
+      {{/if}}
     {{else}}
       0 builds
     {{/if}}
-    </a></div>
+    </div>
   </div>
 </div>
 <div class="two-line">
@@ -42,7 +46,7 @@
   </div>
   <div class="branch-calendar">
     <div class="row-item" title="{{pretty-date build.last_build.finished_at}}">
-      <span class="">
+      <span class="icon">
         <svg viewBox="0 0 20 20">
           <g id="Cal">
             <path fill="#A7AEAE" d="M16.7,2.5H3.3C3,2.5,2.8,2.7,2.8,3V17c0,0.3,0.2,0.5,0.5,0.5h13.4c0.3,0,0.5-0.2,0.5-0.5V3
@@ -70,7 +74,7 @@
   <div class="branch-commit">
     <div class="row-item">
       <a href="{{urlGithubCommit}}" title="commit on GitHub">
-      <span class="">
+      <span class="icon">
         <svg x="0px" y="0px" viewBox="2 0 20 20" xml:space="preserve">
           <g id="Commit">
             <path fill="#A7AEAE" d="M7.8,17.5c-0.3,0-0.5-0.2-0.5-0.5l0-1c-0.4,0-1,0.1-1.4-0.1c-0.4-0.1-1.3-0.5-1.8-1.7
@@ -163,8 +167,12 @@
 </div>
 <div class="one-line">
   <ul class="build-tiles">
-    {{#each buildTile in getLast5Builds}}
+  {{#if getLast5Builds.isLoading}}
+    {{loading-indicator center=true}}
+  {{else}}
+    {{#each buildTile in getLast5Builds.content}}
       {{build-tile build=buildTile}}
     {{/each}}
+  {{/if}}
   </ul>
 </div>

app/templates/components/build-tile.hbs

@@ -1,8 +1,8 @@
-{{#unless build}}
-  <a href="#" class="dropup-trigger">
+{{#if build.number}}
+  {{#link-to "build" build.repository.slug build.id class="dropup-trigger"}}
     {{status-icon build=build}}
     <div class="dropup--status">
       {{request-icon build=build}} #{{build.number}}
     </div>
-  </a>
-{{/unless}}
+  {{/link-to}}
+{{/if}}