refactor: build list item

Ephigenia · Dec 20, 2016 · f18bdc8 · f18bdc8
1 parent 10c4dfc
commit f18bdc8
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 47 deletions.
diff --git a/source/index.html b/source/index.html
@@ -46,6 +46,7 @@
   <script src="scripts/AppController.js"></script>
   <script src="scripts/ConfigController.js"></script>
   <script src="scripts/BuildList.js"></script>
+  <script src="scripts/BuildListItem.js"></script>
 
 </body>
 </html>
diff --git a/source/scripts/AppController.js b/source/scripts/AppController.js
@@ -51,7 +51,7 @@
       // countdown
       $scope.refreshInterval = window.setInterval(function() {
         $scope.countdown--;
-        $log.info('%d seconds left till refresh', $scope.countdown);
+        // $log.info('%d seconds left till refresh', $scope.countdown);
         if ($scope.countdown < 0) {
           update();
           $scope.countdown = REFRESH_INTERVAL;

diff --git a/source/scripts/BuildList.html b/source/scripts/BuildList.html
@@ -19,51 +19,6 @@
     </tr>
   </thead>
   <tbody>
-    <tr ng-repeat="build in $ctrl.builds" ng-class="{
-        'danger': build.outcome == 'failed'
-      }">
-      <td>
-        <time ng-if="!build.stop_time">{{build.start_time | date:'MMM/dd HH:mm'}}</time>
-        <time ng-if="build.stop_time">{{build.stop_time | date:'MMM/dd HH:mm'}}</time>
-        <br>
-        <span class="text-muted" ng-if="build.build_time_millis">{{build.build_time_millis/1000}}s</span>
-        <a href="{{ build.build_url}}" ng-if="build.has_artifacts" target="_blank" title="this build has artifacts, click to open">
-          <i class="fa fa-paperclip" aria-hidden="true"></i>
-        </a>
-      </td>
-      <td>
-        <a href="{{ build.compare }}" target="_blank" title="Open the changes on github">
-          {{ build.vcs_revision.substr(0,7) }}
-        </a>
-      </td>
-      <td>
-        <a href="{{ build.build_url}}" target="_blank" title="the build number, click to open the build on circleci">#{{ build.build_num}}</a>
-        <strong>
-          <a href="{{ build.vcs_url }}" target="_blank" title="the repository name, click to open the repository on github">{{build.reponame}}</a>
-          {{build.branch}}
-        </strong>
-        <br>
-        <span class="text-muted">{{build.subject}}</span>
-      </td>
-      <td>
-        <i class="fa fa-user-circle-o" aria-hidden="true" ng-if="build.committer-name"></i>
-        {{ build.committer_name }}
-      </td>
-      <td>
-        <span class="tag" ng-if="build.lifecycle == 'finished'" ng-class="{
-          'tag-success': ['success'].indexOf(build.outcome) > -1,
-          'tag-warning': ['canceled', 'no_tests'].indexOf(build.outcome) > -1,
-          'tag-danger': ['failed', 'infrastructure_fail', 'timedout'].indexOf(build.outcome) > -1
-        }">
-        {{build.outcome}}
-        </span>
-        <span class="tag" ng-if="build.lifecycle != 'finished'" ng-class="{
-          'tag-default': ['queued', 'scheduled', 'not_run', 'not_running'].indexOf(build.lifecycle) > -1,
-          'tag-primary': ['running'].indexOf(build.lifecycle) > -1
-        }">
-          {{build.lifecycle}}
-        </span>
-      </td>
-    </tr>
+    <tr build-list-item build="build" ng-repeat="build in $ctrl.builds"></tr>
   </tbody>
 </table>
diff --git a/source/scripts/BuildListItem.html b/source/scripts/BuildListItem.html
@@ -0,0 +1,42 @@
+<td>
+  <time ng-if="!$ctrl.build.stop_time">{{$ctrl.build.start_time | date:'MMM/dd HH:mm'}}</time>
+  <time ng-if="$ctrl.build.stop_time">{{$ctrl.build.stop_time | date:'MMM/dd HH:mm'}}</time>
+  <br>
+  <span class="text-muted" ng-if="$ctrl.build.build_time_millis">{{$ctrl.build.build_time_millis/1000}}s</span>
+</td>
+<td>
+  <a href="{{ $ctrl.build.compare }}" target="_blank" title="Open the changes on github">
+    <code>{{ $ctrl.build.vcs_revision.substr(0,7) }}</code>
+  </a>
+</td>
+<td>
+  <a href="{{ $ctrl.build.build_url}}" target="_blank" title="the build number, click to open the build on circleci">#{{ $ctrl.build.build_num}}</a>
+  <strong>
+    <a href="{{ $ctrl.build.vcs_url }}" target="_blank" title="the repository name, click to open the repository on github">{{$ctrl.build.reponame}}</a>
+    {{$ctrl.build.branch}}
+  </strong>
+  <a href="{{ $ctrl.build.build_url}}" ng-if="$ctrl.build.has_artifacts" target="_blank" title="this build has artifacts, click to open">
+    <i class="fa fa-paperclip" aria-hidden="true"></i>
+  </a>
+  <br>
+  <span class="text-muted">{{$ctrl.build.subject}}</span>
+</td>
+<td title="{{ $ctrl.committerTitle }}">
+  <i class="fa fa-user-circle-o" aria-hidden="true" ng-if="$ctrl.build.committer_name"></i>
+  {{ $ctrl.build.committer_name }}
+</td>
+<td>
+  <span class="tag" ng-if="$ctrl.build.lifecycle == 'finished'" ng-class="{
+    'tag-success': ['success'].indexOf($ctrl.build.outcome) > -1,
+    'tag-warning': ['canceled', 'no_tests'].indexOf($ctrl.build.outcome) > -1,
+    'tag-danger': ['failed', 'infrastructure_fail', 'timedout'].indexOf($ctrl.build.outcome) > -1
+  }">
+  {{$ctrl.build.outcome}}
+  </span>
+  <span class="tag" ng-if="$ctrl.build.lifecycle != 'finished'" ng-class="{
+    'tag-default': ['queued', 'scheduled', 'not_run', 'not_running'].indexOf($ctrl.build.lifecycle) > -1,
+    'tag-primary': ['running'].indexOf($ctrl.build.lifecycle) > -1
+  }">
+    {{$ctrl.build.lifecycle}}
+  </span>
+</td>
diff --git a/source/scripts/BuildListItem.js b/source/scripts/BuildListItem.js
@@ -0,0 +1,39 @@
+(function() {
+  'use strict';
+
+  angular
+  .module('circleboard')
+  .directive('buildListItem', function() {
+    return {
+      restrict: 'A',
+      scope: {
+        build: '='
+      },
+      bindToController: true,
+      controllerAs: '$ctrl',
+      templateUrl: 'scripts/buildListItem.html',
+      controller: function($filter) {
+        var ctrl = this;
+
+        // @TODO when failed colorize the whole row
+
+        Object.defineProperties(this, {
+          committerTitle: {
+            get: function() {
+              var build = ctrl.build;
+              var title = build.committer_name;
+              if (build.committer_email) {
+                title += ' (' + build.committer_email + ')';
+              }
+              if (build.committer_date) {
+                title += ' ' + $filter('date')(build.committer_date, 'shortDate');
+                title += $filter('date')(build.committer_date, 'shortTime');
+              }
+              return title;
+            }
+          }
+        });
+      }
+    };
+  });
+})();