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-lock.json

@@ -829,9 +829,9 @@
       "dev": true
     },
     "@influxdata/influx": {
-      "version": "0.2.3",
+      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/@influxdata/influx/-/influx-0.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@influxdata/influx/-/influx-0.2.5.tgz",
-      "integrity": "sha512-XZtvebkRwurLnXVkf5+M29uQqq67ZivXKCgY7gvT1nZKres7hvPRSgFGyNeXnZf680orH/9diWp6WrzLDPdhkg==",
+      "integrity": "sha512-K5arbttAaGIC3iuW5OcJxmy8+qtLRD9pfIoS7NtbN7PUL+NDIzIK7tMrUcvAIPPBREDc4W/lNuicoy79ukMhkw==",
       "requires": {
         "axios": "^0.18.0"
       }

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/Scraper.test.tsx

@@ -1,31 +0,0 @@
-// 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(),
-    url: '',
-    ...override,
-  }
-  const wrapper = shallow(<ScraperTarget {...props} />)
-
-  return {wrapper}
-}
-
-describe('ScraperTarget', () => {
-  describe('rendering', () => {
-    it('renders!', () => {
-      const {wrapper} = setup()
-      expect(wrapper.exists()).toBe(true)
-
-      expect(wrapper).toMatchSnapshot()
-    })
-  })
-})

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,7 +60,7 @@ 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}
@@ -52,7 +68,6 @@ export class ScraperTarget extends PureComponent<Props> {
                 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>(

ui/src/dataLoaders/components/configureStep/__snapshots__/Scraper.test.tsx.snap

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ScraperTarget rendering renders! 1`] = `
-<Grid>
-  <GridRow>
-    <GridColumn
-      offsetXS={2}
-      widthXS={8}
-    >
-      <FormElement
-        label="Bucket"
-      >
-        <BucketsDropdown
-          buckets={Array []}
-          onSelectBucket={[MockFunction]}
-          selected=""
-        />
-      </FormElement>
-    </GridColumn>
-    <GridColumn
-      offsetXS={2}
-      widthXS={8}
-    >
-      <FormElement
-        errorMessage="target URL is empty"
-        label="Target URL"
-      >
-        <Input
-          autoFocus={true}
-          autocomplete="off"
-          disabledTitleText="This input is disabled"
-          name=""
-          onChange={[Function]}
-          placeholder=""
-          size="md"
-          spellCheck={false}
-          status="error"
-          titleText="Target URL"
-          type="text"
-          value=""
-        />
-      </FormElement>
-    </GridColumn>
-  </GridRow>
-</Grid>
-`;

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

@@ -0,0 +1,257 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScraperTarget rendering renders correctly with bucket 1`] = `
+<Grid>
+  <GridRow>
+    <GridColumn
+      offsetXS={2}
+      widthXS={8}
+    >
+      <FormElement
+        errorMessage="Target name is empty"
+        label="Name"
+      >
+        <Input
+          autoFocus={true}
+          autocomplete="off"
+          disabledTitleText="This input is disabled"
+          name=""
+          onChange={[Function]}
+          placeholder=""
+          size="md"
+          spellCheck={false}
+          status="error"
+          titleText="Name"
+          type="text"
+          value=""
+        />
+      </FormElement>
+      <FormElement
+        label="Bucket"
+      >
+        <BucketsDropdown
+          buckets={Array []}
+          onSelectBucket={[MockFunction]}
+          selected="defbuck"
+        />
+      </FormElement>
+    </GridColumn>
+    <GridColumn
+      offsetXS={2}
+      widthXS={8}
+    >
+      <FormElement
+        errorMessage="Target URL is empty"
+        label="Target URL"
+      >
+        <Input
+          autoFocus={false}
+          autocomplete="off"
+          disabledTitleText="This input is disabled"
+          name=""
+          onChange={[Function]}
+          placeholder=""
+          size="md"
+          spellCheck={false}
+          status="error"
+          titleText="Target URL"
+          type="text"
+          value=""
+        />
+      </FormElement>
+    </GridColumn>
+  </GridRow>
+</Grid>
+`;
+
+exports[`ScraperTarget rendering renders correctly with name 1`] = `
+<Grid>
+  <GridRow>
+    <GridColumn
+      offsetXS={2}
+      widthXS={8}
+    >
+      <FormElement
+        errorMessage={false}
+        label="Name"
+      >
+        <Input
+          autoFocus={true}
+          autocomplete="off"
+          disabledTitleText="This input is disabled"
+          name=""
+          onChange={[Function]}
+          placeholder=""
+          size="md"
+          spellCheck={false}
+          status="default"
+          titleText="Name"
+          type="text"
+          value="MyScraper"
+        />
+      </FormElement>
+      <FormElement
+        label="Bucket"
+      >
+        <BucketsDropdown
+          buckets={Array []}
+          onSelectBucket={[MockFunction]}
+          selected=""
+        />
+      </FormElement>
+    </GridColumn>
+    <GridColumn
+      offsetXS={2}
+      widthXS={8}
+    >
+      <FormElement
+        errorMessage="Target URL is empty"
+        label="Target URL"
+      >
+        <Input
+          autoFocus={false}
+          autocomplete="off"
+          disabledTitleText="This input is disabled"
+          name=""
+          onChange={[Function]}
+          placeholder=""
+          size="md"
+          spellCheck={false}
+          status="error"
+          titleText="Target URL"
+          type="text"
+          value=""
+        />
+      </FormElement>
+    </GridColumn>
+  </GridRow>
+</Grid>
+`;
+
+exports[`ScraperTarget rendering renders correctly with no bucket, url, name 1`] = `
+<Grid>
+  <GridRow>
+    <GridColumn
+      offsetXS={2}
+      widthXS={8}
+    >
+      <FormElement
+        errorMessage="Target name is empty"
+        label="Name"
+      >
+        <Input
+          autoFocus={true}
+          autocomplete="off"
+          disabledTitleText="This input is disabled"
+          name=""
+          onChange={[Function]}
+          placeholder=""
+          size="md"
+          spellCheck={false}
+          status="error"
+          titleText="Name"
+          type="text"
+          value=""
+        />
+      </FormElement>
+      <FormElement
+        label="Bucket"
+      >
+        <BucketsDropdown
+          buckets={Array []}
+          onSelectBucket={[MockFunction]}
+          selected=""
+        />
+      </FormElement>
+    </GridColumn>
+    <GridColumn
+      offsetXS={2}
+      widthXS={8}
+    >
+      <FormElement
+        errorMessage="Target URL is empty"
+        label="Target URL"
+      >
+        <Input
+          autoFocus={false}
+          autocomplete="off"
+          disabledTitleText="This input is disabled"
+          name=""
+          onChange={[Function]}
+          placeholder=""
+          size="md"
+          spellCheck={false}
+          status="error"
+          titleText="Target URL"
+          type="text"
+          value=""
+        />
+      </FormElement>
+    </GridColumn>
+  </GridRow>
+</Grid>
+`;
+
+exports[`ScraperTarget rendering renders correctly with url 1`] = `
+<Grid>
+  <GridRow>
+    <GridColumn
+      offsetXS={2}
+      widthXS={8}
+    >
+      <FormElement
+        errorMessage="Target name is empty"
+        label="Name"
+      >
+        <Input
+          autoFocus={true}
+          autocomplete="off"
+          disabledTitleText="This input is disabled"
+          name=""
+          onChange={[Function]}
+          placeholder=""
+          size="md"
+          spellCheck={false}
+          status="error"
+          titleText="Name"
+          type="text"
+          value=""
+        />
+      </FormElement>
+      <FormElement
+        label="Bucket"
+      >
+        <BucketsDropdown
+          buckets={Array []}
+          onSelectBucket={[MockFunction]}
+          selected=""
+        />
+      </FormElement>
+    </GridColumn>
+    <GridColumn
+      offsetXS={2}
+      widthXS={8}
+    >
+      <FormElement
+        errorMessage={false}
+        label="Target URL"
+      >
+        <Input
+          autoFocus={false}
+          autocomplete="off"
+          disabledTitleText="This input is disabled"
+          name=""
+          onChange={[Function]}
+          placeholder=""
+          size="md"
+          spellCheck={false}
+          status="default"
+          titleText="Target URL"
+          type="text"
+          value="http://url.com"
+        />
+      </FormElement>
+    </GridColumn>
+  </GridRow>
+</Grid>
+`;

ui/src/dataLoaders/reducers/dataLoaders.test.ts

@@ -23,6 +23,7 @@ import {
   setScraperTargetURL,
   setScraperTargetID,
   setTelegrafConfigName,
+  setScraperTargetName,
 } from 'src/dataLoaders/actions/dataLoaders'
 
 // Mock Data
@@ -428,7 +429,11 @@ describe('dataLoader reducer', () => {
 
     const expected = {
       ...INITIAL_STATE,
-      scraperTarget: {bucket: 'a', url: QUICKSTART_SCRAPER_TARGET_URL},
+      scraperTarget: {
+        bucket: 'a',
+        url: QUICKSTART_SCRAPER_TARGET_URL,
+        name: 'Name this Scraper Target',
+      },
     }
 
     expect(actual).toEqual(expected)
@@ -438,32 +443,50 @@ describe('dataLoader reducer', () => {
     const actual = dataLoadersReducer(
       {
         ...INITIAL_STATE,
-        scraperTarget: {bucket: '', url: ''},
+        scraperTarget: {bucket: '', url: '', name: ''},
       },
       setScraperTargetURL('http://googledoodle.com')
     )
 
     const expected = {
       ...INITIAL_STATE,
-      scraperTarget: {bucket: '', url: 'http://googledoodle.com'},
+      scraperTarget: {bucket: '', url: 'http://googledoodle.com', name: ''},
     }
 
     expect(actual).toEqual(expected)
   })
 
-  it('can set scraperTarget url', () => {
+  it('can set scraperTarget id', () => {
     const id = '12345678'
     const actual = dataLoadersReducer(
       {
         ...INITIAL_STATE,
-        scraperTarget: {bucket: '', url: ''},
+        scraperTarget: {bucket: '', url: '', name: ''},
       },
       setScraperTargetID(id)
     )
 
     const expected = {
       ...INITIAL_STATE,
-      scraperTarget: {bucket: '', url: '', id},
+      scraperTarget: {bucket: '', url: '', name: '', id},
+    }
+
+    expect(actual).toEqual(expected)
+  })
+
+  it('can set scraperTarget name', () => {
+    const name = 'MyTarget'
+    const actual = dataLoadersReducer(
+      {
+        ...INITIAL_STATE,
+        scraperTarget: {bucket: '', url: '', name: ''},
+      },
+      setScraperTargetName(name)
+    )
+
+    const expected = {
+      ...INITIAL_STATE,
+      scraperTarget: {bucket: '', url: '', name},
     }
 
     expect(actual).toEqual(expected)

ui/src/dataLoaders/reducers/dataLoaders.ts

@@ -35,7 +35,11 @@ export const INITIAL_STATE: DataLoadersState = {
   precision: WritePrecision.Ns,
   telegrafConfigID: null,
   pluginBundles: [],
-  scraperTarget: {bucket: '', url: QUICKSTART_SCRAPER_TARGET_URL},
+  scraperTarget: {
+    bucket: '',
+    url: QUICKSTART_SCRAPER_TARGET_URL,
+    name: 'Name this Scraper Target',
+  },
   telegrafConfigName: 'Name this Configuration',
 }
 
@@ -270,6 +274,12 @@ export default (state = INITIAL_STATE, action: Action): DataLoadersState => {
         ...state,
         telegrafConfigName: action.payload.name,
       }
+    case 'SET_SCRAPER_TARGET_NAME':
+      const {name} = action.payload
+      return {
+        ...state,
+        scraperTarget: {...state.scraperTarget, name},
+      }
     case 'SET_SCRAPER_TARGET_BUCKET':
       const {bucket} = action.payload
       return {

ui/src/types/v2/dataLoaders.ts

@@ -55,6 +55,7 @@ export enum LineProtocolStep {
 interface ScraperTarget {
   bucket: string
   url: string
+  name: string
   id?: string
 }