diff --git a/CHANGELOG.md b/CHANGELOG.md
index ae468b85d8b..918c900d43c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
## v2.0.0-beta.6 [unreleased]
### Features
+1. [17085](https://github.com/influxdata/influxdb/pull/17085): Clicking on bucket name takes user to Data Explorer with bucket selected
### Bug Fixes
diff --git a/ui/cypress/e2e/buckets.test.ts b/ui/cypress/e2e/buckets.test.ts
index 4ba40f0b08c..b41f9383b55 100644
--- a/ui/cypress/e2e/buckets.test.ts
+++ b/ui/cypress/e2e/buckets.test.ts
@@ -49,7 +49,7 @@ describe('Buckets', () => {
it("can update a bucket's retention rules", () => {
cy.get<Bucket>('@bucket').then(({name}: Bucket) => {
- cy.getByTestID(`bucket--card--name ${name}`).click()
+ cy.getByTestID(`bucket-settings`).click()
cy.getByTestID(`bucket--card--name ${name}`).should(
'not.contain',
'7 days'
diff --git a/ui/src/buckets/components/BucketCard.tsx b/ui/src/buckets/components/BucketCard.tsx
index d8b4233a354..005274991ca 100644
--- a/ui/src/buckets/components/BucketCard.tsx
+++ b/ui/src/buckets/components/BucketCard.tsx
@@ -70,19 +70,10 @@ class BucketRow extends PureComponent<Props & WithRouterProps & DispatchProps> {
private get cardName(): JSX.Element {
const {bucket} = this.props
- if (bucket.type === 'user') {
- return (
- <ResourceCard.Name
- testID={`bucket--card--name ${bucket.name}`}
- onClick={this.handleNameClick}
- name={bucket.name}
- />
- )
- }
-
return (
<ResourceCard.Name
testID={`bucket--card--name ${bucket.name}`}
+ onClick={this.handleNameClick}
name={bucket.name}
/>
)
@@ -126,10 +117,10 @@ class BucketRow extends PureComponent<Props & WithRouterProps & DispatchProps> {
onAddScraper={this.handleAddScraper}
/>
<Button
- text="Rename"
- testID="bucket-rename"
+ text="Settings"
+ testID="bucket-settings"
size={ComponentSize.ExtraSmall}
- onClick={this.handleRenameBucket}
+ onClick={this.handleClickSettings}
/>
<FeatureFlag name="deleteWithPredicate">
<Button
@@ -162,24 +153,24 @@ class BucketRow extends PureComponent<Props & WithRouterProps & DispatchProps> {
onDeleteData(bucket)
}
- private handleRenameBucket = () => {
+ private handleClickSettings = () => {
const {
params: {orgID},
bucket: {id},
router,
} = this.props
- router.push(`/orgs/${orgID}/load-data/buckets/${id}/rename`)
+ router.push(`/orgs/${orgID}/load-data/buckets/${id}/edit`)
}
private handleNameClick = (): void => {
const {
params: {orgID},
- bucket: {id},
+ bucket: {name},
router,
} = this.props
- router.push(`/orgs/${orgID}/load-data/buckets/${id}/edit`)
+ router.push(`/orgs/${orgID}/data-explorer?bucket=${name}`)
}
private handleAddCollector = (): void => {
diff --git a/ui/src/buckets/components/BucketOverlayForm.tsx b/ui/src/buckets/components/BucketOverlayForm.tsx
index d3b2fa7b566..8236eca6256 100644
--- a/ui/src/buckets/components/BucketOverlayForm.tsx
+++ b/ui/src/buckets/components/BucketOverlayForm.tsx
@@ -28,6 +28,7 @@ interface Props {
onChangeInput: (e: ChangeEvent<HTMLInputElement>) => void
disableRenaming: boolean
buttonText: string
+ onClickRename?: () => void
}
export default class BucketOverlayForm extends PureComponent<Props> {
@@ -43,6 +44,7 @@ export default class BucketOverlayForm extends PureComponent<Props> {
onChangeInput,
onChangeRuleType,
onChangeRetentionRule,
+ onClickRename,
} = this.props
const nameInputStatus = disableRenaming && ComponentStatus.Disabled
@@ -91,6 +93,13 @@ export default class BucketOverlayForm extends PureComponent<Props> {
onClick={onCloseModal}
type={ButtonType.Button}
/>
+ {buttonText === 'Save Changes' && (
+ <Button
+ text="Rename"
+ color={ComponentColor.Danger}
+ onClick={onClickRename}
+ />
+ )}
<Button
text={buttonText}
color={this.submitButtonColor}
@@ -119,7 +128,7 @@ export default class BucketOverlayForm extends PureComponent<Props> {
private get nameHelpText(): string {
if (this.props.disableRenaming) {
- return 'To rename the bucket use the RENAME button. Bucket renaming is not allowed here.'
+ return 'To rename bucket use the RENAME button below'
}
return ''
diff --git a/ui/src/buckets/components/UpdateBucketOverlay.tsx b/ui/src/buckets/components/UpdateBucketOverlay.tsx
index 66f2f8f07ce..95b00c3a2d5 100644
--- a/ui/src/buckets/components/UpdateBucketOverlay.tsx
+++ b/ui/src/buckets/components/UpdateBucketOverlay.tsx
@@ -114,6 +114,10 @@ const UpdateBucketOverlay: FunctionComponent<Props> = ({
router.push(`/orgs/${orgID}/load-data/buckets`)
}
+ const handleClickRename = () => {
+ router.push(`/orgs/${orgID}/load-data/buckets/${bucketID}/rename`)
+ }
+
const rules = get(bucketDraft, 'retentionRules', [])
const rule = rules.find(r => r.type === 'expire')
@@ -140,6 +144,7 @@ const UpdateBucketOverlay: FunctionComponent<Props> = ({
retentionSeconds={retentionSeconds}
onChangeRuleType={handleChangeRuleType}
onChangeRetentionRule={handleChangeRetentionRule}
+ onClickRename={handleClickRename}
/>
</Overlay.Body>
</SpinnerContainer>
diff --git a/ui/src/dataExplorer/components/DataExplorer.tsx b/ui/src/dataExplorer/components/DataExplorer.tsx
index 833aff4224f..cdbe142c240 100644
--- a/ui/src/dataExplorer/components/DataExplorer.tsx
+++ b/ui/src/dataExplorer/components/DataExplorer.tsx
@@ -1,5 +1,5 @@
// Libraries
-import React, {PureComponent} from 'react'
+import React, {FC, useEffect} from 'react'
import {connect} from 'react-redux'
// Components
@@ -9,40 +9,46 @@ import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
// Actions
import {setActiveTimeMachine} from 'src/timeMachine/actions'
+import {setBuilderBucketIfExists} from 'src/timeMachine/actions/queryBuilder'
// Utils
import {HoverTimeProvider} from 'src/dashboards/utils/hoverTime'
import {queryBuilderFetcher} from 'src/timeMachine/apis/QueryBuilderFetcher'
+import {readQueryParams} from 'src/shared/utils/queryParams'
interface DispatchProps {
onSetActiveTimeMachine: typeof setActiveTimeMachine
+ onSetBuilderBucketIfExists: typeof setBuilderBucketIfExists
}
type Props = DispatchProps
-class DataExplorer extends PureComponent<Props, {}> {
- constructor(props: Props) {
- super(props)
- props.onSetActiveTimeMachine('de')
+const DataExplorer: FC<Props> = ({
+ onSetActiveTimeMachine,
+ onSetBuilderBucketIfExists,
+}) => {
+ useEffect(() => {
+ const bucketQP = readQueryParams()['bucket']
+ onSetActiveTimeMachine('de')
queryBuilderFetcher.clearCache()
- }
-
- public render() {
- return (
- <LimitChecker>
- <RateLimitAlert />
- <div className="data-explorer">
- <HoverTimeProvider>
- <TimeMachine />
- </HoverTimeProvider>
- </div>
- </LimitChecker>
- )
- }
+ onSetBuilderBucketIfExists(bucketQP)
+ }, [])
+
+ return (
+ <LimitChecker>
+ <RateLimitAlert />
+ <div className="data-explorer">
+ <HoverTimeProvider>
+ <TimeMachine />
+ </HoverTimeProvider>
+ </div>
+ </LimitChecker>
+ )
}
const mdtp: DispatchProps = {
onSetActiveTimeMachine: setActiveTimeMachine,
+ onSetBuilderBucketIfExists: setBuilderBucketIfExists,
}
export default connect<{}, DispatchProps, {}>(
diff --git a/ui/src/timeMachine/actions/queryBuilder.ts b/ui/src/timeMachine/actions/queryBuilder.ts
index bb6f53d4ade..bf9c7eaab29 100644
--- a/ui/src/timeMachine/actions/queryBuilder.ts
+++ b/ui/src/timeMachine/actions/queryBuilder.ts
@@ -13,6 +13,8 @@ import {
BuilderAggregateFunctionType,
GetState,
RemoteDataState,
+ ResourceType,
+ Bucket,
} from 'src/types'
import {Dispatch} from 'react'
import {BuilderFunctionsType} from '@influxdata/influx'
@@ -23,6 +25,7 @@ import {
// Selectors
import {getOrg} from 'src/organizations/selectors'
+import {getAll} from 'src/resources/selectors'
export type Action =
| ReturnType<typeof setBuilderAggregateFunctionType>
@@ -404,3 +407,13 @@ export const reloadTagSelectors = () => (dispatch: Dispatch<Action>) => {
dispatch(setBuilderTagsStatus(RemoteDataState.Loading))
dispatch(loadTagSelector(0))
}
+
+export const setBuilderBucketIfExists = (bucketName: string) => (
+ dispatch: Dispatch<Action>,
+ getState: GetState
+) => {
+ const buckets = getAll<Bucket>(getState(), ResourceType.Buckets)
+ if (buckets.find(b => b.name === bucketName)) {
+ dispatch(setBuilderBucket(bucketName, true))
+ }
+}