Merge pull request #11740 from influxdata/feat/telegraf-config-overlay

Add a button to view the telegraf config toml

CHANGELOG.md

@@ -4,6 +4,8 @@
 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
 1. [11700](https://github.com/influxdata/influxdb/pull/11700): Update Tasks tab on Org page to look like Tasks Page
+1. [11740](https://github.com/influxdata/influxdb/pull/11740): Add view button to view the telegraf config toml
+1. [11522](https://github.com/influxdata/influxdb/pull/11522): Add plugin information step to allow for config naming and configure one plugin at a time
 
 ## Bug Fixes
 1. [11678](https://github.com/influxdata/influxdb/pull/11678): Update the System Telegraf Plugin bundle to include the swap plugin

ui/src/organizations/components/CollectorList.tsx

@@ -17,6 +17,7 @@ interface Props {
   onDelete: (telegrafID: string) => void
   onUpdate: (telegraf: Telegraf) => void
   onOpenInstructions: (telegrafID: string) => void
+  onOpenTelegrafConfig: (telegrafID: string, telegrafName: string) => void
 }
 
 export default class CollectorList extends PureComponent<Props> {
@@ -45,6 +46,7 @@ export default class CollectorList extends PureComponent<Props> {
       onDelete,
       onUpdate,
       onOpenInstructions,
+      onOpenTelegrafConfig,
     } = this.props
 
     if (collectors !== undefined) {
@@ -57,6 +59,7 @@ export default class CollectorList extends PureComponent<Props> {
           onDelete={onDelete}
           onUpdate={onUpdate}
           onOpenInstructions={onOpenInstructions}
+          onOpenTelegrafConfig={onOpenTelegrafConfig}
         />
       ))
     }

ui/src/organizations/components/CollectorRow.tsx

@@ -21,6 +21,7 @@ interface Props {
   onDelete: (telegrafID: string) => void
   onUpdate: (telegraf: Telegraf) => void
   onOpenInstructions: (telegrafID: string) => void
+  onOpenTelegrafConfig: (telegrafID: string, telegrafName: string) => void
 }
 
 export default class CollectorRow extends PureComponent<Props> {
@@ -47,7 +48,13 @@ export default class CollectorRow extends PureComponent<Props> {
               <Button
                 size={ComponentSize.ExtraSmall}
                 color={ComponentColor.Secondary}
-                text={'Instructions'}
+                text={'View'}
+                onClick={this.handleOpenConfig}
+              />
+              <Button
+                size={ComponentSize.ExtraSmall}
+                color={ComponentColor.Secondary}
+                text={'Setup Details'}
                 onClick={this.handleOpenInstructions}
               />
               <ConfirmationButton
@@ -68,15 +75,24 @@ export default class CollectorRow extends PureComponent<Props> {
     onUpdate({...collector, name})
   }
 
+  private handleOpenConfig = (): void => {
+    this.props.onOpenTelegrafConfig(
+      this.props.collector.id,
+      this.props.collector.name
+    )
+  }
+
   private handleDownloadConfig = (): void => {
     this.props.onDownloadConfig(
       this.props.collector.id,
       this.props.collector.name
     )
   }
+
   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

@@ -11,6 +11,7 @@ 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 TelegrafConfigOverlay from 'src/organizations/components/TelegrafConfigOverlay'
 import {
   Button,
   ComponentColor,
@@ -42,7 +43,12 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 // Types
 import {Telegraf, Bucket} from '@influxdata/influx'
 import {OverlayState} from 'src/types/v2'
-import {setDataLoadersType} from 'src/dataLoaders/actions/dataLoaders'
+import {
+  setDataLoadersType,
+  setTelegrafConfigID,
+  setTelegrafConfigName,
+  clearDataLoaders,
+} from 'src/dataLoaders/actions/dataLoaders'
 import {DataLoaderType} from 'src/types/v2/dataLoaders'
 
 interface OwnProps {
@@ -56,6 +62,9 @@ interface OwnProps {
 interface DispatchProps {
   onSetBucketInfo: typeof setBucketInfo
   onSetDataLoadersType: typeof setDataLoadersType
+  onSetTelegrafConfigID: typeof setTelegrafConfigID
+  onSetTelegrafConfigName: typeof setTelegrafConfigName
+  onClearDataLoaders: typeof clearDataLoaders
 }
 
 type Props = OwnProps & DispatchProps
@@ -65,6 +74,7 @@ interface State {
   searchTerm: string
   instructionsOverlay: OverlayState
   collectorID?: string
+  telegrafConfig: OverlayState
 }
 
 @ErrorHandling
@@ -77,6 +87,7 @@ export class Collectors extends PureComponent<Props, State> {
       searchTerm: '',
       instructionsOverlay: OverlayState.Closed,
       collectorID: null,
+      telegrafConfig: OverlayState.Closed,
     }
   }
 
@@ -114,6 +125,7 @@ export class Collectors extends PureComponent<Props, State> {
                     onDelete={this.handleDeleteTelegraf}
                     onUpdate={this.handleUpdateTelegraf}
                     onOpenInstructions={this.handleOpenInstructions}
+                    onOpenTelegrafConfig={this.handleOpenTelegrafConfig}
                   />
                 )}
               </FilterList>
@@ -139,6 +151,10 @@ export class Collectors extends PureComponent<Props, State> {
           collector={this.selectedCollector}
           onDismiss={this.handleCloseInstructions}
         />
+        <TelegrafConfigOverlay
+          visible={this.isTelegrafConfigVisible}
+          onDismiss={this.handleCloseTelegrafConfig}
+        />
       </>
     )
   }
@@ -169,6 +185,28 @@ export class Collectors extends PureComponent<Props, State> {
     })
   }
 
+  private get isTelegrafConfigVisible(): boolean {
+    return this.state.telegrafConfig === OverlayState.Open
+  }
+
+  private handleOpenTelegrafConfig = (
+    telegrafID: string,
+    telegrafName: string
+  ): void => {
+    this.props.onSetTelegrafConfigID(telegrafID)
+    this.props.onSetTelegrafConfigName(telegrafName)
+    this.setState({
+      telegrafConfig: OverlayState.Open,
+    })
+  }
+
+  private handleCloseTelegrafConfig = (): void => {
+    this.props.onClearDataLoaders()
+    this.setState({
+      telegrafConfig: OverlayState.Closed,
+    })
+  }
+
   private get createButton(): JSX.Element {
     return (
       <Button
@@ -255,6 +293,9 @@ export class Collectors extends PureComponent<Props, State> {
 const mdtp: DispatchProps = {
   onSetBucketInfo: setBucketInfo,
   onSetDataLoadersType: setDataLoadersType,
+  onSetTelegrafConfigID: setTelegrafConfigID,
+  onSetTelegrafConfigName: setTelegrafConfigName,
+  onClearDataLoaders: clearDataLoaders,
 }
 
 export default connect<null, DispatchProps, OwnProps>(

ui/src/organizations/components/FetchTelegrafConfig.tsx

@@ -0,0 +1,65 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import _ from 'lodash'
+
+// Components
+import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+// Apis
+import {client} from 'src/utils/api'
+
+// Constants
+import {getTelegrafConfigFailed} from 'src/shared/copy/v2/notifications'
+
+// types
+import {RemoteDataState} from 'src/types'
+import {notify as notifyAction} from 'src/shared/actions/notifications'
+
+export interface Props {
+  telegrafConfigID: string
+  notify: typeof notifyAction
+  children: (telegrafConfig: string) => JSX.Element
+}
+
+interface State {
+  loading: RemoteDataState
+  telegrafConfig?: string
+}
+
+@ErrorHandling
+class FetchTelegrafConfig extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props)
+
+    this.state = {loading: RemoteDataState.NotStarted}
+  }
+
+  public async componentDidMount() {
+    const {telegrafConfigID, notify} = this.props
+
+    this.setState({loading: RemoteDataState.Loading})
+    try {
+      const telegrafConfig = await client.telegrafConfigs.getTOML(
+        telegrafConfigID
+      )
+      this.setState({telegrafConfig, loading: RemoteDataState.Done})
+    } catch (err) {
+      this.setState({loading: RemoteDataState.Error})
+      notify(getTelegrafConfigFailed())
+    }
+  }
+
+  public render() {
+    return (
+      <SpinnerContainer
+        loading={this.state.loading}
+        spinnerComponent={<TechnoSpinner />}
+      >
+        {this.props.children(this.state.telegrafConfig)}
+      </SpinnerContainer>
+    )
+  }
+}
+
+export default FetchTelegrafConfig

ui/src/organizations/components/TelegrafConfig.tsx

@@ -0,0 +1,79 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+
+// Components
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import FetchTelegrafConfig from 'src/organizations/components/FetchTelegrafConfig'
+import {Controlled as ReactCodeMirror} from 'react-codemirror2'
+
+// Actions
+import {notify as notifyAction} from 'src/shared/actions/notifications'
+
+// Types
+import {AppState} from 'src/types/v2'
+
+interface OwnProps {}
+
+interface DispatchProps {
+  notify: typeof notifyAction
+}
+
+interface StateProps {
+  telegrafConfigID: string
+}
+
+type Props = StateProps & DispatchProps & OwnProps
+
+@ErrorHandling
+export class TelegrafConfig extends PureComponent<Props> {
+  public render() {
+    const options = {
+      tabIndex: 1,
+      mode: 'toml',
+      readonly: true,
+      lineNumbers: true,
+      autoRefresh: true,
+      theme: 'time-machine',
+      completeSingle: false,
+    }
+
+    return (
+      <FetchTelegrafConfig
+        telegrafConfigID={this.props.telegrafConfigID}
+        notify={this.props.notify}
+      >
+        {telegrafConfig => (
+          <ReactCodeMirror
+            autoFocus={true}
+            autoCursor={true}
+            value={telegrafConfig}
+            options={options}
+            onBeforeChange={this.onBeforeChange}
+            onTouchStart={this.onTouchStart}
+          />
+        )}
+      </FetchTelegrafConfig>
+    )
+  }
+
+  private onBeforeChange = () => {}
+  private onTouchStart = () => {}
+}
+
+const mstp = ({
+  dataLoading: {
+    dataLoaders: {telegrafConfigID},
+  },
+}: AppState): StateProps => ({
+  telegrafConfigID,
+})
+
+const mdtp: DispatchProps = {
+  notify: notifyAction,
+}
+
+export default connect<StateProps, DispatchProps, OwnProps>(
+  mstp,
+  mdtp
+)(TelegrafConfig)

ui/src/organizations/components/TelegrafConfigOverlay.tsx

@@ -0,0 +1,52 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+
+// Components
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import WizardOverlay from 'src/clockface/components/wizard/WizardOverlay'
+import TelegrafConfig from 'src/organizations/components/TelegrafConfig'
+
+// Types
+import {AppState} from 'src/types/v2'
+
+interface OwnProps {
+  visible: boolean
+  onDismiss: () => void
+}
+
+interface StateProps {
+  telegrafConfigName: string
+}
+
+type Props = OwnProps & StateProps
+
+@ErrorHandling
+export class TelegrafConfigOverlay extends PureComponent<Props> {
+  public render() {
+    const {visible, onDismiss, telegrafConfigName} = this.props
+
+    return (
+      <WizardOverlay
+        visible={visible}
+        title={`Telegraf Configuration - ${telegrafConfigName}`}
+        onDismiss={onDismiss}
+      >
+        <TelegrafConfig />
+      </WizardOverlay>
+    )
+  }
+}
+
+const mstp = ({
+  dataLoading: {
+    dataLoaders: {telegrafConfigName},
+  },
+}: AppState): StateProps => {
+  return {telegrafConfigName}
+}
+
+export default connect<StateProps, {}, OwnProps>(
+  mstp,
+  null
+)(TelegrafConfigOverlay)