Replace InfluxDB AdminTabs component with SubSections component

ui/src/admin/components/AdminTabs.js

@@ -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: <DatabaseManagerPage source={source} />,
-    },
-    {
-      type: 'Users',
-      component: (
-        <UsersTable
-          users={users}
-          allRoles={roles}
-          hasRoles={hasRoles}
-          permissions={permissions}
-          isEditing={isEditingUsers}
-          onSave={onSaveUser}
-          onCancel={onCancelEditUser}
-          onClickCreate={onClickCreate}
-          onEdit={onEditUser}
-          onDelete={onDeleteUser}
-          onFilter={onFilterUsers}
-          onUpdatePermissions={onUpdateUserPermissions}
-          onUpdateRoles={onUpdateUserRoles}
-          onUpdatePassword={onUpdateUserPassword}
-        />
-      ),
-    },
-    {
-      type: 'Roles',
-      component: (
-        <RolesTable
-          roles={roles}
-          allUsers={users}
-          permissions={permissions}
-          isEditing={isEditingRoles}
-          onClickCreate={onClickCreate}
-          onEdit={onEditRole}
-          onSave={onSaveRole}
-          onCancel={onCancelEditRole}
-          onDelete={onDeleteRole}
-          onFilter={onFilterRoles}
-          onUpdateRoleUsers={onUpdateRoleUsers}
-          onUpdateRolePermissions={onUpdateRolePermissions}
-        />
-      ),
-    },
-    {
-      type: 'Queries',
-      component: <QueriesPage source={source} />,
-    },
-  ]
-
-  if (!hasRoles) {
-    tabs = tabs.filter(t => t.type !== 'Roles')
-  }
-
-  return (
-    <Tabs className="row">
-      <TabList customClass="col-md-2 admin-tabs">
-        {tabs.map((t, i) => <Tab key={tabs[i].type}>{tabs[i].type}</Tab>)}
-      </TabList>
-      <TabPanels customClass="col-md-10 admin-tabs--content">
-        {tabs.map((t, i) => (
-          <TabPanel key={tabs[i].type}>{t.component}</TabPanel>
-        ))}
-      </TabPanels>
-    </Tabs>
-  )
-}
-
-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

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: <DatabaseManagerPage source={source} />,
+      },
+      {
+        url: 'users',
+        name: 'Users',
+        enabled: true,
+        component: (
+          <UsersTable
+            users={users}
+            allRoles={roles}
+            hasRoles={hasRoles}
+            permissions={allowed}
+            isEditing={users.some(u => 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: (
+          <RolesTable
+            roles={roles}
+            allUsers={users}
+            permissions={allowed}
+            isEditing={roles.some(r => 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: <QueriesPage source={source} />,
+      },
+    ]
+  }
+
+  render() {
+    const {users, source, params} = this.props
+
     return (
       <div className="page">
         <div className="page-header">
@@ -169,33 +236,12 @@ class AdminInfluxDBPage extends Component {
         <FancyScrollbar className="page-contents">
           {users ? (
             <div className="container-fluid">
-              <div className="row">
-                <AdminTabs
-                  users={users}
-                  roles={roles}
-                  source={source}
-                  hasRoles={hasRoles}
-                  permissions={allowed}
-                  onFilterUsers={filterUsers}
-                  onFilterRoles={filterRoles}
-                  onEditUser={this.handleEditUser}
-                  onEditRole={this.handleEditRole}
-                  onSaveUser={this.handleSaveUser}
-                  onSaveRole={this.handleSaveRole}
-                  onDeleteUser={this.handleDeleteUser}
-                  onDeleteRole={this.handleDeleteRole}
-                  onClickCreate={this.handleClickCreate}
-                  onCancelEditUser={this.handleCancelEditUser}
-                  onCancelEditRole={this.handleCancelEditRole}
-                  isEditingUsers={users.some(u => u.isEditing)}
-                  isEditingRoles={roles.some(r => r.isEditing)}
-                  onUpdateRoleUsers={this.handleUpdateRoleUsers}
-                  onUpdateUserRoles={this.handleUpdateUserRoles}
-                  onUpdateUserPassword={this.handleUpdateUserPassword}
-                  onUpdateRolePermissions={this.handleUpdateRolePermissions}
-                  onUpdateUserPermissions={this.handleUpdateUserPermissions}
-                />
-              </div>
+              <SubSections
+                parentUrl="admin-influxdb"
+                sourceID={source.id}
+                activeSection={params.tab}
+                sections={this.getAdminSubSections()}
+              />
             </div>
           ) : (
             <div className="page-spinner" />
@@ -239,6 +285,9 @@ AdminInfluxDBPage.propTypes = {
   updateUserRoles: func,
   updateUserPassword: func,
   notify: func.isRequired,
+  params: shape({
+    tab: string,
+  }).isRequired,
 }
 
 const mapStateToProps = ({adminInfluxDB: {users, roles, permissions}}) => ({

ui/src/index.tsx

@@ -147,7 +147,7 @@ class Root extends PureComponent<{}, State> {
                 component={KapacitorPage}
               />
               <Route path="admin-chronograf" component={AdminChronografPage} />
-              <Route path="admin-influxdb" component={AdminInfluxDBPage} />
+              <Route path="admin-influxdb/:tab" component={AdminInfluxDBPage} />
               <Route path="manage-sources" component={ManageSources} />
               <Route path="manage-sources/new" component={SourcePage} />
               <Route path="manage-sources/:id/edit" component={SourcePage} />

ui/src/side_nav/containers/SideNav.tsx

@@ -101,11 +101,11 @@ class SideNav extends PureComponent<Props> {
           replaceWithIfNotUsingAuth={
             <NavBlock
               icon="crown2"
-              link={`${sourcePrefix}/admin-influxdb`}
+              link={`${sourcePrefix}/admin-influxdb/databases`}
               location={location}
             >
               <NavHeader
-                link={`${sourcePrefix}/admin-influxdb`}
+                link={`${sourcePrefix}/admin-influxdb/databases`}
                 title="InfluxDB Admin"
               />
             </NavBlock>
@@ -123,7 +123,7 @@ class SideNav extends PureComponent<Props> {
             <NavListItem link={`${sourcePrefix}/admin-chronograf`}>
               Chronograf
             </NavListItem>
-            <NavListItem link={`${sourcePrefix}/admin-influxdb`}>
+            <NavListItem link={`${sourcePrefix}/admin-influxdb/databases`}>
               InfluxDB
             </NavListItem>
           </NavBlock>