Add a table view to the repos list page

Fixes #104

static/js/directives/ui/location-view.js

@@ -30,7 +30,6 @@ angular.module('quay').directive('locationView', function () {
       };
 
       $scope.locationPing = null;
-      $scope.locationPingClass = null;
 
       $scope.getLocationTooltip = function(location, ping) {
         var tip = $scope.getLocationTitle(location) + '<br>';
@@ -71,35 +70,6 @@ angular.module('quay').directive('locationView', function () {
         if (!location) { return; }
         $scope.getLocationPing(location);
       });
-
-      $scope.$watch('locationPing', function(locationPing) {
-        if (locationPing == null) {
-          $scope.locationPingClass = null;
-          return;
-        }
-
-        if (locationPing < 0) {
-          $scope.locationPingClass = 'error';
-          return;
-        }
-
-        if (locationPing < 100) {
-          $scope.locationPingClass = 'good';
-          return;
-        }
-
-        if (locationPing < 250) {
-          $scope.locationPingClass = 'fair';
-          return;
-        }
-
-        if (locationPing < 500) {
-          $scope.locationPingClass = 'barely';
-          return;
-        }
-
-        $scope.locationPingClass = 'poor';
-      });
     }
   };
   return directiveDefinitionObject;

static/js/directives/ui/repo-list-table.js

@@ -0,0 +1,102 @@
+/**
+ * An element which displays a table of repositories.
+ */
+angular.module('quay').directive('repoListTable', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/repo-list-table.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'repositoriesResources': '=repositoriesResources',
+      'namespaces': '=namespaces'
+    },
+    controller: function($scope, $element, $filter) {
+      var orderBy = $filter('orderBy');
+
+      $scope.repositories = null;
+      $scope.orderedRepositories = [];
+
+      $scope.maxPopularity = 0;
+      $scope.options = {
+        'predicate': 'is_starred',
+        'reverse': true
+      };
+
+      var buildOrderedRepositories = function() {
+        if (!$scope.repositories) { return; }
+        var modifier = $scope.options.reverse ? '-' : '';
+        var fields = [modifier + $scope.options.predicate];
+
+        // Secondary ordering by full name.
+        if ($scope.options.predicate != 'full_name') {
+          fields.push('full_name');
+        }
+
+        var ordered = orderBy($scope.repositories, fields, false);
+        $scope.orderedRepositories = ordered;
+      };
+
+      $scope.tablePredicateClass = function(name, predicate, reverse) {
+        if (name != predicate) {
+          return '';
+        }
+
+        return 'current ' + (reverse ? 'reversed' : '');
+      };
+
+      $scope.orderBy = function(predicate) {
+        if (predicate == $scope.options.predicate) {
+          $scope.options.reverse = !$scope.options.reverse;
+          return;
+        }
+
+        $scope.options.reverse = false;
+        $scope.options.predicate = predicate;
+      };
+
+      $scope.getAvatarData = function(namespace) {
+        var found = {};
+        $scope.namespaces.forEach(function(current) {
+          if (current.name == namespace) {
+            found = current.avatar;
+          }
+        });
+        return found;
+      };
+
+      $scope.getStrengthClass = function(value, max, id) {
+        var adjusted = Math.round((value / max) * 5);
+        if (adjusted >= id) {
+          return 'active-' + adjusted;
+        }
+
+        return '';
+      };
+
+      $scope.$watch('options.predicate', buildOrderedRepositories);
+      $scope.$watch('options.reverse', buildOrderedRepositories);
+
+      $scope.$watch('repositoriesResources', function(resources) {
+        $scope.repositories = [];
+        $scope.maxPopularity = 0;
+
+        resources.forEach(function(resource) {
+          (resource.value || []).forEach(function(repository) {
+            var repositoryInfo = $.extend(repository, {
+              'full_name': repository.namespace + '/' + repository.name,
+              'last_modified_datetime': (new Date(repository.last_modified || 0)).valueOf() * (-1)
+            });
+
+            $scope.repositories.push(repositoryInfo);
+            $scope.maxPopularity = Math.max($scope.maxPopularity, repository.popularity);
+          });
+        });
+
+        buildOrderedRepositories();
+      }, /* deep */ true);
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/directives/ui/strength-indicator.js

@@ -0,0 +1,54 @@
+/**
+ * An element which displays the strength of a value (like a signal indicator on a cell phone).
+ */
+angular.module('quay').directive('strengthIndicator', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/strength-indicator.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'value': '=value',
+      'maximum': '=maximum'
+    },
+    controller: function($scope, $element) {
+      $scope.strengthClass = '';
+
+      var calculateClass = function() {
+        if ($scope.value == null || $scope.maximum == null) {
+          $scope.strengthClass = '';
+          return;
+        }
+
+        var value = Math.round(($scope.value / $scope.maximum) * 4);
+
+         if (value <= 0) {
+          $scope.strengthClass = 'none';
+          return;
+        }
+
+        if (value <= 1) {
+          $scope.strengthClass = 'poor';
+          return;
+        }
+
+        if (value <= 2) {
+          $scope.strengthClass = 'barely';
+          return;
+        }
+
+        if (value <= 3) {
+          $scope.strengthClass = 'fair';
+          return;
+        }
+
+        $scope.strengthClass = 'good';
+      };
+
+      $scope.$watch('maximum', calculateClass);
+      $scope.$watch('value', calculateClass);
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/pages/repo-list.js

@@ -16,12 +16,14 @@
   }]);
 
 
-  function RepoListCtrl($scope, $sanitize, $q, Restangular, UserService, ApiService) {
+  function RepoListCtrl($scope, $sanitize, $q, Restangular, UserService, ApiService, CookieService) {
     $scope.namespace = null;
     $scope.page = 1;
     $scope.publicPageCount = null;
     $scope.allRepositories = {};
     $scope.loading = true;
+    $scope.resources = [];
+    $scope.showAsList = CookieService.get('quay.repoview') == 'list';
 
     // When loading the UserService, if the user is logged in, create a list of
     // relevant namespaces and collect the relevant repositories.
@@ -48,6 +50,11 @@
       }
     });
 
+    $scope.setShowAsList = function(value) {
+      $scope.showAsList = value;
+      CookieService.putPermanent('quay.repoview', value ? 'list' : 'grid');
+    };
+
     $scope.isOrganization = function(namespace) {
       return !!UserService.getOrganization(namespace);
     };
@@ -97,11 +104,15 @@
           'public': false,
           'sort': true,
           'namespace': namespace.name,
+          'last_modified': true,
+          'popularity': true
         };
 
         namespace.repositories = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
           return resp.repositories.map(findDuplicateRepo);
         });
+
+        $scope.resources.push(namespace.repositories);
       });
     };
   }