fix(ui): fixed telegraf bugs

ui/src/dataLoaders/actions/dataLoaders.ts

@@ -6,16 +6,19 @@ import {normalize} from 'normalizr'
 import {client} from 'src/utils/api'
 import {ScraperTargetRequest, PermissionResource} from '@influxdata/influx'
 import {createAuthorization} from 'src/authorizations/apis'
-import {postWrite as apiPostWrite, postLabel as apiPostLabel} from 'src/client'
+import {postWrite as apiPostWrite} from 'src/client'
 
 // Schemas
 import {authSchema} from 'src/schemas'
 import {telegrafSchema} from 'src/schemas/telegrafs'
 
 // Utils
 import {createNewPlugin} from 'src/dataLoaders/utils/pluginConfigs'
-import {addLabelDefaults} from 'src/labels/utils'
-import {getDataLoaders, getSteps} from 'src/dataLoaders/selectors'
+import {
+  getBucketByName,
+  getDataLoaders,
+  getSteps,
+} from 'src/dataLoaders/selectors'
 import {getOrg} from 'src/organizations/selectors'
 
 // Constants
@@ -37,13 +40,11 @@ import {
 import {
   GetState,
   RemoteDataState,
-  LabelProperties,
   Authorization,
   AuthEntities,
   TelegrafEntities,
   Telegraf,
 } from 'src/types'
-import {ILabel} from '@influxdata/influx'
 import {
   WritePrecision,
   TelegrafRequest,
@@ -401,6 +402,55 @@ export const createOrUpdateTelegrafConfigAsync = () => async (
   createTelegraf(dispatch, getState, plugins)
 }
 
+export const generateTelegrafToken = (configID: string) => async (
+  dispatch,
+  getState: GetState
+) => {
+  try {
+    const state = getState()
+    const org = getOrg(state)
+    const telegraf = get(state, `resources.telegrafs.byID.${configID}`, '')
+    const bucketName = get(telegraf, 'metadata.buckets[0]', '')
+    const bucket = getBucketByName(state, bucketName)
+
+    const permissions = [
+      {
+        action: Permission.ActionEnum.Write,
+        resource: {
+          type: PermissionResource.TypeEnum.Buckets,
+          id: bucket.id,
+          orgID: org.id,
+        },
+      },
+      {
+        action: Permission.ActionEnum.Read,
+        resource: {
+          type: PermissionResource.TypeEnum.Telegrafs,
+          id: configID,
+          orgID: org.id,
+        },
+      },
+    ]
+
+    const token = {
+      name: `${telegraf.name} token`,
+      orgID: org.id,
+      description: `WRITE ${bucketName} bucket / READ ${
+        telegraf.name
+      } telegraf config`,
+      permissions,
+    }
+
+    // create token
+    const createdToken = await createAuthorization(token)
+
+    // add token to data loader state
+    dispatch(setToken(createdToken.token))
+  } catch (error) {
+    console.error('error: ', error)
+  }
+}
+
 const createTelegraf = async (dispatch, getState: GetState, plugins) => {
   try {
     const state = getState()
@@ -447,6 +497,8 @@ const createTelegraf = async (dispatch, getState: GetState, plugins) => {
       permissions,
     }
 
+    console.log('token on create: ', token)
+
     // create token
     const createdToken = await createAuthorization(token)
 
@@ -461,40 +513,8 @@ const createTelegraf = async (dispatch, getState: GetState, plugins) => {
     // add token to authorizations state
     dispatch(addAuthorization(normAuth))
 
-    // create token label
-    const properties = {
-      color: '#FFFFFF',
-      description: `token for telegraf config: ${telegrafConfigName}`,
-      tokenID: createdToken.id,
-    } as LabelProperties // hack to make compiler work
-
-    const resp = await apiPostLabel({
-      data: {
-        orgID: org.id,
-        name: `@influxdata.token-${new Date().getTime()}`, // fix for https://github.com/influxdata/influxdb/issues/15730
-        properties,
-      },
-    })
-
-    if (resp.status !== 201) {
-      throw new Error(resp.data.message)
-    }
-
-    const createdLabel = addLabelDefaults(resp.data.label)
-
-    // add label to telegraf config
-    const label = await client.telegrafConfigs.addLabel(
-      tc.id,
-      createdLabel as ILabel
-    )
-
-    const config = {
-      ...tc,
-      labels: [label],
-    }
-
     const normTelegraf = normalize<Telegraf, TelegrafEntities, string>(
-      config,
+      tc,
       telegrafSchema
     )
 

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

@@ -1,12 +1,14 @@
 // Libraries
 import React, {PureComponent} from 'react'
+import {Alert, ComponentColor, IconFont} from '@influxdata/clockface'
 import _ from 'lodash'
 
 // Decorator
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Components
 import CodeSnippet from 'src/shared/components/CodeSnippet'
+import TokenCodeSnippet from 'src/shared/components/TokenCodeSnippet'
 
 export interface Props {
   token: string
@@ -17,7 +19,6 @@ export interface Props {
 class TelegrafInstructions extends PureComponent<Props> {
   public render() {
     const {token, configID} = this.props
-    const exportToken = `export INFLUX_TOKEN=${token || ''}`
     const configScript = `telegraf --config ${
       this.origin
     }/api/v2/telegrafs/${configID || ''}`
@@ -42,7 +43,13 @@ class TelegrafInstructions extends PureComponent<Props> {
           copy the following command to your terminal window to set an
           environment variable with your token.
         </p>
-        <CodeSnippet copyText={exportToken} label="CLI" />
+        {token && (
+          <Alert icon={IconFont.AlertTriangle} color={ComponentColor.Primary}>
+            Make sure to copy your new personal access token now. You won’t be
+            able to see it again!
+          </Alert>
+        )}
+        <TokenCodeSnippet copyText={token} configID={configID} label="CLI" />
         <h6>3. Start Telegraf</h6>
         <p>
           Finally, you can run the following command to start the Telegraf agent

ui/src/dataLoaders/selectors/index.ts

@@ -1,4 +1,7 @@
-import {AppState} from 'src/types'
+// Libraries
+import {filter} from 'lodash'
+// Types
+import {AppState, Bucket} from 'src/types'
 
 export const getDataLoaders = (state: AppState) => {
   return state.dataLoading.dataLoaders
@@ -7,3 +10,14 @@ export const getDataLoaders = (state: AppState) => {
 export const getSteps = (state: AppState) => {
   return state.dataLoading.steps
 }
+
+export const getBucketByName = (
+  state: AppState,
+  bucketName: string
+): Bucket => {
+  const buckets = state.resources.buckets.byID
+  const [bucket] = filter(buckets, b => {
+    return b.name === bucketName
+  })
+  return bucket
+}

ui/src/resources/selectors/index.ts

@@ -20,6 +20,9 @@ export const getAll = <R>(
   return allIDs.map(id => byID[id])
 }
 
+export const getToken = (state: AppState): string =>
+  get(state, 'dataLoading.dataLoaders.token', '') || ''
+
 export const getByID = <R>(
   {resources}: AppState,
   type: ResourceType,

ui/src/shared/components/CodeSnippet.scss

@@ -34,6 +34,10 @@
   }
 }
 
+.new-token--btn {
+  margin: $ix-marg-a $ix-marg-c;
+}
+
 .code-snippet--footer {
   background-color: rgba($g4-onyx, 0.5);
   display: flex;

ui/src/shared/components/TokenCodeSnippet.tsx

@@ -0,0 +1,100 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+import {
+  Button,
+  ComponentColor,
+  ComponentSize,
+  ComponentStatus,
+  IconFont,
+} from '@influxdata/clockface'
+
+// Decorator
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import {Notification} from 'src/types'
+
+// Components
+import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
+import CopyButton from 'src/shared/components/CopyButton'
+
+// Actions
+import {generateTelegrafToken} from 'src/dataLoaders/actions/dataLoaders'
+
+export interface Props {
+  configID: string
+  copyText: string
+  onCopyText?: (text: string, status: boolean) => Notification
+  testID?: string
+  label: string
+}
+
+interface DispatchProps {
+  onGenerateTelegrafToken: typeof generateTelegrafToken
+}
+
+@ErrorHandling
+class TokenCodeSnippet extends PureComponent<Props & DispatchProps> {
+  public static defaultProps = {
+    label: 'Code Snippet',
+  }
+
+  public handleRefreshClick = () => {
+    const {configID, onGenerateTelegrafToken} = this.props
+    onGenerateTelegrafToken(configID)
+  }
+
+  public render() {
+    const {copyText, label, onCopyText} = this.props
+    const testID = this.props.testID || 'code-snippet'
+
+    return (
+      <div className="code-snippet" data-testid={testID}>
+        <FancyScrollbar
+          autoHide={false}
+          autoHeight={true}
+          maxHeight={400}
+          className="code-snippet--scroll"
+        >
+          <div className="code-snippet--text">
+            <pre>
+              export INFLUX_TOKEN=<i>{copyText || '<INFLUX_TOKEN>'}</i>
+            </pre>
+          </div>
+        </FancyScrollbar>
+        <div className="code-snippet--footer">
+          <div>
+            <CopyButton
+              textToCopy={copyText}
+              onCopyText={onCopyText}
+              contentName="Script"
+            />
+            <Button
+              size={ComponentSize.ExtraSmall}
+              status={
+                copyText === ''
+                  ? ComponentStatus.Default
+                  : ComponentStatus.Disabled
+              }
+              text="Generate New Token"
+              titleText="Generate New Token"
+              icon={IconFont.Refresh}
+              color={ComponentColor.Success}
+              onClick={this.handleRefreshClick}
+              className="new-token--btn"
+            />
+          </div>
+          <label className="code-snippet--label">{label}</label>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mdtp: DispatchProps = {
+  onGenerateTelegrafToken: generateTelegrafToken,
+}
+
+export default connect<{}, DispatchProps>(
+  null,
+  mdtp
+)(TokenCodeSnippet)