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

influxdata · Feb 12, 2019 · e0ab676 · e0ab676
1 parent 0213db3
commit e0ab676
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 19 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/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",

diff --git a/ui/src/dataLoaders/actions/dataLoaders.ts b/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,

diff --git a/ui/src/dataLoaders/components/configureStep/ConfigureDataSourceSwitcher.tsx b/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 />
     }

diff --git a/ui/src/dataLoaders/components/configureStep/Scraper.test.tsx b/ui/src/dataLoaders/components/configureStep/Scraper.test.tsx
@@ -11,7 +11,9 @@ const setup = (override = {}) => {
     buckets: [],
     onSelectBucket: jest.fn(),
     onChangeURL: jest.fn(),
+    onChangeName: jest.fn(),
     url: '',
+    name: '',
     ...override,
   }
   const wrapper = shallow(<ScraperTarget {...props} />)

diff --git a/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx b/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,21 @@ 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">
+              <Input
+                type={InputType.Text}
+                value={name}
+                onChange={this.handleChangeName}
+                titleText="Name"
+                size={ComponentSize.Medium}
+                autoFocus={true}
+              />
+            </Form.Element>
             <Form.Element label="Bucket">
               <BucketDropdown
                 selected={bucket}
@@ -52,7 +64,6 @@ export class ScraperTarget extends PureComponent<Props> {
                 onChange={this.handleChangeURL}
                 titleText="Target URL"
                 size={ComponentSize.Medium}
-                autoFocus={true}
                 status={this.urlStatus}
               />
             </Form.Element>
@@ -77,6 +88,11 @@ export class ScraperTarget extends PureComponent<Props> {
     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
diff --git a/ui/src/dataLoaders/components/configureStep/Scraping.tsx b/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>
@@ -123,6 +135,7 @@ const mstp = ({
     currentBucket: bucket,
     scraperBucket: scraperTarget.bucket,
     url: scraperTarget.url,
+    name: scraperTarget.name,
   }
 }
 
@@ -131,6 +144,7 @@ const mdtp: DispatchProps = {
   onSetScraperTargetURL: setScraperTargetURL,
   onSaveScraperTarget: saveScraperTarget,
   onSetBucketInfo: setBucketInfo,
+  onSetScraperTargetName: setScraperTargetName,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(

diff --git a/ui/src/dataLoaders/components/configureStep/__snapshots__/Scraper.test.tsx.snap b/ui/src/dataLoaders/components/configureStep/__snapshots__/Scraper.test.tsx.snap
@@ -7,6 +7,24 @@ exports[`ScraperTarget rendering renders! 1`] = `
       offsetXS={2}
       widthXS={8}
     >
+      <FormElement
+        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=""
+        />
+      </FormElement>
       <FormElement
         label="Bucket"
       >
@@ -26,7 +44,7 @@ exports[`ScraperTarget rendering renders! 1`] = `
         label="Target URL"
       >
         <Input
-          autoFocus={true}
+          autoFocus={false}
           autocomplete="off"
           disabledTitleText="This input is disabled"
           name=""

diff --git a/ui/src/dataLoaders/reducers/dataLoaders.test.ts b/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: '',
+      },
     }
 
     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)

diff --git a/ui/src/dataLoaders/reducers/dataLoaders.ts b/ui/src/dataLoaders/reducers/dataLoaders.ts
@@ -35,7 +35,7 @@ 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: ''},
   telegrafConfigName: 'Name this Configuration',
 }
 
@@ -270,6 +270,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 {

diff --git a/ui/src/types/v2/dataLoaders.ts b/ui/src/types/v2/dataLoaders.ts
@@ -55,6 +55,7 @@ export enum LineProtocolStep {
 interface ScraperTarget {
   bucket: string
   url: string
+  name: string
   id?: string
 }