grafana/public/app/features/org/partials/orgUsers.html

<navbar icon="icon-gf icon-gf-users" title="Organization Users" title-url="org/users">
</navbar>

<div class="page-container">
	<div class="page-header">
		<h1>Organization users</h1>

		<div class="page-header-tabs">
			<button class="btn btn-success" ng-click="ctrl.openInviteModal()">
				<i class="fa fa-plus"></i>
				Add or Invite
			</button>

			<ul class="gf-tabs">
				<li class="gf-tabs-item">
					<a class="gf-tabs-link" ng-click="ctrl.editor.index = 0" ng-class="{active: ctrl.editor.index === 0}">
						Users ({{ctrl.users.length}})
					</a>
				</li>
				<li class="gf-tabs-item">
					<a class="gf-tabs-link" ng-click="ctrl.editor.index = 1" ng-class="{active: ctrl.editor.index === 1}">
						Pending Invitations ({{ctrl.pendingInvites.length}})
					</a>
				</li>
			</ul>
		</div>
	</div>

	<div ng-if="ctrl.editor.index === 0" class="tab-content">
		<table class="filter-table form-inline">
			<thead>
				<tr>
					<th>Login</th>
					<th>Email</th>
					<th>Role</th>
					<th style="width: 34px;"></th>
				</tr>
			</thead>
			<tr ng-repeat="user in ctrl.users">
				<td>{{user.login}}</td>
				<td><span class="ellipsis">{{user.email}}</span></td>
				<td>
					<select type="text" ng-model="user.role" class="input-medium" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="ctrl.updateOrgUser(user)">
					</select>
				</td>
				<td>
					<a ng-click="ctrl.removeUser(user)" class="btn btn-danger btn-mini">
						<i class="fa fa-remove"></i>
					</a>
				</td>
			</tr>
		</table>
	</div>

	<div ng-if="ctrl.editor.index === 1" >
		<table class="filter-table form-inline">
			<thead>
				<tr>
					<th>Email</th>
					<th>Name</th>
					<th></th>
				</tr>
			</thead>
			<tbody ng-repeat="invite in ctrl.pendingInvites">
				<tr ng-click="invite.expanded = !invite.expanded" ng-class="{'expanded': invite.expanded}">
					<td>{{invite.email}}</td>
					<td>{{invite.name}}</td>
					<td class="text-right">
						<button class="btn btn-inverse btn-mini " data-clipboard-text="{{invite.url}}" clipboard-button ng-click="ctrl.copyInviteToClipboard($event)">
							<i class="fa fa-clipboard"></i> Copy Invite
						</button>
						&nbsp;
						<button class="btn btn-inverse btn-mini">
							Details
							<i ng-show="!invite.expanded" class="fa fa-caret-right"></i>
							<i ng-show="invite.expanded" class="fa fa-caret-down"></i>
						</button>
					</td>
				</tr>
				<tr ng-show="invite.expanded">
					<td colspan="3">
						<a href="{{invite.url}}">{{invite.url}}</a><br><br>
						&nbsp;
						<button class="btn btn-inverse btn-mini" ng-click="ctrl.revokeInvite(invite, $event)">
							<i class="fa fa-remove" style="color: red"></i> Revoke invite
						</button>
						<span style="padding-left: 15px">
							Invited: <em> {{invite.createdOn | date: 'shortDate'}} by {{invite.invitedBy}} </em>
						</span>
					</td>
				</tr>
			</tbody>
		</table>

	</div>
</div>