feat(ui): Create dashboards from templates for telegraf plugins

ui/src/dataLoaders/components/collectorsWizard/configure/TelegrafPluginInstructions.tsx

@@ -1,6 +1,7 @@
 // Libraries
 import React, {PureComponent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
+import {includes} from 'lodash'
 
 // Components
 import {Form, Input, InputType, ComponentSize} from 'src/clockface'
@@ -23,12 +24,18 @@ import {
 import {createDashboardsForPlugins as createDashboardsForPluginsAction} from 'src/protos/actions'
 import {notify as notifyAction} from 'src/shared/actions/notifications'
 
+// Constants
+import {
+  TelegrafConfigCreationSuccess,
+  TelegrafDashboardCreated,
+  TelegrafDashboardFailed,
+} from 'src/shared/copy/notifications'
+
 // Types
 import {AppState} from 'src/types/v2/index'
-import {TelegrafPlugin} from 'src/types/v2/dataLoaders'
+import {TelegrafPlugin, ConfigurationState} from 'src/types/v2/dataLoaders'
-
+import {client} from 'src/utils/api'
-// Constants
+import {IDashboardTemplate} from '@influxdata/influx'
-import {TelegrafConfigCreationSuccess} from 'src/shared/copy/notifications'
 
 interface DispatchProps {
   onSetTelegrafConfigName: typeof setTelegrafConfigName
@@ -47,6 +54,8 @@ interface StateProps {
   telegrafConfigDescription: string
   telegrafPlugins: TelegrafPlugin[]
   telegrafConfigID: string
+  org: string
+  orgID: string
 }
 
 type Props = DispatchProps & StateProps
@@ -118,23 +127,60 @@ export class TelegrafPluginInstructions extends PureComponent<Props> {
   }
 
   private handleFormSubmit = async () => {
-    const {
+    const {onSaveTelegrafConfig, telegrafConfigID, notify} = this.props
-      onSaveTelegrafConfig,
-      createDashboardsForPlugins,
-      telegrafConfigID,
-      notify,
-    } = this.props
 
     await onSaveTelegrafConfig()
+
     notify(TelegrafConfigCreationSuccess)
 
     if (!telegrafConfigID) {
-      await createDashboardsForPlugins()
+      this.handleCreateDashboardsForPlugins()
     }
 
     this.props.onIncrementStep()
   }
 
+  private async handleCreateDashboardsForPlugins() {
+    const {notify, telegrafPlugins, org, orgID} = this.props
+    try {
+      const templatesEntries = await client.templates.getAll(org)
+
+      const configuredPlugins = telegrafPlugins.filter(
+        tp => tp.configured === ConfigurationState.Configured
+      )
+
+      const configuredPluginNames = configuredPlugins.map(t =>
+        `${t.name}-Template`.toLowerCase()
+      )
+
+      const templatesToGet = templatesEntries.filter(t => {
+        return includes(configuredPluginNames, t.meta.name.toLowerCase())
+      })
+
+      const pluginsWithTemplates = templatesToGet.map(t => {
+        return t.meta.name.replace('-Template', '')
+      })
+
+      const pendingTemplates = templatesToGet.map(t =>
+        client.templates.get(t.id)
+      )
+
+      const templates = await Promise.all(pendingTemplates)
+
+      const pendingDashboards = templates.map(t =>
+        client.dashboards.createFromTemplate(t as IDashboardTemplate, orgID)
+      )
+
+      const dashboards = await Promise.all(pendingDashboards)
+
+      if (dashboards.length) {
+        notify(TelegrafDashboardCreated(pluginsWithTemplates))
+      }
+    } catch (err) {
+      notify(TelegrafDashboardFailed())
+    }
+  }
+
   private get sideBarVisible() {
     const {telegrafPlugins} = this.props
 
@@ -173,6 +219,7 @@ const mstp = ({
       telegrafPlugins,
       telegrafConfigID,
     },
+    steps: {org, orgID},
   },
 }: AppState): StateProps => {
   return {
@@ -180,6 +227,8 @@ const mstp = ({
     telegrafConfigDescription,
     telegrafPlugins,
     telegrafConfigID,
+    org,
+    orgID,
   }
 }
 

ui/src/protos/actions/index.ts

@@ -18,8 +18,8 @@ import {ConfigurationState} from 'src/types/v2/dataLoaders'
 
 // Const
 import {
-  ProtoDashboardFailed,
+  TelegrafDashboardFailed,
-  ProtoDashboardCreated,
+  TelegrafDashboardCreated,
 } from 'src/shared/copy/notifications'
 
 export enum ActionTypes {
@@ -98,10 +98,10 @@ export const createDashboardsForPlugins = () => async (
     })
 
     if (plugins.length) {
-      dispatch(notify(ProtoDashboardCreated(plugins)))
+      dispatch(notify(TelegrafDashboardCreated(plugins)))
     }
   } catch (err) {
     console.error(err)
-    dispatch(notify(ProtoDashboardFailed()))
+    dispatch(notify(TelegrafDashboardFailed()))
   }
 }

ui/src/shared/copy/notifications.ts

@@ -769,17 +769,6 @@ export const fluxTimeSeriesError = (message: string): Notification => ({
 })
 
 // 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`,
-})
 
 export const importSucceeded = (): Notification => ({
   ...defaultSuccessNotification,
@@ -792,6 +781,17 @@ export const importFailed = (): Notification => ({
 })
 
 // Templates
+export const TelegrafDashboardCreated = (configs: string[]): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Successfully created dashboards for telegraf plugin${
+    configs.length > 1 ? 's' : ''
+  }: ${configs.join(', ')}.`,
+})
+
+export const TelegrafDashboardFailed = (): Notification => ({
+  ...defaultErrorNotification,
+  message: `Could not create dashboards for one or more plugins`,
+})
 
 export const importTaskSucceeded = (): Notification => ({
   ...defaultSuccessNotification,