feat(ui): Add the ability to name a scraper target

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## v2.0.0-alpha.3 [unreleased]
 
 ### Features
+1. [11809](https://github.com/influxdata/influxdb/pull/11809): Add the ability to name a scraper target
 
 ### Bug Fixes
 

ui/package.json

@@ -117,7 +117,7 @@
   },
   "dependencies": {
     "@influxdata/react-custom-scrollbars": "4.3.8",
-    "@influxdata/influx": "^0.2.3",
+    "@influxdata/influx": "^0.2.5",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "bignumber.js": "^4.0.2",

ui/src/dataLoaders/actions/dataLoaders.ts

@@ -57,6 +57,7 @@ export type Action =
   | SetConfigArrayValue
   | SetScraperTargetBucket
   | SetScraperTargetURL
+  | SetScraperTargetName
   | SetScraperTargetID
   | ClearDataLoaders
   | SetTelegrafConfigName
@@ -246,6 +247,16 @@ export const setScraperTargetURL = (url: string): SetScraperTargetURL => ({
   payload: {url},
 })
 
+interface SetScraperTargetName {
+  type: 'SET_SCRAPER_TARGET_NAME'
+  payload: {name: string}
+}
+
+export const setScraperTargetName = (name: string): SetScraperTargetName => ({
+  type: 'SET_SCRAPER_TARGET_NAME',
+  payload: {name},
+})
+
 interface SetScraperTargetID {
   type: 'SET_SCRAPER_TARGET_ID'
   payload: {id: string}
@@ -426,7 +437,7 @@ export const saveScraperTarget = () => async (
   const {
     dataLoading: {
       dataLoaders: {
-        scraperTarget: {url, id},
+        scraperTarget: {url, id, name},
       },
       steps: {bucketID, orgID},
     },
@@ -437,7 +448,7 @@ export const saveScraperTarget = () => async (
       await client.scrapers.update(id, {url, bucketID})
     } else {
       const newTarget = await client.scrapers.create({
-        name: 'new target',
+        name,
         type: ScraperTargetRequest.TypeEnum.Prometheus,
         url,
         bucketID,

ui/src/dataLoaders/components/configureStep/ConfigureDataSourceSwitcher.tsx

@@ -31,8 +31,6 @@ class ConfigureDataSourceSwitcher extends PureComponent<Props> {
             <Scraping onClickNext={onClickNext} buckets={buckets} />
           </div>
         )
-      case DataLoaderType.CSV:
-        return <div>{DataLoaderType.CSV}</div>
       default:
         return <EmptyDataSourceState />
     }

ui/src/dataLoaders/components/configureStep/ScraperTarget.test.tsx

@@ -0,0 +1,54 @@
+// Libraries
+import React from 'react'
+import {shallow} from 'enzyme'
+
+// Components
+import {ScraperTarget} from 'src/dataLoaders/components/configureStep/ScraperTarget'
+
+const setup = (override = {}) => {
+  const props = {
+    bucket: '',
+    buckets: [],
+    onSelectBucket: jest.fn(),
+    onChangeURL: jest.fn(),
+    onChangeName: jest.fn(),
+    url: '',
+    name: '',
+    ...override,
+  }
+  const wrapper = shallow(<ScraperTarget {...props} />)
+
+  return {wrapper}
+}
+
+describe('ScraperTarget', () => {
+  describe('rendering', () => {
+    it('renders correctly with no bucket, url, name', () => {
+      const {wrapper} = setup()
+      expect(wrapper.exists()).toBe(true)
+
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('renders correctly with bucket', () => {
+      const {wrapper} = setup({bucket: 'defbuck'})
+      expect(wrapper.exists()).toBe(true)
+
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('renders correctly with url', () => {
+      const {wrapper} = setup({url: 'http://url.com'})
+      expect(wrapper.exists()).toBe(true)
+
+      expect(wrapper).toMatchSnapshot()
+    })
+
+    it('renders correctly with name', () => {
+      const {wrapper} = setup({name: 'MyScraper'})
+      expect(wrapper.exists()).toBe(true)
+
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+})

ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx

@@ -19,7 +19,9 @@ interface Props {
   buckets: Bucket[]
   onSelectBucket: (bucket: Bucket) => void
   onChangeURL: (value: string) => void
+  onChangeName: (value: string) => void
   url: string
+  name: string
 }
 
 export class ScraperTarget extends PureComponent<Props> {
@@ -28,11 +30,25 @@ export class ScraperTarget extends PureComponent<Props> {
   }
 
   public render() {
-    const {onSelectBucket, url, bucket, buckets} = this.props
+    const {onSelectBucket, url, name, bucket, buckets} = this.props
     return (
       <Grid>
         <Grid.Row>
           <Grid.Column widthXS={Columns.Eight} offsetXS={Columns.Two}>
+            <Form.Element
+              label="Name"
+              errorMessage={this.nameEmpty && 'Target name is empty'}
+            >
+              <Input
+                type={InputType.Text}
+                value={name}
+                onChange={this.handleChangeName}
+                titleText="Name"
+                size={ComponentSize.Medium}
+                autoFocus={true}
+                status={this.nameStatus}
+              />
+            </Form.Element>
             <Form.Element label="Bucket">
               <BucketDropdown
                 selected={bucket}
@@ -44,15 +60,14 @@ export class ScraperTarget extends PureComponent<Props> {
           <Grid.Column widthXS={Columns.Eight} offsetXS={Columns.Two}>
             <Form.Element
               label="Target URL"
-              errorMessage={this.urlEmpty && 'target URL is empty'}
+              errorMessage={this.urlEmpty && 'Target URL is empty'}
             >
               <Input
                 type={InputType.Text}
                 value={url}
                 onChange={this.handleChangeURL}
                 titleText="Target URL"
                 size={ComponentSize.Medium}
-                autoFocus={true}
                 status={this.urlStatus}
               />
             </Form.Element>
@@ -73,10 +88,25 @@ export class ScraperTarget extends PureComponent<Props> {
     return !this.props.url
   }
 
+  private get nameStatus(): ComponentStatus {
+    if (this.nameEmpty) {
+      return ComponentStatus.Error
+    }
+    return ComponentStatus.Default
+  }
+  private get nameEmpty(): boolean {
+    return !this.props.name
+  }
+
   private handleChangeURL = (e: ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value
     this.props.onChangeURL(value)
   }
+
+  private handleChangeName = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    this.props.onChangeName(value)
+  }
 }
 
 export default ScraperTarget

ui/src/dataLoaders/components/configureStep/Scraping.tsx

@@ -13,6 +13,7 @@ import ScraperTarget from 'src/dataLoaders/components/configureStep/ScraperTarge
 import {
   setScraperTargetBucket,
   setScraperTargetURL,
+  setScraperTargetName,
   saveScraperTarget,
 } from 'src/dataLoaders/actions/dataLoaders'
 import {setBucketInfo} from 'src/dataLoaders/actions/steps'
@@ -29,6 +30,7 @@ interface OwnProps {
 interface DispatchProps {
   onSetScraperTargetBucket: typeof setScraperTargetBucket
   onSetScraperTargetURL: typeof setScraperTargetURL
+  onSetScraperTargetName: typeof setScraperTargetName
   onSaveScraperTarget: typeof saveScraperTarget
   onSetBucketInfo: typeof setBucketInfo
 }
@@ -37,6 +39,7 @@ interface StateProps {
   scraperBucket: string
   url: string
   currentBucket: string
+  name: string
 }
 
 type Props = OwnProps & DispatchProps & StateProps
@@ -56,7 +59,14 @@ export class Scraping extends PureComponent<Props> {
   }
 
   public render() {
-    const {scraperBucket, onSetScraperTargetURL, url, buckets} = this.props
+    const {
+      scraperBucket,
+      onSetScraperTargetURL,
+      onSetScraperTargetName,
+      url,
+      buckets,
+      name,
+    } = this.props
 
     return (
       <Form onSubmit={this.handleSubmit}>
@@ -73,7 +83,9 @@ export class Scraping extends PureComponent<Props> {
                 buckets={buckets}
                 onSelectBucket={this.handleSelectBucket}
                 onChangeURL={onSetScraperTargetURL}
+                onChangeName={onSetScraperTargetName}
                 url={url}
+                name={name}
               />
             </div>
           </FancyScrollbar>
@@ -97,7 +109,8 @@ export class Scraping extends PureComponent<Props> {
 
   private get nextButtonStatus(): ComponentStatus {
     if (
-      this.props.url === '' ||
+      !this.props.url ||
+      !this.props.name ||
       !this.props.buckets ||
       !this.props.buckets.length
     ) {
@@ -123,6 +136,7 @@ const mstp = ({
     currentBucket: bucket,
     scraperBucket: scraperTarget.bucket,
     url: scraperTarget.url,
+    name: scraperTarget.name,
   }
 }
 
@@ -131,6 +145,7 @@ const mdtp: DispatchProps = {
   onSetScraperTargetURL: setScraperTargetURL,
   onSaveScraperTarget: saveScraperTarget,
   onSetBucketInfo: setBucketInfo,
+  onSetScraperTargetName: setScraperTargetName,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(