WIP: adding roles - not finished

public/app/features/dashboard/acl/acl.html

@@ -4,7 +4,7 @@
 		<div class="gf-form-inline">
 		<div class="gf-form-inline">
       <div class="gf-form">
       <div class="gf-form">
 				<span class="gf-form-label">Type</span>
 				<span class="gf-form-label">Type</span>
-				<select class="gf-form-input gf-size-auto" ng-model="ctrl.type" ng-options="r for r in ['User', 'User Group']"></select>
+				<select class="gf-form-input gf-size-auto" ng-model="ctrl.type" ng-options="r for r in ['User Group', 'User']"></select>
 			</div>
 			</div>
       <div class="gf-form" ng-show="ctrl.type === 'User'">
       <div class="gf-form" ng-show="ctrl.type === 'User'">
         <span class="gf-form-label">User</span>
         <span class="gf-form-label">User</span>
@@ -27,51 +27,46 @@
   <div class="permissionlist">
   <div class="permissionlist">
     <div class="permissionlist__section">
     <div class="permissionlist__section">
       <div class="permissionlist__section-header">
       <div class="permissionlist__section-header">
-        <h6>Users</h6>
+        <h6>Permissions</h6>
       </div>
       </div>
       <table class="filter-table form-inline">
       <table class="filter-table form-inline">
         <thead>
         <thead>
           <tr>
           <tr>
-            <th>User</th>
+            <th style="width: 50px;"></th>
+            <th>Name</th>
             <th style="width: 220px;">Permission</th>
             <th style="width: 220px;">Permission</th>
             <th style="width: 120px"></th>
             <th style="width: 120px"></th>
           </tr>
           </tr>
         </thead>
         </thead>
         <tbody>
         <tbody>
           <tr ng-repeat="permission in ctrl.userPermissions" class="permissionlist__item">
           <tr ng-repeat="permission in ctrl.userPermissions" class="permissionlist__item">
+            <td><i class="fa fa-fw fa-user"></i></td>
             <td>{{permission.userLogin}}</td>
             <td>{{permission.userLogin}}</td>
             <td><select class="gf-form-input gf-size-auto" ng-model="permission.permissions" ng-options="p.value as p.text for p in ctrl.permissionTypeOptions" ng-change="ctrl.updatePermission(permission)"></select></td>
             <td><select class="gf-form-input gf-size-auto" ng-model="permission.permissions" ng-options="p.value as p.text for p in ctrl.permissionTypeOptions" ng-change="ctrl.updatePermission(permission)"></select></td>
             <td class="text-right">
             <td class="text-right">
-              <a ng-click="ctrl.removeUserPermission(permission)" class="btn btn-danger btn-small">
+              <a ng-click="ctrl.removePermission(permission)" class="btn btn-danger btn-small">
                 <i class="fa fa-remove"></i>
                 <i class="fa fa-remove"></i>
               </a>
               </a>
             </td>
             </td>
           </tr>
           </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="permissionlist__section">
-      <div class="permissionlist__section-header">
-        <h6>Groups</h6>
-      </div>
-      <table class="filter-table form-inline">
-        <thead>
-          <tr>
-            <th>User Group</th>
-            <th style="width: 220px;">Permission</th>
-            <th style="width: 120px;"></th>
-          </tr>
-        </thead>
-        <tbody>
           <tr ng-repeat="permission in ctrl.userGroupPermissions" class="permissionlist__item">
           <tr ng-repeat="permission in ctrl.userGroupPermissions" class="permissionlist__item">
+            <td><i class="fa fa-fw fa-users"></i></td>
             <td>{{permission.userGroup}}</td>
             <td>{{permission.userGroup}}</td>
-            <td><select class="gf-form-input gf-size-auto" ng-model="permission.permissionType" ng-options="p.value as p.text for p in ctrl.permissionTypeOptions" ng-change="ctrl.updatePermission(permission)"></select></td>
+            <td><select class="gf-form-input gf-size-auto" ng-model="permission.permissions" ng-options="p.value as p.text for p in ctrl.permissionTypeOptions" ng-change="ctrl.updatePermission(permission)"></select></td>
             <td class="text-right">
             <td class="text-right">
-              <a ng-click="ctrl.removeUserGroupPermission(permission)" class="btn btn-danger btn-small">
+              <a ng-click="ctrl.removePermission(permission)" class="btn btn-danger btn-small">
                 <i class="fa fa-remove"></i>
                 <i class="fa fa-remove"></i>
               </a>
               </a>
             </td>
             </td>
           </tr>
           </tr>
+          <tr ng-repeat="role in ctrl.roles" class="permissionlist__item">
+            <td></td>
+            <td>{{role.name}}</td>
+            <td><select class="gf-form-input gf-size-auto" ng-model="role.permissions" ng-options="p.value as p.text for p in ctrl.roleOptions" ng-change="ctrl.updatePermission(role)"></select></td>
+            <td class="text-right">
+
+            </td>
+          </tr>
         </tbody>
         </tbody>
       </table>
       </table>
     </div>
     </div>

public/app/features/dashboard/acl/acl.ts

@@ -15,12 +15,20 @@ export class AclCtrl {
     {value: 4, text: 'Edit'}
     {value: 4, text: 'Edit'}
   ];
   ];
 
 
-  type = 'User';
+  roleOptions = [
+    {value: 0, text: 'None'},
+    {value: 1, text: 'View'},
+    {value: 2, text: 'Read-only Edit'},
+    {value: 4, text: 'Edit'}
+  ];
+
+  roles = [];
+
+  type = 'User Group';
   permission = 1;
   permission = 1;
   userId: number;
   userId: number;
   userGroupId: number;
   userGroupId: number;
 
 
-
   /** @ngInject */
   /** @ngInject */
   constructor(private backendSrv, private $scope) {
   constructor(private backendSrv, private $scope) {
     this.tabIndex = 0;
     this.tabIndex = 0;
@@ -30,13 +38,23 @@ export class AclCtrl {
   }
   }
 
 
   get(dashboardId: number) {
   get(dashboardId: number) {
-    return this.backendSrv.get(`/api/dashboards/${dashboardId}/acl`)
+    return this.backendSrv.get(`/api/dashboards/id/${dashboardId}/acl`)
       .then(result => {
       .then(result => {
         this.userPermissions = _.filter(result, p => { return p.userId > 0;});
         this.userPermissions = _.filter(result, p => { return p.userId > 0;});
         this.userGroupPermissions = _.filter(result, p => { return p.userGroupId > 0;});
         this.userGroupPermissions = _.filter(result, p => { return p.userGroupId > 0;});
+        this.roles = this.setRoles(result);
       });
       });
   }
   }
 
 
+  setRoles(result: any) {
+    return [
+      {name: 'Org Viewer', permissions: 1},
+      {name: 'Org Read Only Editor', permissions: 2},
+      {name: 'Org Editor', permissions: 4},
+      {name: 'Org Admin', permissions: 4}
+    ];
+  }
+
   addPermission() {
   addPermission() {
     if (this.type === 'User') {
     if (this.type === 'User') {
       if (!this.userId) {
       if (!this.userId) {
@@ -59,38 +77,32 @@ export class AclCtrl {
   }
   }
 
 
   addOrUpdateUserPermission(userId: number, permissionType: number) {
   addOrUpdateUserPermission(userId: number, permissionType: number) {
-    return this.backendSrv.post(`/api/dashboards/${this.dashboard.id}/acl`, {
+    return this.backendSrv.post(`/api/dashboards/id/${this.dashboard.id}/acl`, {
       userId: userId,
       userId: userId,
-      permissionType: permissionType
+      permissions: permissionType
     });
     });
   }
   }
 
 
   addOrUpdateUserGroupPermission(userGroupId: number, permissionType: number) {
   addOrUpdateUserGroupPermission(userGroupId: number, permissionType: number) {
-    return this.backendSrv.post(`/api/dashboards/${this.dashboard.id}/acl`, {
+    return this.backendSrv.post(`/api/dashboards/id/${this.dashboard.id}/acl`, {
       userGroupId: userGroupId,
       userGroupId: userGroupId,
-      permissionType: permissionType
+      permissions: permissionType
     });
     });
   }
   }
 
 
   updatePermission(permission: any) {
   updatePermission(permission: any) {
     if (permission.userId > 0) {
     if (permission.userId > 0) {
-      return this.addOrUpdateUserPermission(permission.userId, permission.permissionType);
+      return this.addOrUpdateUserPermission(permission.userId, permission.permissions);
     } else {
     } else {
       if (!permission.userGroupId) {
       if (!permission.userGroupId) {
         return;
         return;
       }
       }
-      return this.addOrUpdateUserGroupPermission(permission.userGroupId, permission.permissionType);
-    }
+      return this.addOrUpdateUserGroupPermission(permission.userGroupId, permission.permissions);
     }
     }
-
-  removeUserPermission(permission: Permission) {
-    return this.backendSrv.delete(`/api/dashboards/${permission.dashboardId}/acl/user/${permission.userId}`).then(() => {
-      return this.get(permission.dashboardId);
-    });
   }
   }
 
 
-  removeUserGroupPermission(permission: Permission) {
-    return this.backendSrv.delete(`/api/dashboards/${permission.dashboardId}/acl/user-group/${permission.userGroupId}`).then(() => {
+  removePermission(permission: Permission) {
+    return this.backendSrv.delete(`/api/dashboards/id/${permission.dashboardId}/acl/${permission.id}`).then(() => {
       return this.get(permission.dashboardId);
       return this.get(permission.dashboardId);
     });
     });
   }
   }