Admin: User list tweaks (#38750)

* Setup filter * Enable filtering users by active in last 30 days * Add loading state * Update last active age strings * Tweak user list * Use theme spacing * Improve table's accessibility * Add more aria-labels
2025-02-25 18:55:37 -06:00 · 2021-09-01 16:53:58 +03:00 · 2021-09-01 16:53:58 +03:00 · ea8d9d77f4
commit ea8d9d77f4
parent e39410c094
7 changed files with 180 additions and 73 deletions
--- a/pkg/util/strings.go
+++ b/pkg/util/strings.go
@ -48,24 +48,49 @@ func GetAgeString(t time.Time) string {
 	months := int(math.Floor(minutes / 43800))
 	days := int(math.Floor(minutes / 1440))
 	hours := int(math.Floor(minutes / 60))
-
+	var amount string
 	if years > 0 {
-		return fmt.Sprintf("%dy", years)
+		if years == 1 {
+			amount = "year"
+		} else {
+			amount = "years"
+		}
+		return fmt.Sprintf("%d %s", years, amount)
 	}
 	if months > 0 {
-		return fmt.Sprintf("%dM", months)
+		if months == 1 {
+			amount = "month"
+		} else {
+			amount = "months"
+		}
+		return fmt.Sprintf("%d %s", months, amount)
 	}
 	if days > 0 {
-		return fmt.Sprintf("%dd", days)
+		if days == 1 {
+			amount = "day"
+		} else {
+			amount = "days"
+		}
+		return fmt.Sprintf("%d %s", days, amount)
 	}
 	if hours > 0 {
-		return fmt.Sprintf("%dh", hours)
+		if hours == 1 {
+			amount = "hour"
+		} else {
+			amount = "hours"
+		}
+		return fmt.Sprintf("%d %s", hours, amount)
 	}
 	if int(minutes) > 0 {
-		return fmt.Sprintf("%dm", int(minutes))
+		if int(minutes) == 1 {
+			amount = "minute"
+		} else {
+			amount = "minutes"
+		}
+		return fmt.Sprintf("%d %s", int(minutes), amount)
 	}

-	return "< 1m"
+	return "< 1 minute"
 }

 // ToCamelCase changes kebab case, snake case or mixed strings to camel case. See unit test for examples.
--- a/pkg/util/strings_test.go
+++ b/pkg/util/strings_test.go
@ -62,14 +62,14 @@ func TestDateAge(t *testing.T) {
 	assert.Equal(t, "?", GetAgeString(time.Time{})) // base case

 	tests := map[time.Duration]string{
-		-1 * time.Hour:       "< 1m", // one hour in the future
-		0:                    "< 1m",
-		2 * time.Second:      "< 1m",
-		2 * time.Minute:      "2m",
-		2 * time.Hour:        "2h",
-		3 * 24 * time.Hour:   "3d",
-		67 * 24 * time.Hour:  "2M",
-		409 * 24 * time.Hour: "1y",
+		-1 * time.Hour:       "< 1 minute", // one hour in the future
+		0:                    "< 1 minute",
+		2 * time.Second:      "< 1 minute",
+		2 * time.Minute:      "2 minutes",
+		2 * time.Hour:        "2 hours",
+		3 * 24 * time.Hour:   "3 days",
+		67 * 24 * time.Hour:  "2 months",
+		409 * 24 * time.Hour: "1 year",
 	}
 	for elapsed, expected := range tests {
 		assert.Equalf(
--- a/public/app/features/admin/UserListAdminPage.tsx
+++ b/public/app/features/admin/UserListAdminPage.tsx
@ -1,19 +1,22 @@
 import React, { useEffect } from 'react';
 import { css, cx } from '@emotion/css';
 import { connect, ConnectedProps } from 'react-redux';
-import { Pagination, Tooltip, stylesFactory, LinkButton, Icon } from '@grafana/ui';
-import { AccessControlAction, StoreState, UserDTO } from '../../types';
+import { Pagination, Tooltip, LinkButton, Icon, RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
 import Page from 'app/core/components/Page/Page';
-import { getNavModel } from '../../core/selectors/navModel';
-import { fetchUsers, changeQuery, changePage } from './state/actions';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
 import { contextSrv } from 'app/core/core';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
+import { getNavModel } from '../../core/selectors/navModel';
+import { AccessControlAction, StoreState, UserDTO } from '../../types';
+import { fetchUsers, changeQuery, changePage, changeFilter } from './state/actions';
+import PageLoader from '../../core/components/PageLoader/PageLoader';

 const mapDispatchToProps = {
  fetchUsers,
  changeQuery,
  changePage,
+  changeFilter,
 };

 const mapStateToProps = (state: StoreState) => ({
@ -23,6 +26,8 @@ const mapStateToProps = (state: StoreState) => ({
  showPaging: state.userListAdmin.showPaging,
  totalPages: state.userListAdmin.totalPages,
  page: state.userListAdmin.page,
+  filter: state.userListAdmin.filter,
+  isLoading: state.userListAdmin.isLoading,
 });

 const connector = connect(mapStateToProps, mapDispatchToProps);
@ -31,9 +36,21 @@ interface OwnProps {}

 type Props = OwnProps & ConnectedProps<typeof connector>;

-const UserListAdminPageUnConnected: React.FC<Props> = (props) => {
-  const styles = getStyles();
-  const { fetchUsers, navModel, query, changeQuery, users, showPaging, totalPages, page, changePage } = props;
+const UserListAdminPageUnConnected: React.FC<Props> = ({
+  fetchUsers,
+  navModel,
+  query,
+  changeQuery,
+  users,
+  showPaging,
+  totalPages,
+  page,
+  changePage,
+  changeFilter,
+  filter,
+  isLoading,
+}) => {
+  const styles = useStyles2(getStyles);

  useEffect(() => {
    fetchUsers();
@ -42,45 +59,58 @@ const UserListAdminPageUnConnected: React.FC<Props> = (props) => {
  return (
    <Page navModel={navModel}>
      <Page.Contents>
-        <>
-          <div className="page-action-bar">
-            <div className="gf-form gf-form--grow">
-              <FilterInput
-                placeholder="Search user by login, email, or name."
-                autoFocus={true}
-                value={query}
-                onChange={(value) => changeQuery(value)}
-              />
+        <div className="page-action-bar">
+          <div className="gf-form gf-form--grow">
+            <RadioButtonGroup
+              options={[
+                { label: 'All users', value: 'all' },
+                { label: 'Active last 30 days', value: 'activeLast30Days' },
+              ]}
+              onChange={changeFilter}
+              value={filter}
+              className={styles.filter}
+            />
+            <FilterInput
+              placeholder="Search user by login, email, or name."
+              autoFocus={true}
+              value={query}
+              onChange={changeQuery}
+            />
+          </div>
+          {contextSrv.hasPermission(AccessControlAction.UsersCreate) && (
+            <LinkButton href="admin/users/create" variant="primary">
+              New user
+            </LinkButton>
+          )}
+        </div>
+        {isLoading ? (
+          <PageLoader />
+        ) : (
+          <>
+            <div className={cx(styles.table, 'admin-list-table')}>
+              <table className="filter-table form-inline filter-table--hover">
+                <thead>
+                  <tr>
+                    <th></th>
+                    <th>Login</th>
+                    <th>Email</th>
+                    <th>Name</th>
+                    <th>Server admin</th>
+                    <th>
+                      Last active&nbsp;
+                      <Tooltip placement="top" content="Time since user was seen using Grafana">
+                        <Icon name="question-circle" />
+                      </Tooltip>
+                    </th>
+                    <th style={{ width: '1%' }}></th>
+                  </tr>
+                </thead>
+                <tbody>{users.map(renderUser)}</tbody>
+              </table>
            </div>
-            {contextSrv.hasPermission(AccessControlAction.UsersCreate) && (
-              <LinkButton href="admin/users/create" variant="primary">
-                New user
-              </LinkButton>
-            )}
-          </div>
-          <div className={cx(styles.table, 'admin-list-table')}>
-            <table className="filter-table form-inline filter-table--hover">
-              <thead>
-                <tr>
-                  <th></th>
-                  <th>Login</th>
-                  <th>Email</th>
-                  <th>Name</th>
-                  <th>
-                    Seen&nbsp;
-                    <Tooltip placement="top" content="Time since user was seen using Grafana">
-                      <Icon name="question-circle" />
-                    </Tooltip>
-                  </th>
-                  <th></th>
-                  <th style={{ width: '1%' }}></th>
-                </tr>
-              </thead>
-              <tbody>{users.map(renderUser)}</tbody>
-            </table>
-          </div>
-          {showPaging && <Pagination numberOfPages={totalPages} currentPage={page} onNavigate={changePage} />}
-        </>
+            {showPaging && <Pagination numberOfPages={totalPages} currentPage={page} onNavigate={changePage} />}
+          </>
+        )}
      </Page.Contents>
    </Page>
  );
@ -92,35 +122,44 @@ const renderUser = (user: UserDTO) => {
  return (
    <tr key={user.id}>
      <td className="width-4 text-center link-td">
-        <a href={editUrl}>
-          <img className="filter-table__avatar" src={user.avatarUrl} />
+        <a href={editUrl} aria-label={`Edit user's ${user.name} details`}>
+          <img className="filter-table__avatar" src={user.avatarUrl} alt={`Avatar for user ${user.name}`} />
        </a>
      </td>
      <td className="link-td max-width-10">
-        <a className="ellipsis" href={editUrl} title={user.login}>
+        <a className="ellipsis" href={editUrl} title={user.login} aria-label={`Edit user's ${user.name} details`}>
          {user.login}
        </a>
      </td>
      <td className="link-td max-width-10">
-        <a className="ellipsis" href={editUrl} title={user.email}>
+        <a className="ellipsis" href={editUrl} title={user.email} aria-label={`Edit user's ${user.name} details`}>
          {user.email}
        </a>
      </td>
      <td className="link-td max-width-10">
-        <a className="ellipsis" href={editUrl} title={user.name}>
+        <a className="ellipsis" href={editUrl} title={user.name} aria-label={`Edit user's ${user.name} details`}>
          {user.name}
        </a>
      </td>
-      <td className="link-td">{user.lastSeenAtAge && <a href={editUrl}>{user.lastSeenAtAge}</a>}</td>
      <td className="link-td">
        {user.isAdmin && (
-          <a href={editUrl}>
+          <a href={editUrl} aria-label={`Edit user's ${user.name} details`}>
            <Tooltip placement="top" content="Grafana Admin">
              <Icon name="shield" />
            </Tooltip>
          </a>
        )}
      </td>
+      <td className="link-td">
+        {user.lastSeenAtAge && (
+          <a
+            href={editUrl}
+            aria-label={`Last seen at ${user.lastSeenAtAge}. Follow to edit user's ${user.name} details.`}
+          >
+            {user.lastSeenAtAge}
+          </a>
+        )}
+      </td>
      <td className="text-right">
        {Array.isArray(user.authLabels) && user.authLabels.length > 0 && (
          <TagBadge label={user.authLabels[0]} removeIcon={false} count={0} />
@ -133,12 +172,15 @@ const renderUser = (user: UserDTO) => {
  );
 };

-const getStyles = stylesFactory(() => {
+const getStyles = (theme: GrafanaTheme2) => {
  return {
    table: css`
-      margin-top: 28px;
+      margin-top: ${theme.spacing(3)};
+    `,
+    filter: css`
+      margin-right: ${theme.spacing(1)};
    `,
  };
-});
+};

 export default connector(UserListAdminPageUnConnected);
--- a/public/app/features/admin/state/actions.ts
+++ b/public/app/features/admin/state/actions.ts
@ -19,6 +19,9 @@ import {
  usersFetched,
  queryChanged,
  pageChanged,
+  filterChanged,
+  usersFetchBegin,
+  usersFetchEnd,
 } from './reducers';
 import { debounce } from 'lodash';
 import { contextSrv } from 'app/core/core';
@ -258,10 +261,13 @@ export function clearUserMappingInfo(): ThunkResult<void> {
 export function fetchUsers(): ThunkResult<void> {
  return async (dispatch, getState) => {
    try {
-      const { perPage, page, query } = getState().userListAdmin;
-      const result = await getBackendSrv().get(`/api/users/search?perpage=${perPage}&page=${page}&query=${query}`);
+      const { perPage, page, query, filter } = getState().userListAdmin;
+      const result = await getBackendSrv().get(
+        `/api/users/search?perpage=${perPage}&page=${page}&query=${query}&filter=${filter}`
+      );
      dispatch(usersFetched(result));
    } catch (error) {
+      usersFetchEnd();
      console.error(error);
    }
  };
@ -271,13 +277,23 @@ const fetchUsersWithDebounce = debounce((dispatch) => dispatch(fetchUsers()), 50

 export function changeQuery(query: string): ThunkResult<void> {
  return async (dispatch) => {
+    dispatch(usersFetchBegin());
    dispatch(queryChanged(query));
    fetchUsersWithDebounce(dispatch);
  };
 }

+export function changeFilter(filter: string): ThunkResult<void> {
+  return async (dispatch) => {
+    dispatch(usersFetchBegin());
+    dispatch(filterChanged(filter));
+    fetchUsersWithDebounce(dispatch);
+  };
+}
+
 export function changePage(page: number): ThunkResult<void> {
  return async (dispatch) => {
+    dispatch(usersFetchBegin());
    dispatch(pageChanged(page));
    dispatch(fetchUsers());
  };
--- a/public/app/features/admin/state/reducers.test.ts
+++ b/public/app/features/admin/state/reducers.test.ts
@ -32,6 +32,8 @@ const makeInitialUserListAdminState = (): UserListAdminState => ({
  perPage: 50,
  totalPages: 1,
  showPaging: false,
+  filter: 'all',
+  isLoading: false,
 });

 const getTestUserMapping = (): LdapUser => ({
--- a/public/app/features/admin/state/reducers.ts
+++ b/public/app/features/admin/state/reducers.ts
@ -128,6 +128,8 @@ const initialUserListAdminState: UserListAdminState = {
  perPage: 50,
  totalPages: 1,
  showPaging: false,
+  filter: 'all',
+  isLoading: false,
 };

 interface UsersFetched {
@ -151,8 +153,15 @@ export const userListAdminSlice = createSlice({
        totalPages,
        perPage,
        showPaging: totalPages > 1,
+        isLoading: false,
      };
    },
+    usersFetchBegin: (state) => {
+      return { ...state, isLoading: true };
+    },
+    usersFetchEnd: (state) => {
+      return { ...state, isLoading: false };
+    },
    queryChanged: (state, action: PayloadAction<string>) => ({
      ...state,
      query: action.payload,
@ -162,10 +171,21 @@ export const userListAdminSlice = createSlice({
      ...state,
      page: action.payload,
    }),
+    filterChanged: (state, action: PayloadAction<string>) => ({
+      ...state,
+      filter: action.payload,
+    }),
  },
 });

-export const { usersFetched, queryChanged, pageChanged } = userListAdminSlice.actions;
+export const {
+  usersFetched,
+  usersFetchBegin,
+  usersFetchEnd,
+  queryChanged,
+  pageChanged,
+  filterChanged,
+} = userListAdminSlice.actions;
 export const userListAdminReducer = userListAdminSlice.reducer;

 export default {
--- a/public/app/types/user.ts
+++ b/public/app/types/user.ts
@ -107,4 +107,6 @@ export interface UserListAdminState {
  page: number;
  totalPages: number;
  showPaging: boolean;
+  filter: string;
+  isLoading: boolean;
 }