Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Remove empty scraper verify step and data loaders progress bar and step statuses

pull/11269/head
Iris Scholten 2019-01-17 16:59:19 -08:00
parent 4863708c58
commit aded23d08b
13 changed files with 16 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ui/src/dataLoaders/components/DataLoadersWizard.tsx
View File

@ -5,7 +5,6 @@ import _ from 'lodash'
// Components
import {ErrorHandling} from 'src/shared/decorators/errors'
import {WizardProgressHeader, ProgressBar} from 'src/clockface'
import WizardOverlay from 'src/clockface/components/wizard/WizardOverlay'
import StepSwitcher from 'src/dataLoaders/components/StepSwitcher'
@ -13,7 +12,6 @@ import StepSwitcher from 'src/dataLoaders/components/StepSwitcher'
import {notify as notifyAction} from 'src/shared/actions/notifications'
import {
setBucketInfo,
setStepStatus,
incrementCurrentStepIndex,
decrementCurrentStepIndex,
setCurrentStepIndex,
@ -35,9 +33,6 @@ import {
clearDataLoaders,
} from 'src/onboarding/actions/dataLoaders'
// Constants
import {StepStatus} from 'src/clockface/constants/wizard'
// Types
import {Links} from 'src/types/v2/links'
import {
@ -58,10 +53,7 @@ export interface DataLoaderStepProps {
onSetCurrentStepIndex: (stepNumber: number) => void
onIncrementCurrentStepIndex: () => void
onDecrementCurrentStepIndex: () => void
onSetStepStatus: (index: number, status: StepStatus) => void
onSetSubstepIndex: (index: number, subStep: number | 'streaming') => void
stepStatuses: StepStatus[]
stepTitles: string[]
notify: (message: Notification | NotificationFunc) => void
onCompleteSetup: () => void
onExit: () => void
@ -80,7 +72,6 @@ interface OwnProps {
interface DispatchProps {
notify: (message: Notification | NotificationFunc) => void
onSetBucketInfo: typeof setBucketInfo
onSetStepStatus: typeof setStepStatus
onSetDataLoadersType: typeof setDataLoadersType
onAddPluginBundle: typeof addPluginBundleWithPlugins
onRemovePluginBundle: typeof removePluginBundleWithPlugins
@ -101,7 +92,6 @@ interface DispatchProps {
interface StateProps {
links: Links
stepStatuses: StepStatus[]
dataLoaders: DataLoadersState
currentStepIndex: number
substep: Substep
@ -113,14 +103,6 @@ type Props = OwnProps & StateProps & DispatchProps
@ErrorHandling
class DataLoadersWizard extends PureComponent<Props> {
public stepTitles = [
'Select Data Sources',
'Configure Data Sources',
'Verify',
]
public stepSkippable = [true, true, true]
public componentDidMount() {
this.handleSetBucketInfo()
this.handleSetStartingValues()
@ -171,7 +153,6 @@ class DataLoadersWizard extends PureComponent<Props> {
title={'Data Loading'}
onDismis={this.handleDismiss}
>
{this.progressHeader}
<div className="wizard-contents">
<PluginsSideBar
notify={notify}
@ -250,22 +231,6 @@ class DataLoadersWizard extends PureComponent<Props> {
this.handleSetStartingValues()
}
private get progressHeader(): JSX.Element {
const {stepStatuses, currentStepIndex, onSetCurrentStepIndex} = this.props
return (
<WizardProgressHeader>
<ProgressBar
currentStepIndex={currentStepIndex}
handleSetCurrentStep={onSetCurrentStepIndex}
stepStatuses={stepStatuses}
stepTitles={this.stepTitles}
stepSkippable={this.stepSkippable}
/>
</WizardProgressHeader>
)
}
private get sideBarVisible() {
const {dataLoaders} = this.props
const {telegrafPlugins, type} = dataLoaders
@ -303,13 +268,11 @@ class DataLoadersWizard extends PureComponent<Props> {
private get stepProps(): DataLoaderStepProps {
const {
stepStatuses,
links,
notify,
substep,
onCompleteSetup,
currentStepIndex,
onSetStepStatus,
onSetCurrentStepIndex,
onSetSubstepIndex,
onDecrementCurrentStepIndex,
@ -317,15 +280,12 @@ class DataLoadersWizard extends PureComponent<Props> {
} = this.props
return {
stepStatuses,
substep,
stepTitles: this.stepTitles,
currentStepIndex,
onSetCurrentStepIndex,
onSetSubstepIndex,
onIncrementCurrentStepIndex,
onDecrementCurrentStepIndex,
onSetStepStatus,
links,
notify,
onCompleteSetup,
@ -338,12 +298,11 @@ const mstp = ({
links,
dataLoading: {
dataLoaders,
steps: {stepStatuses, currentStep, substep, bucket},
steps: {currentStep, substep, bucket},
},
me: {name},
}: AppState): StateProps => ({
links,
stepStatuses,
dataLoaders,
currentStepIndex: currentStep,
substep,
@ -354,7 +313,6 @@ const mstp = ({
const mdtp: DispatchProps = {
notify: notifyAction,
onSetBucketInfo: setBucketInfo,
onSetStepStatus: setStepStatus,
onSetDataLoadersType: setDataLoadersType,
onUpdateTelegrafPluginConfig: updateTelegrafPluginConfig,
onAddConfigValue: addConfigValue,

20
ui/src/onboarding/actions/steps.ts
View File

@ -1,12 +1,8 @@
// Constants
import {StepStatus} from 'src/clockface/constants/wizard'
// Types
import {Substep} from 'src/types/v2/dataLoaders'
export type Action =
| SetBucketInfo
| SetStepStatus
| SetBucketID
| IncrementCurrentStepIndex
| DecrementCurrentStepIndex
@ -79,22 +75,6 @@ export const setBucketInfo = (
payload: {org, orgID, bucket, bucketID},
})
interface SetStepStatus {
type: 'SET_STEP_STATUS'
payload: {index: number; status: StepStatus}
}
export const setStepStatus = (
index: number,
status: StepStatus
): SetStepStatus => ({
type: 'SET_STEP_STATUS',
payload: {
index,
status,
},
})
interface SetBucketID {
type: 'SET_BUCKET_ID'
payload: {bucketID: string}

46
ui/src/onboarding/components/configureStep/ConfigureDataSourceStep.tsx
View File

@ -16,15 +16,12 @@ import {
setConfigArrayValue,
} from 'src/onboarding/actions/dataLoaders'
// Constants
import {StepStatus} from 'src/clockface/constants/wizard'
// Types
import {DataLoaderStepProps} from 'src/dataLoaders/components/DataLoadersWizard'
import {
TelegrafPlugin,
DataLoaderType,
ConfigurationState,
DataLoaderStep,
} from 'src/types/v2/dataLoaders'
import {Bucket} from 'src/api'
@ -89,15 +86,9 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
}
private jumpToCompletionStep = () => {
const {onSetCurrentStepIndex, stepStatuses, type} = this.props
const {onSetCurrentStepIndex} = this.props
this.handleSetStepStatus()
if (type === DataLoaderType.Streaming) {
onSetCurrentStepIndex(stepStatuses.length - 2)
} else {
onSetCurrentStepIndex(stepStatuses.length - 1)
}
onSetCurrentStepIndex(DataLoaderStep.Verify)
}
private handleNext = async () => {
@ -110,13 +101,13 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
currentStepIndex,
onSetSubstepIndex,
type,
onExit,
} = this.props
const index = +substep
const telegrafPlugin = _.get(telegrafPlugins, `${index}.name`)
onSetPluginConfiguration(telegrafPlugin)
this.handleSetStepStatus()
if (type === DataLoaderType.Streaming) {
if (index >= telegrafPlugins.length - 1) {
@ -128,6 +119,11 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
onSetSubstepIndex(+currentStepIndex, index + 1)
}
return
} else if (
type === DataLoaderType.Scraping &&
currentStepIndex === DataLoaderStep.Configure
) {
onExit()
}
onIncrementCurrentStepIndex()
@ -150,7 +146,6 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
if (type === DataLoaderType.Streaming) {
onSetPluginConfiguration(telegrafPlugin)
this.handleSetStepStatus()
if (index > 0) {
const name = _.get(telegrafPlugins, `${index - 1}.name`)
@ -166,29 +161,6 @@ export class ConfigureDataSourceStep extends PureComponent<Props> {
onDecrementCurrentStepIndex()
}
private handleSetStepStatus = () => {
const {
type,
telegrafPlugins,
onSetStepStatus,
currentStepIndex,
} = this.props
if (type === DataLoaderType.Streaming) {
const unconfigured = telegrafPlugins.find(tp => {
return tp.configured === ConfigurationState.Unconfigured
})
if (unconfigured || !telegrafPlugins.length) {
onSetStepStatus(currentStepIndex, StepStatus.Incomplete)
} else {
onSetStepStatus(currentStepIndex, StepStatus.Complete)
}
} else {
onSetStepStatus(currentStepIndex, StepStatus.Complete)
}
}
}
export default ConfigureDataSourceStep

30
ui/src/onboarding/components/selectionStep/SelectDataSourceStep.test.tsx
View File

@ -12,11 +12,7 @@ import {ComponentStatus} from 'src/clockface'
import {DataLoaderType} from 'src/types/v2/dataLoaders'
// Dummy Data
import {
defaultOnboardingStepProps,
telegrafPlugin,
cpuTelegrafPlugin,
} from 'mocks/dummyData'
import {defaultOnboardingStepProps, cpuTelegrafPlugin} from 'mocks/dummyData'
import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
const setup = (override = {}) => {
@ -30,7 +26,6 @@ const setup = (override = {}) => {
onRemovePluginBundle: jest.fn(),
onSetDataLoadersType: jest.fn(),
onSetActiveTelegrafPlugin: jest.fn(),
onSetStepStatus: jest.fn(),
currentStepIndex: 2,
substep: undefined,
location: null,
@ -60,29 +55,6 @@ describe('Onboarding.Components.SelectionStep.SelectDataSourceStep', () => {
})
})
describe('skip info', () => {
it('does not render if telegraf no plugins are selected', () => {
const wrapper = setup()
const onboardingButtons = wrapper.find(OnboardingButtons)
expect(onboardingButtons.prop('showSkip')).toBe(false)
})
it('renders if telegraf plugins are selected', () => {
const wrapper = setup({telegrafPlugins: [cpuTelegrafPlugin]})
const onboardingButtons = wrapper.find(OnboardingButtons)
expect(onboardingButtons.prop('showSkip')).toBe(true)
})
it('does not render if any telegraf plugins is incomplete', () => {
const wrapper = setup({telegrafPlugins: [telegrafPlugin]})
const onboardingButtons = wrapper.find(OnboardingButtons)
expect(onboardingButtons.prop('showSkip')).toBe(false)
})
})
describe('if type is line protocol', () => {
it('renders back and next buttons with correct status', () => {
const wrapper = setup({type: DataLoaderType.LineProtocol})

42
ui/src/onboarding/components/selectionStep/SelectDataSourceStep.tsx
View File

@ -19,9 +19,6 @@ import {
} from 'src/onboarding/actions/dataLoaders'
import {setBucketInfo} from 'src/onboarding/actions/steps'
// Constants
import {StepStatus} from 'src/clockface/constants/wizard'
// Types
import {DataLoaderStepProps} from 'src/dataLoaders/components/DataLoadersWizard'
import {
@ -40,7 +37,6 @@ export interface Props extends DataLoaderStepProps {
onRemovePluginBundle: typeof removePluginBundleWithPlugins
onSetDataLoadersType: (type: DataLoaderType) => void
onSetActiveTelegrafPlugin: typeof setActiveTelegrafPlugin
onSetStepStatus: (index: number, status: StepStatus) => void
onSetBucketInfo: typeof setBucketInfo
buckets: Bucket[]
selectedBucket: string
@ -71,11 +67,8 @@ export class SelectDataSourceStep extends PureComponent<Props> {
</div>
<OnboardingButtons
onClickBack={this.handleClickBack}
onClickSkip={this.jumpToCompletionStep}
skipButtonText={'Skip to Complete'}
autoFocusNext={true}
nextButtonStatus={this.nextButtonStatus}
showSkip={this.showSkip}
/>
</Form>
</div>
@ -135,22 +128,6 @@ export class SelectDataSourceStep extends PureComponent<Props> {
this.props.onSetBucketInfo(organization, organizationID, name, id)
}
private get showSkip(): boolean {
const {telegrafPlugins} = this.props
if (telegrafPlugins.length < 1) {
return false
}
return telegrafPlugins.every(plugin => plugin.configured === 'configured')
}
private jumpToCompletionStep = () => {
const {onSetCurrentStepIndex, stepStatuses} = this.props
this.handleSetStepStatus()
onSetCurrentStepIndex(stepStatuses.length - 2)
}
private handleClickNext = () => {
const {
currentStepIndex,
@ -165,8 +142,6 @@ export class SelectDataSourceStep extends PureComponent<Props> {
return
}
this.handleSetStepStatus()
if (this.isStreaming) {
const name = _.get(telegrafPlugins, '0.name', '')
onSetActiveTelegrafPlugin(name)
@ -178,10 +153,10 @@ export class SelectDataSourceStep extends PureComponent<Props> {
}
private handleClickBack = () => {
const {currentStepIndex, onSetCurrentStepIndex} = this.props
const {currentStepIndex, onSetSubstepIndex} = this.props
if (this.isStreaming) {
onSetCurrentStepIndex(+currentStepIndex)
onSetSubstepIndex(+currentStepIndex, 0)
return
}
@ -208,19 +183,6 @@ export class SelectDataSourceStep extends PureComponent<Props> {
this.props.onAddPluginBundle(bundle)
}
private handleSetStepStatus = () => {
const {onSetStepStatus, currentStepIndex} = this.props
if (
this.props.type === DataLoaderType.Streaming &&
!this.props.telegrafPlugins.length
) {
onSetStepStatus(currentStepIndex, StepStatus.Incomplete)
} else if (this.props.type) {
onSetStepStatus(currentStepIndex, StepStatus.Complete)
}
}
private get isStreaming(): boolean {
return this.props.substep === 'streaming'
}

1
ui/src/onboarding/components/verifyStep/DataListening.test.tsx
View File

@ -11,7 +11,6 @@ const setup = (override = {}) => {
const props = {
bucket: 'defbuck',
stepIndex: 4,
onSetStepStatus: jest.fn(),
...override,
}

10
ui/src/onboarding/components/verifyStep/DataListening.tsx
View File

@ -17,16 +17,11 @@ import ConnectionInformation, {
LoadingState,
} from 'src/onboarding/components/verifyStep/ConnectionInformation'
// Constants
import {StepStatus} from 'src/clockface/constants/wizard'
// Types
import {InfluxLanguage} from 'src/types/v2/dashboards'
export interface Props {
bucket: string
stepIndex: number
onSetStepStatus: (index: number, status: StepStatus) => void
}
interface State {
@ -117,7 +112,7 @@ class DataListening extends PureComponent<Props, State> {
}
private checkForData = async (): Promise<void> => {
const {bucket, onSetStepStatus, stepIndex} = this.props
const {bucket} = this.props
const {secondsLeft} = this.state
const script = `from(bucket: "${bucket}")
|> range(start: -1m)`
@ -135,19 +130,16 @@ class DataListening extends PureComponent<Props, State> {
timePassed = Number(new Date()) - this.startTime
} catch (err) {
this.setState({loading: LoadingState.Error})
onSetStepStatus(stepIndex, StepStatus.Incomplete)
return
}
if (rowCount > 1) {
this.setState({loading: LoadingState.Done})
onSetStepStatus(stepIndex, StepStatus.Complete)
return
}
if (timePassed >= MINUTE || secondsLeft <= 0) {
this.setState({loading: LoadingState.NotFound})
onSetStepStatus(stepIndex, StepStatus.Incomplete)
return
}
this.intervalID = setTimeout(this.checkForData, FETCH_WAIT)

13
ui/src/onboarding/components/verifyStep/DataStreaming.tsx
View File

@ -10,9 +10,6 @@ import DataListening from 'src/onboarding/components/verifyStep/DataListening'
// Actions
import {createOrUpdateTelegrafConfigAsync} from 'src/onboarding/actions/dataLoaders'
// Constants
import {StepStatus} from 'src/clockface/constants/wizard'
// Decorator
import {ErrorHandling} from 'src/shared/decorators/errors'
@ -24,9 +21,7 @@ interface Props {
bucket: string
org: string
configID: string
stepIndex: number
authToken: string
onSetStepStatus: (index: number, status: StepStatus) => void
onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync
}
@ -38,9 +33,7 @@ class DataStreaming extends PureComponent<Props> {
org,
configID,
onSaveTelegrafConfig,
onSetStepStatus,
bucket,
stepIndex,
notify,
} = this.props
@ -61,11 +54,7 @@ class DataStreaming extends PureComponent<Props> {
)}
</CreateOrUpdateConfig>
<DataListening
bucket={bucket}
stepIndex={stepIndex}
onSetStepStatus={onSetStepStatus}
/>
<DataListening bucket={bucket} />
</>
)
}

3
ui/src/onboarding/components/verifyStep/VerifyDataStep.test.tsx
View File

@ -5,7 +5,6 @@ import {shallow} from 'enzyme'
// Components
import {VerifyDataStep} from 'src/onboarding/components/verifyStep/VerifyDataStep'
import VerifyDataSwitcher from 'src/onboarding/components/verifyStep/VerifyDataSwitcher'
import OnboardingButtons from 'src/onboarding/components/OnboardingButtons'
// Types
import {DataLoaderType} from 'src/types/v2/dataLoaders'
@ -43,11 +42,9 @@ const setup = (override = {}) => {
describe('Onboarding.Components.VerifyStep.VerifyDataStep', () => {
it('renders', () => {
const {wrapper} = setup()
const onboardingButtons = wrapper.find(OnboardingButtons)
const switcher = wrapper.find(VerifyDataSwitcher)
expect(wrapper.exists()).toBe(true)
expect(onboardingButtons.prop('showSkip')).toBe(true)
expect(switcher.exists()).toBe(true)
})
})

27
ui/src/onboarding/components/verifyStep/VerifyDataStep.tsx
View File

@ -20,7 +20,6 @@ import {
import {DataLoaderType, TelegrafPlugin} from 'src/types/v2/dataLoaders'
import {Form} from 'src/clockface'
import {NotificationAction, RemoteDataState} from 'src/types'
import {StepStatus} from 'src/clockface/constants/wizard'
import {AppState} from 'src/types/v2'
import {DataLoaderStepProps} from 'src/dataLoaders/components/DataLoadersWizard'
@ -64,8 +63,6 @@ export class VerifyDataStep extends PureComponent<Props> {
type,
onSaveTelegrafConfig,
onDecrementCurrentStepIndex,
onSetStepStatus,
stepIndex,
notify,
lpStatus,
org,
@ -85,8 +82,6 @@ export class VerifyDataStep extends PureComponent<Props> {
org={org}
bucket={bucket}
username={username}
onSetStepStatus={onSetStepStatus}
stepIndex={stepIndex}
onDecrementCurrentStep={onDecrementCurrentStepIndex}
lpStatus={lpStatus}
/>
@ -95,9 +90,6 @@ export class VerifyDataStep extends PureComponent<Props> {
</div>
<OnboardingButtons
onClickBack={this.handleDecrementStep}
onClickSkip={this.jumpToCompletionStep}
skipButtonText={'Skip'}
showSkip={true}
nextButtonText={'Finish'}
/>
</Form>
@ -116,18 +108,7 @@ export class VerifyDataStep extends PureComponent<Props> {
}
private handleIncrementStep = () => {
const {onSetStepStatus, type, lpStatus, onExit} = this.props
const {currentStepIndex} = this.props
if (
type === DataLoaderType.LineProtocol &&
lpStatus === RemoteDataState.Error
) {
onSetStepStatus(currentStepIndex, StepStatus.Error)
} else {
onSetStepStatus(currentStepIndex, StepStatus.Complete)
}
const {onExit} = this.props
onExit()
}
@ -149,12 +130,6 @@ export class VerifyDataStep extends PureComponent<Props> {
onSetActiveTelegrafPlugin('')
}
}
private jumpToCompletionStep = () => {
const {onSetCurrentStepIndex, stepStatuses} = this.props
onSetCurrentStepIndex(stepStatuses.length - 1)
}
}
const mstp = ({

1
ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.test.tsx
View File

@ -20,7 +20,6 @@ const setup = (override = {}) => {
telegrafConfigID: '',
onSaveTelegrafConfig: jest.fn(),
stepIndex: 4,
onSetStepStatus: jest.fn(),
onDecrementCurrentStep: jest.fn(),
lpStatus: RemoteDataState.NotStarted,
...override,

9
ui/src/onboarding/components/verifyStep/VerifyDataSwitcher.tsx
View File

@ -9,9 +9,6 @@ import FetchAuthToken from 'src/onboarding/components/verifyStep/FetchAuthToken'
// Actions
import {createOrUpdateTelegrafConfigAsync} from 'src/onboarding/actions/dataLoaders'
// Constants
import {StepStatus} from 'src/clockface/constants/wizard'
// Types
import {DataLoaderType} from 'src/types/v2/dataLoaders'
import {NotificationAction, RemoteDataState} from 'src/types'
@ -23,10 +20,8 @@ interface Props {
org: string
bucket: string
username: string
stepIndex: number
telegrafConfigID: string
onSaveTelegrafConfig: typeof createOrUpdateTelegrafConfigAsync
onSetStepStatus: (index: number, status: StepStatus) => void
onDecrementCurrentStep: () => void
lpStatus: RemoteDataState
}
@ -39,8 +34,6 @@ export class VerifyDataSwitcher extends PureComponent<Props> {
bucket,
username,
type,
stepIndex,
onSetStepStatus,
telegrafConfigID,
onSaveTelegrafConfig,
notify,
@ -58,9 +51,7 @@ export class VerifyDataSwitcher extends PureComponent<Props> {
configID={telegrafConfigID}
authToken={authToken}
bucket={bucket}
onSetStepStatus={onSetStepStatus}
onSaveTelegrafConfig={onSaveTelegrafConfig}
stepIndex={stepIndex}
/>
)}
</FetchAuthToken>

9
ui/src/onboarding/reducers/steps.ts
View File

@ -1,6 +1,3 @@
// Constants
import {StepStatus} from 'src/clockface/constants/wizard'
// Types
import {Action} from 'src/onboarding/actions/steps'
import {Substep} from 'src/types/v2/dataLoaders'
@ -8,7 +5,6 @@ import {Substep} from 'src/types/v2/dataLoaders'
export interface DataLoadersStepsState {
currentStep: number
substep?: Substep
stepStatuses: StepStatus[]
orgID: string
bucketID: string
org: string
@ -16,7 +12,6 @@ export interface DataLoadersStepsState {
}
const INITIAL_STATE: DataLoadersStepsState = {
stepStatuses: new Array(3).fill(StepStatus.Incomplete),
org: '',
bucket: '',
orgID: '',
@ -45,10 +40,6 @@ export default (
}
case 'SET_BUCKET_INFO':
return {...state, ...action.payload}
case 'SET_STEP_STATUS':
const stepStatuses = [...state.stepStatuses]
stepStatuses[action.payload.index] = action.payload.status
return {...state, stepStatuses}
case 'SET_BUCKET_ID':
return {...state, bucketID: action.payload.bucketID}
default: