diff --git a/ui/src/admin/components/AdminTabs.js b/ui/src/admin/components/AdminTabs.js deleted file mode 100644 index 1296be1b2..000000000 --- a/ui/src/admin/components/AdminTabs.js +++ /dev/null @@ -1,140 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import {Tab, Tabs, TabPanel, TabPanels, TabList} from 'shared/components/Tabs' -import UsersTable from 'src/admin/components/UsersTable' -import RolesTable from 'src/admin/components/RolesTable' -import QueriesPage from 'src/admin/containers/QueriesPage' -import DatabaseManagerPage from 'src/admin/containers/DatabaseManagerPage' - -const AdminTabs = ({ - users, - roles, - permissions, - source, - hasRoles, - isEditingUsers, - isEditingRoles, - onClickCreate, - onEditUser, - onSaveUser, - onCancelEditUser, - onEditRole, - onSaveRole, - onCancelEditRole, - onDeleteRole, - onDeleteUser, - onFilterRoles, - onFilterUsers, - onUpdateRoleUsers, - onUpdateRolePermissions, - onUpdateUserRoles, - onUpdateUserPermissions, - onUpdateUserPassword, -}) => { - let tabs = [ - { - type: 'Databases', - component: , - }, - { - type: 'Users', - component: ( - - ), - }, - { - type: 'Roles', - component: ( - - ), - }, - { - type: 'Queries', - component: , - }, - ] - - if (!hasRoles) { - tabs = tabs.filter(t => t.type !== 'Roles') - } - - return ( - - - {tabs.map((t, i) => {tabs[i].type})} - - - {tabs.map((t, i) => ( - {t.component} - ))} - - - ) -} - -const {arrayOf, bool, func, shape, string} = PropTypes - -AdminTabs.propTypes = { - users: arrayOf( - shape({ - name: string.isRequired, - roles: arrayOf( - shape({ - name: string, - }) - ), - }) - ), - roles: arrayOf(shape()), - source: shape(), - permissions: arrayOf(string), - isEditingUsers: bool, - isEditingRoles: bool, - onClickCreate: func.isRequired, - onEditUser: func.isRequired, - onSaveUser: func.isRequired, - onCancelEditUser: func.isRequired, - onEditRole: func.isRequired, - onSaveRole: func.isRequired, - onCancelEditRole: func.isRequired, - onDeleteRole: func.isRequired, - onDeleteUser: func.isRequired, - onFilterRoles: func.isRequired, - onFilterUsers: func.isRequired, - onUpdateRoleUsers: func.isRequired, - onUpdateRolePermissions: func.isRequired, - hasRoles: bool.isRequired, - onUpdateUserPermissions: func, - onUpdateUserRoles: func, - onUpdateUserPassword: func, -} - -export default AdminTabs diff --git a/ui/src/admin/containers/AdminInfluxDBPage.js b/ui/src/admin/containers/AdminInfluxDBPage.js index 5f9597728..d39060fbc 100644 --- a/ui/src/admin/containers/AdminInfluxDBPage.js +++ b/ui/src/admin/containers/AdminInfluxDBPage.js @@ -25,9 +25,13 @@ import { filterRoles as filterRolesAction, } from 'src/admin/actions/influxdb' -import AdminTabs from 'src/admin/components/AdminTabs' +import UsersTable from 'src/admin/components/UsersTable' +import RolesTable from 'src/admin/components/RolesTable' +import QueriesPage from 'src/admin/containers/QueriesPage' +import DatabaseManagerPage from 'src/admin/containers/DatabaseManagerPage' import SourceIndicator from 'shared/components/SourceIndicator' import FancyScrollbar from 'shared/components/FancyScrollbar' +import SubSections from 'shared/components/SubSections' import {ErrorHandling} from 'src/shared/decorators/errors' import {notify as notifyAction} from 'shared/actions/notifications' @@ -141,7 +145,7 @@ class AdminInfluxDBPage extends Component { this.props.updateUserPassword(user, password) } - render() { + getAdminSubSections = () => { const { users, roles, @@ -154,6 +158,69 @@ class AdminInfluxDBPage extends Component { const globalPermissions = permissions.find(p => p.scope === 'all') const allowed = globalPermissions ? globalPermissions.allowed : [] + return [ + { + url: 'databases', + name: 'Databases', + enabled: true, + component: , + }, + { + url: 'users', + name: 'Users', + enabled: true, + component: ( + u.isEditing)} + onSave={this.handleSaveUser} + onCancel={this.handleCancelEditUser} + onClickCreate={this.handleClickCreate} + onEdit={this.handleEditUser} + onDelete={this.handleDeleteUser} + onFilter={filterUsers} + onUpdatePermissions={this.handleUpdateUserPermissions} + onUpdateRoles={this.handleUpdateUserRoles} + onUpdatePassword={this.handleUpdateUserPassword} + /> + ), + }, + { + url: 'roles', + name: 'Roles', + enabled: hasRoles, + component: ( + r.isEditing)} + onClickCreate={this.handleClickCreate} + onEdit={this.handleEditRole} + onSave={this.handleSaveRole} + onCancel={this.handleCancelEditRole} + onDelete={this.handleDeleteRole} + onFilter={filterRoles} + onUpdateRoleUsers={this.handleUpdateRoleUsers} + onUpdateRolePermissions={this.handleUpdateRolePermissions} + /> + ), + }, + { + url: 'queries', + name: 'Queries', + enabled: true, + component: , + }, + ] + } + + render() { + const {users, source, params} = this.props + return (
@@ -169,33 +236,12 @@ class AdminInfluxDBPage extends Component { {users ? (
-
- u.isEditing)} - isEditingRoles={roles.some(r => r.isEditing)} - onUpdateRoleUsers={this.handleUpdateRoleUsers} - onUpdateUserRoles={this.handleUpdateUserRoles} - onUpdateUserPassword={this.handleUpdateUserPassword} - onUpdateRolePermissions={this.handleUpdateRolePermissions} - onUpdateUserPermissions={this.handleUpdateUserPermissions} - /> -
+
) : (
@@ -239,6 +285,9 @@ AdminInfluxDBPage.propTypes = { updateUserRoles: func, updateUserPassword: func, notify: func.isRequired, + params: shape({ + tab: string, + }).isRequired, } const mapStateToProps = ({adminInfluxDB: {users, roles, permissions}}) => ({ diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 10ffc7dec..5f8572b98 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -147,7 +147,7 @@ class Root extends PureComponent<{}, State> { component={KapacitorPage} /> - + diff --git a/ui/src/side_nav/containers/SideNav.tsx b/ui/src/side_nav/containers/SideNav.tsx index dc17ddbb0..d08d3ca46 100644 --- a/ui/src/side_nav/containers/SideNav.tsx +++ b/ui/src/side_nav/containers/SideNav.tsx @@ -101,11 +101,11 @@ class SideNav extends PureComponent { replaceWithIfNotUsingAuth={ @@ -123,7 +123,7 @@ class SideNav extends PureComponent { Chronograf - + InfluxDB