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,16 +4,15 @@ 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(() => {})
 
 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,17 +6,19 @@ 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
 }
 
 @ErrorHandling
 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'
     )