From e04e721bf5f14b54f87b598d402c6dff33bb558a Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Mon, 11 Feb 2019 16:04:37 -0800 Subject: [PATCH] feat(ui): Add the ability to name a scraper target --- CHANGELOG.md | 1 + ui/package-lock.json | 6 +- ui/package.json | 2 +- ui/src/dataLoaders/actions/dataLoaders.ts | 15 +- .../ConfigureDataSourceSwitcher.tsx | 2 - .../components/configureStep/Scraper.test.tsx | 31 --- .../configureStep/ScraperTarget.test.tsx | 54 ++++ .../configureStep/ScraperTarget.tsx | 36 ++- .../components/configureStep/Scraping.tsx | 19 +- .../__snapshots__/Scraper.test.tsx.snap | 46 ---- .../__snapshots__/ScraperTarget.test.tsx.snap | 257 ++++++++++++++++++ .../dataLoaders/reducers/dataLoaders.test.ts | 35 ++- ui/src/dataLoaders/reducers/dataLoaders.ts | 12 +- ui/src/types/v2/dataLoaders.ts | 1 + 14 files changed, 420 insertions(+), 97 deletions(-) delete mode 100644 ui/src/dataLoaders/components/configureStep/Scraper.test.tsx create mode 100644 ui/src/dataLoaders/components/configureStep/ScraperTarget.test.tsx delete mode 100644 ui/src/dataLoaders/components/configureStep/__snapshots__/Scraper.test.tsx.snap create mode 100644 ui/src/dataLoaders/components/configureStep/__snapshots__/ScraperTarget.test.tsx.snap diff --git a/CHANGELOG.md b/CHANGELOG.md index 3b17cc450ae..cde6619940d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/ui/package-lock.json b/ui/package-lock.json index b495b6e75fc..a294037e598 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -829,9 +829,9 @@ "dev": true }, "@influxdata/influx": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@influxdata/influx/-/influx-0.2.3.tgz", - "integrity": "sha512-XZtvebkRwurLnXVkf5+M29uQqq67ZivXKCgY7gvT1nZKres7hvPRSgFGyNeXnZf680orH/9diWp6WrzLDPdhkg==", + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@influxdata/influx/-/influx-0.2.5.tgz", + "integrity": "sha512-K5arbttAaGIC3iuW5OcJxmy8+qtLRD9pfIoS7NtbN7PUL+NDIzIK7tMrUcvAIPPBREDc4W/lNuicoy79ukMhkw==", "requires": { "axios": "^0.18.0" } diff --git a/ui/package.json b/ui/package.json index 15574a958b1..7b357642b7e 100644 --- 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 index 9b3b22f26f6..e9e66ceb4ee 100644 --- 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 index a75f75e0248..7e12e1ae4d3 100644 --- a/ui/src/dataLoaders/components/configureStep/ConfigureDataSourceSwitcher.tsx +++ b/ui/src/dataLoaders/components/configureStep/ConfigureDataSourceSwitcher.tsx @@ -31,8 +31,6 @@ class ConfigureDataSourceSwitcher extends PureComponent { ) - case DataLoaderType.CSV: - return
{DataLoaderType.CSV}
default: return } diff --git a/ui/src/dataLoaders/components/configureStep/Scraper.test.tsx b/ui/src/dataLoaders/components/configureStep/Scraper.test.tsx deleted file mode 100644 index d7bdb973dca..00000000000 --- a/ui/src/dataLoaders/components/configureStep/Scraper.test.tsx +++ /dev/null @@ -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() - - return {wrapper} -} - -describe('ScraperTarget', () => { - describe('rendering', () => { - it('renders!', () => { - const {wrapper} = setup() - expect(wrapper.exists()).toBe(true) - - expect(wrapper).toMatchSnapshot() - }) - }) -}) diff --git a/ui/src/dataLoaders/components/configureStep/ScraperTarget.test.tsx b/ui/src/dataLoaders/components/configureStep/ScraperTarget.test.tsx new file mode 100644 index 00000000000..59bfc0960e8 --- /dev/null +++ b/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() + + 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() + }) + }) +}) diff --git a/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx b/ui/src/dataLoaders/components/configureStep/ScraperTarget.tsx index 91fae6d0517..0c71b7bd3c5 100644 --- 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 { @@ -28,11 +30,25 @@ export class ScraperTarget extends PureComponent { } public render() { - const {onSelectBucket, url, bucket, buckets} = this.props + const {onSelectBucket, url, name, bucket, buckets} = this.props return ( + + + { { onChange={this.handleChangeURL} titleText="Target URL" size={ComponentSize.Medium} - autoFocus={true} status={this.urlStatus} /> @@ -73,10 +88,25 @@ export class ScraperTarget extends PureComponent { 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) => { const value = e.target.value this.props.onChangeURL(value) } + + private handleChangeName = (e: ChangeEvent) => { + 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 index c11b78c8bfa..0027612a745 100644 --- 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 { } public render() { - const {scraperBucket, onSetScraperTargetURL, url, buckets} = this.props + const { + scraperBucket, + onSetScraperTargetURL, + onSetScraperTargetName, + url, + buckets, + name, + } = this.props return (
@@ -73,7 +83,9 @@ export class Scraping extends PureComponent { buckets={buckets} onSelectBucket={this.handleSelectBucket} onChangeURL={onSetScraperTargetURL} + onChangeName={onSetScraperTargetName} url={url} + name={name} /> @@ -97,7 +109,8 @@ export class Scraping extends PureComponent { 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( diff --git a/ui/src/dataLoaders/components/configureStep/__snapshots__/Scraper.test.tsx.snap b/ui/src/dataLoaders/components/configureStep/__snapshots__/Scraper.test.tsx.snap deleted file mode 100644 index d6d6bc84ec6..00000000000 --- a/ui/src/dataLoaders/components/configureStep/__snapshots__/Scraper.test.tsx.snap +++ /dev/null @@ -1,46 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ScraperTarget rendering renders! 1`] = ` - - - - - - - - - - - - - - -`; diff --git a/ui/src/dataLoaders/components/configureStep/__snapshots__/ScraperTarget.test.tsx.snap b/ui/src/dataLoaders/components/configureStep/__snapshots__/ScraperTarget.test.tsx.snap new file mode 100644 index 00000000000..a930384caa7 --- /dev/null +++ b/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`] = ` + + + + + + + + + + + + + + + + + +`; + +exports[`ScraperTarget rendering renders correctly with name 1`] = ` + + + + + + + + + + + + + + + + + +`; + +exports[`ScraperTarget rendering renders correctly with no bucket, url, name 1`] = ` + + + + + + + + + + + + + + + + + +`; + +exports[`ScraperTarget rendering renders correctly with url 1`] = ` + + + + + + + + + + + + + + + + + +`; diff --git a/ui/src/dataLoaders/reducers/dataLoaders.test.ts b/ui/src/dataLoaders/reducers/dataLoaders.test.ts index 7cd94297048..6383d781290 100644 --- 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: '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) diff --git a/ui/src/dataLoaders/reducers/dataLoaders.ts b/ui/src/dataLoaders/reducers/dataLoaders.ts index 07030d7812b..555615c9e8b 100644 --- a/ui/src/dataLoaders/reducers/dataLoaders.ts +++ b/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 { diff --git a/ui/src/types/v2/dataLoaders.ts b/ui/src/types/v2/dataLoaders.ts index d2874a744d6..31c6a515ab4 100644 --- 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 }