Skip to content

N
nexpie-grafana-theme
Commit 77375f37 by Alexander Zobnin Committed by Torkel Ödegaard
Options

UserAdmin: UI for disabling users (#17333) 

* Feat: initial disable user UI

* batch disable users

* batch revoke users tokens

* split batch disable user and revoke token

* API: get users with auth info and isExternal flag

* fix tests for batch disable users

* Disable users: show is user external or not

* Users: refactor /api/users/search endpoint

* Users: use alias for "user" table

* Chore: add BatchDisableUsers() to the bus

* Users: order user list by id explicitly

* Chore: switch back to /api/users/search endpoint

* Users: move disable button to user profile page

* Users: return AuthModule from /api/users/:id endpoint

* Users: do not return unused fields

* Users: mute auth badge for disabled users

* Users: move disable button to the user section

* Users: fix SearchUsers method after last changes

* User: return auth module as array for future purposes

* User: tests for SearchUsers()

* User: return only latest auth module in SearchUsers()

* User: fix JOIN, get only most recent auth module

* Users: fix ldap badge after backed changes

* Users: show tooltip for inactive disable/enable button

* Users: move delete button to edit user view

* Users: put deactivated badge on the user list

* Users: minor refactor

* Users: adjust deactivated badge style

* Minor design changes
parent dad894f1
Showing with 236 additions and 154 deletions
public/app/features/admin/AdminEditUserCtrl.ts
......@@ -86,9 +86,7 @@ export default class AdminEditUserCtrl {
$scope.updatePermissions = () => {
const payload = $scope.permissions;
backendSrv.put('/api/admin/users/' + $scope.user_id + '/permissions', payload).then(() => {
$location.path('/admin/users');
});
backendSrv.put('/api/admin/users/' + $scope.user_id + '/permissions', payload);
};
$scope.create = () => {
......@@ -163,6 +161,36 @@ export default class AdminEditUserCtrl {
});
};
$scope.deleteUser = (user: any) => {
$scope.appEvent('confirm-modal', {
title: 'Delete',
text: 'Do you want to delete ' + user.login + '?',
icon: 'fa-trash',
yesText: 'Delete',
onConfirm: () => {
backendSrv.delete('/api/admin/users/' + user.id).then(() => {
$location.path('/admin/users');
});
},
});
};
$scope.disableUser = event => {
const user = $scope.user;
// External user can not be disabled
if (user.authModule) {
event.preventDefault();
event.stopPropagation();
return;
}
const actionEndpoint = user.isDisabled ? '/enable' : '/disable';
backendSrv.post('/api/admin/users/' + user.id + actionEndpoint).then(() => {
$scope.init();
});
};
$scope.init();
}
}
public/app/features/admin/AdminListUsersCtrl.ts
......@@ -12,7 +12,7 @@ export default class AdminListUsersCtrl {
navModel: any;
/** @ngInject */
constructor(private $scope: any, private backendSrv: BackendSrv, navModelSrv: NavModelSrv) {
constructor(private backendSrv: BackendSrv, navModelSrv: NavModelSrv) {
this.navModel = navModelSrv.getNav('admin', 'global-users', 0);
this.query = '';
this.getUsers();
......@@ -40,17 +40,10 @@ export default class AdminListUsersCtrl {
this.getUsers();
}
deleteUser(user: any) {
this.$scope.appEvent('confirm-modal', {
title: 'Delete',
text: 'Do you want to delete ' + user.login + '?',
icon: 'fa-trash',
yesText: 'Delete',
onConfirm: () => {
this.backendSrv.delete('/api/admin/users/' + user.id).then(() => {
this.getUsers();
});
},
});
getAuthModule(user: any) {
if (user.authModule && user.authModule.length) {
return user.authModule[0];
}
return undefined;
}
}
public/app/features/admin/partials/edit_user.html
<page-header model="navModel"></page-header>
<div class="page-container page-body">
<h3 class="page-sub-heading">Edit User</h3>
<form name="userForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-10">Name</span>
<input type="text" required ng-model="user.name" class="gf-form-input max-width-25" >
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Email</span>
<input type="email" ng-model="user.email" class="gf-form-input max-width-25" >
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Username</span>
<input type="text" ng-model="user.login" class="gf-form-input max-width-25" >
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-primary" ng-click="update()" ng-show="!createMode">Update</button>
</div>
</form>
<h3 class="page-heading">Change password</h3>
<form name="passwordForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-10">New password</span>
<input type="password" required ng-minlength="4" ng-model="password" class="gf-form-input max-width-25">
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-primary" ng-click="setPassword()">Update</button>
</div>
</form>
<h3 class="page-heading">Permissions</h3>
<form name="passwordForm" class="gf-form-group">
<div class="gf-form" >
<gf-form-switch class="gf-form" label="Grafana Admin" checked="permissions.isGrafanaAdmin" switch-class="max-width-6"></gf-form-switch>
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-primary" ng-click="updatePermissions()">Update</button>
</div>
</form>
<h3 class="page-heading">Organizations</h3>
<form name="addOrgForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label">Add</span>
<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs" required class="gf-form-input max-width-20" placeholder="organization name">
</div>
<div class="gf-form">
<span class="gf-form-label">Role</span>
<span class="gf-form-select-wrapper">
<select type="text" ng-model="newOrg.role" class="gf-form-input width-10" ng-options="f for f in ['Viewer', 'Editor', 'Admin']"></select>
</span>
</div>
<div class="gf-form">
<button class="btn btn-primary gf-form-btn" ng-click="addOrgUser()">Add</button>
</div>
</div>
</form>
<div class="gf-form-group">
<table class="filter-table">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th></th>
</tr>
</thead>
<tr ng-repeat="org in orgs">
<td>
{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span>
</td>
<td>
<div class="gf-form">
<span class="gf-form-select-wrapper">
<select type="text" ng-model="org.role" class="gf-form-input max-width-12" ng-options="f for f in ['Viewer', 'Editor', 'Admin']" ng-change="updateOrgUser(org)">
</select>
</span>
</div>
</td>
<td style="width: 1%">
<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</div>
<h3 class="page-heading">Sessions</h3>
<div class="gf-form-group">
<table class="filter-table form-inline">
<thead>
<tr>
<th>Last seen</th>
<th>Logged on</th>
<th>IP address</th>
<th>Browser &amp; OS</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="session in sessions">
<td ng-if="session.isActive">Now</td>
<td ng-if="!session.isActive">{{session.seenAt}}</td>
<td>{{session.createdAt}}</td>
<td>{{session.clientIp}}</td>
<td>{{session.browser}} on {{session.os}} {{session.osVersion}}</td>
<td>
<button class="btn btn-danger btn-small" ng-click="revokeUserSession(session.id)">
<i class="fa fa-power-off"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<button ng-if="sessions.length" class="btn btn-danger" ng-click="revokeAllUserSessions()">Logout user from all devices</button>
<h3 class="page-sub-heading">Edit User</h3>
<form name="userForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-10">Name</span>
<input type="text" required ng-model="user.name" class="gf-form-input max-width-25" />
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Email</span>
<input type="email" ng-model="user.email" class="gf-form-input max-width-25" />
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Username</span>
<input type="text" ng-model="user.login" class="gf-form-input max-width-25" />
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-primary" ng-click="update()" ng-show="!createMode">Update</button>
</div>
</form>
<h3 class="page-heading">Change password</h3>
<form name="passwordForm" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-10">New password</span>
<input type="password" required ng-minlength="4" ng-model="password" class="gf-form-input max-width-25" />
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-primary" ng-click="setPassword()">Update</button>
</div>
</form>
<h3 class="page-heading">Permissions</h3>
<form name="passwordForm" class="gf-form-group">
<div class="gf-form">
<gf-form-switch
class="gf-form"
label="Grafana Admin"
checked="permissions.isGrafanaAdmin"
switch-class="max-width-6"
on-change="updatePermissions()"
></gf-form-switch>
</div>
</form>
<h3 class="page-heading">Organizations</h3>
<form name="addOrgForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label">Add</span>
<input
type="text"
ng-model="newOrg.name"
bs-typeahead="searchOrgs"
required
class="gf-form-input max-width-20"
placeholder="organization name"
/>
</div>
<div class="gf-form">
<span class="gf-form-label">Role</span>
<span class="gf-form-select-wrapper">
<select
type="text"
ng-model="newOrg.role"
class="gf-form-input width-10"
ng-options="f for f in ['Viewer', 'Editor', 'Admin']"
></select>
</span>
</div>
<div class="gf-form">
<button class="btn btn-primary gf-form-btn" ng-click="addOrgUser()">Add</button>
</div>
</div>
</form>
<div class="gf-form-group">
<table class="filter-table">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th></th>
</tr>
</thead>
<tr ng-repeat="org in orgs">
<td>{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span></td>
<td>
<div class="gf-form">
<span class="gf-form-select-wrapper">
<select
type="text"
ng-model="org.role"
class="gf-form-input max-width-12"
ng-options="f for f in ['Viewer', 'Editor', 'Admin']"
ng-change="updateOrgUser(org)"
>
</select>
</span>
</div>
</td>
<td style="width: 1%">
<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</div>
<h3 class="page-heading">Sessions</h3>
<div class="gf-form-group">
<table class="filter-table form-inline">
<thead>
<tr>
<th>Last seen</th>
<th>Logged on</th>
<th>IP address</th>
<th>Browser &amp; OS</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="session in sessions">
<td ng-if="session.isActive">Now</td>
<td ng-if="!session.isActive">{{session.seenAt}}</td>
<td>{{session.createdAt}}</td>
<td>{{session.clientIp}}</td>
<td>{{session.browser}} on {{session.os}} {{session.osVersion}}</td>
<td>
<button class="btn btn-danger btn-small" ng-click="revokeUserSession(session.id)">
<i class="fa fa-power-off"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<button ng-if="sessions.length" class="btn btn-danger" ng-click="revokeAllUserSessions()">
Logout user from all devices
</button>
<div class="gf-form-group">
<h3 class="page-heading">User status</h3>
<div class="gf-form-button-row">
<button
type="submit"
class="btn btn-danger"
ng-if="!user.isDisabled"
ng-click="disableUser($event)"
bs-tooltip="user.authModule ? 'External user cannot be activated or deactivated' : ''"
ng-class="{'disabled': user.authModule}"
>
Disable
</button>
<button
type="submit"
class="btn btn-primary"
ng-if="user.isDisabled"
ng-click="disableUser($event)"
bs-tooltip="user.authModule ? 'External user cannot be activated or deactivated' : ''"
ng-class="{'disabled': user.authModule}"
>
Enable
</button>
<button type="submit" class="btn btn-danger" ng-click="deleteUser(user)" ng-show="!createMode">Delete User</button>
</div>
</div>
</div>
public/app/features/admin/partials/users.html
......@@ -55,9 +55,10 @@
</a>
</td>
<td class="text-right">
<a ng-click="ctrl.deleteUser(user)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
<span class="label label-tag" ng-class="{'muted': user.isDisabled}" ng-if="ctrl.getAuthModule(user) === 'ldap'">LDAP</span>
</td>
<td class="text-right">
<span class="label label-tag label-tag--gray" ng-if="user.isDisabled">Disabled</span>
</td>
</tr>
</tbody>
......
public/sass/components/_tags.scss
......@@ -29,9 +29,25 @@
top: 1px;
padding-right: 4px;
}
}
.label-tag:hover {
opacity: 0.85;
background-color: darken($purple, 10%);
&.muted {
opacity: 0.85;
background-color: darken($purple, 10%);
color: $text-muted;
}
&:hover {
opacity: 0.85;
background-color: darken($purple, 10%);
}
&--gray {
opacity: 0.85;
background-color: $gray-1;
border-color: $gray-2;
&:hover {
background-color: $gray-1;
}
}
}
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