fix(ui): show telegraf config instructions (#11677)

Co-authored-by: Iris Scholten <ischolten.is@gmail.com>

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## v2.0.0-alpha.2 [unreleased]
 
 ## Features
+1. [11677](https://github.com/influxdata/influxdb/pull/11677): Add instructions button to view `$INFLUX_TOKEN` setup for telegraf configs
 1. [11693](https://github.com/influxdata/influxdb/pull/11693): Save the $INFLUX_TOKEN environmental variable in telegraf configs
 
 ## Bug Fixes

ui/src/clockface/components/wizard/WizardOverlay.tsx

@@ -9,17 +9,12 @@ import OverlayHeading from 'src/clockface/components/overlays/OverlayHeading'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-import {ToggleWizard} from 'src/types/wizard'
-
 interface Props {
   children: any
   visible: boolean
   title: string
-  toggleVisibility: ToggleWizard
-  resetWizardState: () => void
   maxWidth?: number
-  jumpStep: number
-  onDismis: () => void
+  onDismiss: () => void
 }
 
 @ErrorHandling
@@ -29,12 +24,12 @@ class WizardOverlay extends PureComponent<Props> {
   }
 
   public render() {
-    const {visible, title, maxWidth, children, onDismis} = this.props
+    const {visible, title, maxWidth, children, onDismiss} = this.props
 
     return (
       <OverlayTechnology visible={visible}>
         <OverlayContainer maxWidth={maxWidth}>
-          <OverlayHeading title={title} onDismiss={onDismis} />
+          <OverlayHeading title={title} onDismiss={onDismiss} />
           <OverlayBody>
             <div className="wizard-overlay">{children}</div>
           </OverlayBody>

ui/src/dataLoaders/components/DataLoadersWizard.tsx

@@ -108,7 +108,7 @@ class DataLoadersWizard extends PureComponent<Props> {
       <WizardOverlay
         visible={visible}
         title={'Data Loading'}
-        onDismis={this.handleDismiss}
+        onDismiss={this.handleDismiss}
       >
         <div className="wizard-contents">
           <div className="wizard-step--container">

ui/src/dataLoaders/components/collectorsWizard/CollectorsWizard.tsx

@@ -93,7 +93,7 @@ class CollectorsWizard extends PureComponent<Props> {
       <WizardOverlay
         visible={visible}
         title={'Create a Telegraf Config'}
-        onDismis={this.handleDismiss}
+        onDismiss={this.handleDismiss}
       >
         <div className="wizard-contents">
           <PluginsSideBar

ui/src/dataLoaders/components/lineProtocolWizard/LineProtocolWizard.tsx

@@ -81,7 +81,7 @@ class CollectorsWizard extends PureComponent<Props> {
       <WizardOverlay
         visible={visible}
         title={'Add Line Protocol'}
-        onDismis={this.handleDismiss}
+        onDismiss={this.handleDismiss}
       >
         <div className="wizard-contents">
           <div className="wizard-step--container">

ui/src/dataLoaders/components/verifyStep/FetchAuthToken.tsx

@@ -13,7 +13,7 @@ import {client} from 'src/utils/api'
 import {RemoteDataState} from 'src/types'
 
 export interface Props {
-  bucket: string
+  bucket?: string
   username: string
   children: (authToken: string) => JSX.Element
 }

ui/src/organizations/components/CollectorList.tsx

@@ -16,6 +16,7 @@ interface Props {
   onDownloadConfig: (telegrafID: string, telegrafName: string) => void
   onDelete: (telegrafID: string) => void
   onUpdate: (telegraf: Telegraf) => void
+  onOpenInstructions: (telegrafID: string) => void
 }
 
 export default class CollectorList extends PureComponent<Props> {
@@ -38,7 +39,13 @@ export default class CollectorList extends PureComponent<Props> {
   }
 
   public get collectorsList(): JSX.Element[] {
-    const {collectors, onDownloadConfig, onDelete, onUpdate} = this.props
+    const {
+      collectors,
+      onDownloadConfig,
+      onDelete,
+      onUpdate,
+      onOpenInstructions,
+    } = this.props
 
     if (collectors !== undefined) {
       return collectors.map(collector => (
@@ -49,6 +56,7 @@ export default class CollectorList extends PureComponent<Props> {
           onDownloadConfig={onDownloadConfig}
           onDelete={onDelete}
           onUpdate={onUpdate}
+          onOpenInstructions={onOpenInstructions}
         />
       ))
     }

ui/src/organizations/components/CollectorRow.tsx

@@ -20,6 +20,7 @@ interface Props {
   onDownloadConfig: (telegrafID: string, telegrafName: string) => void
   onDelete: (telegrafID: string) => void
   onUpdate: (telegraf: Telegraf) => void
+  onOpenInstructions: (telegrafID: string) => void
 }
 
 export default class CollectorRow extends PureComponent<Props> {
@@ -43,6 +44,12 @@ export default class CollectorRow extends PureComponent<Props> {
                 text={'Download Config'}
                 onClick={this.handleDownloadConfig}
               />
+              <Button
+                size={ComponentSize.ExtraSmall}
+                color={ComponentColor.Secondary}
+                text={'Instructions'}
+                onClick={this.handleOpenInstructions}
+              />
               <ConfirmationButton
                 size={ComponentSize.ExtraSmall}
                 text="Delete"
@@ -70,4 +77,7 @@ export default class CollectorRow extends PureComponent<Props> {
   private handleDeleteConfig = (): void => {
     this.props.onDelete(this.props.collector.id)
   }
+  private handleOpenInstructions = (): void => {
+    this.props.onOpenInstructions(this.props.collector.id)
+  }
 }

ui/src/organizations/components/Collectors.tsx

@@ -10,6 +10,7 @@ import {downloadTextFile} from 'src/shared/utils/download'
 import TabbedPageHeader from 'src/shared/components/tabbed_page/TabbedPageHeader'
 import CollectorList from 'src/organizations/components/CollectorList'
 import TelegrafExplainer from 'src/organizations/components/TelegrafExplainer'
+import TelegrafInstructionsOverlay from 'src/organizations/components/TelegrafInstructionsOverlay'
 import {
   Button,
   ComponentColor,
@@ -60,8 +61,10 @@ interface DispatchProps {
 type Props = OwnProps & DispatchProps
 
 interface State {
-  overlayState: OverlayState
+  dataLoaderOverlay: OverlayState
   searchTerm: string
+  instructionsOverlay: OverlayState
+  collectorID?: string
 }
 
 @ErrorHandling
@@ -70,8 +73,10 @@ export class Collectors extends PureComponent<Props, State> {
     super(props)
 
     this.state = {
-      overlayState: OverlayState.Closed,
+      dataLoaderOverlay: OverlayState.Closed,
       searchTerm: '',
+      instructionsOverlay: OverlayState.Closed,
+      collectorID: null,
     }
   }
 
@@ -108,6 +113,7 @@ export class Collectors extends PureComponent<Props, State> {
                     onDownloadConfig={this.handleDownloadConfig}
                     onDelete={this.handleDeleteTelegraf}
                     onUpdate={this.handleUpdateTelegraf}
+                    onOpenInstructions={this.handleOpenInstructions}
                   />
                 )}
               </FilterList>
@@ -123,17 +129,44 @@ export class Collectors extends PureComponent<Props, State> {
           </Grid.Row>
         </Grid>
         <CollectorsWizard
-          visible={this.isOverlayVisible}
+          visible={this.isDataLoaderVisible}
           onCompleteSetup={this.handleDismissDataLoaders}
           startingStep={0}
           buckets={buckets}
         />
+        <TelegrafInstructionsOverlay
+          visible={this.isInstructionsVisible}
+          collector={this.selectedCollector}
+          onDismiss={this.handleCloseInstructions}
+        />
       </>
     )
   }
 
-  private get isOverlayVisible(): boolean {
-    return this.state.overlayState === OverlayState.Open
+  private get selectedCollector() {
+    return this.props.collectors.find(c => c.id === this.state.collectorID)
+  }
+
+  private get isDataLoaderVisible(): boolean {
+    return this.state.dataLoaderOverlay === OverlayState.Open
+  }
+
+  private get isInstructionsVisible(): boolean {
+    return this.state.instructionsOverlay === OverlayState.Open
+  }
+
+  private handleOpenInstructions = (collectorID: string): void => {
+    this.setState({
+      instructionsOverlay: OverlayState.Open,
+      collectorID,
+    })
+  }
+
+  private handleCloseInstructions = (): void => {
+    this.setState({
+      instructionsOverlay: OverlayState.Closed,
+      collectorID: null,
+    })
   }
 
   private get createButton(): JSX.Element {
@@ -157,11 +190,11 @@ export class Collectors extends PureComponent<Props, State> {
 
     onSetDataLoadersType(DataLoaderType.Scraping)
 
-    this.setState({overlayState: OverlayState.Open})
+    this.setState({dataLoaderOverlay: OverlayState.Open})
   }
 
   private handleDismissDataLoaders = () => {
-    this.setState({overlayState: OverlayState.Closed})
+    this.setState({dataLoaderOverlay: OverlayState.Closed})
     this.props.onChange()
   }
 

ui/src/organizations/components/TelegrafInstructionsOverlay.tsx

@@ -0,0 +1,71 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+import {get} from 'lodash'
+
+// Components
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import WizardOverlay from 'src/clockface/components/wizard/WizardOverlay'
+import TelegrafInstructions from 'src/dataLoaders/components/verifyStep/TelegrafInstructions'
+import FetchAuthToken from 'src/dataLoaders/components/verifyStep/FetchAuthToken'
+
+// Actions
+import {notify as notifyAction} from 'src/shared/actions/notifications'
+
+// Types
+import {AppState} from 'src/types/v2'
+import {Telegraf} from 'src/api'
+
+interface OwnProps {
+  visible: boolean
+  onDismiss: () => void
+  collector?: Telegraf
+}
+
+interface DispatchProps {
+  notify: typeof notifyAction
+}
+
+interface StateProps {
+  username: string
+}
+
+type Props = StateProps & DispatchProps & OwnProps
+
+@ErrorHandling
+export class TelegrafInstructionsOverlay extends PureComponent<Props> {
+  public render() {
+    const {notify, collector, visible, onDismiss, username} = this.props
+
+    return (
+      <WizardOverlay
+        visible={visible}
+        title="Telegraf Setup Instructions"
+        onDismiss={onDismiss}
+      >
+        <FetchAuthToken username={username}>
+          {authToken => (
+            <TelegrafInstructions
+              notify={notify}
+              authToken={authToken}
+              configID={get(collector, 'id', '')}
+            />
+          )}
+        </FetchAuthToken>
+      </WizardOverlay>
+    )
+  }
+}
+
+const mstp = ({me: {name}}: AppState): StateProps => ({
+  username: name,
+})
+
+const mdtp: DispatchProps = {
+  notify: notifyAction,
+}
+
+export default connect<StateProps, DispatchProps, OwnProps>(
+  mstp,
+  mdtp
+)(TelegrafInstructionsOverlay)