Add a logs view for specific members of an organization

static/directives/logs-view.html

@@ -4,7 +4,11 @@
   </div>
   <div ng-show="!loading">
     <div class="container header">
-      <span class="header-text">Usage Logs <span class="mini">For the last seven days</span></span>
+      <span class="header-text">
+        <span ng-show="!performer">Usage Logs</span>
+        <span class="entity-reference" name="performer.username" isrobot="performer.is_robot" ng-show="performer"></span>
+        <span class="mini">For the last seven days</span>
+      </span>
       <span class="right">
         <i class="fa fa-bar-chart-o toggle-icon" ng-class="chartVisible ? 'active' : ''"
            ng-click="toggleChart()" title="Toggle Chart" bs-tooltip="tooltip.title"></i>

static/js/app.js

@@ -451,6 +451,7 @@ quayApp = angular.module('quay', ['ngRoute', 'restangular', 'angularMoment', 'an
       when('/organization/:orgname', {templateUrl: '/static/partials/org-view.html', controller: OrgViewCtrl}).
       when('/organization/:orgname/admin', {templateUrl: '/static/partials/org-admin.html', controller: OrgAdminCtrl}).
       when('/organization/:orgname/teams/:teamname', {templateUrl: '/static/partials/team-view.html', controller: TeamViewCtrl}).
+      when('/organization/:orgname/logs/:membername', {templateUrl: '/static/partials/org-member-logs.html', controller: OrgMemberLogsCtrl}).
       when('/v1/', {title: 'Activation information', templateUrl: '/static/partials/v1-page.html', controller: V1Ctrl}).
       when('/', {title: 'Hosted Private Docker Registry', templateUrl: '/static/partials/landing.html', controller: LandingCtrl}).
       otherwise({redirectTo: '/'});
@@ -679,7 +680,8 @@ quayApp.directive('logsView', function () {
       'organization': '=organization',
       'user': '=user',
       'visible': '=visible',
-      'repository': '=repository'
+      'repository': '=repository',
+      'performer': '=performer'
     },
     controller: function($scope, $element, $sce, Restangular) {
       $scope.loading = true;
@@ -782,6 +784,10 @@ quayApp.directive('logsView', function () {
         if ($scope.repository) {
           url = getRestUrl('repository', $scope.repository.namespace, $scope.repository.name, 'logs');
         }
+
+        if ($scope.performer) {
+          url += '?performer=' + encodeURIComponent($scope.performer.username);
+        }
          
         var loadLogs = Restangular.one(url);
         loadLogs.customGET().then(function(resp) {
@@ -851,6 +857,7 @@ quayApp.directive('logsView', function () {
       $scope.$watch('user', update);
       $scope.$watch('repository', update);
       $scope.$watch('visible', update);
+      $scope.$watch('performer', update);
     }
   };
 

static/js/controllers.js

@@ -1318,7 +1318,7 @@ function NewOrgCtrl($scope, $routeParams, $timeout, $location, UserService, Plan
     $scope.loading = false;
   }, true);
 
-  requested = $routeParams['plan'];  
+  requested = $routeParams['plan'];
 
   // Load the list of plans.
   PlanService.getPlans(function(plans) {
@@ -1380,4 +1380,49 @@ function NewOrgCtrl($scope, $routeParams, $timeout, $location, UserService, Plan
       });
     });
   };
+}
+
+
+function OrgMemberLogsCtrl($scope, $routeParams, $timeout, Restangular) {
+  var orgname = $routeParams.orgname;
+  var membername = $routeParams.membername;
+
+  $scope.orgname = orgname;
+  $scope.loading = true;
+  $scope.memberInfo = null;
+  $scope.ready = false;
+
+  var checkReady = function() {
+    $scope.loading = !$scope.organization || !$scope.memberInfo;
+    if (!$scope.loading) {
+      $timeout(function() {
+        $scope.ready = true;
+      });
+    }
+  };
+
+  var loadOrganization = function() {
+    var getOrganization = Restangular.one(getRestUrl('organization', orgname))
+    getOrganization.get().then(function(resp) {
+      $scope.organization = resp;
+      checkReady();
+    }, function() {
+      $scope.organization = null;
+      $scope.loading = false;
+    });
+  };
+
+  var loadMemberInfo = function() {
+    var getMemberInfo = Restangular.one(getRestUrl('organization', orgname, 'members', membername))
+    getMemberInfo.get().then(function(resp) {
+      $scope.memberInfo = resp.member;
+      checkReady();
+    }, function() {
+      $scope.memberInfo = null;
+      $scope.loading = false;
+    });
+  };
+
+  loadOrganization();
+  loadMemberInfo();
 }

static/partials/org-admin.html

@@ -121,8 +121,9 @@
               <thead>
                 <th>User/Robot Account</th>
                 <th>Teams</th>
+                <th></th>
               </thead>
-              
+                            
               <tr ng-repeat="memberInfo in (membersFound | filter:search | limitTo:50)">
                 <td>
                   <span class="entity-reference" name="memberInfo.username" isrobot="memberInfo.is_robot"></span>
@@ -133,6 +134,11 @@
                     <a href="/organization/{{ organization.name }}/teams/{{ team }}">{{ team }}</a>
                   </span>
                 </td>
+                <td>
+                  <a href="/organization/{{ organization.name }}/logs/{{ memberInfo.username }}" title="Member Usage Logs" bs-tooltip="tooltip.title">
+                    <i class="fa fa-book"></i>
+                  </a>
+                </td>
               </tr>
             </table>
           </div>

static/partials/org-member-logs.html

@@ -0,0 +1,16 @@
+<div class="org-member-logs container" ng-show="loading">
+  <i class="fa fa-spinner fa-spin fa-3x"></i>
+</div>
+
+<div class="container" ng-show="!loading && !organization">
+  Organization not found
+</div>
+
+<div class="container" ng-show="!loading && !memberInfo">
+  Member not found
+</div>
+
+<div class="org-member-logs container" ng-show="!loading && organization && memberInfo">
+  <div class="organization-header" organization="organization" clickable="true"></div>
+  <div class="logs-view" organization="organization" performer="memberInfo" visible="organization && memberInfo && ready"></div>
+</div>