feat(ui): show OSS db permissions on users page
Pavel Zavora
parent
4974f2a97e
commit
6718f189d7
|
|
@ -1,66 +0,0 @@
|
|||
import React, {PureComponent} from 'react'
|
||||
import classnames from 'classnames'
|
||||
|
||||
import MultiSelectDropdown from 'src/shared/components/MultiSelectDropdown'
|
||||
|
||||
import {USERS_TABLE} from 'src/admin/constants/tableSizing'
|
||||
import {User, UserPermission} from 'src/types/influxAdmin'
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
|
||||
interface Props {
|
||||
user: User
|
||||
onUpdatePermissions: (user: User, permissions: UserPermission[]) => void
|
||||
}
|
||||
|
||||
const ADMIN_YES_OPTION = 'YES'
|
||||
const ALL_PERMISSIONS = [{name: ADMIN_YES_OPTION}]
|
||||
|
||||
@ErrorHandling
|
||||
class UserAdminDropdown extends PureComponent<Props> {
|
||||
public render() {
|
||||
return (
|
||||
<MultiSelectDropdown
|
||||
buttonSize="btn-xs"
|
||||
buttonColor="btn-primary"
|
||||
resetStateOnReceiveProps={false}
|
||||
items={ALL_PERMISSIONS}
|
||||
label={this.permissionsLabel}
|
||||
customClass={this.permissionsClass}
|
||||
selectedItems={this.selectedPermissions}
|
||||
onApply={this.handleApply}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
private handleApply = (items): void => {
|
||||
const {onUpdatePermissions, user} = this.props
|
||||
let permissions = (user.permissions || []).filter(x => x.scope !== 'all')
|
||||
if (items && items.length) {
|
||||
permissions = [{scope: 'all', allowed: ['ALL']}, ...permissions]
|
||||
}
|
||||
onUpdatePermissions(user, permissions)
|
||||
}
|
||||
|
||||
private get admin() {
|
||||
return (
|
||||
(this.props.user.permissions || []).filter(
|
||||
x => x.scope === 'all' && (x.allowed || []).includes('ALL')
|
||||
).length > 0
|
||||
)
|
||||
}
|
||||
private get selectedPermissions() {
|
||||
return this.admin ? [{name: ADMIN_YES_OPTION}] : []
|
||||
}
|
||||
|
||||
private get permissionsLabel() {
|
||||
return this.admin ? 'YES' : 'NO'
|
||||
}
|
||||
|
||||
private get permissionsClass() {
|
||||
return classnames(`dropdown-${USERS_TABLE.colPermissions}`, {
|
||||
'admin-table--multi-select-empty': !this.admin,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default UserAdminDropdown
|
||||
|
|
@ -7,9 +7,50 @@ import {USERS_TABLE} from 'src/admin/constants/tableSizing'
|
|||
import UserRowEdit from 'src/admin/components/UserRowEdit'
|
||||
import {User, UserPermission} from 'src/types/influxAdmin'
|
||||
import {ErrorHandling} from 'src/shared/decorators/errors'
|
||||
import UserAdminDropdown from './UserAdminDropdown'
|
||||
import {Link} from 'react-router'
|
||||
|
||||
const ADMIN_STYLES = [
|
||||
{
|
||||
style: 'admin--not-admin',
|
||||
text: 'No',
|
||||
},
|
||||
{
|
||||
style: 'admin--is-admin',
|
||||
text: 'Yes',
|
||||
},
|
||||
]
|
||||
|
||||
const mapOSSPermission = (allowed: string[]) => {
|
||||
let retVal = ''
|
||||
for (const x of allowed) {
|
||||
if (x === 'WRITE') {
|
||||
retVal += 'W'
|
||||
continue
|
||||
}
|
||||
if (x === 'READ') {
|
||||
retVal = 'R' + retVal
|
||||
continue
|
||||
}
|
||||
}
|
||||
return retVal
|
||||
}
|
||||
const OssUserDBPermissions = ({user}: {user: User}) => (
|
||||
<>
|
||||
{(user.permissions || [])
|
||||
.filter(x => x.scope === 'database')
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map(x => (
|
||||
<>
|
||||
<span className="permission--db">{x.name}</span>
|
||||
{':'}
|
||||
<span className="permission--values">
|
||||
{mapOSSPermission(x.allowed)}
|
||||
</span>
|
||||
</>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
|
||||
interface UserRowProps {
|
||||
user: User
|
||||
allRoles: any[]
|
||||
|
|
@ -56,12 +97,19 @@ class UserRow extends PureComponent<UserRowProps> {
|
|||
)
|
||||
}
|
||||
|
||||
const adminStyle =
|
||||
ADMIN_STYLES[
|
||||
+!!user.permissions.find(
|
||||
x => x.scope === 'all' && (x.allowed || []).includes('ALL')
|
||||
)
|
||||
]
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td style={{width: `${USERS_TABLE.colUsername}px`}}>
|
||||
<Link to={page}>{user.name}</Link>
|
||||
</td>
|
||||
{hasRoles && (
|
||||
{hasRoles ? (
|
||||
<td>
|
||||
<UserRoleDropdown
|
||||
user={user}
|
||||
|
|
@ -69,6 +117,10 @@ class UserRow extends PureComponent<UserRowProps> {
|
|||
onUpdateRoles={onUpdateRoles}
|
||||
/>
|
||||
</td>
|
||||
) : (
|
||||
<td style={{width: `${USERS_TABLE.colAdministrator}px`}}>
|
||||
<span className={adminStyle.style}>{adminStyle.text}</span>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
{this.hasPermissions ? (
|
||||
|
|
@ -78,10 +130,7 @@ class UserRow extends PureComponent<UserRowProps> {
|
|||
onUpdatePermissions={onUpdatePermissions}
|
||||
/>
|
||||
) : (
|
||||
<UserAdminDropdown
|
||||
user={user}
|
||||
onUpdatePermissions={onUpdatePermissions}
|
||||
/>
|
||||
<OssUserDBPermissions user={user} />
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -54,10 +54,10 @@ const UsersTable = ({
|
|||
<thead>
|
||||
<tr>
|
||||
<th>User</th>
|
||||
{hasRoles && <th className="admin-table--left-offset">Roles</th>}
|
||||
<th className="admin-table--left-offset">
|
||||
{hasRoles ? 'Permissions' : 'Administrator'}
|
||||
{hasRoles ? 'Roles' : 'Admin'}
|
||||
</th>
|
||||
<th>Permissions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -82,7 +82,7 @@ const UsersTable = ({
|
|||
/>
|
||||
))
|
||||
) : (
|
||||
<EmptyRow tableName={'Users'} colSpan={hasRoles ? 3 : 2} />
|
||||
<EmptyRow tableName={'Users'} colSpan={3} />
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export const USERS_TABLE = {
|
||||
colUsername: 240,
|
||||
colAdministrator: 70,
|
||||
colPassword: 186,
|
||||
colRoles: 190,
|
||||
colPermissions: 190,
|
||||
|
|
|
|||
|
|
@ -232,7 +232,7 @@ const UserPageContent = ({
|
|||
{password === undefined ? '' : 'Set password for user: '}
|
||||
<span title={`User: ${userName}`}>{userName}</span>
|
||||
</h2>
|
||||
{password === undefined ? (
|
||||
{password === undefined && (
|
||||
<>
|
||||
<Button
|
||||
text="Change password"
|
||||
|
|
@ -241,7 +241,7 @@ const UserPageContent = ({
|
|||
running ? ComponentStatus.Disabled : ComponentStatus.Default
|
||||
}
|
||||
/>
|
||||
{isOSS ? (
|
||||
{isOSS && (
|
||||
<ConfirmButton
|
||||
type="btn-default"
|
||||
text={isAdmin ? 'Revoke Admin' : 'Grant Admin'}
|
||||
|
|
@ -252,7 +252,7 @@ const UserPageContent = ({
|
|||
disabled={running}
|
||||
position="bottom"
|
||||
></ConfirmButton>
|
||||
) : null}
|
||||
)}
|
||||
<ConfirmButton
|
||||
type="btn-danger"
|
||||
text="Delete User"
|
||||
|
|
@ -261,7 +261,7 @@ const UserPageContent = ({
|
|||
position="bottom"
|
||||
></ConfirmButton>
|
||||
</>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
<div className="panel-body">
|
||||
{password !== undefined ? (
|
||||
|
|
@ -305,7 +305,7 @@ const UserPageContent = ({
|
|||
<h4>
|
||||
Database Privileges{permissionsChanged ? ' (unsaved)' : ''}
|
||||
</h4>
|
||||
{permissionsChanged ? (
|
||||
{permissionsChanged && (
|
||||
<Button
|
||||
text="Apply Changes"
|
||||
onClick={changePermissions}
|
||||
|
|
@ -316,15 +316,15 @@ const UserPageContent = ({
|
|||
: ComponentStatus.Default
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
<div className="db-manager-body">
|
||||
{isAdmin ? (
|
||||
{isAdmin && (
|
||||
<div className="db-manager-text">
|
||||
The user is an <b>admin</b>, ALL PRIVILEGES are granted
|
||||
irrespectively of database permissions.
|
||||
</div>
|
||||
) : null}
|
||||
)}
|
||||
<div className="db-manager-table">
|
||||
<table className="table v-center table-highlight">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,26 @@
|
|||
Admin Table
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
.admin-table {
|
||||
.admin--is-admin {
|
||||
color: $g14-chromium;
|
||||
padding-left: 7px;
|
||||
}
|
||||
.admin--not-admin {
|
||||
color: $g8-storm;
|
||||
padding-left: 7px;
|
||||
}
|
||||
span.permission--db{
|
||||
padding-left: 3px;
|
||||
&:first-child {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
span.permission--allowed{
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-table .dropdown-toggle {
|
||||
background-color: transparent;
|
||||
font-weight: 600;
|
||||
|
|
|
|||
Loading…
Reference in New Issue