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

<navbar model="ctrl.navModel"></navbar>

<div class="page-container">
	<div class="page-header">
		<h1>
			<i class="{{ctrl.navModel.node.icon}}"></i>
			{{ctrl.navModel.node.text}}
		</h1>

		<div class="page-header-tabs">

			<button class="btn btn-success" ng-click="ctrl.openAddUsersView()" ng-hide="ctrl.externalUserMngLinkUrl">
				<i class="fa fa-plus"></i>
        <span>{{ctrl.addUsersBtnName}}</span>
			</button>

      <a class="btn btn-inverse" ng-href="{{ctrl.externalUserMngLinkUrl}}" target="_blank" ng-if="ctrl.externalUserMngLinkUrl">
				<i class="fa fa-external-link-square"></i>
        {{ctrl.addUsersBtnName}}
      </a>

			<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}">
						Groups (0)
					</a>
				</li>
				<li class="gf-tabs-item" ng-show="ctrl.pendingInvites.length">
					<a class="gf-tabs-link" ng-click="ctrl.editor.index = 2" ng-class="{active: ctrl.editor.index === 2}">
						Pending Invitations ({{ctrl.pendingInvites.length}})
					</a>
				</li>
			</ul>
		</div>
	</div>

  <div class="grafana-info-box" ng-if="ctrl.externalUserMngInfo">
    <span ng-bind-html="ctrl.externalUserMngInfo"></span>
  </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>
						Seen
						<tip>Time since user was seen using Grafana</tip>
					</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>{{user.lastSeenAtAge}}</td>
        <td>
					<div class="gf-form-select-wrapper width-9">
						<select type="text" ng-model="user.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="ctrl.updateOrgUser(user)">
						</select>
					</div>
        </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 === 2">
    <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>