Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Remove ability to view all users

pull/5030/head
Alex P 2017-11-07 19:39:05 -08:00
parent f6aebe123d
commit 93bd4e6999
6 changed files with 93 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
ui/src/admin/components/chronograf/BatchActionsBar.js
View File

@ -2,32 +2,13 @@ import React, {PropTypes} from 'react'
import Dropdown from 'shared/components/Dropdown'
import {
DEFAULT_ORG_NAME,
NO_ORG,
USER_ROLES,
} from 'src/admin/constants/dummyUsers'
import {USER_ROLES} from 'src/admin/constants/dummyUsers'
const BatchActionsBar = ({
onDeleteUsers,
onAddUsersToOrg,
onRemoveUsersFromOrg,
onChangeRoles,
numUsersSelected,
organizationName,
organizations,
}) => {
const showWhenAllUsers = organizationName === DEFAULT_ORG_NAME
const showWhenNotAllUser = organizationName !== DEFAULT_ORG_NAME
const sanitizedOrgs = organizations
.filter(org => {
return !(org.name === DEFAULT_ORG_NAME || org.name === NO_ORG)
})
.map(org => ({
...org,
text: org.name,
}))
const BatchActionsBar = ({onDeleteUsers, onChangeRoles, numUsersSelected}) => {
const rolesDropdownItems = USER_ROLES.map(role => ({
...role,
text: role.name,
}))
return (
<div className="chronograf-admin-table--batch">
@ -39,52 +20,25 @@ const BatchActionsBar = ({
<div className="btn btn-sm btn-danger" onClick={onDeleteUsers}>
Delete
</div>
{showWhenAllUsers
? <Dropdown
items={sanitizedOrgs}
selected={'Add to Organization'}
onChoose={onAddUsersToOrg}
buttonColor="btn-primary"
className="dropdown-200"
/>
: null}
{showWhenAllUsers
? <Dropdown
items={sanitizedOrgs}
selected={'Remove from Organization'}
onChoose={onRemoveUsersFromOrg}
buttonColor="btn-primary"
className="dropdown-200"
/>
: null}
{showWhenNotAllUser
? <Dropdown
items={USER_ROLES.map(role => ({
...role,
text: role.name,
}))}
selected={'Change Role'}
onChoose={onChangeRoles}
buttonColor="btn-primary"
className="dropdown-140"
/>
: null}
<Dropdown
items={rolesDropdownItems}
selected={'Set New Role'}
onChoose={onChangeRoles}
buttonColor="btn-primary"
className="dropdown-140"
/>
</div>
: null}
</div>
)
}
const {arrayOf, func, number, shape, string} = PropTypes
const {func, number} = PropTypes
BatchActionsBar.propTypes = {
onDeleteUsers: func.isRequired,
onAddUsersToOrg: func.isRequired,
onRemoveUsersFromOrg: func.isRequired,
onChangeRoles: func.isRequired,
organizations: arrayOf(shape),
numUsersSelected: number.isRequired,
organizationName: string.isRequired,
}
export default BatchActionsBar

68
ui/src/admin/components/chronograf/NewUserTableRow.js
View File

@ -6,7 +6,8 @@ import Dropdown from 'shared/components/Dropdown'
import SlideToggle from 'shared/components/SlideToggle'
import {USERS_TABLE} from 'src/admin/constants/chronografTableSizing'
import {DEFAULT_ORG_ID} from 'src/admin/constants/dummyUsers'
import {USER_ROLES} from 'src/admin/constants/dummyUsers'
import {MEMBER_ROLE} from 'src/auth/Authorized'
class NewUserTableRow extends Component {
constructor(props) {
@ -16,9 +17,8 @@ class NewUserTableRow extends Component {
name: '',
provider: '',
scheme: 'oauth2',
role: null,
role: MEMBER_ROLE,
superAdmin: false,
organization: this.props.currentOrganization,
}
}
@ -27,8 +27,8 @@ class NewUserTableRow extends Component {
}
handleClickCreateUser = () => {
const {onBlur, onCreateUser} = this.props
const {name, provider, scheme, role, superAdmin, organization} = this.state
const {onBlur, onCreateUser, organization} = this.props
const {name, provider, scheme, role, superAdmin} = this.state
const newUser = {
name,
@ -59,31 +59,18 @@ class NewUserTableRow extends Component {
this.setState({superAdmin})
}
handleSelectOrganization = newUserOrganization => {
this.setState({organization: newUserOrganization})
}
render() {
const {
colOrg,
colRole,
colProvider,
colScheme,
colSuperAdmin,
colActions,
} = USERS_TABLE
const {onBlur, roles, organizations, currentOrganization} = this.props
const {name, provider, scheme, role, superAdmin, organization} = this.state
const {onBlur} = this.props
const {name, provider, scheme, role, superAdmin} = this.state
const preventCreate = !name || !provider || !role || !organization
const isDefaultOrg = currentOrganization.id === DEFAULT_ORG_ID
const editableOrganizations = organizations.filter(org => {
if (org.id !== DEFAULT_ORG_ID) {
return org
}
})
const preventCreate = !name || !provider
return (
<tr className="chronograf-admin-table--new-user">
@ -98,36 +85,14 @@ class NewUserTableRow extends Component {
onChange={this.handleInputChange('name')}
/>
</td>
<td style={{width: colOrg}}>
{isDefaultOrg
? <Dropdown
items={editableOrganizations.map(org => ({
...org,
text: org.name,
}))}
selected={
organization.id === DEFAULT_ORG_ID
? 'Choose one'
: organization.name
}
onChoose={this.handleSelectOrganization}
buttonColor="btn-primary"
buttonSize="btn-xs"
className="dropdown-stretch"
/>
: <span className="chronograf-user--org">
{currentOrganization.name}
</span>}
</td>
<td style={{width: colRole}}>
<Dropdown
items={roles.map(r => ({...r, text: r.name}))}
selected={role || 'Assign'}
items={USER_ROLES.map(r => ({...r, text: r.name}))}
selected={role}
onChoose={this.handleSelectRole}
buttonColor="btn-primary"
buttonSize="btn-xs"
className="dropdown-80"
disabled={organization.id === DEFAULT_ORG_ID}
className="dropdown-stretch"
/>
</td>
<Authorized requiredRole={SUPERADMIN_ROLE}>
@ -174,22 +139,15 @@ class NewUserTableRow extends Component {
}
}
const {arrayOf, func, shape, string} = PropTypes
const {func, shape, string} = PropTypes
NewUserTableRow.propTypes = {
currentOrganization: shape({
organization: shape({
id: string.isRequired,
name: string.isRequired,
}),
onBlur: func.isRequired,
onCreateUser: func.isRequired,
roles: arrayOf(shape()).isRequired,
organizations: arrayOf(
shape({
id: string.isRequired,
name: string.isRequired,
})
).isRequired,
}
export default NewUserTableRow

20
ui/src/admin/components/chronograf/OrgTableRow.js
View File

@ -3,6 +3,7 @@ import React, {PropTypes} from 'react'
import Authorized, {SUPERADMIN_ROLE} from 'src/auth/Authorized'
import Dropdown from 'shared/components/Dropdown'
import SlideToggle from 'shared/components/SlideToggle'
import {USER_ROLES} from 'src/admin/constants/dummyUsers'
import {USERS_TABLE} from 'src/admin/constants/chronografTableSizing'
@ -14,9 +15,9 @@ const OrgTableRow = ({
selectedUsers,
isSameUser,
onChangeUserRole,
onChangeSuperAdmin,
}) => {
const {
colOrg,
colRole,
colSuperAdmin,
colProvider,
@ -52,11 +53,6 @@ const OrgTableRow = ({
{user.name}
</strong>
</td>
<td style={{width: colOrg}}>
<span className="chronograf-user--org">
{organization.name}
</span>
</td>
<td style={{width: colRole}}>
<span className="chronograf-user--role">
<Dropdown
@ -68,13 +64,17 @@ const OrgTableRow = ({
onChoose={onChangeUserRole(user, currentRole)}
buttonColor="btn-primary"
buttonSize="btn-xs"
className="dropdown-80"
className="dropdown-stretch"
/>
</span>
</td>
<Authorized requiredRole={SUPERADMIN_ROLE}>
<td style={{width: colSuperAdmin}}>
{user.superadmin ? 'yes' : '--'}
<td style={{width: colSuperAdmin}} className="text-center">
<SlideToggle
active={user.superAdmin}
onToggle={onChangeSuperAdmin(user, user.superAdmin)}
size="xs"
/>
</td>
</Authorized>
<td style={{width: colProvider}}>
@ -99,8 +99,8 @@ OrgTableRow.propTypes = {
onToggleUserSelected: func.isRequired,
selectedUsers: arrayOf(shape()),
isSameUser: func.isRequired,
onSelectAddUserToOrg: func.isRequired,
onChangeUserRole: func.isRequired,
onChangeSuperAdmin: func.isRequired,
}
export default OrgTableRow

126
ui/src/admin/components/chronograf/UsersTable.js
View File

@ -5,25 +5,19 @@ import _ from 'lodash'
import Authorized, {SUPERADMIN_ROLE} from 'src/auth/Authorized'
import UsersTableHeader from 'src/admin/components/chronograf/UsersTableHeader'
import UsersTableRow from 'src/admin/components/chronograf/UsersTableRow'
import OrgTableRow from 'src/admin/components/chronograf/OrgTableRow'
import NewUserTableRow from 'src/admin/components/chronograf/NewUserTableRow'
import BatchActionsBar from 'src/admin/components/chronograf/BatchActionsBar'
import {DEFAULT_ORG_NAME} from 'src/admin/constants/dummyUsers'
import {USERS_TABLE} from 'src/admin/constants/chronografTableSizing'
class ChronografUsersTable extends Component {
class UsersTable extends Component {
constructor(props) {
super(props)
}
handleChooseFilter = organization => () => {
this.props.onFilterUsers({organization})
}
handleSelectAddUserToOrg = user => organization => {
this.props.onAddUserToOrg(user, organization)
this.state = {
isCreatingUser: false,
}
}
handleChangeUserRole = (user, currentRole) => newRole => {
@ -34,6 +28,14 @@ class ChronografUsersTable extends Component {
this.props.onUpdateUserSuperAdmin(user, currentStatus, newStatus)
}
handleClickCreateUserRow = () => {
this.setState({isCreatingUser: true})
}
handleBlurCreateUserRow = () => {
this.setState({isCreatingUser: false})
}
areSameUsers = (usersA, usersB) => {
if (usersA.length === 0 && usersB.length === 0) {
return false
@ -44,21 +46,19 @@ class ChronografUsersTable extends Component {
render() {
const {
userRoles,
organization,
organizations,
filteredUsers,
users,
onToggleAllUsersSelected,
onToggleUserSelected,
selectedUsers,
isSameUser,
isCreatingUser,
currentOrganization,
onBlurCreateUserRow,
onCreateUser,
onDeleteUsers,
onChangeRoles,
} = this.props
const {isCreatingUser} = this.state
const {
colOrg,
colRole,
colSuperAdmin,
colProvider,
@ -66,22 +66,18 @@ class ChronografUsersTable extends Component {
colActions,
} = USERS_TABLE
const areAllSelected = this.areSameUsers(filteredUsers, selectedUsers)
const areAllSelected = this.areSameUsers(users, selectedUsers)
return (
<div className="panel panel-minimal">
<UsersTableHeader
numUsers={filteredUsers.length}
numUsers={users.length}
onCreateUserRow={this.handleClickCreateUserRow}
/>
<BatchActionsBar
numUsersSelected={selectedUsers.length}
organizationName={organization.name}
organizations={organizations}
onDeleteUsers={this.handleBatchDeleteUsers}
onAddUsersToOrg={this.handleBatchAddUsersToOrg}
onRemoveUsersFromOrg={this.handleBatchRemoveUsersFromOrg}
onChangeRoles={this.handleBatchChangeUsersRole}
onDeleteUsers={onDeleteUsers}
onChangeRoles={onChangeRoles}
/>
<div className="panel-body">
<table className="table table-highlight v-center chronograf-admin-table">
@ -98,9 +94,6 @@ class ChronografUsersTable extends Component {
/>
</th>
<th>Username</th>
<th style={{width: colOrg}} className="align-with-col-text">
Organization
</th>
<th style={{width: colRole}} className="align-with-col-text">
Role
</th>
@ -117,54 +110,34 @@ class ChronografUsersTable extends Component {
<tbody>
{isCreatingUser
? <NewUserTableRow
currentOrganization={currentOrganization}
organizations={organizations}
roles={userRoles}
onBlur={onBlurCreateUserRow}
organization={organization}
onBlur={this.handleBlurCreateUserRow}
onCreateUser={onCreateUser}
/>
: null}
{filteredUsers.length
? filteredUsers.map(
(user, i) =>
organization.name === DEFAULT_ORG_NAME
? <UsersTableRow
user={user}
key={i}
organizations={organizations}
onToggleUserSelected={onToggleUserSelected}
selectedUsers={selectedUsers}
isSameUser={isSameUser}
onSelectAddUserToOrg={this.handleSelectAddUserToOrg(
user
)}
onChangeUserRole={this.handleChangeUserRole}
onChooseFilter={this.handleChooseFilter}
onChangeSuperAdmin={this.handleChangeSuperAdmin}
/>
: <OrgTableRow
user={user}
key={i}
onToggleUserSelected={onToggleUserSelected}
selectedUsers={selectedUsers}
isSameUser={isSameUser}
organization={organization}
onSelectAddUserToOrg={this.handleSelectAddUserToOrg(
user
)}
onChangeUserRole={this.handleChangeUserRole}
/>
{users.length || !isCreatingUser
? users.map((user, i) =>
<OrgTableRow
user={user}
key={i}
onToggleUserSelected={onToggleUserSelected}
selectedUsers={selectedUsers}
isSameUser={isSameUser}
organization={organization}
onChangeUserRole={this.handleChangeUserRole}
onChangeSuperAdmin={this.handleChangeSuperAdmin}
/>
)
: <tr className="table-empty-state">
<Authorized
requiredRole={SUPERADMIN_ROLE}
replaceWith={
<th colSpan="6">
<th colSpan="5">
<p>No Users to display</p>
</th>
}
>
<th colSpan="7">
<th colSpan="6">
<p>No Users to display</p>
</th>
</Authorized>
@ -177,35 +150,22 @@ class ChronografUsersTable extends Component {
}
}
const {arrayOf, bool, func, shape, string} = PropTypes
const {arrayOf, func, shape, string} = PropTypes
ChronografUsersTable.propTypes = {
userRoles: arrayOf(shape()).isRequired,
filteredUsers: arrayOf(shape()),
UsersTable.propTypes = {
users: arrayOf(shape()),
selectedUsers: arrayOf(shape()),
onFilterUsers: func.isRequired,
onToggleUserSelected: func.isRequired,
onToggleAllUsersSelected: func.isRequired,
isSameUser: func.isRequired,
isCreatingUser: bool,
organization: shape({
name: string.isRequired,
id: string.isRequired,
}),
organizations: arrayOf(
shape({
id: string.isRequired,
name: string.isRequired,
})
),
onAddUserToOrg: func.isRequired,
onUpdateUserRole: func.isRequired,
onCreateUser: func.isRequired,
onUpdateUserSuperAdmin: func.isRequired,
onBlurCreateUserRow: func.isRequired,
currentOrganization: shape({
id: string.isRequired,
name: string.isRequired,
}).isRequired,
onDeleteUsers: func.isRequired,
onChangeRoles: func.isRequired,
}
export default ChronografUsersTable
export default UsersTable

5
ui/src/admin/constants/chronografTableSizing.js
View File

@ -1,8 +1,7 @@
export const USERS_TABLE = {
colOrg: 210,
colRole: 100,
colRole: 120,
colSuperAdmin: 90,
colProvider: 100,
colProvider: 170,
colScheme: 90,
colActions: 68,
}

43
ui/src/admin/containers/AdminChronografPage.js
View File

@ -19,7 +19,6 @@ import {
DEFAULT_ORG_ID,
DEFAULT_ORG_NAME,
NO_ORG,
USER_ROLES,
} from 'src/admin/constants/dummyUsers'
class AdminChronografPage extends Component {
@ -32,7 +31,6 @@ class AdminChronografPage extends Component {
selectedUsers: [],
filteredUsers: this.props.users,
showManageOverlay: false,
isCreatingUser: false,
}
}
@ -56,20 +54,12 @@ class AdminChronografPage extends Component {
loadOrganizationsAsync(links.organizations) // TODO: make sure server allows admin to hit this for safety
}
handleClickCreateUserRow = () => {
this.setState({isCreatingUser: true})
}
handleBlurCreateUserRow = () => {
this.setState({isCreatingUser: false})
}
handleShowManageOrgsOverlay = () => {
this.setState({showManageOverlay: true})
}
handleHideOverlays = () => {
this.setState({showManageOverlay: false, showCreateUserOverlay: false})
this.setState({showManageOverlay: false})
}
handleFilterUsers = ({users, organization}) => {
@ -219,15 +209,17 @@ class AdminChronografPage extends Component {
}
handleBatchDeleteUsers = () => {
const {notify} = this.props
const {selectedUsers} = this.state
// const {selectedUsers} = this.state
if (selectedUsers.length > 1) {
if (this.state.selectedUsers.length > 1) {
notify(
'error',
'Batch actions for more than 1 user not currently supported'
)
} else {
this.handleDeleteUser(selectedUsers[0])
this.handleDeleteUser(this.state.selectedUsers[0])
console.log('reset selectedUsers')
this.setState({selectedUsers: []})
}
}
@ -252,7 +244,6 @@ class AdminChronografPage extends Component {
selectedUsers,
filteredUsers,
showManageOverlay,
isCreatingUser,
} = this.state
return (
@ -267,30 +258,18 @@ class AdminChronografPage extends Component {
<div className="row">
<div className="col-xs-12">
<UsersTable
userRoles={USER_ROLES}
filteredUsers={filteredUsers} // TODO: change to users upon separating Orgs & Users views
organization={organization}
organizations={organizations}
onFilterUsers={this.handleFilterUsers}
onToggleUserSelected={this.handleToggleUserSelected}
users={filteredUsers} // TODO: change to users upon separating Orgs & Users views
selectedUsers={selectedUsers}
isSameUser={isSameUser}
isCreatingUser={isCreatingUser}
currentOrganization={currentOrganization}
onCreateUser={this.handleCreateUser}
onBlurCreateUserRow={this.handleBlurCreateUserRow}
onToggleUserSelected={this.handleToggleUserSelected}
onToggleAllUsersSelected={
this.handleToggleAllUsersSelected
}
onAddUserToOrg={this.handleAddUserToOrg}
isSameUser={isSameUser}
organization={organization}
onUpdateUserRole={this.handleUpdateUserRole()}
onCreateUser={this.handleCreateUser}
onUpdateUserSuperAdmin={this.handleUpdateUserSuperAdmin()}
onCreateUserRow={this.handleClickCreateUserRow}
numUsersSelected={selectedUsers.length}
organizationName={organization.name}
onDeleteUsers={this.handleBatchDeleteUsers}
onAddUsersToOrg={this.handleBatchAddUsersToOrg}
onRemoveUsersFromOrg={this.handleBatchRemoveUsersFromOrg}
onChangeRoles={this.handleBatchChangeUsersRole}
/>
</div>