From 294614f57eb16fb7401c21a07d90c7635ea51d8f Mon Sep 17 00:00:00 2001 From: Palak Bhojani Date: Tue, 22 Jan 2019 12:03:48 -0800 Subject: [PATCH] feat(ui/dataLoaders): Add telegraf plugin information step with name input --- .../components/DataLoadersWizard.tsx | 20 ++++- ui/src/onboarding/actions/dataLoaders.ts | 21 ++++- .../configureStep/ConfigureDataSourceStep.tsx | 61 ++++---------- .../ConfigureDataSourceSwitcher.tsx | 11 +-- .../streaming/PluginConfigForm.test.tsx | 16 ---- .../streaming/PluginConfigForm.tsx | 13 +-- .../streaming/PluginConfigSwitcher.test.tsx | 2 +- .../streaming/PluginConfigSwitcher.tsx | 28 ++++--- .../streaming/TelegrafPluginInstructions.tsx | 80 +++++++++++++++++++ .../selectionStep/SelectDataSourceStep.tsx | 9 +-- .../components/verifyStep/VerifyDataStep.tsx | 16 +--- .../onboarding/reducers/dataLoaders.test.ts | 17 ++++ ui/src/onboarding/reducers/dataLoaders.ts | 6 ++ .../components/CollectorList.tsx | 2 +- .../organizations/components/CollectorRow.tsx | 7 +- .../organizations/components/Collectors.tsx | 7 +- ui/src/types/v2/dataLoaders.ts | 3 +- 17 files changed, 192 insertions(+), 127 deletions(-) create mode 100644 ui/src/onboarding/components/configureStep/streaming/TelegrafPluginInstructions.tsx diff --git a/ui/src/dataLoaders/components/DataLoadersWizard.tsx b/ui/src/dataLoaders/components/DataLoadersWizard.tsx index c2eb8ad4095..5526ce3328a 100644 --- a/ui/src/dataLoaders/components/DataLoadersWizard.tsx +++ b/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 { 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 { diff --git a/ui/src/onboarding/actions/dataLoaders.ts b/ui/src/onboarding/actions/dataLoaders.ts index c93e80626ad..abbb1f07903 100644 --- a/ui/src/onboarding/actions/dataLoaders.ts +++ b/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, diff --git a/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx b/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx index 2b99bcd7615..a6f9cd7269d 100644 --- a/ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx +++ b/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 { 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 { 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 { 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 } diff --git a/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx b/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx index 6cc16ec1b8b..ff908b8b44b 100644 --- a/ui/src/onboarding/components/configureStep/ConfigureDataSourceSwitcher.tsx +++ b/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,7 +44,7 @@ class ConfigureDataSourceSwitcher extends PureComponent { bucket, org, telegrafPlugins, - currentIndex, + substepIndex, dataLoaderType, onUpdateTelegrafPluginConfig, onAddConfigValue, @@ -53,7 +52,6 @@ class ConfigureDataSourceSwitcher extends PureComponent { onSetConfigArrayValue, onClickNext, onClickPrevious, - onClickSkip, buckets, } = this.props @@ -65,12 +63,11 @@ class ConfigureDataSourceSwitcher extends PureComponent { onUpdateTelegrafPluginConfig={onUpdateTelegrafPluginConfig} onRemoveConfigValue={onRemoveConfigValue} telegrafPlugins={telegrafPlugins} - currentIndex={currentIndex} + substepIndex={substepIndex} onAddConfigValue={onAddConfigValue} onSetConfigArrayValue={onSetConfigArrayValue} onClickNext={onClickNext} onClickPrevious={onClickPrevious} - onClickSkip={onClickSkip} /> ) diff --git a/ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.test.tsx b/ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.test.tsx index fa6f7abf92b..84590a4d478 100644 --- a/ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.test.tsx +++ b/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') - }) - }) }) diff --git a/ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.tsx b/ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.tsx index ca2598d4765..5085806aaeb 100644 --- a/ui/src/onboarding/components/configureStep/streaming/PluginConfigForm.tsx +++ b/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 { @@ -43,8 +40,6 @@ class PluginConfigForm extends PureComponent { onAddConfigValue, onRemoveConfigValue, onUpdateTelegrafPluginConfig, - onClickPrevious, - onClickSkip, } = this.props return (
@@ -72,13 +67,7 @@ class PluginConfigForm extends PureComponent { - + ) } diff --git a/ui/src/onboarding/components/configureStep/streaming/PluginConfigSwitcher.test.tsx b/ui/src/onboarding/components/configureStep/streaming/PluginConfigSwitcher.test.tsx index c7fe7f55566..1e92b1eaf3c 100644 --- a/ui/src/onboarding/components/configureStep/streaming/PluginConfigSwitcher.test.tsx +++ b/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(), diff --git a/ui/src/onboarding/components/configureStep/streaming/PluginConfigSwitcher.tsx b/ui/src/onboarding/components/configureStep/streaming/PluginConfigSwitcher.tsx index 9a84bb3ad5d..89b1990389e 100644 --- a/ui/src/onboarding/components/configureStep/streaming/PluginConfigSwitcher.tsx +++ b/ui/src/onboarding/components/configureStep/streaming/PluginConfigSwitcher.tsx @@ -18,18 +18,18 @@ import { } from 'src/onboarding/actions/dataLoaders' // Types -import {TelegrafPlugin} from 'src/types/v2/dataLoaders' +import {TelegrafPlugin, Substep} from 'src/types/v2/dataLoaders' +import TelegrafPluginInstructions from 'src/onboarding/components/configureStep/streaming/TelegrafPluginInstructions' interface Props { telegrafPlugins: TelegrafPlugin[] onUpdateTelegrafPluginConfig: typeof updateTelegrafPluginConfig onAddConfigValue: typeof addConfigValue onRemoveConfigValue: typeof removeConfigValue - currentIndex: number + substepIndex: Substep onSetConfigArrayValue: typeof setConfigArrayValue onClickNext: () => void onClickPrevious: () => void - onClickSkip: () => void } class PluginConfigSwitcher extends PureComponent { @@ -41,12 +41,18 @@ class PluginConfigSwitcher extends PureComponent { onSetConfigArrayValue, onClickNext, telegrafPlugins, - currentIndex, + substepIndex, onClickPrevious, - onClickSkip, } = this.props - if (this.currentTelegrafPlugin) { + if (substepIndex === 'config') { + return ( + + ) + } else if (this.currentTelegrafPlugin) { return ( { onSetConfigArrayValue={onSetConfigArrayValue} onClickNext={onClickNext} telegrafPlugins={telegrafPlugins} - currentIndex={currentIndex} - onClickPrevious={onClickPrevious} - onClickSkip={onClickSkip} /> ) + } else { + return } - return } private get currentTelegrafPlugin(): TelegrafPlugin { - const {currentIndex, telegrafPlugins} = this.props - return _.get(telegrafPlugins, `${currentIndex}`, null) + const {substepIndex, telegrafPlugins} = this.props + return _.get(telegrafPlugins, `${substepIndex}`, null) } private get configFields() { diff --git a/ui/src/onboarding/components/configureStep/streaming/TelegrafPluginInstructions.tsx b/ui/src/onboarding/components/configureStep/streaming/TelegrafPluginInstructions.tsx new file mode 100644 index 00000000000..23f6b1e6e96 --- /dev/null +++ b/ui/src/onboarding/components/configureStep/streaming/TelegrafPluginInstructions.tsx @@ -0,0 +1,80 @@ +// Libraries +import React, {PureComponent, ChangeEvent} from 'react' +import {connect} from 'react-redux' +import {AppState} from 'src/types/v2/index' +import {Form, Input, InputType, ComponentSize} from 'src/clockface' +import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar' +import OnboardingButtons from '../../OnboardingButtons' +import {setTelegrafConfigName} from 'src/onboarding/actions/dataLoaders' + +interface OwnProps { + onClickNext: () => void + onClickPrevious: () => void +} + +interface DispatchProps { + onSetTelegrafConfigName: typeof setTelegrafConfigName +} + +interface StateProps { + telegrafConfigName: string +} + +type Props = OwnProps & DispatchProps & StateProps + +class TelegrafPluginInstructions extends PureComponent { + public render() { + const {onClickPrevious, onClickNext, telegrafConfigName} = this.props + return ( +
+
+ +
+

+ Telegraf Configuration Information +

+
+ Telegraf is a plugin based data collection agent. Click on the + plugin names to the left in order to configure the selected + plugins. For more information about Telegraf Plugins, see + documentation. +
+ + + +
+ +
+ + + ) + } + private handleNameInput = (e: ChangeEvent) => { + this.props.onSetTelegrafConfigName(e.target.value) + } +} + +const mstp = ({ + dataLoading: { + dataLoaders: {telegrafConfigName}, + }, +}: AppState): StateProps => { + return { + telegrafConfigName, + } +} + +const mdtp: DispatchProps = { + onSetTelegrafConfigName: setTelegrafConfigName, +} +export default connect( + mstp, + mdtp +)(TelegrafPluginInstructions) diff --git a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx index 5d33516539a..18c311495c7 100644 --- a/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx +++ b/ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx @@ -132,21 +132,20 @@ export class SelectDataSourceStep extends PureComponent { private handleClickNext = () => { const { currentStepIndex, - telegrafPlugins, onSetActiveTelegrafPlugin, onSetSubstepIndex, } = this.props - if (this.props.type === DataLoaderType.Streaming && !this.isStreaming) { + const isTypeSelectionStep = + this.props.type === DataLoaderType.Streaming && !this.isStreaming + if (isTypeSelectionStep) { onSetSubstepIndex(currentStepIndex, 'streaming') onSetActiveTelegrafPlugin('') return } if (this.isStreaming) { - const name = _.get(telegrafPlugins, '0.name', '') - onSetActiveTelegrafPlugin(name) - onSetSubstepIndex(currentStepIndex + 1, 0) + onSetSubstepIndex(currentStepIndex + 1, 'config') return } diff --git a/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx b/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx index e75cf50d2ae..ff06bbf4c46 100644 --- a/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx +++ b/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx @@ -99,16 +99,6 @@ export class VerifyDataStep extends PureComponent { return selectedBucket || bucket } - private get previousStepName() { - const {telegrafPlugins, type} = this.props - - if (type === DataLoaderType.Streaming) { - return _.get(telegrafPlugins, `${telegrafPlugins.length - 1}.name`, '') - } - - return type - } - private handleIncrementStep = () => { const {onExit} = this.props onExit() @@ -116,7 +106,6 @@ export class VerifyDataStep extends PureComponent { private handleDecrementStep = () => { const { - telegrafPlugins, onSetActiveTelegrafPlugin, onDecrementCurrentStepIndex, onSetSubstepIndex, @@ -125,12 +114,11 @@ export class VerifyDataStep extends PureComponent { } = this.props if (type === DataLoaderType.Streaming) { - onSetSubstepIndex(stepIndex - 1, telegrafPlugins.length - 1 || 0) - onSetActiveTelegrafPlugin(this.previousStepName) + onSetSubstepIndex(stepIndex - 1, 'config') } else { onDecrementCurrentStepIndex() - onSetActiveTelegrafPlugin('') } + onSetActiveTelegrafPlugin('') } } diff --git a/ui/src/onboarding/reducers/dataLoaders.test.ts b/ui/src/onboarding/reducers/dataLoaders.test.ts index 01ac99a99b8..dbfa81f2bbc 100644 --- a/ui/src/onboarding/reducers/dataLoaders.test.ts +++ b/ui/src/onboarding/reducers/dataLoaders.test.ts @@ -22,6 +22,7 @@ import { setScraperTargetBucket, setScraperTargetURL, setScraperTargetID, + setTelegrafConfigName, } from 'src/onboarding/actions/dataLoaders' // Mock Data @@ -401,6 +402,22 @@ describe('dataLoader reducer', () => { expect(actual).toEqual(expected) }) + it('can set telegraf config name ', () => { + const actual = dataLoadersReducer( + { + ...INITIAL_STATE, + }, + setTelegrafConfigName('myConfig') + ) + + const expected = { + ...INITIAL_STATE, + telegrafConfigName: 'myConfig', + } + + expect(actual).toEqual(expected) + }) + it('can set scraperTarget bucket', () => { const actual = dataLoadersReducer( { diff --git a/ui/src/onboarding/reducers/dataLoaders.ts b/ui/src/onboarding/reducers/dataLoaders.ts index 7b342d8dac7..9f07247c9a7 100644 --- a/ui/src/onboarding/reducers/dataLoaders.ts +++ b/ui/src/onboarding/reducers/dataLoaders.ts @@ -36,6 +36,7 @@ export const INITIAL_STATE: DataLoadersState = { telegrafConfigID: null, pluginBundles: [], scraperTarget: {bucket: '', url: QUICKSTART_SCRAPER_TARGET_URL}, + telegrafConfigName: 'new config', } export default (state = INITIAL_STATE, action: Action): DataLoadersState => { @@ -264,6 +265,11 @@ export default (state = INITIAL_STATE, action: Action): DataLoadersState => { return {...tp} }), } + case 'SET_TELEGRAF_CONFIG_NAME': + return { + ...state, + telegrafConfigName: action.payload.name, + } case 'SET_SCRAPER_TARGET_BUCKET': const {bucket} = action.payload return { diff --git a/ui/src/organizations/components/CollectorList.tsx b/ui/src/organizations/components/CollectorList.tsx index 88ab2328442..28ee12aaf9b 100644 --- a/ui/src/organizations/components/CollectorList.tsx +++ b/ui/src/organizations/components/CollectorList.tsx @@ -13,7 +13,7 @@ import {getDeep} from 'src/utils/wrappers' interface Props { collectors: Telegraf[] emptyState: JSX.Element - onDownloadConfig: (telegrafID: string) => void + onDownloadConfig: (telegrafID: string, telegrafName: string) => void onDelete: (telegrafID: string) => void } diff --git a/ui/src/organizations/components/CollectorRow.tsx b/ui/src/organizations/components/CollectorRow.tsx index 3dc7f7bf1fe..956d47a271a 100644 --- a/ui/src/organizations/components/CollectorRow.tsx +++ b/ui/src/organizations/components/CollectorRow.tsx @@ -16,7 +16,7 @@ import {Telegraf} from 'src/api' interface Props { collector: Telegraf bucket: string - onDownloadConfig: (telegrafID: string) => void + onDownloadConfig: (telegrafID: string, telegrafName: string) => void onDelete: (telegrafID: string) => void } @@ -50,7 +50,10 @@ export default class CollectorRow extends PureComponent { } private handleDownloadConfig = (): void => { - this.props.onDownloadConfig(this.props.collector.id) + this.props.onDownloadConfig( + this.props.collector.id, + this.props.collector.name + ) } private handleDeleteConfig = (): void => { this.props.onDelete(this.props.collector.id) diff --git a/ui/src/organizations/components/Collectors.tsx b/ui/src/organizations/components/Collectors.tsx index 9933e134bf2..82ea06ef582 100644 --- a/ui/src/organizations/components/Collectors.tsx +++ b/ui/src/organizations/components/Collectors.tsx @@ -173,10 +173,13 @@ export default class Collectors extends PureComponent { ) } - private handleDownloadConfig = async (telegrafID: string) => { + private handleDownloadConfig = async ( + telegrafID: string, + telegrafName: string + ) => { try { const config = await getTelegrafConfigTOML(telegrafID) - downloadTextFile(config, 'config.toml') + downloadTextFile(config, `${telegrafName || 'config'}.toml`) } catch (error) { notify(getTelegrafConfigFailed()) } diff --git a/ui/src/types/v2/dataLoaders.ts b/ui/src/types/v2/dataLoaders.ts index af7520e6a46..fdb55e60c6d 100644 --- a/ui/src/types/v2/dataLoaders.ts +++ b/ui/src/types/v2/dataLoaders.ts @@ -59,6 +59,7 @@ export interface DataLoadersState { lineProtocolBody: string precision: WritePrecision scraperTarget: ScraperTarget + telegrafConfigName: string } export enum ConfigurationState { @@ -192,4 +193,4 @@ export interface TelegrafPluginInfo { } } -export type Substep = number | 'streaming' +export type Substep = number | 'streaming' | 'config'