Merge pull request #3313 from influxdata/polish/chrono-admin-tabs

Polish Chronograf Admin Tabs

ui/src/admin/components/chronograf/AdminTabs.js

@@ -1,78 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import {
-  isUserAuthorized,
-  ADMIN_ROLE,
-  SUPERADMIN_ROLE,
-} from 'src/auth/Authorized'
-
-import {Tab, Tabs, TabPanel, TabPanels, TabList} from 'shared/components/Tabs'
-import OrganizationsPage from 'src/admin/containers/chronograf/OrganizationsPage'
-import UsersPage from 'src/admin/containers/chronograf/UsersPage'
-import ProvidersPage from 'src/admin/containers/ProvidersPage'
-import AllUsersPage from 'src/admin/containers/chronograf/AllUsersPage'
-
-const ORGANIZATIONS_TAB_NAME = 'All Orgs'
-const PROVIDERS_TAB_NAME = 'Org Mappings'
-const CURRENT_ORG_USERS_TAB_NAME = 'Current Org'
-const ALL_USERS_TAB_NAME = 'All Users'
-
-const AdminTabs = ({
-  me: {currentOrganization: meCurrentOrganization, role: meRole, id: meID},
-}) => {
-  const tabs = [
-    {
-      requiredRole: ADMIN_ROLE,
-      type: CURRENT_ORG_USERS_TAB_NAME,
-      component: (
-        <UsersPage meID={meID} meCurrentOrganization={meCurrentOrganization} />
-      ),
-    },
-    {
-      requiredRole: SUPERADMIN_ROLE,
-      type: ALL_USERS_TAB_NAME,
-      component: <AllUsersPage meID={meID} />,
-    },
-    {
-      requiredRole: SUPERADMIN_ROLE,
-      type: ORGANIZATIONS_TAB_NAME,
-      component: (
-        <OrganizationsPage meCurrentOrganization={meCurrentOrganization} />
-      ),
-    },
-    {
-      requiredRole: SUPERADMIN_ROLE,
-      type: PROVIDERS_TAB_NAME,
-      component: <ProvidersPage />,
-    },
-  ].filter(t => isUserAuthorized(meRole, t.requiredRole))
-
-  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 {shape, string} = PropTypes
-
-AdminTabs.propTypes = {
-  me: shape({
-    id: string.isRequired,
-    role: string.isRequired,
-    currentOrganization: shape({
-      name: string.isRequired,
-      id: string.isRequired,
-    }),
-  }).isRequired,
-}
-
-export default AdminTabs

ui/src/admin/containers/chronograf/AdminChronografPage.js

@@ -2,10 +2,52 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 
-import AdminTabs from 'src/admin/components/chronograf/AdminTabs'
+import SubSections from 'src/shared/components/SubSections'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 
-const AdminChronografPage = ({me}) => (
+import UsersPage from 'src/admin/containers/chronograf/UsersPage'
+import AllUsersPage from 'src/admin/containers/chronograf/AllUsersPage'
+import OrganizationsPage from 'src/admin/containers/chronograf/OrganizationsPage'
+import ProvidersPage from 'src/admin/containers/ProvidersPage'
+
+import {
+  isUserAuthorized,
+  ADMIN_ROLE,
+  SUPERADMIN_ROLE,
+} from 'src/auth/Authorized'
+
+const sections = me => [
+  {
+    url: 'current-organization',
+    name: 'Current Org',
+    enabled: isUserAuthorized(me.role, ADMIN_ROLE),
+    component: (
+      <UsersPage meID={me.id} meCurrentOrganization={me.currentOrganization} />
+    ),
+  },
+  {
+    url: 'all-users',
+    name: 'All Users',
+    enabled: isUserAuthorized(me.role, SUPERADMIN_ROLE),
+    component: <AllUsersPage meID={me.id} />,
+  },
+  {
+    url: 'all-organizations',
+    name: 'All Orgs',
+    enabled: isUserAuthorized(me.role, SUPERADMIN_ROLE),
+    component: (
+      <OrganizationsPage meCurrentOrganization={me.currentOrganization} />
+    ),
+  },
+  {
+    url: 'organization-mappings',
+    name: 'Org Mappings',
+    enabled: isUserAuthorized(me.role, SUPERADMIN_ROLE),
+    component: <ProvidersPage />,
+  },
+]
+
+const AdminChronografPage = ({me, source, params: {tab}}) => (
   <div className="page">
     <div className="page-header">
       <div className="page-header__container">
@@ -16,9 +58,12 @@ const AdminChronografPage = ({me}) => (
     </div>
     <FancyScrollbar className="page-contents">
       <div className="container-fluid">
-        <div className="row">
-          <AdminTabs me={me} />
-        </div>
+        <SubSections
+          sections={sections(me)}
+          activeSection={tab}
+          parentUrl="admin-chronograf"
+          sourceID={source.id}
+        />
       </div>
     </FancyScrollbar>
   </div>
@@ -35,6 +80,15 @@ AdminChronografPage.propTypes = {
       id: string.isRequired,
     }),
   }).isRequired,
+  params: shape({
+    tab: string,
+  }).isRequired,
+  source: shape({
+    id: string.isRequired,
+    links: shape({
+      users: string.isRequired,
+    }),
+  }).isRequired,
 }
 
 const mapStateToProps = ({auth: {me}}) => ({

ui/src/index.tsx

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

ui/src/side_nav/containers/SideNav.tsx

@@ -122,14 +122,16 @@ class SideNav extends PureComponent<Props> {
           <NavBlock
             highlightWhen={['admin-chronograf', 'admin-influxdb']}
             icon="crown2"
-            link={`${sourcePrefix}/admin-chronograf`}
+            link={`${sourcePrefix}/admin-chronograf/current-organization`}
             location={location}
           >
             <NavHeader
-              link={`${sourcePrefix}/admin-chronograf`}
+              link={`${sourcePrefix}/admin-chronograf/current-organization`}
               title="Admin"
             />
-            <NavListItem link={`${sourcePrefix}/admin-chronograf`}>
+            <NavListItem
+              link={`${sourcePrefix}/admin-chronograf/current-organization`}
+            >
               Chronograf
             </NavListItem>
             <NavListItem link={`${sourcePrefix}/admin-influxdb/databases`}>