Merge pull request #1687 from influxdata/dataLoaders/plugin-configs

feat(ui/dataLoaders): Update redux to store telegraf plugin arrays rather than dataSource

ui/mocks/dummyData.ts

@@ -10,7 +10,6 @@ import {
 } from 'src/types'
 import {Links} from 'src/types/v2/links'
 import {Task, TaskStatus} from 'src/types/v2/tasks'
-import {DataSource, ConfigurationState} from 'src/types/v2/dataLoaders'
 
 export const links: Links = {
   authorizations: '/api/v2/authorizations',
@@ -255,18 +254,3 @@ export const tasks: Task[] = [
     },
   },
 ]
-
-export const dataSources: DataSource[] = [
-  {
-    name: 'bestDataSource',
-    configured: ConfigurationState.Unconfigured,
-    active: true,
-    configs: {},
-  },
-  {
-    name: 'secondBestDataSource',
-    configured: ConfigurationState.Done,
-    active: true,
-    configs: {},
-  },
-]

ui/src/onboarding/actions/dataLoaders.ts

@@ -1,11 +1,11 @@
 // Types
-import {DataSource, DataLoaderType} from 'src/types/v2/dataLoaders'
+import {TelegrafPlugin, DataLoaderType} from 'src/types/v2/dataLoaders'
 
 export type Action =
   | SetDataLoadersType
-  | AddDataSource
-  | RemoveDataSource
-  | SetActiveDataSource
+  | AddTelegrafPlugin
+  | RemoveTelegrafPlugin
+  | SetActiveTelegrafPlugin
 
 interface SetDataLoadersType {
   type: 'SET_DATA_LOADERS_TYPE'
@@ -19,34 +19,38 @@ export const setDataLoadersType = (
   payload: {type},
 })
 
-interface AddDataSource {
-  type: 'ADD_DATA_SOURCE'
-  payload: {dataSource: DataSource}
+interface AddTelegrafPlugin {
+  type: 'ADD_TELEGRAF_PLUGIN'
+  payload: {telegrafPlugin: TelegrafPlugin}
 }
 
-export const addDataSource = (dataSource: DataSource): AddDataSource => ({
-  type: 'ADD_DATA_SOURCE',
-  payload: {dataSource},
+export const addTelegrafPlugin = (
+  telegrafPlugin: TelegrafPlugin
+): AddTelegrafPlugin => ({
+  type: 'ADD_TELEGRAF_PLUGIN',
+  payload: {telegrafPlugin},
 })
 
-interface RemoveDataSource {
-  type: 'REMOVE_DATA_SOURCE'
-  payload: {dataSource: string}
+interface RemoveTelegrafPlugin {
+  type: 'REMOVE_TELEGRAF_PLUGIN'
+  payload: {telegrafPlugin: string}
 }
 
-export const removeDataSource = (dataSource: string): RemoveDataSource => ({
-  type: 'REMOVE_DATA_SOURCE',
-  payload: {dataSource},
+export const removeTelegrafPlugin = (
+  telegrafPlugin: string
+): RemoveTelegrafPlugin => ({
+  type: 'REMOVE_TELEGRAF_PLUGIN',
+  payload: {telegrafPlugin},
 })
 
-interface SetActiveDataSource {
-  type: 'SET_ACTIVE_DATA_SOURCE'
-  payload: {dataSource: string}
+interface SetActiveTelegrafPlugin {
+  type: 'SET_ACTIVE_TELEGRAF_PLUGIN'
+  payload: {telegrafPlugin: string}
 }
 
-export const setActiveDataSource = (
-  dataSource: string
-): SetActiveDataSource => ({
-  type: 'SET_ACTIVE_DATA_SOURCE',
-  payload: {dataSource},
+export const setActiveTelegrafPlugin = (
+  telegrafPlugin: string
+): SetActiveTelegrafPlugin => ({
+  type: 'SET_ACTIVE_TELEGRAF_PLUGIN',
+  payload: {telegrafPlugin},
 })

ui/src/onboarding/components/OnboardingSideBar.test.tsx

@@ -4,8 +4,7 @@ import {shallow} from 'enzyme'
 
 // Components
 import OnboardingSideBar from 'src/onboarding/components/OnboardingSideBar'
-
-import {dataSources} from 'mocks/dummyData'
+import {cpuPlugin, influxDB2Plugin} from 'src/onboarding/resources'
 
 const onClick = jest.fn(() => {})
 
@@ -13,7 +12,7 @@ const setup = (override?) => {
   const props = {
     title: 'title',
     visible: true,
-    dataSources,
+    telegrafPlugins: [],
     onTabClick: onClick,
     ...override,
   }
@@ -26,7 +25,8 @@ const setup = (override?) => {
 describe('OnboardingSideBar', () => {
   describe('rendering', () => {
     it('renders! wee!', () => {
-      const {wrapper} = setup()
+      const {wrapper} = setup({telegrafPlugins: [cpuPlugin, influxDB2Plugin]})
+
       expect(wrapper.exists()).toBe(true)
       expect(wrapper).toMatchSnapshot()
     })

ui/src/onboarding/components/OnboardingSideBar.tsx

@@ -16,13 +16,13 @@ import {getTelegrafConfigTOML, createTelegrafConfig} from 'src/onboarding/apis'
 
 // Types
 import {IconFont} from 'src/clockface'
-import {DataSource, ConfigurationState} from 'src/types/v2/dataLoaders'
+import {TelegrafPlugin, ConfigurationState} from 'src/types/v2/dataLoaders'
 import {NotificationAction} from 'src/types'
 
 interface Props {
   title: string
   visible: boolean
-  dataSources: DataSource[]
+  telegrafPlugins: TelegrafPlugin[]
   notify: NotificationAction
   onTabClick: (tabID: string) => void
 }
@@ -31,16 +31,8 @@ const configStateToTabStatus = (cs: ConfigurationState): TabStatus => {
   switch (cs) {
     case ConfigurationState.Unconfigured:
       return TabStatus.Default
-    case ConfigurationState.Verifying:
-      return TabStatus.Pending
     case ConfigurationState.Configured:
-      return TabStatus.Default
-    case ConfigurationState.Loading:
-      return TabStatus.Pending
-    case ConfigurationState.Done:
       return TabStatus.Success
-    case ConfigurationState.Error:
-      return TabStatus.Error
   }
 }
 
@@ -55,8 +47,8 @@ class OnboardingSideBar extends Component<Props> {
   }
 
   private get tabs(): JSX.Element[] {
-    const {dataSources, onTabClick} = this.props
-    return dataSources.map(t => (
+    const {telegrafPlugins, onTabClick} = this.props
+    return telegrafPlugins.map(t => (
       <SideBar.Tab
         label={t.name}
         key={t.name}

ui/src/onboarding/components/OnboardingStepSwitcher.tsx

@@ -13,23 +13,23 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Actions
 import {
-  addDataSource,
-  removeDataSource,
+  addTelegrafPlugin,
+  removeTelegrafPlugin,
   setDataLoadersType,
 } from 'src/onboarding/actions/dataLoaders'
 
 // Types
 import {SetupParams} from 'src/onboarding/apis'
-import {DataSource, DataLoaderType} from 'src/types/v2/dataLoaders'
+import {TelegrafPlugin, DataLoaderType} from 'src/types/v2/dataLoaders'
 import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard'
 
 interface Props {
   onboardingStepProps: OnboardingStepProps
-  onAddDataSource: typeof addDataSource
-  onRemoveDataSource: typeof removeDataSource
+  onAddTelegrafPlugin: typeof addTelegrafPlugin
+  onRemoveTelegrafPlugin: typeof removeTelegrafPlugin
   onSetDataLoadersType: typeof setDataLoadersType
   setupParams: SetupParams
-  dataLoaders: {dataSources: DataSource[]; type: DataLoaderType}
+  dataLoaders: {telegrafPlugins: TelegrafPlugin[]; type: DataLoaderType}
   currentStepIndex: number
 }
 
@@ -42,8 +42,8 @@ class OnboardingStepSwitcher extends PureComponent<Props> {
       setupParams,
       dataLoaders,
       onSetDataLoadersType,
-      onAddDataSource,
-      onRemoveDataSource,
+      onAddTelegrafPlugin,
+      onRemoveTelegrafPlugin,
     } = this.props
 
     switch (currentStepIndex) {
@@ -58,8 +58,8 @@ class OnboardingStepSwitcher extends PureComponent<Props> {
             {...dataLoaders}
             onSetDataLoadersType={onSetDataLoadersType}
             bucket={_.get(setupParams, 'bucket', '')}
-            onAddDataSource={onAddDataSource}
-            onRemoveDataSource={onRemoveDataSource}
+            onAddTelegrafPlugin={onAddTelegrafPlugin}
+            onRemoveTelegrafPlugin={onRemoveTelegrafPlugin}
           />
         )
       case 3:

ui/src/onboarding/components/__snapshots__/OnboardingSideBar.test.tsx.snap

@@ -6,20 +6,16 @@ exports[`OnboardingSideBar rendering renders! wee! 1`] = `
   visible={true}
 >
   <SideBarTab
-    active={true}
-    id="bestDataSource"
-    key="bestDataSource"
-    label="bestDataSource"
+    id="cpu"
+    key="cpu"
+    label="cpu"
     onClick={[MockFunction]}
-    status="default"
   />
   <SideBarTab
-    active={true}
-    id="secondBestDataSource"
-    key="secondBestDataSource"
-    label="secondBestDataSource"
+    id="influxdb_v2"
+    key="influxdb_v2"
+    label="influxdb_v2"
     onClick={[MockFunction]}
-    status="success"
   />
   <SideBarButton
     color="secondary"

ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx

@@ -14,10 +14,10 @@ import ConfigureDataSourceSwitcher from 'src/onboarding/components/configureStep
 
 // Types
 import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard'
-import {DataSource, DataLoaderType} from 'src/types/v2/dataLoaders'
+import {TelegrafPlugin, DataLoaderType} from 'src/types/v2/dataLoaders'
 
 export interface Props extends OnboardingStepProps {
-  dataSources: DataSource[]
+  telegrafPlugins: TelegrafPlugin[]
   type: DataLoaderType
 }
 
@@ -36,12 +36,12 @@ class ConfigureDataSourceStep extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {dataSources} = this.props
+    const {telegrafPlugins} = this.props
 
     return (
       <div className="onboarding-step">
         <ConfigureDataSourceSwitcher
-          dataSources={dataSources}
+          telegrafPlugins={telegrafPlugins}
           currentIndex={this.state.currentDataSourceIndex}
         />
         <div className="wizard-button-bar">
@@ -65,10 +65,10 @@ class ConfigureDataSourceStep extends PureComponent<Props, State> {
   }
 
   private handleNext = () => {
-    const {onIncrementCurrentStepIndex, dataSources} = this.props
+    const {onIncrementCurrentStepIndex, telegrafPlugins} = this.props
     const {currentDataSourceIndex} = this.state
 
-    if (currentDataSourceIndex >= dataSources.length - 1) {
+    if (currentDataSourceIndex >= telegrafPlugins.length - 1) {
       onIncrementCurrentStepIndex()
     } else {
       this.setState({currentDataSourceIndex: currentDataSourceIndex + 1})

ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx

@@ -6,10 +6,10 @@ import _ from 'lodash'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Types
-import {DataSource} from 'src/types/v2/dataLoaders'
+import {TelegrafPlugin} from 'src/types/v2/dataLoaders'
 
 export interface Props {
-  dataSources: DataSource[]
+  telegrafPlugins: TelegrafPlugin[]
   currentIndex: number
 }
 
@@ -17,6 +17,8 @@ export interface Props {
 class ConfigureDataSourceSwitcher extends PureComponent<Props> {
   public render() {
     switch (this.configurationStep) {
+      case 'Streaming':
+        return <div />
       case 'CSV':
       case 'Line Protocol':
       default:
@@ -25,10 +27,10 @@ class ConfigureDataSourceSwitcher extends PureComponent<Props> {
   }
 
   private get configurationStep() {
-    const {currentIndex, dataSources} = this.props
+    const {currentIndex, telegrafPlugins} = this.props
 
     return _.get(
-      dataSources,
+      telegrafPlugins,
       `${currentIndex}.name`,
       'Must select a data source'
     )

ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx

@@ -13,19 +13,20 @@ import DataSourceTypeSelector from 'src/onboarding/components/selectionStep/Type
 import StreamingDataSourceSelector from 'src/onboarding/components/selectionStep/StreamingSelector'
 
 // Types
+import {TelegrafRequestPlugins} from 'src/api'
 import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard'
 import {
-  DataSource,
+  TelegrafPlugin,
   DataLoaderType,
   ConfigurationState,
 } from 'src/types/v2/dataLoaders'
 
 export interface Props extends OnboardingStepProps {
   bucket: string
-  dataSources: DataSource[]
+  telegrafPlugins: TelegrafPlugin[]
   type: DataLoaderType
-  onAddDataSource: (dataSource: DataSource) => void
-  onRemoveDataSource: (dataSource: string) => void
+  onAddTelegrafPlugin: (telegrafPlugin: TelegrafPlugin) => void
+  onRemoveTelegrafPlugin: (TelegrafPlugin: string) => void
   onSetDataLoadersType: (type: DataLoaderType) => void
 }
 
@@ -85,14 +86,14 @@ class SelectDataSourceStep extends PureComponent<Props, State> {
     ) {
       return (
         <StreamingDataSourceSelector
-          dataSources={this.props.dataSources}
-          onToggleDataSource={this.handleToggleDataSource}
+          telegrafPlugins={this.props.telegrafPlugins}
+          onToggleTelegrafPlugin={this.handleToggleTelegrafPlugin}
         />
       )
     }
     return (
       <DataSourceTypeSelector
-        onSelectDataSource={this.handleSelectDataSource}
+        onSelectTelegrafPlugin={this.handleSelectTelegrafPlugin}
         type={this.props.type}
       />
     )
@@ -119,29 +120,29 @@ class SelectDataSourceStep extends PureComponent<Props, State> {
     this.props.onDecrementCurrentStepIndex()
   }
 
-  private handleSelectDataSource = (dataSource: DataLoaderType) => {
-    this.props.onSetDataLoadersType(dataSource)
+  private handleSelectTelegrafPlugin = (telegrafPlugin: DataLoaderType) => {
+    this.props.onSetDataLoadersType(telegrafPlugin)
     return
   }
 
-  private handleToggleDataSource = (
-    dataSource: string,
+  private handleToggleTelegrafPlugin = (
+    telegrafPlugin: TelegrafRequestPlugins.NameEnum,
     isSelected: boolean
   ) => {
-    const {dataSources} = this.props
+    const {telegrafPlugins} = this.props
 
     if (isSelected) {
-      this.props.onRemoveDataSource(dataSource)
+      this.props.onRemoveTelegrafPlugin(telegrafPlugin)
 
       return
     }
 
-    const active = dataSources.length === 0
-    this.props.onAddDataSource({
-      name: dataSource,
+    const active = telegrafPlugins.length === 0
+    this.props.onAddTelegrafPlugin({
+      name: telegrafPlugin,
       configured: ConfigurationState.Unconfigured,
       active,
-      configs: null,
+      config: {},
     })
   }
 }

ui/src/onboarding/components/selectionStep/StreamingSelector.tsx

@@ -7,11 +7,11 @@ import CardSelectCard from 'src/clockface/components/card_select/CardSelectCard'
 import GridSizer from 'src/clockface/components/grid_sizer/GridSizer'
 
 // Types
-import {DataSource} from 'src/types/v2/dataLoaders'
+import {TelegrafPlugin} from 'src/types/v2/dataLoaders'
 
 export interface Props {
-  dataSources: DataSource[]
-  onToggleDataSource: (dataSource: string, isSelected: boolean) => void
+  telegrafPlugins: TelegrafPlugin[]
+  onToggleTelegrafPlugin: (telegrafPlugin: string, isSelected: boolean) => void
 }
 
 const STREAMING_DATA_SOURCES_OPTIONS = [
@@ -44,17 +44,20 @@ class StreamingDataSourcesSelector extends PureComponent<Props> {
     )
   }
 
-  private isCardChecked(dataSource: string) {
-    const {dataSources} = this.props
+  private isCardChecked(telegrafPlugin: string) {
+    const {telegrafPlugins} = this.props
 
-    if (dataSources.find(ds => ds.name === dataSource)) {
+    if (telegrafPlugins.find(ds => ds.name === telegrafPlugin)) {
       return true
     }
     return false
   }
 
-  private handleToggle = (dataSource: string) => () => {
-    this.props.onToggleDataSource(dataSource, this.isCardChecked(dataSource))
+  private handleToggle = (telegrafPlugin: string) => () => {
+    this.props.onToggleTelegrafPlugin(
+      telegrafPlugin,
+      this.isCardChecked(telegrafPlugin)
+    )
   }
 }
 

ui/src/onboarding/components/selectionStep/TypeSelector.tsx

@@ -10,7 +10,7 @@ import GridSizer from 'src/clockface/components/grid_sizer/GridSizer'
 import {DataLoaderType} from 'src/types/v2/dataLoaders'
 
 export interface Props {
-  onSelectDataSource: (dataSource: string) => void
+  onSelectTelegrafPlugin: (telegrafPlugin: string) => void
   type: DataLoaderType
 }
 
@@ -41,14 +41,14 @@ class DataSourceTypeSelector extends PureComponent<Props> {
     )
   }
 
-  private isCardChecked(dataSource: DataLoaderType) {
+  private isCardChecked(dataLoaderType: DataLoaderType) {
     const {type} = this.props
 
-    return dataSource === type
+    return dataLoaderType === type
   }
 
-  private handleClick = (dataSource: string) => () => {
-    this.props.onSelectDataSource(dataSource)
+  private handleClick = (telegrafPlugin: string) => () => {
+    this.props.onSelectTelegrafPlugin(telegrafPlugin)
   }
 }
 

ui/src/onboarding/containers/OnboardingWizard.tsx

@@ -25,18 +25,19 @@ import {
 } from 'src/onboarding/actions/steps'
 import {
   setDataLoadersType,
-  addDataSource,
-  removeDataSource,
-  setActiveDataSource,
+  addTelegrafPlugin,
+  removeTelegrafPlugin,
+  setActiveTelegrafPlugin,
 } from 'src/onboarding/actions/dataLoaders'
 
 // Constants
 import {StepStatus} from 'src/clockface/constants/wizard'
 
 // Types
+
 import {Links} from 'src/types/v2/links'
 import {SetupParams} from 'src/onboarding/apis'
-import {DataSource, DataLoaderType} from 'src/types/v2/dataLoaders'
+import {TelegrafPlugin, DataLoaderType} from 'src/types/v2/dataLoaders'
 import {Notification, NotificationFunc} from 'src/types'
 import {AppState} from 'src/types/v2'
 import OnboardingSideBar from 'src/onboarding/components/OnboardingSideBar'
@@ -71,13 +72,13 @@ interface DispatchProps {
   onSetCurrentStepIndex: typeof setCurrentStepIndex
   onSetStepStatus: typeof setStepStatus
   onSetDataLoadersType: typeof setDataLoadersType
-  onAddDataSource: typeof addDataSource
-  onRemoveDataSource: typeof removeDataSource
-  onSetActiveDataSource: typeof setActiveDataSource
+  onAddTelegrafPlugin: typeof addTelegrafPlugin
+  onRemoveTelegrafPlugin: typeof removeTelegrafPlugin
+  onSetActiveTelegrafPlugin: typeof setActiveTelegrafPlugin
 }
 
 interface DataLoadersProps {
-  dataSources: DataSource[]
+  telegrafPlugins: TelegrafPlugin[]
   type: DataLoaderType
 }
 
@@ -112,10 +113,10 @@ class OnboardingWizard extends PureComponent<Props> {
     const {
       currentStepIndex,
       dataLoaders,
-      dataLoaders: {dataSources},
+      dataLoaders: {telegrafPlugins},
       onSetDataLoadersType,
-      onRemoveDataSource,
-      onAddDataSource,
+      onRemoveTelegrafPlugin,
+      onAddTelegrafPlugin,
       setupParams,
       notify,
     } = this.props
@@ -126,7 +127,7 @@ class OnboardingWizard extends PureComponent<Props> {
         <div className="wizard-contents">
           <OnboardingSideBar
             notify={notify}
-            dataSources={dataSources}
+            telegrafPlugins={telegrafPlugins}
             onTabClick={this.handleClickSideBarTab}
             title="Selected Sources"
             visible={this.sideBarVisible}
@@ -138,8 +139,8 @@ class OnboardingWizard extends PureComponent<Props> {
               setupParams={setupParams}
               dataLoaders={dataLoaders}
               onSetDataLoadersType={onSetDataLoadersType}
-              onAddDataSource={onAddDataSource}
-              onRemoveDataSource={onRemoveDataSource}
+              onAddTelegrafPlugin={onAddTelegrafPlugin}
+              onRemoveTelegrafPlugin={onRemoveTelegrafPlugin}
             />
           </div>
         </div>
@@ -180,10 +181,10 @@ class OnboardingWizard extends PureComponent<Props> {
 
   private get sideBarVisible() {
     const {currentStepIndex, dataLoaders} = this.props
-    const {dataSources, type} = dataLoaders
+    const {telegrafPlugins, type} = dataLoaders
 
     const isStreaming = type === DataLoaderType.Streaming
-    const isNotEmpty = dataSources.length > 0
+    const isNotEmpty = telegrafPlugins.length > 0
     const isSideBarStep =
       (currentStepIndex === 2 && isNotEmpty) ||
       currentStepIndex === 3 ||
@@ -192,10 +193,10 @@ class OnboardingWizard extends PureComponent<Props> {
     return isStreaming && isSideBarStep
   }
 
-  private handleClickSideBarTab = (dataSourceID: string) => {
-    const {onSetCurrentStepIndex, onSetActiveDataSource} = this.props
+  private handleClickSideBarTab = (telegrafPluginID: string) => {
+    const {onSetCurrentStepIndex, onSetActiveTelegrafPlugin} = this.props
     onSetCurrentStepIndex(3)
-    onSetActiveDataSource(dataSourceID)
+    onSetActiveTelegrafPlugin(telegrafPluginID)
   }
 
   private handleExit = () => {
@@ -259,9 +260,9 @@ const mdtp: DispatchProps = {
   onSetCurrentStepIndex: setCurrentStepIndex,
   onSetStepStatus: setStepStatus,
   onSetDataLoadersType: setDataLoadersType,
-  onAddDataSource: addDataSource,
-  onRemoveDataSource: removeDataSource,
-  onSetActiveDataSource: setActiveDataSource,
+  onAddTelegrafPlugin: addTelegrafPlugin,
+  onRemoveTelegrafPlugin: removeTelegrafPlugin,
+  onSetActiveTelegrafPlugin: setActiveTelegrafPlugin,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(

ui/src/onboarding/reducers/dataLoaders.test.ts

@@ -7,117 +7,113 @@ import dataLoadersReducer, {
 // Actions
 import {
   setDataLoadersType,
-  addDataSource,
-  removeDataSource,
+  addTelegrafPlugin,
+  removeTelegrafPlugin,
+  setActiveTelegrafPlugin,
 } from 'src/onboarding/actions/dataLoaders'
 
+// Types
+import {TelegrafRequestPlugins} from 'src/api'
 import {DataLoaderType, ConfigurationState} from 'src/types/v2/dataLoaders'
 
 describe('dataLoader reducer', () => {
-  describe('if type is streaming', () => {
-    it('can set a type', () => {
-      const actual = dataLoadersReducer(
-        INITIAL_STATE,
-        setDataLoadersType(DataLoaderType.Streaming)
-      )
-      const expected = {dataSources: [], type: DataLoaderType.Streaming}
-
-      expect(actual).toEqual(expected)
-    })
-  })
-
-  describe('if type is not streaming', () => {
-    it('cant set a type not streaming', () => {
-      const actual = dataLoadersReducer(
-        INITIAL_STATE,
-        setDataLoadersType(DataLoaderType.CSV)
-      )
-      const expected = {
-        dataSources: [
-          {
-            name: 'CSV',
-            configured: ConfigurationState.Unconfigured,
-            active: true,
-            configs: null,
-          },
-        ],
-        type: DataLoaderType.CSV,
-      }
-
-      expect(actual).toEqual(expected)
-    })
-  })
-
-  describe('if data source is added', () => {
-    it('can add a data source', () => {
-      const actual = dataLoadersReducer(
-        INITIAL_STATE,
-        addDataSource({
-          name: 'CSV',
-          configured: ConfigurationState.Unconfigured,
-          active: true,
-          configs: null,
-        })
-      )
-      const expected = {
-        dataSources: [
-          {
-            name: 'CSV',
-            configured: ConfigurationState.Unconfigured,
-            active: true,
-            configs: null,
-          },
-        ],
-        type: DataLoaderType.Empty,
-      }
-
-      expect(actual).toEqual(expected)
-    })
-  })
-
-  it('can add a streaming data source', () => {
+  it('can set a type', () => {
     const actual = dataLoadersReducer(
-      {...INITIAL_STATE, type: DataLoaderType.Streaming},
-      addDataSource({
-        name: 'CPU',
+      INITIAL_STATE,
+      setDataLoadersType(DataLoaderType.Streaming)
+    )
+    const expected = {telegrafPlugins: [], type: DataLoaderType.Streaming}
+
+    expect(actual).toEqual(expected)
+  })
+
+  it('can add a telegraf plugin', () => {
+    const actual = dataLoadersReducer(
+      INITIAL_STATE,
+      addTelegrafPlugin({
+        name: TelegrafRequestPlugins.NameEnum.Cpu,
         configured: ConfigurationState.Unconfigured,
         active: true,
-        configs: null,
+        config: null,
       })
     )
     const expected = {
-      dataSources: [
+      telegrafPlugins: [
         {
-          name: 'CPU',
+          name: TelegrafRequestPlugins.NameEnum.Cpu,
           configured: ConfigurationState.Unconfigured,
           active: true,
-          configs: null,
+          config: null,
         },
       ],
-      type: DataLoaderType.Streaming,
+      type: DataLoaderType.Empty,
     }
 
     expect(actual).toEqual(expected)
   })
 
-  it('can remove a streaming data source', () => {
+  it('can set the active telegraf plugin', () => {
     const actual = dataLoadersReducer(
       {
         ...INITIAL_STATE,
         type: DataLoaderType.Streaming,
-        dataSources: [
+        telegrafPlugins: [
           {
-            name: 'CPU',
+            name: TelegrafRequestPlugins.NameEnum.Cpu,
             configured: ConfigurationState.Unconfigured,
             active: true,
-            configs: null,
+            config: null,
+          },
+          {
+            name: TelegrafRequestPlugins.NameEnum.Disk,
+            configured: ConfigurationState.Unconfigured,
+            active: false,
+            config: null,
           },
         ],
       },
-      removeDataSource('CPU')
+      setActiveTelegrafPlugin(TelegrafRequestPlugins.NameEnum.Disk)
+    )
+
+    const expected = {
+      type: DataLoaderType.Streaming,
+      telegrafPlugins: [
+        {
+          name: TelegrafRequestPlugins.NameEnum.Cpu,
+          configured: ConfigurationState.Unconfigured,
+          active: false,
+          config: null,
+        },
+        {
+          name: TelegrafRequestPlugins.NameEnum.Disk,
+          configured: ConfigurationState.Unconfigured,
+          active: true,
+          config: null,
+        },
+      ],
+    }
+
+    expect(actual).toEqual(expected)
+  })
+
+  it('can remove a telegraf plugin', () => {
+    const actual = dataLoadersReducer(
+      {
+        ...INITIAL_STATE,
+        type: DataLoaderType.Streaming,
+        telegrafPlugins: [
+          {
+            name: TelegrafRequestPlugins.NameEnum.Cpu,
+            configured: ConfigurationState.Unconfigured,
+            active: true,
+            config: null,
+          },
+        ],
+      },
+      removeTelegrafPlugin(TelegrafRequestPlugins.NameEnum.Cpu)
     )
     const expected = {
-      dataSources: [],
+      telegrafPlugins: [],
       type: DataLoaderType.Streaming,
     }
 

ui/src/onboarding/reducers/dataLoaders.ts

@@ -1,17 +1,14 @@
-//  Utils
-import {getInitialDataSources} from 'src/onboarding/utils/dataLoaders'
-
 // Types
 import {Action} from 'src/onboarding/actions/dataLoaders'
-import {DataSource, DataLoaderType} from 'src/types/v2/dataLoaders'
+import {TelegrafPlugin, DataLoaderType} from 'src/types/v2/dataLoaders'
 
 export interface DataLoadersState {
-  dataSources: DataSource[]
+  telegrafPlugins: TelegrafPlugin[]
   type: DataLoaderType
 }
 
 export const INITIAL_STATE: DataLoadersState = {
-  dataSources: [],
+  telegrafPlugins: [],
   type: DataLoaderType.Empty,
 }
 
@@ -21,28 +18,30 @@ export default (state = INITIAL_STATE, action: Action): DataLoadersState => {
       return {
         ...state,
         type: action.payload.type,
-        dataSources: getInitialDataSources(action.payload.type),
       }
-    case 'ADD_DATA_SOURCE':
+    case 'ADD_TELEGRAF_PLUGIN':
       return {
         ...state,
-        dataSources: [...state.dataSources, action.payload.dataSource],
+        telegrafPlugins: [
+          ...state.telegrafPlugins,
+          action.payload.telegrafPlugin,
+        ],
       }
-    case 'REMOVE_DATA_SOURCE':
+    case 'REMOVE_TELEGRAF_PLUGIN':
       return {
         ...state,
-        dataSources: state.dataSources.filter(
-          ds => ds.name !== action.payload.dataSource
+        telegrafPlugins: state.telegrafPlugins.filter(
+          tp => tp.name !== action.payload.telegrafPlugin
         ),
       }
-    case 'SET_ACTIVE_DATA_SOURCE':
+    case 'SET_ACTIVE_TELEGRAF_PLUGIN':
       return {
         ...state,
-        dataSources: state.dataSources.map(ds => {
-          if (ds.name === action.payload.dataSource) {
-            return {...ds, active: true}
+        telegrafPlugins: state.telegrafPlugins.map(tp => {
+          if (tp.name === action.payload.telegrafPlugin) {
+            return {...tp, active: true}
           }
-          return {...ds, active: false}
+          return {...tp, active: false}
         }),
       }
     default:

ui/src/onboarding/resources.ts

@@ -18,8 +18,30 @@ export const defaultOnboardingStepProps: OnboardingStepProps = {
   onExit: jest.fn(),
 }
 
+export const token =
+  'm4aUjEIhM758JzJgRmI6f3KNOBw4ZO77gdwERucF0bj4QOLHViD981UWzjaxW9AbyA5THOMBp2SVZqzbui2Ehw=='
+
 export const telegrafConfigID = '030358c935b18000'
 
+export const cpuPlugin = {
+  name: 'cpu',
+  type: 'input',
+  comment: 'this is a test',
+  config: {},
+}
+
+export const influxDB2Plugin = {
+  name: 'influxdb_v2',
+  type: 'output',
+  comment: 'write to influxdb v2',
+  config: {
+    urls: ['http://127.0.0.1:9999'],
+    token,
+    organization: 'default',
+    bucket: 'defbuck',
+  },
+}
+
 export const telegrafConfig = {
   id: telegrafConfigID,
   name: 'in n out',
@@ -27,21 +49,7 @@ export const telegrafConfig = {
   lastModified: '2018-11-28T18:56:48.854337-08:00',
   lastModifiedBy: '030358b695318000',
   agent: {collectionInterval: 15},
-  plugins: [
-    {name: 'cpu', type: 'input', comment: 'this is a test', config: {}},
-    {
-      name: 'influxdb_v2',
-      type: 'output',
-      comment: 'write to influxdb v2',
-      config: {
-        urls: ['http://127.0.0.1:9999'],
-        token:
-          'm4aUjEIhM758JzJgRmI6f3KNOBw4ZO77gdwERucF0bj4QOLHViD981UWzjaxW9AbyA5THOMBp2SVZqzbui2Ehw==',
-        organization: 'default',
-        bucket: 'defbuck',
-      },
-    },
-  ],
+  plugins: [cpuPlugin, influxDB2Plugin],
 }
 
 export const telegrafConfigsResponse = {
@@ -69,9 +77,6 @@ export const telegrafConfigsResponse = {
   request: {},
 }
 
-export const token =
-  'm4aUjEIhM758JzJgRmI6f3KNOBw4ZO77gdwERucF0bj4QOLHViD981UWzjaxW9AbyA5THOMBp2SVZqzbui2Ehw=='
-
 export const authResponse = {
   data: {
     links: {self: '/api/v2/authorizations'},

ui/src/onboarding/utils/dataLoaders.ts

@@ -1,17 +0,0 @@
-// Types
-import {DataLoaderType, ConfigurationState} from 'src/types/v2/dataLoaders'
-
-export const getInitialDataSources = (type: DataLoaderType) => {
-  if (type === DataLoaderType.Streaming) {
-    return []
-  }
-
-  return [
-    {
-      name: type,
-      configured: ConfigurationState.Unconfigured,
-      active: true,
-      configs: null,
-    },
-  ]
-}

ui/src/types/v2/dataLoaders.ts

@@ -1,10 +1,9 @@
+// Types
+import {TelegrafRequestPlugins} from 'src/api'
+
 export enum ConfigurationState {
   Unconfigured = 'unconfigured',
-  Verifying = 'verifying',
   Configured = 'configured',
-  Loading = 'loading',
-  Done = 'done',
-  Error = 'error',
 }
 
 export enum DataLoaderType {
@@ -14,9 +13,7 @@ export enum DataLoaderType {
   Empty = '',
 }
 
-export interface DataSource {
-  name: string
+export interface TelegrafPlugin extends TelegrafRequestPlugins {
   configured: ConfigurationState
   active: boolean
-  configs: any
 }