From 758af5eaafa38f8a97675f1ca9b19332b9bf509a Mon Sep 17 00:00:00 2001 From: Alirie Gray Date: Mon, 17 Dec 2018 11:18:16 -0800 Subject: [PATCH] Create/update telegraf plugin at verify step of onboarding --- ui/src/onboarding/actions/dataLoaders.ts | 32 ++++++++-- ui/src/onboarding/apis/index.ts | 16 +++++ .../components/OnboardingStepSwitcher.tsx | 26 +++++--- .../configureStep/ConfigureDataSourceStep.tsx | 21 ------- .../ConfigureDataSourceSwitcher.tsx | 3 - .../streaming/PluginConfigForm.tsx | 1 - .../streaming/PluginConfigSwitcher.tsx | 3 - ...test.tsx => CreateOrUpdateConfig.test.tsx} | 8 ++- .../verifyStep/CreateOrUpdateConfig.tsx | 63 +++++++++++++++++++ .../components/verifyStep/DataStreaming.tsx | 40 ++++++++---- .../components/verifyStep/FetchAuthToken.tsx | 1 + .../components/verifyStep/FetchConfigID.tsx | 51 --------------- .../verifyStep/VerifyDataStep.test.tsx | 3 + .../components/verifyStep/VerifyDataStep.tsx | 14 ++++- .../verifyStep/VerifyDataSwitcher.test.tsx | 3 + .../verifyStep/VerifyDataSwitcher.tsx | 21 ++++++- .../containers/OnboardingWizard.tsx | 6 +- .../onboarding/reducers/dataLoaders.test.ts | 4 +- 18 files changed, 202 insertions(+), 114 deletions(-) rename ui/src/onboarding/components/verifyStep/{FetchConfigID.test.tsx => CreateOrUpdateConfig.test.tsx} (61%) create mode 100644 ui/src/onboarding/components/verifyStep/CreateOrUpdateConfig.tsx delete mode 100644 ui/src/onboarding/components/verifyStep/FetchConfigID.tsx diff --git a/ui/src/onboarding/actions/dataLoaders.ts b/ui/src/onboarding/actions/dataLoaders.ts index d41cf71709..6300392ca1 100644 --- a/ui/src/onboarding/actions/dataLoaders.ts +++ b/ui/src/onboarding/actions/dataLoaders.ts @@ -5,6 +5,8 @@ import _ from 'lodash' import { writeLineProtocol, createTelegrafConfig, + getTelegrafConfigs, + updateTelegrafConfig, } from 'src/onboarding/apis/index' // Utils @@ -226,7 +228,7 @@ export const removePluginBundleWithPlugins = ( dispatch(removeBundlePlugins(bundle)) } -export const createTelegrafConfigAsync = (authToken: string) => async ( +export const createOrUpdateTelegrafConfigAsync = (authToken: string) => async ( dispatch, getState: GetState ) => { @@ -239,7 +241,28 @@ export const createTelegrafConfigAsync = (authToken: string) => async ( }, } = getState() - let plugins = telegrafPlugins.map(tp => tp.plugin || createNewPlugin(tp.name)) + const telegrafConfigsFromServer = await getTelegrafConfigs(org) + + let plugins = [] + telegrafPlugins.forEach(tp => { + if (tp.configured === ConfigurationState.Configured) { + plugins = [...plugins, tp.plugin || createNewPlugin(tp.name)] + } + }) + + let body = { + name: 'new config', + agent: {collectionInterval: DEFAULT_COLLECTION_INTERVAL}, + plugins, + } + + if (telegrafConfigsFromServer.length) { + const id = _.get(telegrafConfigsFromServer, '0.id', '') + + await updateTelegrafConfig(id, body) + dispatch(setTelegrafConfigID(id)) + return + } const influxDB2Out = { name: TelegrafPluginOutputInfluxDBV2.NameEnum.InfluxdbV2, @@ -254,9 +277,8 @@ export const createTelegrafConfigAsync = (authToken: string) => async ( plugins = [...plugins, influxDB2Out] - const body = { - name: 'new config', - agent: {collectionInterval: DEFAULT_COLLECTION_INTERVAL}, + body = { + ...body, plugins, } diff --git a/ui/src/onboarding/apis/index.ts b/ui/src/onboarding/apis/index.ts index b595608e30..83beddf821 100644 --- a/ui/src/onboarding/apis/index.ts +++ b/ui/src/onboarding/apis/index.ts @@ -130,3 +130,19 @@ export const createTelegrafConfig = async ( console.error(error) } } + +export const updateTelegrafConfig = async ( + telegrafID: string, + telegrafConfig: TelegrafRequest +) => { + try { + const {data} = await telegrafsAPI.telegrafsTelegrafIDPut( + telegrafID, + telegrafConfig + ) + + return data + } catch (error) { + console.error(error) + } +} diff --git a/ui/src/onboarding/components/OnboardingStepSwitcher.tsx b/ui/src/onboarding/components/OnboardingStepSwitcher.tsx index 9b0ce768a4..aeb90ecf1e 100644 --- a/ui/src/onboarding/components/OnboardingStepSwitcher.tsx +++ b/ui/src/onboarding/components/OnboardingStepSwitcher.tsx @@ -19,7 +19,7 @@ import { setActiveTelegrafPlugin, addConfigValue, removeConfigValue, - createTelegrafConfigAsync, + createOrUpdateTelegrafConfigAsync, addPluginBundleWithPlugins, removePluginBundleWithPlugins, setPluginConfiguration, @@ -42,7 +42,7 @@ interface Props { setupParams: SetupParams dataLoaders: DataLoadersState currentStepIndex: number - onSaveTelegrafConfig: typeof createTelegrafConfigAsync + onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync onAddPluginBundle: typeof addPluginBundleWithPlugins onRemovePluginBundle: typeof removePluginBundleWithPlugins onSetConfigArrayValue: typeof setConfigArrayValue @@ -100,7 +100,6 @@ class OnboardingStepSwitcher extends PureComponent { onSetPluginConfiguration={onSetPluginConfiguration} onAddConfigValue={onAddConfigValue} onRemoveConfigValue={onRemoveConfigValue} - onSaveTelegrafConfig={onSaveTelegrafConfig} onSetActiveTelegrafPlugin={onSetActiveTelegrafPlugin} onSetConfigArrayValue={onSetConfigArrayValue} /> @@ -109,12 +108,21 @@ class OnboardingStepSwitcher extends PureComponent { ) case 4: return ( - + + {authToken => ( + + )} + ) case 5: return diff --git a/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx b/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx index 65d10cc3d0..ddee0a6683 100644 --- a/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx +++ b/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx @@ -20,16 +20,11 @@ import { setPluginConfiguration, addConfigValue, removeConfigValue, - createTelegrafConfigAsync, setConfigArrayValue, } from 'src/onboarding/actions/dataLoaders' // Constants import {StepStatus} from 'src/clockface/constants/wizard' -import { - TelegrafConfigCreationSuccess, - TelegrafConfigCreationError, -} from 'src/shared/copy/notifications' // Types import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard' @@ -47,7 +42,6 @@ export interface OwnProps extends OnboardingStepProps { type: DataLoaderType onAddConfigValue: typeof addConfigValue onRemoveConfigValue: typeof removeConfigValue - onSaveTelegrafConfig: typeof createTelegrafConfigAsync authToken: string onSetConfigArrayValue: typeof setConfigArrayValue } @@ -82,7 +76,6 @@ export class ConfigureDataSourceStep extends PureComponent { const { telegrafPlugins, type, - authToken, params: {substepID}, setupParams, onUpdateTelegrafPluginConfig, @@ -105,7 +98,6 @@ export class ConfigureDataSourceStep extends PureComponent { onRemoveConfigValue={onRemoveConfigValue} dataLoaderType={type} currentIndex={+substepID} - authToken={authToken} onSetConfigArrayValue={onSetConfigArrayValue} />
@@ -201,11 +193,7 @@ export class ConfigureDataSourceStep extends PureComponent { onSetActiveTelegrafPlugin, onSetPluginConfiguration, telegrafPlugins, - authToken, - notify, params: {substepID, stepID}, - type, - onSaveTelegrafConfig, onSetSubstepIndex, } = this.props @@ -216,15 +204,6 @@ export class ConfigureDataSourceStep extends PureComponent { this.handleSetStepStatus() if (index >= telegrafPlugins.length - 1) { - if (type === DataLoaderType.Streaming) { - try { - await onSaveTelegrafConfig(authToken) - notify(TelegrafConfigCreationSuccess) - } catch (error) { - notify(TelegrafConfigCreationError) - } - } - onIncrementCurrentStepIndex() onSetActiveTelegrafPlugin('') } else { diff --git a/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx b/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx index 0a091ec013..686a811c59 100644 --- a/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx +++ b/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx @@ -28,7 +28,6 @@ export interface Props { onAddConfigValue: typeof addConfigValue onRemoveConfigValue: typeof removeConfigValue dataLoaderType: DataLoaderType - authToken: string bucket: string org: string username: string @@ -41,7 +40,6 @@ class ConfigureDataSourceSwitcher extends PureComponent { const { bucket, org, - authToken, telegrafPlugins, currentIndex, dataLoaderType, @@ -62,7 +60,6 @@ class ConfigureDataSourceSwitcher extends PureComponent { telegrafPlugins={telegrafPlugins} currentIndex={currentIndex} onAddConfigValue={onAddConfigValue} - authToken={authToken} onSetConfigArrayValue={onSetConfigArrayValue} /> ) diff --git a/ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.tsx b/ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.tsx index 7e65014307..6a084f27b5 100644 --- a/ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.tsx +++ b/ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.tsx @@ -29,7 +29,6 @@ interface Props { onSetPluginConfiguration: typeof setPluginConfiguration onAddConfigValue: typeof addConfigValue onRemoveConfigValue: typeof removeConfigValue - authToken: string onSetConfigArrayValue: typeof setConfigArrayValue } diff --git a/ui/src/onboarding/components/configureStep/streaming/PluginConfigSwitcher.tsx b/ui/src/onboarding/components/configureStep/streaming/PluginConfigSwitcher.tsx index 6c7398ccf0..ea373a27dc 100644 --- a/ui/src/onboarding/components/configureStep/streaming/PluginConfigSwitcher.tsx +++ b/ui/src/onboarding/components/configureStep/streaming/PluginConfigSwitcher.tsx @@ -28,14 +28,12 @@ interface Props { onAddConfigValue: typeof addConfigValue onRemoveConfigValue: typeof removeConfigValue currentIndex: number - authToken: string onSetConfigArrayValue: typeof setConfigArrayValue } class PluginConfigSwitcher extends PureComponent { public render() { const { - authToken, onUpdateTelegrafPluginConfig, onSetPluginConfiguration, onAddConfigValue, @@ -46,7 +44,6 @@ class PluginConfigSwitcher extends PureComponent { if (this.currentTelegrafPlugin) { return ( require('src/onboarding/apis/mocks')) @@ -11,15 +11,17 @@ const setup = async (override = {}) => { const props = { org: 'default', children: jest.fn(), + onSaveTelegrafConfig: jest.fn(), + authToken: '', ...override, } - const wrapper = await shallow() + const wrapper = await shallow() return {wrapper} } -describe('FetchConfigID', () => { +describe('CreateOrUpdateConfig', () => { it('renders', async () => { const {wrapper} = await setup() expect(wrapper.exists()).toBe(true) diff --git a/ui/src/onboarding/components/verifyStep/CreateOrUpdateConfig.tsx b/ui/src/onboarding/components/verifyStep/CreateOrUpdateConfig.tsx new file mode 100644 index 0000000000..4c1163f9e9 --- /dev/null +++ b/ui/src/onboarding/components/verifyStep/CreateOrUpdateConfig.tsx @@ -0,0 +1,63 @@ +// Libraries +import React, {PureComponent} from 'react' +import _ from 'lodash' + +// Components +import {Spinner} from 'src/clockface' +import {ErrorHandling} from 'src/shared/decorators/errors' + +// Actions +import {notify} from 'src/shared/actions/notifications' +import {createOrUpdateTelegrafConfigAsync} from 'src/onboarding/actions/dataLoaders' + +// Constants +import { + TelegrafConfigCreationSuccess, + TelegrafConfigCreationError, +} from 'src/shared/copy/notifications' + +// Types +import {RemoteDataState} from 'src/types' + +export interface Props { + org: string + authToken: string + children: () => JSX.Element + onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync +} + +interface State { + loading: RemoteDataState +} + +@ErrorHandling +class CreateOrUpdateConfig extends PureComponent { + constructor(props: Props) { + super(props) + + this.state = {loading: RemoteDataState.NotStarted} + } + + public async componentDidMount() { + const {onSaveTelegrafConfig, authToken} = this.props + + this.setState({loading: RemoteDataState.Loading}) + + try { + await onSaveTelegrafConfig(authToken) + notify(TelegrafConfigCreationSuccess) + + this.setState({loading: RemoteDataState.Done}) + } catch (error) { + notify(TelegrafConfigCreationError) + } + } + + public render() { + return ( + {this.props.children()} + ) + } +} + +export default CreateOrUpdateConfig diff --git a/ui/src/onboarding/components/verifyStep/DataStreaming.tsx b/ui/src/onboarding/components/verifyStep/DataStreaming.tsx index 2d19eb5c65..e445260020 100644 --- a/ui/src/onboarding/components/verifyStep/DataStreaming.tsx +++ b/ui/src/onboarding/components/verifyStep/DataStreaming.tsx @@ -4,10 +4,13 @@ import _ from 'lodash' // Components import TelegrafInstructions from 'src/onboarding/components/verifyStep/TelegrafInstructions' -import FetchConfigID from 'src/onboarding/components/verifyStep/FetchConfigID' +import CreateOrUpdateConfig from 'src/onboarding/components/verifyStep/CreateOrUpdateConfig' import FetchAuthToken from 'src/onboarding/components/verifyStep/FetchAuthToken' import DataListening from 'src/onboarding/components/verifyStep/DataListening' +// Actions +import {createOrUpdateTelegrafConfigAsync} from 'src/onboarding/actions/dataLoaders' + // Constants import {StepStatus} from 'src/clockface/constants/wizard' @@ -17,22 +20,37 @@ import {ErrorHandling} from 'src/shared/decorators/errors' interface Props { bucket: string org: string + configID: string username: string stepIndex: number + authToken: string onSetStepStatus: (index: number, status: StepStatus) => void + onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync } @ErrorHandling class DataStreaming extends PureComponent { public render() { + const { + authToken, + org, + username, + configID, + onSaveTelegrafConfig, + onSetStepStatus, + bucket, + stepIndex, + } = this.props + return ( <> - - {configID => ( - + + {() => ( + {authToken => ( { )} )} - + ) diff --git a/ui/src/onboarding/components/verifyStep/FetchAuthToken.tsx b/ui/src/onboarding/components/verifyStep/FetchAuthToken.tsx index bf97f84c36..def1e37288 100644 --- a/ui/src/onboarding/components/verifyStep/FetchAuthToken.tsx +++ b/ui/src/onboarding/components/verifyStep/FetchAuthToken.tsx @@ -36,6 +36,7 @@ class FetchAuthToken extends PureComponent { this.setState({loading: RemoteDataState.Loading}) const authToken = await getAuthorizationToken(username) + this.setState({authToken, loading: RemoteDataState.Done}) } diff --git a/ui/src/onboarding/components/verifyStep/FetchConfigID.tsx b/ui/src/onboarding/components/verifyStep/FetchConfigID.tsx deleted file mode 100644 index bb9eec2d05..0000000000 --- a/ui/src/onboarding/components/verifyStep/FetchConfigID.tsx +++ /dev/null @@ -1,51 +0,0 @@ -// Libraries -import React, {PureComponent} from 'react' -import _ from 'lodash' - -// Components -import {Spinner} from 'src/clockface' -import {ErrorHandling} from 'src/shared/decorators/errors' - -// Apis -import {getTelegrafConfigs} from 'src/onboarding/apis/index' - -// types -import {RemoteDataState} from 'src/types' - -export interface Props { - org: string - children: (configID: string) => JSX.Element -} - -interface State { - loading: RemoteDataState - configID?: string -} - -@ErrorHandling -class FetchConfigID extends PureComponent { - constructor(props: Props) { - super(props) - - this.state = {loading: RemoteDataState.NotStarted} - } - - public async componentDidMount() { - const {org} = this.props - - this.setState({loading: RemoteDataState.Loading}) - const telegrafConfigs = await getTelegrafConfigs(org) - const configID = _.get(telegrafConfigs, '0.id', '') - this.setState({configID, loading: RemoteDataState.Done}) - } - - public render() { - return ( - - {this.props.children(this.state.configID)} - - ) - } -} - -export default FetchConfigID diff --git a/ui/src/onboarding/components/verifyStep/VerifyDataStep.test.tsx b/ui/src/onboarding/components/verifyStep/VerifyDataStep.test.tsx index 4c2396ff97..8f9aab8419 100644 --- a/ui/src/onboarding/components/verifyStep/VerifyDataStep.test.tsx +++ b/ui/src/onboarding/components/verifyStep/VerifyDataStep.test.tsx @@ -19,6 +19,9 @@ const setup = (override = {}) => { type: DataLoaderType.Empty, telegrafPlugins: [], stepIndex: 4, + authToken: '', + telegrafConfigID: '', + onSaveTelegrafConfig: jest.fn(), onSetActiveTelegrafPlugin: jest.fn(), ...override, } diff --git a/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx b/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx index ef41303b30..3ea0f2a349 100644 --- a/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx +++ b/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx @@ -13,7 +13,10 @@ import { import VerifyDataSwitcher from 'src/onboarding/components/verifyStep/VerifyDataSwitcher' // Actions -import {setActiveTelegrafPlugin} from 'src/onboarding/actions/dataLoaders' +import { + setActiveTelegrafPlugin, + createOrUpdateTelegrafConfigAsync, +} from 'src/onboarding/actions/dataLoaders' // Types import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard' @@ -21,8 +24,11 @@ import {DataLoaderType, TelegrafPlugin} from 'src/types/v2/dataLoaders' export interface Props extends OnboardingStepProps { type: DataLoaderType + authToken: string + telegrafConfigID: string telegrafPlugins: TelegrafPlugin[] onSetActiveTelegrafPlugin: typeof setActiveTelegrafPlugin + onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync stepIndex: number } @@ -31,7 +37,10 @@ class VerifyDataStep extends PureComponent { public render() { const { setupParams, + telegrafConfigID, + authToken, type, + onSaveTelegrafConfig, onIncrementCurrentStepIndex, onSetStepStatus, stepIndex, @@ -41,6 +50,9 @@ class VerifyDataStep extends PureComponent {
{ org: '', username: '', bucket: '', + authToken: '', + telegrafConfigID: '', + onSaveTelegrafConfig: jest.fn(), stepIndex: 4, onSetStepStatus: jest.fn(), ...override, diff --git a/ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx b/ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx index 9c1833702a..a29748fbe2 100644 --- a/ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx +++ b/ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx @@ -5,6 +5,9 @@ import React, {PureComponent} from 'react' import {ErrorHandling} from 'src/shared/decorators/errors' import DataStreaming from 'src/onboarding/components/verifyStep/DataStreaming' +// Actions +import {createOrUpdateTelegrafConfigAsync} from 'src/onboarding/actions/dataLoaders' + // Constants import {StepStatus} from 'src/clockface/constants/wizard' @@ -17,22 +20,38 @@ export interface Props { username: string bucket: string stepIndex: number + authToken: string + telegrafConfigID: string + onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync onSetStepStatus: (index: number, status: StepStatus) => void } @ErrorHandling class VerifyDataSwitcher extends PureComponent { public render() { - const {org, username, bucket, type, stepIndex, onSetStepStatus} = this.props + const { + org, + username, + bucket, + type, + stepIndex, + onSetStepStatus, + authToken, + telegrafConfigID, + onSaveTelegrafConfig, + } = this.props switch (type) { case DataLoaderType.Streaming: return ( ) diff --git a/ui/src/onboarding/containers/OnboardingWizard.tsx b/ui/src/onboarding/containers/OnboardingWizard.tsx index a26a109072..60085e3286 100644 --- a/ui/src/onboarding/containers/OnboardingWizard.tsx +++ b/ui/src/onboarding/containers/OnboardingWizard.tsx @@ -24,7 +24,7 @@ import { removeConfigValue, setActiveTelegrafPlugin, setPluginConfiguration, - createTelegrafConfigAsync, + createOrUpdateTelegrafConfigAsync, addPluginBundleWithPlugins, removePluginBundleWithPlugins, setConfigArrayValue, @@ -81,8 +81,8 @@ interface DispatchProps { onRemoveConfigValue: typeof removeConfigValue onSetActiveTelegrafPlugin: typeof setActiveTelegrafPlugin onSetPluginConfiguration: typeof setPluginConfiguration - onSaveTelegrafConfig: typeof createTelegrafConfigAsync onSetConfigArrayValue: typeof setConfigArrayValue + onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync } interface StateProps { @@ -297,7 +297,7 @@ const mdtp: DispatchProps = { onAddConfigValue: addConfigValue, onRemoveConfigValue: removeConfigValue, onSetActiveTelegrafPlugin: setActiveTelegrafPlugin, - onSaveTelegrafConfig: createTelegrafConfigAsync, + onSaveTelegrafConfig: createOrUpdateTelegrafConfigAsync, onAddPluginBundle: addPluginBundleWithPlugins, onRemovePluginBundle: removePluginBundleWithPlugins, onSetPluginConfiguration: setPluginConfiguration, diff --git a/ui/src/onboarding/reducers/dataLoaders.test.ts b/ui/src/onboarding/reducers/dataLoaders.test.ts index 24bf5381d9..e443f0febc 100644 --- a/ui/src/onboarding/reducers/dataLoaders.test.ts +++ b/ui/src/onboarding/reducers/dataLoaders.test.ts @@ -18,7 +18,7 @@ import { removeBundlePlugins, addPluginBundleWithPlugins, removePluginBundleWithPlugins, - createTelegrafConfigAsync, + createOrUpdateTelegrafConfigAsync, setPluginConfiguration, } from 'src/onboarding/actions/dataLoaders' @@ -415,7 +415,7 @@ describe('dataLoader reducer', () => { }, }, }) - await createTelegrafConfigAsync(token)(dispatch, getState) + await createOrUpdateTelegrafConfigAsync(token)(dispatch, getState) expect(dispatch).toBeCalledWith(setTelegrafConfigID(telegrafConfig.id)) })