Skip to content

N
nexpie-grafana-theme
Commit cbbe90ee by Daniel Lee
Options

WIP: edit user group page

parent 55293503
Showing with 227 additions and 15 deletions
public/app/core/routes/routes.ts
...@@ -89,6 +89,12 @@ function setupAngularRoutes($routeProvider, $locationProvider) { ...@@ -89,6 +89,12 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
controllerAs: 'ctrl', controllerAs: 'ctrl',
resolve: loadOrgBundle, resolve: loadOrgBundle,
}) })
.when('/org/user-groups/edit/:id', {
templateUrl: 'public/app/features/org/partials/edit_user_group.html',
controller : 'UserGroupDetailsCtrl',
controllerAs: 'ctrl',
resolve: loadOrgBundle,
})
.when('/profile', { .when('/profile', {
templateUrl: 'public/app/features/org/partials/profile.html', templateUrl: 'public/app/features/org/partials/profile.html',
controller : 'ProfileCtrl', controller : 'ProfileCtrl',
......
public/app/features/org/all.js
...@@ -9,4 +9,5 @@ define([ ...@@ -9,4 +9,5 @@ define([
'./orgDetailsCtrl', './orgDetailsCtrl',
'./prefs_control', './prefs_control',
'./user_groups_ctrl', './user_groups_ctrl',
'./user_group_details_ctrl',
], function () {}); ], function () {});
public/app/features/org/partials/create_user_group.html 0 → 100644
<div class="modal-body" ng-controller="UserGroupsCtrl">
<div class="modal-header">
<h2 class="modal-header-title">
Create User Group
</h2>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
<div class="modal-content">
<div class="modal-tagline p-b-2">
Create User Group
</div>
<form name="createUserGroupForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-21">
<input type="text" class="gf-form-input" ng-model='ctrl.userGroupName' placeholder="Name"></input>
</div>
<div class="gf-form">
<button class="btn gf-form-btn btn-success" ng-click="ctrl.createUserGroup();dismiss();">Create</button>
</div>
</div>
</form>
</div>
</div>
</div>
public/app/features/org/partials/edit_user_group.html 0 → 100644
<navbar icon="fa fa-fw fa-cogs" title="User Group" title-url="user-group">
<a href="org/user-groups" class="navbar-page-btn">
<i class="icon-gf icon-gf-users"></i>
User Groups
</a>
</navbar>
<div class="page-container">
<div class="page-header">
<h1>Edit User Group</h1>
</div>
<form name="userGroupDetailsForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-10">Name</span>
<input type="text" required ng-model="ctrl.userGroup.name" class="gf-form-input max-width-14" >
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="ctrl.update()">Update</button>
</div>
</form>
<h3 class="page-heading">User Group Members</h3>
<form name="addMemberForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-10">Name</span>
<input type="text" bs-typeahead="ctrl.searchUsers" required ng-model="ctrl.user.name" class="gf-form-input max-width-14" >
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="ctrl.addMember()">Add</button>
</div>
</form>
<table class="grafana-options-table">
<tr>
<th>Username</th>
<th>Email</th>
<th></th>
</tr>
<tr ng-repeat="userGroup in ctrl.userGroupMembers">
<td>{{userGroup.login}}</td>
<td>{{userGroup.email}}</td>
<td style="width: 1%">
<a ng-click="ctrl.removeUserGroupMember(userGroup)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</div>
public/app/features/org/partials/user_groups.html
...@@ -6,17 +6,10 @@ ...@@ -6,17 +6,10 @@
<h1>User Groups</h1> <h1>User Groups</h1>
<div class="page-header-tabs"> <div class="page-header-tabs">
<form name="addTokenForm" class="gf-form-group"> <button class="btn btn-success" ng-click="ctrl.openModal()">
<div class="gf-form-inline"> <i class="fa fa-plus"></i>
<div class="gf-form max-width-21"> Create User Group
<span class="gf-form-label">Create a User Group</span> </button>
<input type="text" class="gf-form-input" ng-model='ctrl.userGroupName' placeholder="Name"></input>
</div>
<div class="gf-form">
<button class="btn gf-form-btn btn-success" ng-click="ctrl.createUserGroup()">Create</button>
</div>
</div>
</form>
</div> </div>
</div> </div>
<div class="search-field-wrapper pull-right width-18"> <div class="search-field-wrapper pull-right width-18">
......
public/app/features/org/specs/user_group_details_ctrl_specs.ts 0 → 100644
import '../user_group_details_ctrl';
import {describe, beforeEach, it, expect, sinon, angularMocks} from 'test/lib/common';
import UserGroupDetailsCtrl from '../user_group_details_ctrl';
describe('UserGroupDetailsCtrl', () => {
var ctx: any = {};
var backendSrv = {
searchUsers: sinon.stub().returns(Promise.resolve([])),
get: sinon.stub().returns(Promise.resolve([])),
post: sinon.stub().returns(Promise.resolve([]))
};
beforeEach(angularMocks.module('grafana.core'));
beforeEach(angularMocks.module('grafana.controllers'));
beforeEach(angularMocks.inject(($rootScope, $controller, $q) => {
ctx.$q = $q;
ctx.scope = $rootScope.$new();
ctx.ctrl = $controller(UserGroupDetailsCtrl, {
$scope: ctx.scope,
backendSrv: backendSrv,
$routeParams: {id: 1}
});
ctx.ctrl.user = {name: 'login - user@email.com'};
}));
describe('when user is chosen to be added to user group', () => {
beforeEach(() => {
ctx.scope.addMemberForm = {$valid: true};
ctx.ctrl.usersSearchCache = [{id: 1, login: 'login'}, {id: 2, login: 'login2'}];
ctx.ctrl.addMember();
});
it('should parse the result and save to db', () => {
expect(backendSrv.post.getCall(0).args[0]).to.eql('/api/user-groups/1/members');
});
it('should refresh the list after saving.', () => {
expect(backendSrv.get.getCall(0).args[0]).to.eql('/api/user-groups/1');
expect(backendSrv.get.getCall(1).args[0]).to.eql('/api/user-groups/1/members');
});
});
});
public/app/features/org/user_group_details_ctrl.ts 0 → 100644
///<reference path="../../headers/common.d.ts" />
import coreModule from 'app/core/core_module';
import _ from 'lodash';
export default class UserGroupDetailsCtrl {
userGroup: any;
userGroupMembers = [];
user: any;
usersSearchCache = [];
searchUsers: any;
constructor(private $scope, private $http, private backendSrv, private $routeParams) {
this.get();
this.usersSearchCache = [];
this.searchUsers = (queryStr, callback) => {
if (this.usersSearchCache.length > 0) {
callback(_.map(this.usersSearchCache, (user) => { return user.login + ' - ' + user.email; }));
return;
}
this.backendSrv.get('/api/users/search?perpage=10&page=1&query=' + queryStr).then(result => {
this.usersSearchCache = result.users;
callback(_.map(result.users, (user) => { return user.login + ' - ' + user.email; }));
});
};
}
get() {
if (this.$routeParams && this.$routeParams.id) {
this.backendSrv.get(`/api/user-groups/${this.$routeParams.id}`)
.then(result => {
this.userGroup = result;
});
this.backendSrv.get(`/api/user-groups/${this.$routeParams.id}/members`)
.then(result => {
this.userGroupMembers = result;
});
}
}
removeUserGroupMember(userGroupMember) {
this.$scope.appEvent('confirm-modal', {
title: 'Remove Member',
text: 'Are you sure you want to remove ' + userGroupMember.name + ' from this group?',
yesText: "Remove",
icon: "fa-warning",
onConfirm: () => {
this.removeMemberConfirmed(userGroupMember);
}
});
}
removeMemberConfirmed(userGroupMember) {
this.backendSrv.delete(`/api/user-groups/${this.$routeParams.id}/members/${userGroupMember.userId}`)
.then(this.get.bind(this));
}
update() {
if (!this.$scope.userGroupDetailsForm.$valid) { return; }
this.backendSrv.put('/api/user-groups/' + this.userGroup.id, {name: this.userGroup.name});
}
addMember() {
if (!this.$scope.addMemberForm.$valid) { return; }
const login = this.user.name.split(' - ')[0];
const memberToAdd = _.find(this.usersSearchCache, ['login', login]);
this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: memberToAdd.id}).then(() => {
this.user.name = '';
this.get();
});
}
}
coreModule.controller('UserGroupDetailsCtrl', UserGroupDetailsCtrl);
public/app/features/org/user_groups_ctrl.ts
...@@ -13,7 +13,7 @@ export default class UserGroupsCtrl { ...@@ -13,7 +13,7 @@ export default class UserGroupsCtrl {
userGroupName: any = ''; userGroupName: any = '';
/** @ngInject */ /** @ngInject */
constructor(private $scope, private $http, private backendSrv) { constructor(private $scope, private $http, private backendSrv, private $location) {
this.get(); this.get();
} }
...@@ -39,9 +39,10 @@ export default class UserGroupsCtrl { ...@@ -39,9 +39,10 @@ export default class UserGroupsCtrl {
} }
createUserGroup() { createUserGroup() {
this.backendSrv.post('/api/user-groups', {name: this.userGroupName}).then(result => { this.backendSrv.post('/api/user-groups', {name: this.userGroupName}).then((result) => {
this.get(); if (result.userGroupId) {
this.userGroupName = ''; this.$location.path('/org/user-groups/edit/' + result.userGroupId);
}
}); });
} }
...@@ -61,6 +62,17 @@ export default class UserGroupsCtrl { ...@@ -61,6 +62,17 @@ export default class UserGroupsCtrl {
this.backendSrv.delete('/api/user-groups/' + userGroup.id) this.backendSrv.delete('/api/user-groups/' + userGroup.id)
.then(this.get.bind(this)); .then(this.get.bind(this));
} }
openModal() {
var modalScope = this.$scope.$new();
modalScope.createUserGroup = this.createUserGroup.bind(this);
this.$scope.appEvent('show-modal', {
src: 'public/app/features/org/partials/create_user_group.html',
modalClass: 'user-group-modal',
scope: this.$scope
});
}
} }
coreModule.controller('UserGroupsCtrl', UserGroupsCtrl); coreModule.controller('UserGroupsCtrl', UserGroupsCtrl);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment