Extract telegrafs org view to use react router

ui/src/index.tsx

@@ -39,6 +39,9 @@ import GetLinks from 'src/shared/containers/GetLinks'
 import GetMe from 'src/shared/containers/GetMe'
 import SourcesPage from 'src/sources/components/SourcesPage'
 import ConfigurationPage from 'src/configuration/components/ConfigurationPage'
+import OrgDashboardsIndex from 'src/organizations/containers/OrgDashboardsIndex'
+import OrgMembersIndex from 'src/organizations/containers/OrgMembersIndex'
+import OrgTelegrafsIndex from 'src/organizations/containers/OrgTelegrafsIndex'
 
 import OnboardingWizardPage from 'src/onboarding/containers/OnboardingWizardPage'
 
@@ -119,6 +122,18 @@ class Root extends PureComponent {
                                   path="buckets_tab"
                                   component={OrgBucketIndex}
                                 />
+                                <Route
+                                  path="dashboards_tab"
+                                  component={OrgDashboardsIndex}
+                                />
+                                <Route
+                                  path="members_tab"
+                                  component={OrgMembersIndex}
+                                />
+                                <Route
+                                  path="telegrafs_tab"
+                                  component={OrgTelegrafsIndex}
+                                />
                                 <Route
                                   path=":tab"
                                   component={OrganizationView}

ui/src/me/components/account/Tokens.tsx

@@ -96,7 +96,7 @@ const mdtp = {
   onNotify: notify,
 }
 
-export default connect<Props>(
+export default connect<{}, Props>(
   null,
   mdtp
 )(Tokens)

ui/src/organizations/containers/OrgTelegrafsIndex.tsx

@@ -0,0 +1,129 @@
+// Libraries
+import React, {Component} from 'react'
+import {withRouter, WithRouterProps} from 'react-router'
+import {connect} from 'react-redux'
+import {AppState} from 'src/types/v2'
+
+// Components
+import OrganizationNavigation from 'src/organizations/components/OrganizationNavigation'
+import OrgHeader from 'src/organizations/containers/OrgHeader'
+import {Tabs} from 'src/clockface'
+import {Page} from 'src/pageLayout'
+import Collectors from 'src/organizations/components/Collectors'
+
+// Decorators
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+import {Bucket, Organization, Telegraf} from '@influxdata/influx'
+import {client} from 'src/utils/api'
+
+// Components
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
+import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
+import GetOrgResources from 'src/organizations/components/GetOrgResources'
+
+import * as NotificationsActions from 'src/types/actions/notifications'
+import * as notifyActions from 'src/shared/actions/notifications'
+
+const getBuckets = async (org: Organization) => {
+  return client.buckets.getAllByOrg(org.name)
+}
+const getCollectors = async (org: Organization) => {
+  return client.telegrafConfigs.getAllByOrg(org)
+}
+
+interface RouterProps {
+  params: {
+    orgID: string
+  }
+}
+
+interface DispatchProps {
+  notify: NotificationsActions.PublishNotificationActionCreator
+}
+
+interface StateProps {
+  org: Organization
+}
+
+type Props = WithRouterProps & RouterProps & DispatchProps & StateProps
+
+@ErrorHandling
+class OrgTelegrafsIndex extends Component<Props> {
+  constructor(props) {
+    super(props)
+  }
+
+  public render() {
+    const {org, notify} = this.props
+
+    return (
+      <Page titleTag={org.name}>
+        <OrgHeader orgID={org.id} />
+        <Page.Contents fullWidth={false} scrollable={true}>
+          <div className="col-xs-12">
+            <Tabs>
+              <OrganizationNavigation tab={'telegrafs_tab'} orgID={org.id} />
+              <Tabs.TabContents>
+                <TabbedPageSection
+                  id="org-view-tab--telegrafs"
+                  url="telegrafs_tab"
+                  title="Telegraf"
+                >
+                  <GetOrgResources<Telegraf>
+                    organization={org}
+                    fetcher={getCollectors}
+                  >
+                    {(collectors, loading, fetch) => (
+                      <SpinnerContainer
+                        loading={loading}
+                        spinnerComponent={<TechnoSpinner />}
+                      >
+                        <GetOrgResources<Bucket>
+                          organization={org}
+                          fetcher={getBuckets}
+                        >
+                          {(buckets, loading) => (
+                            <SpinnerContainer
+                              loading={loading}
+                              spinnerComponent={<TechnoSpinner />}
+                            >
+                              <Collectors
+                                collectors={collectors}
+                                onChange={fetch}
+                                notify={notify}
+                                buckets={buckets}
+                                orgName={org.name}
+                              />
+                            </SpinnerContainer>
+                          )}
+                        </GetOrgResources>
+                      </SpinnerContainer>
+                    )}
+                  </GetOrgResources>
+                </TabbedPageSection>
+              </Tabs.TabContents>
+            </Tabs>
+          </div>
+        </Page.Contents>
+      </Page>
+    )
+  }
+}
+
+const mstp = (state: AppState, props: WithRouterProps) => {
+  const {orgs} = state
+  const org = orgs.find(o => o.id === props.params.orgID)
+  return {
+    org,
+  }
+}
+
+const mdtp: DispatchProps = {
+  notify: notifyActions.notify,
+}
+
+export default connect<StateProps, DispatchProps, {}>(
+  mstp,
+  mdtp
+)(withRouter<{}>(OrgTelegrafsIndex))

ui/src/organizations/containers/OrganizationView.tsx

@@ -7,10 +7,6 @@ import _ from 'lodash'
 // APIs
 import {client} from 'src/utils/api'
 
-const getCollectors = async (org: Organization) => {
-  return client.telegrafConfigs.getAllByOrg(org)
-}
-
 const getScrapers = async (): Promise<ScraperTargetResponse[]> => {
   return await client.scrapers.getAll()
 }
@@ -33,7 +29,6 @@ import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
 import Variables from 'src/organizations/components/Variables'
 import OrgTasksPage from 'src/organizations/components/OrgTasksPage'
-import Collectors from 'src/organizations/components/Collectors'
 import Scrapers from 'src/organizations/components/Scrapers'
 import GetOrgResources from 'src/organizations/components/GetOrgResources'
 import OrganizationTabs from 'src/organizations/components/OrganizationTabs'
@@ -41,12 +36,7 @@ import OrgHeader from 'src/organizations/containers/OrgHeader'
 
 // Types
 import {AppState} from 'src/types/v2'
-import {
+import {Bucket, Organization, ScraperTargetResponse} from '@influxdata/influx'
-  Bucket,
-  Organization,
-  Telegraf,
-  ScraperTargetResponse,
-} from '@influxdata/influx'
 import * as NotificationsActions from 'src/types/actions/notifications'
 import {Variable} from '@influxdata/influx'
 
@@ -113,43 +103,6 @@ class OrganizationView extends PureComponent<Props> {
                   )}
                 </GetOrgResources>
               </TabbedPageSection>
-              <TabbedPageSection
-                id="org-view-tab--telegrafs"
-                url="telegrafs_tab"
-                title="Telegraf"
-              >
-                <GetOrgResources<Telegraf>
-                  organization={org}
-                  fetcher={getCollectors}
-                >
-                  {(collectors, loading, fetch) => (
-                    <SpinnerContainer
-                      loading={loading}
-                      spinnerComponent={<TechnoSpinner />}
-                    >
-                      <GetOrgResources<Bucket>
-                        organization={org}
-                        fetcher={getBuckets}
-                      >
-                        {(buckets, loading) => (
-                          <SpinnerContainer
-                            loading={loading}
-                            spinnerComponent={<TechnoSpinner />}
-                          >
-                            <Collectors
-                              collectors={collectors}
-                              onChange={fetch}
-                              notify={notify}
-                              buckets={buckets}
-                              orgName={org.name}
-                            />
-                          </SpinnerContainer>
-                        )}
-                      </GetOrgResources>
-                    </SpinnerContainer>
-                  )}
-                </GetOrgResources>
-              </TabbedPageSection>
               <TabbedPageSection
                 id="org-view-tab--scrapers"
                 url="scrapers_tab"