Merge pull request #85 from pdehaan/loadsv2api

Convert from V1 to V2 API

.eslintignore

@@ -1 +1 @@
-client/bower_components
+client/bower_components/**

bower.json

@@ -13,11 +13,13 @@
   ],
   "dependencies": {
     "angular": "~1.3.0",
+    "angular-moment": "~0.10.3",
     "angular-route": "~1.3.0",
     "angular-sanitize": "~1.3.0",
     "bootstrap": "~3.2.0",
     "foundation": "~5.4.6",
     "foundation-icons": "*",
-    "jquery": "~2.1.3"
+    "jquery": "~2.1.3",
+    "moment": "~2.10.6"
   }
 }

client/static/assets/scripts/app.js

@@ -1,3 +1,3 @@
 'use strict';
 
-angular.module('LoadsApp', ['ngRoute', 'ngSanitize']);
+angular.module('LoadsApp', ['ngRoute', 'ngSanitize', 'angularMoment']);

client/static/assets/scripts/filters.js

@@ -9,4 +9,15 @@ angular.module('LoadsApp')
     return function (bool) {
       return bool ? 'success' : 'danger';
     };
+  }).filter('statusToText', function () {
+    // Converts status states to an output-friendly format.
+    return function (status) {
+      var STATUSES = [
+        'INITIALIZING',
+        'RUNNING',
+        'TERMINATING',
+        'COMPLETED'
+      ];
+      return STATUSES[status] || 'UNKNOWN';
+    };
   });

client/static/assets/scripts/services.js

@@ -1,43 +1,11 @@
 'use strict';
 
 angular.module('LoadsApp')
-  .factory('RunsService', function ($rootScope, WEBSOCKET_URL) {
-    var cleanData = function (arr) {
-      return arr.map(function (result) {
-        var data = {
-          date: result[0],
-          name: result[1],
-          runId: result[2],
-          details: result[3]
-        };
-        data.success = (data.details.metadata.style === 'green');
-        data.cssClass = (data.success) ? 'success' : 'danger';
-        data.iconClass = (data.success) ? 'checkmark' : 'remove';
-        return data;
-      });
-    };
+  .factory('RunsService', function ($rootScope, $http) {
 
-    var ws = new WebSocket(WEBSOCKET_URL);
-    ws.onopen = function () {
-      console.log('Socket has been opened to %s', WEBSOCKET_URL); // eslint-disable-line no-console
-    };
-    ws.onmessage = function (message) {
-      $rootScope.$apply(function () {
-        try {
-          var data = angular.fromJson(message.data);
-          $rootScope.runs = {
-            active: cleanData(data.active),
-            inactive: cleanData(data.inactive),
-            hasActive: (data.active.length !== 0),
-            hasInactive: (data.inactive.length !== 0),
-            lastSync: new Date()
-          };
-        } catch (err) {
-          console.error(err); // eslint-disable-line no-console
-          console.log(message); // eslint-disable-line no-console
-        }
+    return $http.get('/api')
+     .then(function (res) {
+        $rootScope.runs = res.data.runs;
+        $rootScope.lastSync = Date.now();
       });
-    };
-
-    return ws;
   });

client/static/assets/views/_partials/footer-nav.html

@@ -5,8 +5,6 @@
       <dl class="sub-nav right" role="menu">
         <dt><strong>&copy; {{ YEAR }} <a href="https://github.com/loads/loads-web">Mozilla</a></strong></dt>
 
-        <!-- <dd><a ng-href="{{ ROUTES.HOME }}">Home</a></dd> -->
-        <!-- <dd><a ng-href="{{ ROUTES.TESTS }}">Tests</a></dd> -->
         <dd><a ng-href="{{ ROUTES.RUNS }}">Runs</a></dd>
         <dd><a ng-href="{{ ROUTES.PROJECTS_LISTING }}">Projects</a></dd>
         <dd><a ng-href="{{ ROUTES.CLUSTER }}">Cluster Management</a></dd>

client/static/assets/views/_partials/header-nav.html

@@ -7,20 +7,8 @@
 
     <section class="top-bar-section">
       <ul class="right">
-        <!-- <li class="divider"></li>
-        <li><a ng-href="{{ ROUTES.HOME }}">Home</a></li> -->
-        <!--
         <li class="divider"></li>
-        <li><a ng-href="{{ ROUTES.TESTS }}">Tests</a></li>
-        -->
-        <li class="divider"></li>
-        <li class="has-dropdown not-click">
-          <a ng-href="{{ ROUTES.RUNS }}">Runs</a>
-          <ul class="dropdown">
-            <li><a ng-href="{{ ROUTES.RUNS_ACTIVE }}">Active Runs</a></li>
-            <li><a ng-href="{{ ROUTES.RUNS_FINISHED }}">Finished Runs</a></li>
-          </ul>
-        </li>
+        <li><a ng-href="{{ ROUTES.RUNS }}">Runs</a></li>
         <!-- -->
         <li class="divider"></li>
         <li class="has-dropdown not-click">

client/static/assets/views/_partials/runs-body.html

@@ -1,13 +1,17 @@
-<!--
-<td><i class="foundicon-{{ run.iconClass }} {{ run.cssClass }}-text"></i> <a ng-href="{{ ROUTES.RUN_DETAIL }}/{{ run.runId }}" class="run-link">{{ run.name }}</a></td>
-<td class="elapsed" ng-bind="run.details.counts.elapsed"></td>
-<td class="finished"><time ng-bind="run.details.counts.finished"></time> ago</td>
-<td><a ng-href="mailto:{{ run.details.metadata.user_id }}@mozilla.com" ng-bind="run.details.metadata.user_id" ng-show="run.details.metadata.user_id"></a></td>
--->
-<td><div class="run-result result-{{ run.iconClass }}">
-	<i class="run-result-icon foundicon-{{ run.iconClass }} {{ run.cssClass }}-text"></i>
-	<a ng-href="{{ ROUTES.RUN_DETAIL }}/{{ run.runId }}" class="run-link">{{ run.name }}</a>
-	<div class="elapsed" ng-bind="run.details.counts.elapsed" title="Duration"></div>
-	<div class="time"><time ng-bind="run.details.counts.finished"></time> ago</div>
-	<div class="user"><a ng-href="mailto:{{ run.details.metadata.user_id }}@mozilla.com" ng-bind="run.details.metadata.user_id" ng-show="run.details.metadata.user_id"></a></div>
-</div></td>
+<td class="run-result">
+  <a ng-href="{{ ROUTES.RUN_DETAIL + '/' + run.uuid }}" class="run-link">{{ run.uuid }}</a>
+  <ul>
+    <li><code>aborted</code>: <span ng-bind="run.aborted"></span></li>
+    <li><code>state</code>: <span ng-bind="run.state | statusToText"></span></li>
+
+    <li><code>id</code>: <span ng-bind="run.id"></span></li>
+    <li><code>plan_id</code>: <span ng-bind="run.plan_id"></span></li>
+    <li><code>uuid</code>: <span ng-bind="run.uuid"></span></li>
+
+    <li><code>created_at</code>: <span ng-bind="run.created_at | date:'medium'"></span> (<span am-time-ago="run.created_at"></span>)</li>
+    <li><code>started_at</code>: <span ng-bind="run.started_at | date:'medium'"></span></li>
+    <li><code>completed_at</code>: <span ng-bind="run.completed_at | date:'medium'"></span></li>
+
+    <li>duration: <span>{{ run.started_at | amDifference: run.completed_at : 'minutes'}} minutes</span></li>
+  </ul>
+</td>

client/static/assets/views/_partials/runs-head.html

@@ -1,4 +1 @@
-<th>Run</th><!--
-<th class="elapsed">Duration</th>
-<th class="finished">Finished</th>
-<th>User</th>-->
+<th>Run</th>

client/static/assets/views/runs.html

@@ -6,9 +6,19 @@
     </nav>
     <h1>{{ title }}</h1>
   </header>
-
-  <div class="two-column-row">
-    <div><finished-runs></finished-runs></div>
-    <div><active-runs></active-runs></div>
-  </div>
+
+  <table class="run-table">
+    <caption>
+      <small class="lastUpdated">Last updated: <time ng-bind="lastSync | date:'medium'"></time></small>
+    </caption>
+    <thead>
+      <tr runs-head></tr>
+    </thead>
+    <tbody>
+      <tr ng-show="runs.length" ng-repeat="run in runs" runs-body id="run-{{ run.id }}"></tr>
+      <tr ng-show="!runs.length">
+        <td>There are no runs.</td>
+      </tr>
+    </tbody>
+  </table>
 </article>

client/static/index.html

@@ -34,6 +34,8 @@
   <script src="bower_components/angular/angular.min.js"></script>
   <script src="bower_components/angular-route/angular-route.min.js"></script>
   <script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
+  <script src="bower_components/moment/min/moment.min.js"></script>
+  <script src="bower_components/angular-moment/angular-moment.min.js"></script>
 
   <script src="https://login.persona.org/include.js"></script>
 

grunttasks/eslint.js

@@ -6,8 +6,7 @@ module.exports = function (grunt) {
   grunt.config('eslint', {
     app: {
       src: [
-        '{,client/**/,server/**/,grunttasks/}*.js',
-        '!client/bower_components/**'
+        '{,client/static/**/,server/**/,grunttasks/}*.js'
       ]
     }
   });