Implement SubSections in Chronograf admin page

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`}>
@@ -163,9 +165,7 @@ class SideNav extends PureComponent<Props> {
 
 const mapStateToProps = ({
   auth: {isUsingAuth, logoutLink, me},
-  app: {
-    ephemeral: {inPresentationMode},
-  },
+  app: {ephemeral: {inPresentationMode}},
   links,
 }) => ({
   isHidden: inPresentationMode,