Users: show badges for each auth provider (#17869)

* Users: show badges for each auth provider

* Chore: don't use functions in angular bindings

* Users: minor style changes to labels

* Chore: convert auth labels on the backed side, deduplicate frontend code

* Users: use authLabels everywhere instead of authModule

* User: fix edit user page style

* Users: minor fixes after review

pkg/api/team_members.go

@@ -30,23 +30,6 @@ func GetTeamMembers(c *m.ReqContext) Response {
 	return JSON(200, query.Result)
 }
 
-func GetAuthProviderLabel(authModule string) string {
-	switch authModule {
-	case "oauth_github":
-		return "GitHub"
-	case "oauth_google":
-		return "Google"
-	case "oauth_gitlab":
-		return "GitLab"
-	case "oauth_grafana_com", "oauth_grafananet":
-		return "grafana.com"
-	case "ldap", "":
-		return "LDAP"
-	default:
-		return "OAuth"
-	}
-}
-
 // POST /api/teams/:teamId/members
 func (hs *HTTPServer) AddTeamMember(c *m.ReqContext, cmd m.AddTeamMemberCommand) Response {
 	cmd.OrgId = c.OrgId

pkg/api/user.go

@@ -29,8 +29,11 @@ func getUserUserProfile(userID int64) Response {
 	}
 
 	getAuthQuery := m.GetAuthInfoQuery{UserId: userID}
+	query.Result.AuthLabels = []string{}
 	if err := bus.Dispatch(&getAuthQuery); err == nil {
-		query.Result.AuthModule = []string{getAuthQuery.Result.AuthModule}
+		authLabel := GetAuthProviderLabel(getAuthQuery.Result.AuthModule)
+		query.Result.AuthLabels = append(query.Result.AuthLabels, authLabel)
+		query.Result.IsExternal = true
 	}
 
 	return JSON(200, query.Result)
@@ -277,6 +280,12 @@ func searchUser(c *m.ReqContext) (*m.SearchUsersQuery, error) {
 
 	for _, user := range query.Result.Users {
 		user.AvatarUrl = dtos.GetGravatarUrl(user.Email)
+		user.AuthLabels = make([]string, 0)
+		if user.AuthModule != nil && len(user.AuthModule) > 0 {
+			for _, authModule := range user.AuthModule {
+				user.AuthLabels = append(user.AuthLabels, GetAuthProviderLabel(authModule))
+			}
+		}
 	}
 
 	query.Result.Page = page
@@ -315,3 +324,20 @@ func ClearHelpFlags(c *m.ReqContext) Response {
 
 	return JSON(200, &util.DynMap{"message": "Help flag set", "helpFlags1": cmd.HelpFlags1})
 }
+
+func GetAuthProviderLabel(authModule string) string {
+	switch authModule {
+	case "oauth_github":
+		return "GitHub"
+	case "oauth_google":
+		return "Google"
+	case "oauth_gitlab":
+		return "GitLab"
+	case "oauth_grafana_com", "oauth_grafananet":
+		return "grafana.com"
+	case "ldap", "":
+		return "LDAP"
+	default:
+		return "OAuth"
+	}
+}

pkg/models/user.go

@@ -216,7 +216,8 @@ type UserProfileDTO struct {
 	OrgId          int64    `json:"orgId"`
 	IsGrafanaAdmin bool     `json:"isGrafanaAdmin"`
 	IsDisabled     bool     `json:"isDisabled"`
-	AuthModule     []string `json:"authModule"`
+	IsExternal     bool     `json:"isExternal"`
+	AuthLabels     []string `json:"authLabels"`
 }
 
 type UserSearchHitDTO struct {
@@ -229,7 +230,8 @@ type UserSearchHitDTO struct {
 	IsDisabled    bool                 `json:"isDisabled"`
 	LastSeenAt    time.Time            `json:"lastSeenAt"`
 	LastSeenAtAge string               `json:"lastSeenAtAge"`
-	AuthModule    AuthModuleConversion `json:"authModule"`
+	AuthLabels    []string             `json:"authLabels"`
+	AuthModule    AuthModuleConversion `json:"-"`
 }
 
 type UserIdDTO struct {

public/app/features/admin/AdminEditUserCtrl.ts

@@ -179,7 +179,7 @@ export default class AdminEditUserCtrl {
       const user = $scope.user;
 
       // External user can not be disabled
-      if (user.authModule) {
+      if (user.isExternal) {
         event.preventDefault();
         event.stopPropagation();
         return;

public/app/features/admin/AdminListUsersCtrl.ts

 import { BackendSrv } from 'app/core/services/backend_srv';
 import { NavModelSrv } from 'app/core/core';
+import tags from 'app/core/utils/tags';
 
 export default class AdminListUsersCtrl {
   users: any;
@@ -32,6 +33,8 @@ export default class AdminListUsersCtrl {
         for (let i = 1; i < this.totalPages + 1; i++) {
           this.pages.push({ page: i, current: i === this.page });
         }
+
+        this.addUsersAuthLabels();
       });
   }
 
@@ -40,10 +43,29 @@ export default class AdminListUsersCtrl {
     this.getUsers();
   }
 
-  getAuthModule(user: any) {
-    if (user.authModule && user.authModule.length) {
-      return user.authModule[0];
+  addUsersAuthLabels() {
+    for (const user of this.users) {
+      user.authLabel = getAuthLabel(user);
+      user.authLabelStyle = getAuthLabelStyle(user.authLabel);
     }
-    return undefined;
   }
 }
+
+function getAuthLabel(user: any) {
+  if (user.authLabels && user.authLabels.length) {
+    return user.authLabels[0];
+  }
+  return '';
+}
+
+function getAuthLabelStyle(label: string) {
+  if (label === 'LDAP' || !label) {
+    return {};
+  }
+
+  const { color, borderColor } = tags.getTagColorsFromName(label);
+  return {
+    'background-color': color,
+    'border-color': borderColor,
+  };
+}

public/app/features/admin/partials/edit_user.html

@@ -118,48 +118,52 @@
   <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 class="gf-form">
+      <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>
+    <div class="gf-form-button-row">
+      <button ng-if="sessions.length" class="btn btn-danger" ng-click="revokeAllUserSessions()">
+        Logout user from all devices
+      </button>
+    </div>
   </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>
+  <h3 class="page-heading">User status</h3>
 
+  <div class="gf-form-group">
     <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}"
+        bs-tooltip="user.isExternal ? 'External user cannot be enabled or disabled' : ''"
+        ng-class="{'disabled': user.isExternal}"
       >
         Disable
       </button>
@@ -168,8 +172,8 @@
         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}"
+        bs-tooltip="user.isExternal ? 'External user cannot be enabled or disabled' : ''"
+        ng-class="{'disabled': user.isExternal}"
       >
         Enable
       </button>

public/app/features/admin/partials/users.html

@@ -55,7 +55,9 @@
             </a>
           </td>
           <td class="text-right">
-            <span class="label label-tag" ng-class="{'muted': user.isDisabled}" ng-if="ctrl.getAuthModule(user) === 'ldap'">LDAP</span>
+            <span class="label label-tag" ng-style="user.authLabelStyle" ng-if="user.authLabel">
+              {{user.authLabel}}
+            </span>
           </td>
           <td class="text-right">
             <span class="label label-tag label-tag--gray" ng-if="user.isDisabled">Disabled</span>