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
This commit is contained in:
Alex Khomenko 2021-09-01 16:53:58 +03:00 committed by GitHub
parent e39410c094
commit ea8d9d77f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 180 additions and 73 deletions

View File

@ -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.

View File

@ -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(

View File

@ -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);

View File

@ -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());
};

View File

@ -32,6 +32,8 @@ const makeInitialUserListAdminState = (): UserListAdminState => ({
perPage: 50,
totalPages: 1,
showPaging: false,
filter: 'all',
isLoading: false,
});
const getTestUserMapping = (): LdapUser => ({

View File

@ -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 {

View File

@ -107,4 +107,6 @@ export interface UserListAdminState {
page: number;
totalPages: number;
showPaging: boolean;
filter: string;
isLoading: boolean;
}