From fe5539c9cf720dd9c103784d4f3a229f4db557a3 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Thu, 17 Jan 2019 19:53:16 -0800 Subject: [PATCH] Create dashboards for plugins in verify step --- .../components/DataLoadersWizard.tsx | 5 -- .../dataLoaders/components/StepSwitcher.tsx | 4 -- .../verifyStep/CreateOrUpdateConfig.test.tsx | 3 +- .../verifyStep/CreateOrUpdateConfig.tsx | 36 +++++++++++--- .../components/verifyStep/DataStreaming.tsx | 20 +------- .../components/verifyStep/VerifyDataStep.tsx | 4 -- .../verifyStep/VerifyDataSwitcher.tsx | 6 --- ui/src/protos/actions/index.ts | 47 ++++++++++++++++++- ui/src/shared/copy/notifications.ts | 13 +++++ 9 files changed, 92 insertions(+), 46 deletions(-) diff --git a/ui/src/dataLoaders/components/DataLoadersWizard.tsx b/ui/src/dataLoaders/components/DataLoadersWizard.tsx index 5c91ce10f2..dbfcd74485 100644 --- a/ui/src/dataLoaders/components/DataLoadersWizard.tsx +++ b/ui/src/dataLoaders/components/DataLoadersWizard.tsx @@ -26,7 +26,6 @@ import { removeConfigValue, setActiveTelegrafPlugin, setPluginConfiguration, - createOrUpdateTelegrafConfigAsync, addPluginBundleWithPlugins, removePluginBundleWithPlugins, setConfigArrayValue, @@ -81,7 +80,6 @@ interface DispatchProps { onSetActiveTelegrafPlugin: typeof setActiveTelegrafPlugin onSetPluginConfiguration: typeof setPluginConfiguration onSetConfigArrayValue: typeof setConfigArrayValue - onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync onIncrementCurrentStepIndex: typeof incrementCurrentStepIndex onDecrementCurrentStepIndex: typeof decrementCurrentStepIndex onSetCurrentStepIndex: typeof setCurrentStepIndex @@ -128,7 +126,6 @@ class DataLoadersWizard extends PureComponent { onUpdateTelegrafPluginConfig, onAddConfigValue, onRemoveConfigValue, - onSaveTelegrafConfig, onAddPluginBundle, onRemovePluginBundle, notify, @@ -170,7 +167,6 @@ class DataLoadersWizard extends PureComponent { onSetPluginConfiguration={onSetPluginConfiguration} onAddConfigValue={onAddConfigValue} onRemoveConfigValue={onRemoveConfigValue} - onSaveTelegrafConfig={onSaveTelegrafConfig} onAddPluginBundle={onAddPluginBundle} onRemovePluginBundle={onRemovePluginBundle} onSetConfigArrayValue={onSetConfigArrayValue} @@ -304,7 +300,6 @@ const mdtp: DispatchProps = { onAddConfigValue: addConfigValue, onRemoveConfigValue: removeConfigValue, onSetActiveTelegrafPlugin: setActiveTelegrafPlugin, - onSaveTelegrafConfig: createOrUpdateTelegrafConfigAsync, onAddPluginBundle: addPluginBundleWithPlugins, onRemovePluginBundle: removePluginBundleWithPlugins, onSetPluginConfiguration: setPluginConfiguration, diff --git a/ui/src/dataLoaders/components/StepSwitcher.tsx b/ui/src/dataLoaders/components/StepSwitcher.tsx index 95f332b906..3a82d57dff 100644 --- a/ui/src/dataLoaders/components/StepSwitcher.tsx +++ b/ui/src/dataLoaders/components/StepSwitcher.tsx @@ -15,7 +15,6 @@ import { setActiveTelegrafPlugin, addConfigValue, removeConfigValue, - createOrUpdateTelegrafConfigAsync, addPluginBundleWithPlugins, removePluginBundleWithPlugins, setPluginConfiguration, @@ -40,7 +39,6 @@ interface Props { buckets: Bucket[] dataLoaders: DataLoadersState currentStepIndex: number - onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync onAddPluginBundle: typeof addPluginBundleWithPlugins onRemovePluginBundle: typeof removePluginBundleWithPlugins onSetConfigArrayValue: typeof setConfigArrayValue @@ -58,7 +56,6 @@ class StepSwitcher extends PureComponent { onboardingStepProps, dataLoaders, onSetDataLoadersType, - onSaveTelegrafConfig, onUpdateTelegrafPluginConfig, onSetActiveTelegrafPlugin, onSetPluginConfiguration, @@ -117,7 +114,6 @@ class StepSwitcher extends PureComponent { selectedBucket={selectedBucket} username={username} org={org} - onSaveTelegrafConfig={onSaveTelegrafConfig} onSetActiveTelegrafPlugin={onSetActiveTelegrafPlugin} onSetPluginConfiguration={onSetPluginConfiguration} stepIndex={currentStepIndex} diff --git a/ui/src/onboarding/components/verifyStep/CreateOrUpdateConfig.test.tsx b/ui/src/onboarding/components/verifyStep/CreateOrUpdateConfig.test.tsx index 0dff062e60..3a5f00a6bf 100644 --- a/ui/src/onboarding/components/verifyStep/CreateOrUpdateConfig.test.tsx +++ b/ui/src/onboarding/components/verifyStep/CreateOrUpdateConfig.test.tsx @@ -3,7 +3,7 @@ import React from 'react' import {shallow} from 'enzyme' // Components -import CreateOrUpdateConfig from 'src/onboarding/components/verifyStep/CreateOrUpdateConfig' +import {CreateOrUpdateConfig} from 'src/onboarding/components/verifyStep/CreateOrUpdateConfig' jest.mock('src/utils/api', () => require('src/onboarding/apis/mocks')) @@ -12,6 +12,7 @@ const setup = async (override = {}) => { org: 'default', children: jest.fn(), onSaveTelegrafConfig: jest.fn(), + createDashboardsForPlugins: jest.fn(), notify: jest.fn(), authToken: '', ...override, diff --git a/ui/src/onboarding/components/verifyStep/CreateOrUpdateConfig.tsx b/ui/src/onboarding/components/verifyStep/CreateOrUpdateConfig.tsx index d1987021d7..fdab673c1e 100644 --- a/ui/src/onboarding/components/verifyStep/CreateOrUpdateConfig.tsx +++ b/ui/src/onboarding/components/verifyStep/CreateOrUpdateConfig.tsx @@ -1,5 +1,6 @@ // Libraries import React, {PureComponent} from 'react' +import {connect} from 'react-redux' import _ from 'lodash' // Components @@ -8,6 +9,8 @@ import {ErrorHandling} from 'src/shared/decorators/errors' // Actions import {createOrUpdateTelegrafConfigAsync} from 'src/onboarding/actions/dataLoaders' +import {notify as notifyAction} from 'src/shared/actions/notifications' +import {createDashboardsForPlugins as createDashboardsForPluginsAction} from 'src/protos/actions/' // Constants import { @@ -18,20 +21,26 @@ import { // Types import {RemoteDataState, NotificationAction} from 'src/types' -export interface Props { +export interface OwnProps { org: string authToken: string children: () => JSX.Element - onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync - notify: NotificationAction } +export interface DispatchProps { + notify: NotificationAction + onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync + createDashboardsForPlugins: typeof createDashboardsForPluginsAction +} + +type Props = OwnProps & DispatchProps + interface State { loading: RemoteDataState } @ErrorHandling -class CreateOrUpdateConfig extends PureComponent { +export class CreateOrUpdateConfig extends PureComponent { constructor(props: Props) { super(props) @@ -39,13 +48,19 @@ class CreateOrUpdateConfig extends PureComponent { } public async componentDidMount() { - const {onSaveTelegrafConfig, authToken, notify} = this.props + const { + onSaveTelegrafConfig, + authToken, + notify, + createDashboardsForPlugins, + } = this.props this.setState({loading: RemoteDataState.Loading}) try { await onSaveTelegrafConfig(authToken) notify(TelegrafConfigCreationSuccess) + await createDashboardsForPlugins() this.setState({loading: RemoteDataState.Done}) } catch (error) { @@ -61,4 +76,13 @@ class CreateOrUpdateConfig extends PureComponent { } } -export default CreateOrUpdateConfig +const mdtp: DispatchProps = { + notify: notifyAction, + onSaveTelegrafConfig: createOrUpdateTelegrafConfigAsync, + createDashboardsForPlugins: createDashboardsForPluginsAction, +} + +export default connect( + null, + mdtp +)(CreateOrUpdateConfig) diff --git a/ui/src/onboarding/components/verifyStep/DataStreaming.tsx b/ui/src/onboarding/components/verifyStep/DataStreaming.tsx index f149155825..1699f11257 100644 --- a/ui/src/onboarding/components/verifyStep/DataStreaming.tsx +++ b/ui/src/onboarding/components/verifyStep/DataStreaming.tsx @@ -7,9 +7,6 @@ import TelegrafInstructions from 'src/onboarding/components/verifyStep/TelegrafI import CreateOrUpdateConfig from 'src/onboarding/components/verifyStep/CreateOrUpdateConfig' import DataListening from 'src/onboarding/components/verifyStep/DataListening' -// Actions -import {createOrUpdateTelegrafConfigAsync} from 'src/onboarding/actions/dataLoaders' - // Decorator import {ErrorHandling} from 'src/shared/decorators/errors' @@ -22,29 +19,16 @@ interface Props { org: string configID: string authToken: string - onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync } @ErrorHandling class DataStreaming extends PureComponent { public render() { - const { - authToken, - org, - configID, - onSaveTelegrafConfig, - bucket, - notify, - } = this.props + const {authToken, org, configID, bucket, notify} = this.props return ( <> - + {() => ( { username, telegrafConfigID, type, - onSaveTelegrafConfig, onDecrementCurrentStepIndex, notify, lpStatus, @@ -78,7 +75,6 @@ export class VerifyDataStep extends PureComponent { notify={notify} type={type} telegrafConfigID={telegrafConfigID} - onSaveTelegrafConfig={onSaveTelegrafConfig} org={org} bucket={this.bucket} username={username} diff --git a/ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx b/ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx index 481c8642b2..f4e15a6001 100644 --- a/ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx +++ b/ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx @@ -6,9 +6,6 @@ import {ErrorHandling} from 'src/shared/decorators/errors' import DataStreaming from 'src/onboarding/components/verifyStep/DataStreaming' import FetchAuthToken from 'src/onboarding/components/verifyStep/FetchAuthToken' -// Actions -import {createOrUpdateTelegrafConfigAsync} from 'src/onboarding/actions/dataLoaders' - // Types import {DataLoaderType} from 'src/types/v2/dataLoaders' import {NotificationAction, RemoteDataState} from 'src/types' @@ -21,7 +18,6 @@ interface Props { bucket: string username: string telegrafConfigID: string - onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync onDecrementCurrentStep: () => void lpStatus: RemoteDataState } @@ -35,7 +31,6 @@ export class VerifyDataSwitcher extends PureComponent { username, type, telegrafConfigID, - onSaveTelegrafConfig, notify, lpStatus, } = this.props @@ -51,7 +46,6 @@ export class VerifyDataSwitcher extends PureComponent { configID={telegrafConfigID} authToken={authToken} bucket={bucket} - onSaveTelegrafConfig={onSaveTelegrafConfig} /> )} diff --git a/ui/src/protos/actions/index.ts b/ui/src/protos/actions/index.ts index cf671029a9..801b38b93e 100644 --- a/ui/src/protos/actions/index.ts +++ b/ui/src/protos/actions/index.ts @@ -13,10 +13,18 @@ import {addLabelDefaults} from 'src/shared/utils/labels' // Actions import {loadDashboard} from 'src/dashboards/actions/v2/' +import {notify} from 'src/shared/actions/notifications' // Types -import {Proto} from 'src/api' -import {Dashboard} from 'src/types/v2' +import {Proto, Dashboard} from 'src/api' +import {GetState} from 'src/types/v2' +import {ConfigurationState} from 'src/types/v2/dataLoaders' + +// Const +import { + ProtoDashboardFailed, + ProtoDashboardCreated, +} from 'src/shared/copy/notifications' export enum ActionTypes { LoadProto = 'LOAD_PROTO', @@ -39,6 +47,7 @@ export const loadProto = (proto: Proto): LoadProtoAction => ({ export const getProtos = () => async (dispatch: Dispatch) => { try { const {protos} = await getProtosAJAX() + protos.forEach(p => { dispatch(loadProto(p)) }) @@ -66,3 +75,37 @@ export const createDashFromProto = ( console.error(error) } } + +export const createDashboardsForPlugins = () => async ( + dispatch, + getState: GetState +) => { + await dispatch(getProtos()) + const { + dataLoading: { + dataLoaders: {telegrafPlugins}, + steps: {orgID}, + }, + protos, + } = getState() + + const plugins = [] + + try { + telegrafPlugins.forEach(tp => { + if (tp.configured === ConfigurationState.Configured) { + if (protos[tp.name]) { + dispatch(createDashFromProto(protos[tp.name].id, orgID)) + plugins.push(tp.name) + } + } + }) + + if (plugins.length) { + dispatch(notify(ProtoDashboardCreated(plugins))) + } + } catch (err) { + console.error(err) + dispatch(notify(ProtoDashboardFailed())) + } +} diff --git a/ui/src/shared/copy/notifications.ts b/ui/src/shared/copy/notifications.ts index e2c1da2a25..ec2c11c603 100644 --- a/ui/src/shared/copy/notifications.ts +++ b/ui/src/shared/copy/notifications.ts @@ -725,3 +725,16 @@ export const fluxTimeSeriesError = (message: string): Notification => ({ ...defaultErrorNotification, message: `Could not get data: ${message}`, }) + +// Protos +export const ProtoDashboardCreated = (configs: string[]): Notification => ({ + ...defaultSuccessNotification, + message: `Successfully created dashboards for telegraf plugin${ + configs.length > 1 ? 's' : '' + }: ${configs.join(', ')}.`, +}) + +export const ProtoDashboardFailed = (): Notification => ({ + ...defaultErrorNotification, + message: `Could not create dashboards for one or more plugins`, +})