chore(ui/telegrafs): move org telegrafs to settings (#13258)

ui/src/configuration/components/Telegrafs.tsx

@@ -6,10 +6,10 @@ import {connect} from 'react-redux'
 // Components
 import {Input, Button, EmptyState, Grid} from '@influxdata/clockface'
 import {Tabs} from 'src/clockface'
-import CollectorList from 'src/organizations/components/CollectorList'
-import TelegrafExplainer from 'src/organizations/components/TelegrafExplainer'
-import TelegrafInstructionsOverlay from 'src/organizations/components/TelegrafInstructionsOverlay'
-import TelegrafConfigOverlay from 'src/organizations/components/TelegrafConfigOverlay'
+import CollectorList from 'src/telegrafs/components/CollectorList'
+import TelegrafExplainer from 'src/telegrafs/components/TelegrafExplainer'
+import TelegrafInstructionsOverlay from 'src/telegrafs/components/TelegrafInstructionsOverlay'
+import TelegrafConfigOverlay from 'src/telegrafs/components/TelegrafConfigOverlay'
 import CollectorsWizard from 'src/dataLoaders/components/collectorsWizard/CollectorsWizard'
 import FilterList from 'src/shared/components/Filter'
 import NoBucketsWarning from 'src/organizations/components/NoBucketsWarning'

ui/src/dataLoaders/components/collectorsWizard/configure/TelegrafPluginInstructions.tsx

@@ -143,9 +143,9 @@ export class TelegrafPluginInstructions extends PureComponent<Props> {
   }
 
   private async handleCreateDashboardsForPlugins() {
-    const {notify, telegrafPlugins, org, orgID} = this.props
+    const {notify, telegrafPlugins, orgID} = this.props
     try {
-      const templatesEntries = await client.templates.getAll(org)
+      const templatesEntries = await client.templates.getAll(orgID)
 
       const configuredPlugins = telegrafPlugins.filter(
         tp => tp.configured === ConfigurationState.Configured

ui/src/index.tsx

@@ -43,8 +43,8 @@ import VEO from 'src/dashboards/components/VEO'
 import NoteEditorOverlay from 'src/dashboards/components/NoteEditorOverlay'
 import OnboardingWizardPage from 'src/onboarding/containers/OnboardingWizardPage'
 import BucketsIndex from 'src/buckets/containers/BucketsIndex'
-import OrgTelegrafsIndex from 'src/organizations/containers/OrgTelegrafsIndex'
 import TemplatesIndex from 'src/templates/containers/TemplatesIndex'
+import TelegrafsPage from 'src/telegrafs/containers/TelegrafsPage'
 import TemplateImportOverlay from 'src/templates/components/TemplateImportOverlay'
 import TemplateExportOverlay from 'src/templates/components/TemplateExportOverlay'
 import VariablesIndex from 'src/variables/containers/VariablesIndex'
@@ -186,10 +186,7 @@ class Root extends PureComponent {
                           <Route path="buckets" component={BucketsIndex} />
                           <Route path="tokens" component={TokensIndex} />
                           <Route path="members" component={MembersIndex} />
-                          <Route
-                            path="telegrafs"
-                            component={OrgTelegrafsIndex}
-                          />
+                          <Route path="telegrafs" component={TelegrafsPage} />
                           <Route path="templates" component={TemplatesIndex}>
                             <Route
                               path="import"

ui/src/organizations/containers/OrgTelegrafsIndex.tsx

@@ -1,144 +0,0 @@
-// Libraries
-import React, {Component} from 'react'
-import {withRouter, WithRouterProps} from 'react-router'
-import {connect} from 'react-redux'
-import {AppState} from 'src/types'
-
-// Components
-import {ErrorHandling} from 'src/shared/decorators/errors'
-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'
-import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
-import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
-import GetOrgResources from 'src/organizations/components/GetOrgResources'
-
-// Actions
-import * as NotificationsActions from 'src/types/actions/notifications'
-import * as notifyActions from 'src/shared/actions/notifications'
-import {getOrgTelegrafs} from 'src/telegrafs/actions'
-
-// Types
-import {Bucket, Organization, ITelegraf as Telegraf} from '@influxdata/influx'
-import {client} from 'src/utils/api'
-import {RemoteDataState} from 'src/types'
-
-const getBuckets = async (org: Organization) => {
-  return client.buckets.getAll(org.id)
-}
-
-interface RouterProps {
-  params: {
-    orgID: string
-  }
-}
-
-interface DispatchProps {
-  notify: NotificationsActions.PublishNotificationActionCreator
-  getOrgTelegrafs: typeof getOrgTelegrafs
-}
-
-interface StateProps {
-  org: Organization
-  telegrafs: Telegraf[]
-}
-
-type Props = WithRouterProps & RouterProps & DispatchProps & StateProps
-
-interface State {
-  loading: RemoteDataState
-}
-
-@ErrorHandling
-class OrgTelegrafsIndex extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-
-    this.state = {loading: RemoteDataState.NotStarted}
-  }
-
-  public async componentDidMount() {
-    const {org} = this.props
-
-    this.setState({loading: RemoteDataState.Loading})
-    try {
-      await this.props.getOrgTelegrafs(org)
-      this.setState({loading: RemoteDataState.Done})
-    } catch (error) {
-      //TODO: notify of errors
-      this.setState({loading: RemoteDataState.Error})
-    }
-  }
-
-  public render() {
-    const {org, telegrafs} = this.props
-    const {loading: loadingTelegrafs} = this.state
-
-    return (
-      <Page titleTag={org.name}>
-        <OrgHeader />
-        <Page.Contents fullWidth={false} scrollable={true}>
-          <div className="col-xs-12">
-            <Tabs>
-              <OrganizationNavigation tab="telegrafs" orgID={org.id} />
-              <Tabs.TabContents>
-                <TabbedPageSection
-                  id="org-view-tab--telegrafs"
-                  url="telegrafs"
-                  title="Telegraf"
-                >
-                  <SpinnerContainer
-                    loading={loadingTelegrafs}
-                    spinnerComponent={<TechnoSpinner />}
-                  >
-                    <GetOrgResources<Bucket>
-                      organization={org}
-                      fetcher={getBuckets}
-                    >
-                      {(buckets, loadingBuckets) => (
-                        <SpinnerContainer
-                          loading={loadingBuckets}
-                          spinnerComponent={<TechnoSpinner />}
-                        >
-                          <Collectors
-                            collectors={telegrafs}
-                            buckets={buckets}
-                            orgName={org.name}
-                          />
-                        </SpinnerContainer>
-                      )}
-                    </GetOrgResources>
-                  </SpinnerContainer>
-                </TabbedPageSection>
-              </Tabs.TabContents>
-            </Tabs>
-          </div>
-        </Page.Contents>
-      </Page>
-    )
-  }
-}
-
-const mstp = (state: AppState, props: WithRouterProps): StateProps => {
-  const {
-    orgs: {items},
-    telegrafs: {list},
-  } = state
-  const org = items.find(o => o.id === props.params.orgID)
-  return {
-    org,
-    telegrafs: list,
-  }
-}
-
-const mdtp: DispatchProps = {
-  notify: notifyActions.notify,
-  getOrgTelegrafs,
-}
-
-export default connect<StateProps, DispatchProps, {}>(
-  mstp,
-  mdtp
-)(withRouter<{}>(OrgTelegrafsIndex))

ui/src/style/chronograf.scss

@@ -57,8 +57,8 @@
 @import 'src/shared/components/BoxTooltip.scss';
 @import 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown.scss';
 @import 'src/organizations/components/Retention.scss';
-@import 'src/organizations/components/TelegrafConfigOverlay.scss';
-@import 'src/organizations/components/TelegrafExplainer.scss';
+@import 'src/telegrafs/components/TelegrafConfigOverlay.scss';
+@import 'src/telegrafs/components/TelegrafExplainer.scss';
 @import 'src/variables/components/CreateVariableOverlay.scss';
 @import 'src/tasks/components/TaskForm.scss';
 @import 'src/tasks/components/TasksPage.scss';

ui/src/telegrafs/actions/index.ts

@@ -2,12 +2,8 @@
 import {client} from 'src/utils/api'
 
 // Types
-import {RemoteDataState} from 'src/types'
-import {
-  ITelegraf as Telegraf,
-  Organization,
-  ILabel as Label,
-} from '@influxdata/influx'
+import {RemoteDataState, GetState} from 'src/types'
+import {ITelegraf as Telegraf, ILabel as Label} from '@influxdata/influx'
 import {Dispatch} from 'redux-thunk'
 
 // Actions
@@ -74,25 +70,15 @@ export const removeTelegraf = (id: string): RemoveTelegraf => ({
   payload: {id},
 })
 
-export const getTelegrafs = () => async (dispatch: Dispatch<Action>) => {
+export const getTelegrafs = () => async (dispatch, getState: GetState) => {
+  const {
+    orgs: {org},
+  } = getState()
+
   try {
     dispatch(setTelegrafs(RemoteDataState.Loading))
 
-    const telegrafs = await client.telegrafConfigs.getAll()
-
-    dispatch(setTelegrafs(RemoteDataState.Done, telegrafs))
-  } catch (e) {
-    console.error(e)
-    dispatch(setTelegrafs(RemoteDataState.Error))
-    dispatch(notify(telegrafGetFailed()))
-  }
-}
-
-export const getOrgTelegrafs = (org: Organization) => async dispatch => {
-  try {
-    dispatch(setTelegrafs(RemoteDataState.Loading))
-
-    const telegrafs = await client.telegrafConfigs.getAllByOrg(org)
+    const telegrafs = await client.telegrafConfigs.getAll(org.id)
 
     dispatch(setTelegrafs(RemoteDataState.Done, telegrafs))
   } catch (e) {

ui/src/telegrafs/components/CollectorList.tsx

@@ -4,7 +4,7 @@ import _ from 'lodash'
 
 // Components
 import {IndexList} from 'src/clockface'
-import CollectorRow from 'src/organizations/components/CollectorRow'
+import CollectorRow from 'src/telegrafs/components/CollectorRow'
 
 // DummyData
 import {ITelegraf as Telegraf} from '@influxdata/influx'

ui/src/telegrafs/components/Collectors.test.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import {shallow} from 'enzyme'
 
 // Components
-import CollectorList from 'src/organizations/components/CollectorList'
+import CollectorList from 'src/telegrafs/components/CollectorList'
 
 // Constants
 import {telegraf} from 'mocks/dummyData'

ui/src/telegrafs/components/Collectors.tsx

@@ -6,14 +6,17 @@ import {connect} from 'react-redux'
 // Components
 import {Input, Button, EmptyState, Grid} from '@influxdata/clockface'
 import {Tabs} from 'src/clockface'
-import CollectorList from 'src/organizations/components/CollectorList'
-import TelegrafExplainer from 'src/organizations/components/TelegrafExplainer'
-import TelegrafInstructionsOverlay from 'src/organizations/components/TelegrafInstructionsOverlay'
-import TelegrafConfigOverlay from 'src/organizations/components/TelegrafConfigOverlay'
+import CollectorList from 'src/telegrafs/components/CollectorList'
+import TelegrafExplainer from 'src/telegrafs/components/TelegrafExplainer'
+import TelegrafInstructionsOverlay from 'src/telegrafs/components/TelegrafInstructionsOverlay'
+import TelegrafConfigOverlay from 'src/telegrafs/components/TelegrafConfigOverlay'
 import CollectorsWizard from 'src/dataLoaders/components/collectorsWizard/CollectorsWizard'
 import FilterList from 'src/shared/components/Filter'
 import NoBucketsWarning from 'src/organizations/components/NoBucketsWarning'
 import GetLabels from 'src/configuration/components/GetLabels'
+import GetResources, {
+  ResourceTypes,
+} from 'src/configuration/components/GetResources'
 
 // Actions
 import {setBucketInfo} from 'src/dataLoaders/actions/steps'
@@ -32,7 +35,7 @@ import {
   ComponentColor,
   ComponentStatus,
 } from '@influxdata/clockface'
-import {OverlayState} from 'src/types'
+import {OverlayState, AppState} from 'src/types'
 import {
   setDataLoadersType,
   setTelegrafConfigID,
@@ -41,7 +44,7 @@ import {
 } from 'src/dataLoaders/actions/dataLoaders'
 import {DataLoaderType} from 'src/types/dataLoaders'
 
-interface OwnProps {
+interface StateProps {
   collectors: Telegraf[]
   orgName: string
   buckets: Bucket[]
@@ -57,7 +60,7 @@ interface DispatchProps {
   onDeleteTelegraf: typeof deleteTelegraf
 }
 
-type Props = OwnProps & DispatchProps
+type Props = DispatchProps & StateProps
 
 interface State {
   dataLoaderOverlay: OverlayState
@@ -137,11 +140,13 @@ export class Collectors extends PureComponent<Props, State> {
           </Grid.Row>
         </Grid>
         {this.collectorsWizard}
-        <TelegrafInstructionsOverlay
-          visible={this.isInstructionsVisible}
-          collector={this.selectedCollector}
-          onDismiss={this.handleCloseInstructions}
-        />
+        <GetResources resource={ResourceTypes.Authorizations}>
+          <TelegrafInstructionsOverlay
+            visible={this.isInstructionsVisible}
+            collector={this.selectedCollector}
+            onDismiss={this.handleCloseInstructions}
+          />
+        </GetResources>
         <TelegrafConfigOverlay
           visible={this.isTelegrafConfigVisible}
           onDismiss={this.handleCloseTelegrafConfig}
@@ -307,6 +312,11 @@ export class Collectors extends PureComponent<Props, State> {
     this.setState({searchTerm})
   }
 }
+const mstp = ({telegrafs, orgs: {org}, buckets}: AppState): StateProps => ({
+  collectors: telegrafs.list,
+  orgName: org.name,
+  buckets: buckets.list,
+})
 
 const mdtp: DispatchProps = {
   onSetBucketInfo: setBucketInfo,
@@ -318,7 +328,7 @@ const mdtp: DispatchProps = {
   onDeleteTelegraf: deleteTelegraf,
 }
 
-export default connect<null, DispatchProps, OwnProps>(
-  null,
+export default connect<StateProps, DispatchProps>(
+  mstp,
   mdtp
 )(Collectors)

ui/src/telegrafs/components/TelegrafConfig.tsx

@@ -4,7 +4,7 @@ import {connect} from 'react-redux'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import FetchTelegrafConfig from 'src/organizations/components/FetchTelegrafConfig'
+import FetchTelegrafConfig from 'src/telegrafs/components/FetchTelegrafConfig'
 import {Controlled as ReactCodeMirror} from 'react-codemirror2'
 
 // Actions

ui/src/telegrafs/components/TelegrafConfigOverlay.tsx

@@ -4,7 +4,7 @@ import {connect} from 'react-redux'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import TelegrafConfig from 'src/organizations/components/TelegrafConfig'
+import TelegrafConfig from 'src/telegrafs/components/TelegrafConfig'
 import {ComponentColor, Button} from '@influxdata/clockface'
 import {Overlay} from 'src/clockface'
 

ui/src/telegrafs/containers/TelegrafsPage.tsx

@@ -0,0 +1,62 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+import {AppState} from 'src/types'
+
+// Components
+import {ErrorHandling} from 'src/shared/decorators/errors'
+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/telegrafs/components/Collectors'
+import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
+import GetResources, {
+  ResourceTypes,
+} from 'src/configuration/components/GetResources'
+
+// Types
+import {Organization} from '@influxdata/influx'
+
+interface StateProps {
+  org: Organization
+}
+
+@ErrorHandling
+class TelegrafsPage extends PureComponent<StateProps> {
+  public render() {
+    const {org} = this.props
+
+    return (
+      <Page titleTag={org.name}>
+        <OrgHeader />
+        <Page.Contents fullWidth={false} scrollable={true}>
+          <div className="col-xs-12">
+            <Tabs>
+              <OrganizationNavigation tab="telegrafs" orgID={org.id} />
+              <Tabs.TabContents>
+                <TabbedPageSection
+                  id="org-view-tab--telegrafs"
+                  url="telegrafs"
+                  title="Telegraf"
+                >
+                  <GetResources resource={ResourceTypes.Buckets}>
+                    <GetResources resource={ResourceTypes.Telegrafs}>
+                      <Collectors />
+                    </GetResources>
+                  </GetResources>
+                </TabbedPageSection>
+              </Tabs.TabContents>
+            </Tabs>
+          </div>
+        </Page.Contents>
+      </Page>
+    )
+  }
+}
+
+const mstp = ({orgs: {org}}: AppState): StateProps => ({
+  org,
+})
+
+export default connect<StateProps>(mstp)(TelegrafsPage)