From d817ff45076f8e088774acb02c82b8b1d8e6f7f7 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 18 Dec 2018 13:58:26 -0800 Subject: [PATCH] fix(ui/dataLoaders): Separate the error state from the data not found state when listening for data --- .../verifyStep/ConnectionInformation.test.tsx | 19 ++++++---- .../verifyStep/ConnectionInformation.tsx | 35 ++++++++++++------- .../components/verifyStep/DataListening.tsx | 26 +++++++------- .../components/verifyStep/DataStreaming.tsx | 12 +------ .../components/verifyStep/VerifyDataStep.tsx | 1 - .../verifyStep/VerifyDataSwitcher.tsx | 3 -- .../ConnectionInformation.test.tsx.snap | 15 +++++++- 7 files changed, 63 insertions(+), 48 deletions(-) diff --git a/ui/src/onboarding/components/verifyStep/ConnectionInformation.test.tsx b/ui/src/onboarding/components/verifyStep/ConnectionInformation.test.tsx index aefee257e1..6433fccd97 100644 --- a/ui/src/onboarding/components/verifyStep/ConnectionInformation.test.tsx +++ b/ui/src/onboarding/components/verifyStep/ConnectionInformation.test.tsx @@ -3,14 +3,15 @@ import React from 'react' import {shallow} from 'enzyme' // Components -import ConnectionInformation from 'src/onboarding/components/verifyStep/ConnectionInformation' +import ConnectionInformation, { + LoadingState, +} from 'src/onboarding/components/verifyStep/ConnectionInformation' // Types -import {RemoteDataState} from 'src/types' const setup = (override = {}) => { const props = { - loading: RemoteDataState.NotStarted, + loading: LoadingState.NotStarted, bucket: 'defbuck', countDownSeconds: 60, ...override, @@ -29,19 +30,25 @@ describe('Onboarding.Components.ConnectionInformation', () => { }) it('matches snapshot if loading', () => { - const {wrapper} = setup({loading: RemoteDataState.Loading}) + const {wrapper} = setup({loading: LoadingState.Loading}) expect(wrapper).toMatchSnapshot() }) it('matches snapshot if success', () => { - const {wrapper} = setup({loading: RemoteDataState.Done}) + const {wrapper} = setup({loading: LoadingState.Done}) + + expect(wrapper).toMatchSnapshot() + }) + + it('matches snapshot if no data is found', () => { + const {wrapper} = setup({loading: LoadingState.NotFound}) expect(wrapper).toMatchSnapshot() }) it('matches snapshot if error', () => { - const {wrapper} = setup({loading: RemoteDataState.Error}) + const {wrapper} = setup({loading: LoadingState.Error}) expect(wrapper).toMatchSnapshot() }) diff --git a/ui/src/onboarding/components/verifyStep/ConnectionInformation.tsx b/ui/src/onboarding/components/verifyStep/ConnectionInformation.tsx index 993b4dfb79..91a2ccc472 100644 --- a/ui/src/onboarding/components/verifyStep/ConnectionInformation.tsx +++ b/ui/src/onboarding/components/verifyStep/ConnectionInformation.tsx @@ -5,11 +5,16 @@ import _ from 'lodash' // Decorator import {ErrorHandling} from 'src/shared/decorators/errors' -// Types -import {RemoteDataState} from 'src/types' +export enum LoadingState { + NotStarted = 'NotStarted', + Loading = 'Loading', + Done = 'Done', + NotFound = 'NotFound', + Error = 'Error', +} export interface Props { - loading: RemoteDataState + loading: LoadingState bucket: string countDownSeconds: number } @@ -29,33 +34,37 @@ class ListeningResults extends PureComponent { private get className(): string { switch (this.props.loading) { - case RemoteDataState.Loading: + case LoadingState.Loading: return 'loading' - case RemoteDataState.Done: + case LoadingState.Done: return 'success' - case RemoteDataState.Error: + case LoadingState.NotFound: + case LoadingState.Error: return 'error' } } private get header(): string { switch (this.props.loading) { - case RemoteDataState.Loading: + case LoadingState.Loading: return 'Awaiting Connection...' - case RemoteDataState.Done: + case LoadingState.Done: return 'Connection Found!' - case RemoteDataState.Error: - return 'Connection Not Found' + case LoadingState.NotFound: + return 'Data Not Found' + case LoadingState.Error: + return 'Error Listening for Data' } } private get additionalText(): string { switch (this.props.loading) { - case RemoteDataState.Loading: + case LoadingState.Loading: return `Timeout in ${this.props.countDownSeconds} seconds` - case RemoteDataState.Done: + case LoadingState.Done: return `${this.props.bucket} is receiving data loud and clear!` - case RemoteDataState.Error: + case LoadingState.NotFound: + case LoadingState.Error: return 'Check config and try again' } } diff --git a/ui/src/onboarding/components/verifyStep/DataListening.tsx b/ui/src/onboarding/components/verifyStep/DataListening.tsx index b085cc56d9..69b944bf69 100644 --- a/ui/src/onboarding/components/verifyStep/DataListening.tsx +++ b/ui/src/onboarding/components/verifyStep/DataListening.tsx @@ -13,13 +13,14 @@ import { ComponentSize, ComponentStatus, } from 'src/clockface' -import ConnectionInformation from 'src/onboarding/components/verifyStep/ConnectionInformation' +import ConnectionInformation, { + LoadingState, +} from 'src/onboarding/components/verifyStep/ConnectionInformation' // Constants import {StepStatus} from 'src/clockface/constants/wizard' // Types -import {RemoteDataState} from 'src/types' import {InfluxLanguage} from 'src/types/v2/dashboards' export interface Props { @@ -29,7 +30,7 @@ export interface Props { } interface State { - loading: RemoteDataState + loading: LoadingState timePassedInSeconds: number secondsLeft: number } @@ -49,7 +50,7 @@ class DataListening extends PureComponent { super(props) this.state = { - loading: RemoteDataState.NotStarted, + loading: LoadingState.NotStarted, timePassedInSeconds: 0, secondsLeft: SECONDS, } @@ -76,7 +77,7 @@ class DataListening extends PureComponent { private get connectionInfo(): JSX.Element { const {loading} = this.state - if (loading === RemoteDataState.NotStarted) { + if (loading === LoadingState.NotStarted) { return } @@ -88,13 +89,11 @@ class DataListening extends PureComponent { /> ) } + private get listenButton(): JSX.Element { const {loading} = this.state - if ( - loading === RemoteDataState.Loading || - loading === RemoteDataState.Done - ) { + if (loading === LoadingState.Loading || loading === LoadingState.Done) { return } @@ -112,7 +111,7 @@ class DataListening extends PureComponent { private handleClick = (): void => { this.startTimer() - this.setState({loading: RemoteDataState.Loading}) + this.setState({loading: LoadingState.Loading}) this.startTime = Number(new Date()) this.checkForData() } @@ -135,19 +134,19 @@ class DataListening extends PureComponent { rowCount = response.rowCount timePassed = Number(new Date()) - this.startTime } catch (err) { - this.setState({loading: RemoteDataState.Error}) + this.setState({loading: LoadingState.Error}) onSetStepStatus(stepIndex, StepStatus.Incomplete) return } if (rowCount > 1) { - this.setState({loading: RemoteDataState.Done}) + this.setState({loading: LoadingState.Done}) onSetStepStatus(stepIndex, StepStatus.Complete) return } if (timePassed >= MINUTE || secondsLeft <= 0) { - this.setState({loading: RemoteDataState.Error}) + this.setState({loading: LoadingState.NotFound}) onSetStepStatus(stepIndex, StepStatus.Incomplete) return } @@ -159,6 +158,7 @@ class DataListening extends PureComponent { this.timer = setInterval(this.countDown, TIMER_WAIT) } + private countDown = () => { const {secondsLeft} = this.state const secs = secondsLeft - 1 diff --git a/ui/src/onboarding/components/verifyStep/DataStreaming.tsx b/ui/src/onboarding/components/verifyStep/DataStreaming.tsx index e445260020..adaf313286 100644 --- a/ui/src/onboarding/components/verifyStep/DataStreaming.tsx +++ b/ui/src/onboarding/components/verifyStep/DataStreaming.tsx @@ -5,7 +5,6 @@ import _ from 'lodash' // Components import TelegrafInstructions from 'src/onboarding/components/verifyStep/TelegrafInstructions' import CreateOrUpdateConfig from 'src/onboarding/components/verifyStep/CreateOrUpdateConfig' -import FetchAuthToken from 'src/onboarding/components/verifyStep/FetchAuthToken' import DataListening from 'src/onboarding/components/verifyStep/DataListening' // Actions @@ -21,7 +20,6 @@ interface Props { bucket: string org: string configID: string - username: string stepIndex: number authToken: string onSetStepStatus: (index: number, status: StepStatus) => void @@ -34,7 +32,6 @@ class DataStreaming extends PureComponent { const { authToken, org, - username, configID, onSaveTelegrafConfig, onSetStepStatus, @@ -50,14 +47,7 @@ class DataStreaming extends PureComponent { onSaveTelegrafConfig={onSaveTelegrafConfig} > {() => ( - - {authToken => ( - - )} - + )} diff --git a/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx b/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx index 3ea0f2a349..fe1ec9739f 100644 --- a/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx +++ b/ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx @@ -54,7 +54,6 @@ class VerifyDataStep extends PureComponent { authToken={authToken} onSaveTelegrafConfig={onSaveTelegrafConfig} org={_.get(setupParams, 'org', '')} - username={_.get(setupParams, 'username', '')} bucket={_.get(setupParams, 'bucket', '')} onSetStepStatus={onSetStepStatus} stepIndex={stepIndex} diff --git a/ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx b/ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx index a29748fbe2..b03d1321e0 100644 --- a/ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx +++ b/ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx @@ -17,7 +17,6 @@ import {DataLoaderType} from 'src/types/v2/dataLoaders' export interface Props { type: DataLoaderType org: string - username: string bucket: string stepIndex: number authToken: string @@ -31,7 +30,6 @@ class VerifyDataSwitcher extends PureComponent { public render() { const { org, - username, bucket, type, stepIndex, @@ -48,7 +46,6 @@ class VerifyDataSwitcher extends PureComponent { org={org} configID={telegrafConfigID} authToken={authToken} - username={username} bucket={bucket} onSetStepStatus={onSetStepStatus} onSaveTelegrafConfig={onSaveTelegrafConfig} diff --git a/ui/src/onboarding/components/verifyStep/__snapshots__/ConnectionInformation.test.tsx.snap b/ui/src/onboarding/components/verifyStep/__snapshots__/ConnectionInformation.test.tsx.snap index 4d1b9dacf2..0c8c3e2dbb 100644 --- a/ui/src/onboarding/components/verifyStep/__snapshots__/ConnectionInformation.test.tsx.snap +++ b/ui/src/onboarding/components/verifyStep/__snapshots__/ConnectionInformation.test.tsx.snap @@ -5,7 +5,7 @@ exports[`Onboarding.Components.ConnectionInformation matches snapshot if error 1

- Connection Not Found + Error Listening for Data

Check config and try again @@ -26,6 +26,19 @@ exports[`Onboarding.Components.ConnectionInformation matches snapshot if loading `; +exports[`Onboarding.Components.ConnectionInformation matches snapshot if no data is found 1`] = ` + +

+ Data Not Found +

+

+ Check config and try again +

+ +`; + exports[`Onboarding.Components.ConnectionInformation matches snapshot if success 1`] = `