feat(ui/dataLoaders): Add telegraf plugin information step with config naming

ui/src/dataLoaders/components/DataLoadersWizard.tsx

@@ -52,7 +52,7 @@ export interface DataLoaderStepProps {
   onSetCurrentStepIndex: (stepNumber: number) => void
   onIncrementCurrentStepIndex: () => void
   onDecrementCurrentStepIndex: () => void
-  onSetSubstepIndex: (index: number, subStep: number | 'streaming') => void
+  onSetSubstepIndex: (index: number, subStep: Substep) => void
   notify: (message: Notification | NotificationFunc) => void
   onCompleteSetup: () => void
   onExit: () => void
@@ -227,22 +227,34 @@ class DataLoadersWizard extends PureComponent<Props> {
     return isStreaming && isNotEmpty && isConfigStep
   }
 
-  private handleClickSideBarTab = (telegrafPluginID: string) => {
+  private handleClickSideBarTab = (tabID: string) => {
     const {
       onSetSubstepIndex,
       onSetActiveTelegrafPlugin,
       dataLoaders: {telegrafPlugins},
+      substep,
+      onSetPluginConfiguration,
     } = this.props
 
+    if (!_.isNaN(Number(substep))) {
+      onSetPluginConfiguration(_.get(telegrafPlugins, `${substep}.name`, ''))
+    }
+
+    if (tabID === 'config') {
+      onSetSubstepIndex(DataLoaderStep.Configure, tabID)
+      onSetActiveTelegrafPlugin('')
+      return
+    }
+
     const index = Math.max(
       _.findIndex(telegrafPlugins, plugin => {
-        return plugin.name === telegrafPluginID
+        return plugin.name === tabID
       }),
       0
     )
 
     onSetSubstepIndex(DataLoaderStep.Configure, index)
-    onSetActiveTelegrafPlugin(telegrafPluginID)
+    onSetActiveTelegrafPlugin(tabID)
   }
 
   private get stepProps(): DataLoaderStepProps {

ui/src/onboarding/actions/dataLoaders.ts

@@ -65,6 +65,7 @@ export type Action =
   | SetScraperTargetURL
   | SetScraperTargetID
   | ClearDataLoaders
+  | SetTelegrafConfigName
 
 interface SetDataLoadersType {
   type: 'SET_DATA_LOADERS_TYPE'
@@ -86,6 +87,16 @@ export const clearDataLoaders = (): ClearDataLoaders => ({
   type: 'CLEAR_DATA_LOADERS',
 })
 
+interface SetTelegrafConfigName {
+  type: 'SET_TELEGRAF_CONFIG_NAME'
+  payload: {name: string}
+}
+
+export const setTelegrafConfigName = (name: string): SetTelegrafConfigName => ({
+  type: 'SET_TELEGRAF_CONFIG_NAME',
+  payload: {name},
+})
+
 interface UpdateTelegrafPluginConfig {
   type: 'UPDATE_TELEGRAF_PLUGIN_CONFIG'
   payload: {name: string; field: string; value: string}
@@ -284,7 +295,7 @@ export const createOrUpdateTelegrafConfigAsync = (authToken: string) => async (
 ) => {
   const {
     dataLoading: {
-      dataLoaders: {telegrafPlugins, telegrafConfigID},
+      dataLoaders: {telegrafPlugins, telegrafConfigID, telegrafConfigName},
       steps: {org, bucket, orgID},
     },
   } = getState()
@@ -311,13 +322,17 @@ export const createOrUpdateTelegrafConfigAsync = (authToken: string) => async (
     const telegrafConfig = await getTelegrafConfig(telegrafConfigID)
     const id = _.get(telegrafConfig, 'id', '')
 
-    await updateTelegrafConfig(id, {...telegrafConfig, plugins})
+    await updateTelegrafConfig(id, {
+      ...telegrafConfig,
+      name: telegrafConfigName,
+      plugins,
+    })
     dispatch(setTelegrafConfigID(id))
     return
   }
 
   const telegrafRequest: TelegrafRequest = {
-    name: 'new config',
+    name: telegrafConfigName,
     agent: {collectionInterval: DEFAULT_COLLECTION_INTERVAL},
     organizationID: orgID,
     plugins,

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

@@ -18,11 +18,7 @@ import {
 
 // Types
 import {DataLoaderStepProps} from 'src/dataLoaders/components/DataLoadersWizard'
-import {
-  TelegrafPlugin,
-  DataLoaderType,
-  DataLoaderStep,
-} from 'src/types/v2/dataLoaders'
+import {TelegrafPlugin, DataLoaderType} from 'src/types/v2/dataLoaders'
 import {Bucket} from 'src/api'
 
 export interface OwnProps extends DataLoaderStepProps {
@@ -74,21 +70,14 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
         onAddConfigValue={onAddConfigValue}
         onRemoveConfigValue={onRemoveConfigValue}
         dataLoaderType={type}
-        currentIndex={+substep}
+        substepIndex={substep}
         onSetConfigArrayValue={onSetConfigArrayValue}
         onClickNext={this.handleNext}
         onClickPrevious={this.handlePrevious}
-        onClickSkip={this.jumpToCompletionStep}
       />
     )
   }
 
-  private jumpToCompletionStep = () => {
-    const {onSetCurrentStepIndex} = this.props
-
-    onSetCurrentStepIndex(DataLoaderStep.Verify)
-  }
-
   private handleNext = async () => {
     const {
       onIncrementCurrentStepIndex,
@@ -97,31 +86,23 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
       telegrafPlugins,
       substep,
       currentStepIndex,
-      onSetSubstepIndex,
       type,
       onExit,
+      onSetSubstepIndex,
     } = this.props
 
-    const index = +substep
-    const telegrafPlugin = _.get(telegrafPlugins, `${index}.name`)
-
-    onSetPluginConfiguration(telegrafPlugin)
+    if (type === DataLoaderType.Scraping) {
+      onExit()
+      return
+    }
 
-    if (type === DataLoaderType.Streaming) {
-      if (index >= telegrafPlugins.length - 1) {
-        onIncrementCurrentStepIndex()
-        onSetActiveTelegrafPlugin('')
-      } else {
-        const name = _.get(telegrafPlugins, `${index + 1}.name`, '')
-        onSetActiveTelegrafPlugin(name)
-        onSetSubstepIndex(+currentStepIndex, index + 1)
-      }
+    if (type === DataLoaderType.Streaming && !_.isNaN(Number(substep))) {
+      const index = +substep
+      const telegrafPlugin = _.get(telegrafPlugins, `${index}.name`)
+      onSetPluginConfiguration(telegrafPlugin)
+      onSetActiveTelegrafPlugin('')
+      onSetSubstepIndex(currentStepIndex, 'config')
       return
-    } else if (
-      type === DataLoaderType.Scraping &&
-      currentStepIndex === DataLoaderStep.Configure
-    ) {
-      onExit()
     }
 
     onIncrementCurrentStepIndex()
@@ -132,28 +113,14 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
       type,
       substep,
       currentStepIndex,
-      onSetActiveTelegrafPlugin,
-      onSetPluginConfiguration,
-      telegrafPlugins,
       onSetSubstepIndex,
       onDecrementCurrentStepIndex,
     } = this.props
 
-    const index = +substep
-    const telegrafPlugin = _.get(telegrafPlugins, `${index}.name`)
-
     if (type === DataLoaderType.Streaming) {
-      onSetPluginConfiguration(telegrafPlugin)
-
-      if (index > 0) {
-        const name = _.get(telegrafPlugins, `${index - 1}.name`)
-        onSetActiveTelegrafPlugin(name)
-        onSetSubstepIndex(+currentStepIndex, index - 1)
-      } else {
-        onSetActiveTelegrafPlugin('')
+      if (substep === 'config') {
         onSetSubstepIndex(+currentStepIndex - 1, 'streaming')
       }
-
       return
     }
 

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

@@ -18,12 +18,12 @@ import {
 } from 'src/onboarding/actions/dataLoaders'
 
 // Types
-import {TelegrafPlugin, DataLoaderType} from 'src/types/v2/dataLoaders'
+import {TelegrafPlugin, DataLoaderType, Substep} from 'src/types/v2/dataLoaders'
 import {Bucket} from 'src/api'
 
 export interface Props {
   telegrafPlugins: TelegrafPlugin[]
-  currentIndex: number
+  substepIndex: Substep
   onUpdateTelegrafPluginConfig: typeof updateTelegrafPluginConfig
   onAddConfigValue: typeof addConfigValue
   onRemoveConfigValue: typeof removeConfigValue
@@ -35,7 +35,6 @@ export interface Props {
   onSetConfigArrayValue: typeof setConfigArrayValue
   onClickNext: () => void
   onClickPrevious: () => void
-  onClickSkip: () => void
 }
 
 @ErrorHandling
@@ -45,15 +44,14 @@ class ConfigureDataSourceSwitcher extends PureComponent<Props> {
       bucket,
       org,
       telegrafPlugins,
-      currentIndex,
+      substepIndex,
       dataLoaderType,
       onUpdateTelegrafPluginConfig,
       onAddConfigValue,
       onRemoveConfigValue,
       onSetConfigArrayValue,
       onClickNext,
       onClickPrevious,
-      onClickSkip,
       buckets,
     } = this.props
 
@@ -65,12 +63,11 @@ class ConfigureDataSourceSwitcher extends PureComponent<Props> {
               onUpdateTelegrafPluginConfig={onUpdateTelegrafPluginConfig}
               onRemoveConfigValue={onRemoveConfigValue}
               telegrafPlugins={telegrafPlugins}
-              currentIndex={currentIndex}
+              substepIndex={substepIndex}
               onAddConfigValue={onAddConfigValue}
               onSetConfigArrayValue={onSetConfigArrayValue}
               onClickNext={onClickNext}
               onClickPrevious={onClickPrevious}
-              onClickSkip={onClickSkip}
             />
           </div>
         )

ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.test.tsx

@@ -12,9 +12,6 @@ import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
 import {telegrafPluginsInfo} from 'src/onboarding/constants/pluginConfigs'
 import {telegrafPlugin} from 'mocks/dummyData'
 
-// Dummy Data
-import {cpuTelegrafPlugin} from 'mocks/dummyData'
-
 // Types
 import {TelegrafPluginInputCpu, TelegrafPluginInputRedis} from 'src/api'
 
@@ -79,17 +76,4 @@ describe('Onboarding.Components.ConfigureStep.Streaming.PluginConfigForm', () =>
       expect(configFieldSwitchers.length).toBe(fields.length)
     })
   })
-
-  describe('if skip button is clicked', () => {
-    it('renders the correct skip button text for streaming sources', () => {
-      const {wrapper} = setup({
-        telegrafPlugins: [cpuTelegrafPlugin],
-        params: {stepID: '3', substepID: 'streaming'},
-      })
-
-      const skipButton = wrapper.find('[data-test="skip"]')
-
-      expect(skipButton.prop('text')).toBe('Skip to Verify')
-    })
-  })
 })

ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.tsx

@@ -28,9 +28,6 @@ interface Props {
   onSetConfigArrayValue: typeof setConfigArrayValue
   onClickNext: () => void
   telegrafPlugins: TelegrafPlugin[]
-  currentIndex: number
-  onClickPrevious: () => void
-  onClickSkip: () => void
 }
 
 class PluginConfigForm extends PureComponent<Props> {
@@ -43,8 +40,6 @@ class PluginConfigForm extends PureComponent<Props> {
       onAddConfigValue,
       onRemoveConfigValue,
       onUpdateTelegrafPluginConfig,
-      onClickPrevious,
-      onClickSkip,
     } = this.props
     return (
       <Form onSubmit={this.props.onClickNext}>
@@ -72,13 +67,7 @@ class PluginConfigForm extends PureComponent<Props> {
             </div>
           </FancyScrollbar>
         </div>
-        <OnboardingButtons
-          onClickBack={onClickPrevious}
-          onClickSkip={onClickSkip}
-          showSkip={true}
-          skipButtonText={'Skip to Verify'}
-          autoFocusNext={this.autoFocus}
-        />
+        <OnboardingButtons autoFocusNext={this.autoFocus} />
       </Form>
     )
   }

ui/src/onboarding/components/configureStep/streaming/PluginConfigSwitcher.test.tsx

@@ -14,7 +14,7 @@ import {TelegrafPluginInputCpu} from 'src/api'
 const setup = (override = {}) => {
   const props = {
     telegrafPlugins: [],
-    currentIndex: 0,
+    substepIndex: 0,
     authToken: token,
     onUpdateTelegrafPluginConfig: jest.fn(),
     onAddConfigValue: jest.fn(),