diff --git a/ui/src/buckets/components/BucketList.tsx b/ui/src/buckets/components/BucketList.tsx index 3116dd83e7..710f3d035d 100644 --- a/ui/src/buckets/components/BucketList.tsx +++ b/ui/src/buckets/components/BucketList.tsx @@ -2,13 +2,12 @@ import React, {PureComponent} from 'react' import {withRouter, WithRouterProps} from 'react-router' import {connect} from 'react-redux' -import _ from 'lodash' +import {get} from 'lodash' // Components import UpdateBucketOverlay from 'src/buckets/components/UpdateBucketOverlay' import BucketRow, {PrettyBucket} from 'src/buckets/components/BucketRow' import {Overlay, IndexList} from 'src/clockface' -import DataLoaderSwitcher from 'src/dataLoaders/components/DataLoaderSwitcher' // Actions import {setBucketInfo} from 'src/dataLoaders/actions/steps' @@ -41,39 +40,21 @@ type Props = OwnProps & StateProps & DispatchProps interface State { bucketID: string bucketOverlayState: OverlayState - dataLoadersOverlayState: OverlayState } class BucketList extends PureComponent { constructor(props) { super(props) - - const openDataLoaderOverlay = _.get( - this, - 'props.location.query.openDataLoaderOverlay', - false - ) - const firstBucketID = _.get(this, 'props.buckets.0.id', null) - const bucketID = openDataLoaderOverlay ? firstBucketID : null + const bucketID = get(this, 'props.buckets.0.id', null) this.state = { bucketID, bucketOverlayState: OverlayState.Closed, - dataLoadersOverlayState: openDataLoaderOverlay - ? OverlayState.Open - : OverlayState.Closed, } } public render() { - const { - dataLoaderType, - buckets, - emptyState, - onDeleteBucket, - onFilterChange, - } = this.props - const {bucketID} = this.state + const {buckets, emptyState, onDeleteBucket, onFilterChange} = this.props return ( <> @@ -104,13 +85,6 @@ class BucketList extends PureComponent { onUpdateBucket={this.handleUpdateBucket} /> - ) } @@ -129,33 +103,23 @@ class BucketList extends PureComponent { private handleStartAddData = ( bucket: PrettyBucket, - dataLoaderType: DataLoaderType + dataLoaderType: DataLoaderType, + link: string ) => { - this.props.onSetBucketInfo( + const {onSetBucketInfo, onSetDataLoadersType, router} = this.props + onSetBucketInfo( bucket.organization, bucket.organizationID, bucket.name, bucket.id ) - this.props.onSetDataLoadersType(dataLoaderType) - this.setState({ bucketID: bucket.id, - dataLoadersOverlayState: OverlayState.Open, }) - } - private handleDismissDataLoaders = () => { - this.setState({ - bucketID: '', - dataLoadersOverlayState: OverlayState.Closed, - }) - } - - private get isDataLoadersWizardVisible(): boolean { - const {bucketID, dataLoadersOverlayState} = this.state - return !!bucketID && dataLoadersOverlayState === OverlayState.Open + onSetDataLoadersType(dataLoaderType) + router.push(link) } private get isBucketOverlayVisible(): boolean { diff --git a/ui/src/buckets/components/BucketRow.tsx b/ui/src/buckets/components/BucketRow.tsx index e38f5ce00a..e5b2fe91bf 100644 --- a/ui/src/buckets/components/BucketRow.tsx +++ b/ui/src/buckets/components/BucketRow.tsx @@ -30,7 +30,7 @@ interface Props { bucket: PrettyBucket onEditBucket: (b: PrettyBucket) => void onDeleteBucket: (b: PrettyBucket) => void - onAddData: (b: PrettyBucket, d: DataLoaderType) => void + onAddData: (b: PrettyBucket, d: DataLoaderType, l: string) => void onUpdateBucket: (b: PrettyBucket) => void onFilterChange: (searchTerm: string) => void } @@ -101,15 +101,33 @@ class BucketRow extends PureComponent { } private handleAddCollector = (): void => { - this.props.onAddData(this.props.bucket, DataLoaderType.Streaming) + const { + params: {orgID}, + bucket: {id}, + } = this.props + + const link = `/orgs/${orgID}/buckets/${id}/telegrafs/new` + this.props.onAddData(this.props.bucket, DataLoaderType.Streaming, link) } private handleAddLineProtocol = (): void => { - this.props.onAddData(this.props.bucket, DataLoaderType.LineProtocol) + const { + params: {orgID}, + bucket: {id}, + } = this.props + + const link = `/orgs/${orgID}/buckets/${id}/line-protocols/new` + this.props.onAddData(this.props.bucket, DataLoaderType.LineProtocol, link) } private handleAddScraper = (): void => { - this.props.onAddData(this.props.bucket, DataLoaderType.Scraping) + const { + params: {orgID}, + bucket: {id}, + } = this.props + + const link = `/orgs/${orgID}/buckets/${id}/scrapers/new` + this.props.onAddData(this.props.bucket, DataLoaderType.Scraping, link) } } diff --git a/ui/src/buckets/containers/BucketsIndex.tsx b/ui/src/buckets/containers/BucketsIndex.tsx index 1a901eb14d..9b8f9783b2 100644 --- a/ui/src/buckets/containers/BucketsIndex.tsx +++ b/ui/src/buckets/containers/BucketsIndex.tsx @@ -28,27 +28,30 @@ class BucketsIndex extends Component { const {org} = this.props return ( - - - -
- - - - - - - - - - -
- - + <> + + + +
+ + + + + + + {this.props.children} + + + + +
+ + + ) } } diff --git a/ui/src/clockface/components/wizard/WizardOverlay.tsx b/ui/src/clockface/components/wizard/WizardOverlay.tsx index 0b63f4b169..00181c0a7b 100644 --- a/ui/src/clockface/components/wizard/WizardOverlay.tsx +++ b/ui/src/clockface/components/wizard/WizardOverlay.tsx @@ -8,7 +8,6 @@ import {ErrorHandling} from 'src/shared/decorators/errors' interface Props { children: any - visible: boolean title: string maxWidth: number onDismiss: () => void @@ -21,10 +20,10 @@ class WizardOverlay extends PureComponent { } public render() { - const {visible, title, maxWidth, children, onDismiss} = this.props + const {title, maxWidth, children, onDismiss} = this.props return ( - + diff --git a/ui/src/configuration/components/ConfigurationPage.tsx b/ui/src/configuration/components/ConfigurationPage.tsx index 769329d242..a64688f2a1 100644 --- a/ui/src/configuration/components/ConfigurationPage.tsx +++ b/ui/src/configuration/components/ConfigurationPage.tsx @@ -11,7 +11,6 @@ import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSecti import TabbedPage from 'src/shared/components/tabbed_page/TabbedPage' import Settings from 'src/me/components/account/Settings' import Telegrafs from 'src/configuration/components/Telegrafs' -import Scrapers from 'src/configuration/components/Scrapers' import PageTitleWithOrg from 'src/shared/components/PageTitleWithOrg' // Decorators @@ -64,13 +63,7 @@ class ConfigurationPage extends Component { id="scrapers_tab" url="scrapers_tab" title="Scrapers" - > - - - - - - + /> { - constructor(props: Props) { - super(props) - - this.state = { - overlayState: OverlayState.Closed, - searchTerm: '', - } - } - - public render() { - const {searchTerm} = this.state - const {scrapers} = this.props - - return ( - <> - - - {this.createScraperButton('create-scraper-button-header')} - - - - searchTerm={searchTerm} - searchKeys={['name', 'url']} - list={scrapers} - > - {sl => ( - - )} - - {this.createScraperOverlay} - - ) - } - - private get hasNoBuckets(): boolean { - const {buckets} = this.props - - if (!buckets || !buckets.length) { - return true - } - - return false - } - - private get createScraperOverlay(): JSX.Element { - const {buckets} = this.props - - if (this.hasNoBuckets) { - return - } - - return ( - - ) - } - - private get isOverlayVisible(): boolean { - return this.state.overlayState === OverlayState.Open - } - - private handleShowOverlay = () => { - this.setState({overlayState: OverlayState.Open}) - } - - private handleDismissOverlay = () => { - this.setState({overlayState: OverlayState.Closed}) - } - - private handleCreateScraper = async ( - scraper: ScraperTargetRequest - ): Promise => { - try { - await this.props.createScraper(scraper) - this.handleDismissOverlay() - } catch (e) {} - } - - private createScraperButton = (testID: string): JSX.Element => { - let status = ComponentStatus.Default - let titleText = 'Create a new Scraper' - - if (this.hasNoBuckets) { - status = ComponentStatus.Disabled - titleText = 'You need at least 1 bucket in order to create a scraper' - } - - return ( -