WIP: user + user-group pickers for permissions

public/app/core/components/user_group_picker.ts

+import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
+import _ from 'lodash';
+
+const template = `
+<div class="dropdown">
+  <metric-segment segment="ctrl.userGroupSegment"
+    get-options="ctrl.debouncedSearchUserGroups($query)"
+    on-change="ctrl.onChange()"></metric-segment>
+  </div>
+`;
+export class UserGroupPickerCtrl {
+  userGroupSegment: any;
+  userGroupId: number;
+  debouncedSearchUserGroups: any;
+
+  /** @ngInject */
+  constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) {
+    this.userGroupSegment = this.uiSegmentSrv.newSegment({value: 'Choose User Group', selectMode: true});
+    this.debouncedSearchUserGroups = _.debounce(this.searchUserGroups, 500, {'leading': true, 'trailing': false});
+  }
+
+  searchUserGroups(query: string) {
+    return Promise.resolve(this.backendSrv.get('/api/user-groups/search?perpage=10&page=1&query=' + query).then(result => {
+      return _.map(result.userGroups, ug => { return this.uiSegmentSrv.newSegment(ug.name); });
+    }));
+  }
+
+  onChange() {
+    this.backendSrv.get('/api/user-groups/search?perpage=10&page=1&query=' + this.userGroupSegment.value)
+      .then(result => {
+        if (!result) {
+          return;
+        }
+
+        result.userGroups.forEach(ug => {
+          if (ug.name === this.userGroupSegment.value) {
+            this.userGroupId = ug.id;
+          }
+        });
+    });
+  }
+}
+
+export function userGroupPicker() {
+  return {
+    restrict: 'E',
+    template: template,
+    controller: UserGroupPickerCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {
+      userGroupSegment: '=',
+      userGroupId: '=',
+    }
+  };
+}
+
+coreModule.directive('userGroupPicker', userGroupPicker);

public/app/core/components/user_picker.ts

@@ -29,7 +29,6 @@ export class UserPickerCtrl {
 
 
   onChange() {
   onChange() {
     this.userLogin = this.userSegment.value.split(' - ')[0];
     this.userLogin = this.userSegment.value.split(' - ')[0];
-    console.log(this.userLogin);
 
 
     this.backendSrv.get('/api/users/search?perpage=10&page=1&query=' + this.userLogin)
     this.backendSrv.get('/api/users/search?perpage=10&page=1&query=' + this.userLogin)
       .then(result => {
       .then(result => {
@@ -67,6 +66,7 @@ export function userPicker() {
     bindToController: true,
     bindToController: true,
     controllerAs: 'ctrl',
     controllerAs: 'ctrl',
     scope: {
     scope: {
+      userSegment: '=',
       userLogin: '=',
       userLogin: '=',
       userId: '=',
       userId: '=',
     }
     }

public/app/core/core.ts

@@ -47,6 +47,7 @@ import {KeybindingSrv} from './services/keybindingSrv';
 import {helpModal} from './components/help/help';
 import {helpModal} from './components/help/help';
 import {NavModelSrv, NavModel} from './nav_model_srv';
 import {NavModelSrv, NavModel} from './nav_model_srv';
 import {userPicker} from './components/user_picker';
 import {userPicker} from './components/user_picker';
+import {userGroupPicker} from './components/user_group_picker';
 
 
 export {
 export {
   arrayJoin,
   arrayJoin,
@@ -73,4 +74,5 @@ export {
   NavModelSrv,
   NavModelSrv,
   NavModel,
   NavModel,
   userPicker,
   userPicker,
+  userGroupPicker,
 };
 };

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

 <div class="editor-row">
 <div class="editor-row">
+  <h3 class="page-heading">Add New Permission</h3>
+	<form name="addPermission" class="gf-form-group">
+		<div class="gf-form-inline">
+      <div class="gf-form">
+				<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>
+			</div>
+      <div class="gf-form" ng-show="ctrl.type === 'User'">
+        <span class="gf-form-label">User</span>
+        <user-picker user-login="ctrl.userLogin" user-id="ctrl.userId" user-segment="ctrl.userSegment"></user-picker>
+      </div>
+      <div class="gf-form" ng-show="ctrl.type === 'User Group'">
+        <span class="gf-form-label">User Group</span>
+        <user-group-picker user-group-id="ctrl.userGroupId" user-group-segment="ctrl.userGroupSegment"></user-group-picker>
+      </div>
+			<div class="gf-form">
+				<span class="gf-form-label">Role</span>
+				<select class="gf-form-input gf-size-auto" ng-model="ctrl.permission" ng-options="p.value as p.text for p in ctrl.permissionTypeOptions"></select>
+			</div>
+			<div class="gf-form">
+				<button class="btn gf-form-btn btn-success" ng-click="ctrl.addPermission()">Add</button>
+			</div>
+		</div>
+	</form>
+
   <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>Users</h6>
-        <a href="#" class="btn btn-success btn-small permissionlist__section-header__add-button">Add User</a>
-      </div>
-      <div class="permissionlist__item" ng-repeat="permission in ctrl.userPermissions">
-        <span class="permissionlist__item-text">{{permission.userLogin}}</span>
-        <div>{{permission.permissions}}</div>
-        <div class="permissionlist__item-buttons">
-          <a href="#" class="btn btn-inverse btn-small">
-            <i class="fa fa-edit"></i>
-            Edit
-          </a>
-          &nbsp;&nbsp;
-          <a ng-click="ctrl.removeUserPermission(permission)" class="btn btn-danger btn-small">
-            <i class="fa fa-remove"></i>
-          </a>
-        </div>
       </div>
       </div>
+      <table class="filter-table form-inline">
+        <thead>
+          <tr>
+            <th>User</th>
+            <th style="width: 220px;">Permission</th>
+            <th style="width: 120px"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="permission in ctrl.userPermissions" class="permissionlist__item">
+            <td>{{permission.userLogin}}</td>
+            <td>{{permission.permissions}}</td>
+            <td>
+              <a href="#" class="btn btn-inverse btn-small">
+                <i class="fa fa-edit"></i>
+                Edit
+              </a>
+              &nbsp;&nbsp;
+              <a ng-click="ctrl.removeUserPermission(permission)" class="btn btn-danger btn-small">
+                <i class="fa fa-remove"></i>
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
     </div>
     <div class="permissionlist__section">
     <div class="permissionlist__section">
       <div class="permissionlist__section-header">
       <div class="permissionlist__section-header">
         <h6>Groups</h6>
         <h6>Groups</h6>
-        <a href="#" class="btn btn-success btn-small permissionlist__section-header__add-button">Add Group</a>
-      </div>
-      <div class="permissionlist__item" ng-repeat="permission in ctrl.userGroupPermissions">
-        <span class="permissionlist__item-text">{{permission.userGroup}}</span>
-        <div>{{permission.permissions}}</div>
-        <div class="permissionlist__item-buttons">
-          <a href="#" class="btn btn-inverse btn-small">
-            <i class="fa fa-edit"></i>
-            Edit
-          </a>
-          &nbsp;&nbsp;
-          <a ng-click="ctrl.removeUserGroupPermission(permission)" class="btn btn-danger btn-small">
-            <i class="fa fa-remove"></i>
-          </a>
-        </div>
       </div>
       </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">
+            <td>{{permission.userGroup}}</td>
+            <td>{{permission.permissions}}</td>
+            <td>
+              <a href="#" class="btn btn-inverse btn-small">
+                <i class="fa fa-edit"></i>
+                Edit
+              </a>
+              &nbsp;&nbsp;
+              <a ng-click="ctrl.removeUserGroupPermission(permission)" class="btn btn-danger btn-small">
+                <i class="fa fa-remove"></i>
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
     </div>
   </div>
   </div>
 </div>
 </div>

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

@@ -9,9 +9,21 @@ export class AclCtrl {
   dashboard: any;
   dashboard: any;
   userPermissions: Permission[];
   userPermissions: Permission[];
   userGroupPermissions: Permission[];
   userGroupPermissions: Permission[];
+  permissionTypeOptions = [
+    {value: 1, text: 'View'},
+    {value: 2, text: 'Read-only Edit'},
+    {value: 4, text: 'Edit'}
+  ];
+  userLogin: string;
+  userId: number;
+  userSegment: any;
+  type = 'User';
+  userGroupId: number;
+  userGroupSegment: any;
+  permission = 1;
 
 
   /** @ngInject */
   /** @ngInject */
-  constructor(private backendSrv, private $scope, $sce) {
+  constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) {
     this.tabIndex = 0;
     this.tabIndex = 0;
     this.userPermissions = [];
     this.userPermissions = [];
     this.userGroupPermissions = [];
     this.userGroupPermissions = [];
@@ -26,6 +38,41 @@ export class AclCtrl {
       });
       });
   }
   }
 
 
+  addPermission() {
+    if (this.type === 'User') {
+      if (this.userSegment.value === 'Choose User') {
+        return;
+      }
+
+      this.backendSrv.post(`/api/dashboards/${this.dashboard.id}/acl`, {
+        userId: this.userId,
+        permissionType: this.permission
+      }).then(() => {
+        this.userId = 0;
+        this.userLogin = '';
+        this.userSegment.value = 'Choose User';
+        this.userSegment.text = 'Choose User';
+        this.userSegment.html = 'Choose User';
+        this.get(this.dashboard.id);
+      });
+    } else {
+      if (this.userGroupSegment.value === 'Choose User Group') {
+        return;
+      }
+
+      this.backendSrv.post(`/api/dashboards/${this.dashboard.id}/acl`, {
+        userGroupId: this.userGroupId,
+        permissionType: this.permission
+      }).then(() => {
+        this.userGroupId = 0;
+        this.userGroupSegment.value = 'Choose User Group';
+        this.userGroupSegment.text = 'Choose User Group';
+        this.userGroupSegment.html = 'Choose User Group';
+        this.get(this.dashboard.id);
+      });
+    }
+  }
+
   removeUserPermission(permission: Permission) {
   removeUserPermission(permission: Permission) {
     this.backendSrv.delete(`/api/dashboards/${permission.dashboardId}/acl/user/${permission.userId}`).then(() => {
     this.backendSrv.delete(`/api/dashboards/${permission.dashboardId}/acl/user/${permission.userId}`).then(() => {
       this.get(permission.dashboardId);
       this.get(permission.dashboardId);
@@ -50,6 +97,13 @@ export function aclSettings() {
   };
   };
 }
 }
 
 
+export interface FormModel {
+  dashboardId: number;
+  userId?: number;
+  userGroupId?: number;
+  PermissionType: number;
+}
+
 export interface Permission {
 export interface Permission {
   id: number;
   id: number;
   orgId: number;
   orgId: number;
@@ -61,7 +115,8 @@ export interface Permission {
   userEmail: string;
   userEmail: string;
   userGroupId: number;
   userGroupId: number;
   userGroup: string;
   userGroup: string;
-  permissions: number[];
+  permissions: string[];
+  permissionType: number[];
 }
 }
 
 
 coreModule.directive('aclSettings', aclSettings);
 coreModule.directive('aclSettings', aclSettings);

public/sass/components/_settings_permissions.scss

@@ -19,10 +19,6 @@
   }
   }
 
 
   .permissionlist__item {
   .permissionlist__item {
-    display: flex;
-    flex-flow: row;
-    margin: 5px;
-    padding: 7px;
     background-color: $tight-form-bg;
     background-color: $tight-form-bg;
 
 
     &:hover {
     &:hover {