Start on robots UI

endpoints/api.py

@@ -1516,10 +1516,10 @@ def get_org_subscription(orgname):
   abort(403)
 
 
-def robot_view(name, password):
+def robot_view(name, token):
   return {
     'name': name,
-    'password': password,
+    'token': token,
   }
 
 

static/css/quay.css

@@ -6,6 +6,26 @@
   visibility: hidden;
 }
 
+.robots-manager-element {
+  max-width: 800px;
+}
+
+.robots-manager-element .alert {
+  margin-bottom: 20px;
+}
+
+.robots-manager-element .robot {
+  font-size: 16px;
+}
+
+.robots-manager-element .robot .prefix {
+  color: #aaa;
+}
+
+.robots-manager-element .robot i {
+  margin-right: 10px;
+}
+
 .billing-options-element .current-card {
   font-size: 16px;
   margin-bottom: 20px;
@@ -1671,16 +1691,16 @@ p.editable:hover i {
   margin-right: 4px;
 }
 
-.org-admin #members .side-controls {
+.side-controls {
   float: right;
 }
 
-.org-admin #members .result-count {
+.side-controls .result-count {
   display: inline-block;
   margin-right: 10px;
 }
 
-.org-admin #members .filter-input {
+.side-controls .filter-input {
   display: inline-block;
 }
 

static/directives/robots-manager.html

@@ -0,0 +1,31 @@
+<div class="robots-manager-element">
+  <i class="fa fa-spinner fa-spin fa-3x" ng-show="loading"></i>
+  <div class="alert alert-info">Robot accounts allow for delegating access in multiple repositories to tokens</div>
+
+  <div class="container" ng-show="!loading">
+    <div class="side-controls">      
+      <button class="btn btn-success"><i class="fa fa-wrench"></i> Create Robot Account</button>
+    </div>
+
+    <table class="table">
+      <thead>
+        <th>Robot Account Name</th>
+        <th style="width: 150px"></th>
+      </thead>
+              
+      <tr ng-repeat="robotInfo in robots">
+        <td class="robot">
+          <i class="fa fa-wrench"></i>
+          <span class="prefix">{{ getPrefix(robotInfo.name) }}+</span>{{ getShortenedName(robotInfo.name) }}
+        </td>                
+        <td>
+          <span class="delete-ui" tabindex="0">
+            <span class="delete-ui-button" ng-click="deleteRobot(robotInfo)"><button class="btn btn-danger">Delete</button></span>
+            <i class="fa fa-times" bs-tooltip="tooltip.title" data-placement="right" title="Delete Robot Account"></i>
+          </span>
+        </td>
+      </tr>
+    </table>
+
+  </div>
+</div>

static/js/app.js

@@ -529,6 +529,72 @@ quayApp.directive('plansTable', function () {
 });
 
 
+
+quayApp.directive('robotsManager', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/robots-manager.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'organization': '=organization',
+      'user': '=user'
+    },
+    controller: function($scope, $element, Restangular) {
+      $scope.robots = null;
+      $scope.loading = false;
+
+      $scope.getShortenedName = function(name) {
+        var plus = name.indexOf('+');
+        return name.substr(plus + 1);
+      };
+
+      $scope.getPrefix = function(name) {
+        var plus = name.indexOf('+');
+        return name.substr(0, plus);
+      };
+
+      $scope.deleteRobot = function(info) {
+        var shortName = $scope.getShortenedName(info.name);
+        var url = $scope.organization ? getRestUrl('organization', $scope.organization.name, 'robots', shortName) :
+              getRestUrl('user/robots', shortName);
+
+        var deleteRobot = Restangular.one(url);
+        deleteRobot.customDELETE().then(function(resp) {
+          for (var i = 0; i < $scope.robots.length; ++i) {
+            if ($scope.robots[i].name == info.name) {
+              $scope.robots.slice(i, 1);
+              return;
+            }
+          }
+        }, function() {
+          
+        });
+      };
+
+      var update = function() {
+        if (!$scope.user && !$scope.organization) { return; }
+        if ($scope.loading) { return; }
+
+        $scope.loading = true;
+        var url = $scope.organization ? getRestUrl('organization', $scope.organization.name, 'robots') : 'user/robots';
+        var getRobots = Restangular.one(url);
+        getRobots.customGET($scope.obj).then(function(resp) {
+          $scope.robots = resp.robots;
+          $scope.loading = false;
+        });
+      };
+
+      $scope.$watch('organization', update);
+      $scope.$watch('user', update);
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
+
 quayApp.directive('organizationHeader', function () {
   var directiveDefinitionObject = {
     priority: 0,

static/partials/org-admin.html

@@ -15,6 +15,7 @@
       <ul class="nav nav-pills nav-stacked">
         <li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#plan">Plan and Usage</a></li>
         <li><a href="javascript:void(0)" data-toggle="tab" data-target="#members" ng-click="loadMembers()">Members</a></li>
+        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#robots">Robot Accounts</a></li>
         <li ng-show="hasPaidPlan"><a href="javascript:void(0)" data-toggle="tab" data-target="#billingoptions">Billing</a></li>
         <li ng-show="hasPaidPlan"><a href="javascript:void(0)" data-toggle="tab" data-target="#billing" ng-click="loadInvoices()">Billing History</a></li>
       </ul>
@@ -28,6 +29,11 @@
           <div class="plan-manager" organization="orgname" plan-changed="planChanged(plan)"></div>
         </div>
 
+        <!-- Robot accounts tab -->
+        <div id="robots" class="tab-pane">
+          <div class="robots-manager" organization="organization"></div>
+        </div>
+
         <!-- Billing Options tab -->
         <div id="billingoptions" class="tab-pane">
           <div class="billing-options" organization="organization"></div>

static/partials/user-admin.html

@@ -28,6 +28,7 @@
       <ul class="nav nav-pills nav-stacked">
         <li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#plan">Plan and Usage</a></li>
         <li ng-show="hasPaidPlan"><a href="javascript:void(0)" data-toggle="tab" data-target="#billing">Billing Options</a></li>
+        <li><a href="javascript:void(0)" data-toggle="tab" data-target="#robots">Robot Accounts</a></li>
         <li><a href="javascript:void(0)" data-toggle="tab" data-target="#password">Set Password</a></li>
         <li><a href="javascript:void(0)" data-toggle="tab" data-target="#migrate" id="migrateTab">Convert to Organization</a></li>
       </ul>
@@ -59,6 +60,11 @@
           </div>
         </div>
         
+        <!-- Robot accounts tab -->
+        <div id="robots" class="tab-pane">
+          <div class="robots-manager" user="user"></div>
+        </div>
+
         <!-- Billing options tab -->
         <div id="billing" class="tab-pane">
           <div class="billing-options" user="user"></div>