Create dashboards for plugins in verify step

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<Props> {
       onUpdateTelegrafPluginConfig,
       onAddConfigValue,
       onRemoveConfigValue,
-      onSaveTelegrafConfig,
       onAddPluginBundle,
       onRemovePluginBundle,
       notify,
@@ -170,7 +167,6 @@ class DataLoadersWizard extends PureComponent<Props> {
               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,

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<Props> {
       onboardingStepProps,
       dataLoaders,
       onSetDataLoadersType,
-      onSaveTelegrafConfig,
       onUpdateTelegrafPluginConfig,
       onSetActiveTelegrafPlugin,
       onSetPluginConfiguration,
@@ -117,7 +114,6 @@ class StepSwitcher extends PureComponent<Props> {
             selectedBucket={selectedBucket}
             username={username}
             org={org}
-            onSaveTelegrafConfig={onSaveTelegrafConfig}
             onSetActiveTelegrafPlugin={onSetActiveTelegrafPlugin}
             onSetPluginConfiguration={onSetPluginConfiguration}
             stepIndex={currentStepIndex}

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,

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<Props, State> {
+export class CreateOrUpdateConfig extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props)
 
@@ -39,13 +48,19 @@ class CreateOrUpdateConfig extends PureComponent<Props, State> {
   }
 
   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<Props, State> {
   }
 }
 
-export default CreateOrUpdateConfig
+const mdtp: DispatchProps = {
+  notify: notifyAction,
+  onSaveTelegrafConfig: createOrUpdateTelegrafConfigAsync,
+  createDashboardsForPlugins: createDashboardsForPluginsAction,
+}
+
+export default connect<null, DispatchProps, OwnProps>(
+  null,
+  mdtp
+)(CreateOrUpdateConfig)

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<Props> {
   public render() {
-    const {
+    const {authToken, org, configID, bucket, notify} = this.props
-      authToken,
-      org,
-      configID,
-      onSaveTelegrafConfig,
-      bucket,
-      notify,
-    } = this.props
 
     return (
       <>
-        <CreateOrUpdateConfig
+        <CreateOrUpdateConfig org={org} authToken={authToken}>
-          org={org}
-          notify={notify}
-          authToken={authToken}
-          onSaveTelegrafConfig={onSaveTelegrafConfig}
-        >
           {() => (
             <TelegrafInstructions
               notify={notify}

ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx

@@ -12,7 +12,6 @@ import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar
 // Actions
 import {
   setActiveTelegrafPlugin,
-  createOrUpdateTelegrafConfigAsync,
   setPluginConfiguration,
 } from 'src/onboarding/actions/dataLoaders'
 
@@ -30,7 +29,6 @@ export interface OwnProps extends DataLoaderStepProps {
   telegrafPlugins: TelegrafPlugin[]
   onSetActiveTelegrafPlugin: typeof setActiveTelegrafPlugin
   onSetPluginConfiguration: typeof setPluginConfiguration
-  onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync
   stepIndex: number
   bucket: string
   username: string
@@ -61,7 +59,6 @@ export class VerifyDataStep extends PureComponent<Props> {
       username,
       telegrafConfigID,
       type,
-      onSaveTelegrafConfig,
       onDecrementCurrentStepIndex,
       notify,
       lpStatus,
@@ -78,7 +75,6 @@ export class VerifyDataStep extends PureComponent<Props> {
                   notify={notify}
                   type={type}
                   telegrafConfigID={telegrafConfigID}
-                  onSaveTelegrafConfig={onSaveTelegrafConfig}
                   org={org}
                   bucket={this.bucket}
                   username={username}

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<Props> {
       username,
       type,
       telegrafConfigID,
-      onSaveTelegrafConfig,
       notify,
       lpStatus,
     } = this.props
@@ -51,7 +46,6 @@ export class VerifyDataSwitcher extends PureComponent<Props> {
                 configID={telegrafConfigID}
                 authToken={authToken}
                 bucket={bucket}
-                onSaveTelegrafConfig={onSaveTelegrafConfig}
               />
             )}
           </FetchAuthToken>

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 {Proto, Dashboard} from 'src/api'
-import {Dashboard} from 'src/types/v2'
+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<Action>) => {
   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()))
+  }
+}

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`,
+})