refactor(ui): alerting details polish (#15056)

* refactor(ui): add default values for deadman condition * refactor(ui): limit values to 2 decimal places when dragging thereshold handles * refactor(ui): prevent system buckets from being deleted or renamed * refactor(ui): indicate which buckets are system buckets * refactor(ui): prevent user from creating buckets starting with _ * refactor(ui): remove system bucketes from generate token overlay * refactor(ui): remove system buckets from bucket dropdowns * chore(ui): update changelog
influxdata · Sep 9, 2019 · 32d1120 · 32d1120
1 parent cc22607
commit 32d1120
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 85 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,10 @@
 ### Features
 
 ### UI Improvements
+1. [15056](https://github.com/influxdata/influxdb/pull/15056): Remove rename and delete functionality from system buckets
+1. [15056](https://github.com/influxdata/influxdb/pull/15056): Prevent new buckets from being named with the reserved "_" prefix
+1. [15056](https://github.com/influxdata/influxdb/pull/15056): Prevent user from selecting system buckets when creating Scrapers, Telegraf configurations, read/write tokens, and when saving as a task
+1. [15056](https://github.com/influxdata/influxdb/pull/15056): Limit values from draggable threshold handles to 2 decimal places
 1. [15040](https://github.com/influxdata/influxdb/pull/15040): Redesign check builder UI to fill the screen and make more room for composing message templates
 1. [14990](https://github.com/influxdata/influxdb/pull/14990): Move Tokens tab from Settings to Load Data page
 1. [14990](https://github.com/influxdata/influxdb/pull/14990): Expose all Settings tabs in navigation menu

diff --git a/ui/src/alerting/constants/index.ts b/ui/src/alerting/constants/index.ts
@@ -72,6 +72,8 @@ export const DEFAULT_DEADMAN_CHECK: Partial<DeadmanCheck> = {
   reportZero: DEFAULT_CHECK_REPORT_ZERO,
   level: DEFAULT_DEADMAN_LEVEL,
   statusMessageTemplate: DEFAULT_STATUS_MESSAGE,
+  timeSince: '90s',
+  staleTime: '10m',
 }
 
 export const CHECK_QUERY_FIXTURE: DashboardQuery = {

diff --git a/ui/src/authorizations/components/BucketsTokenOverlay.tsx b/ui/src/authorizations/components/BucketsTokenOverlay.tsx
@@ -28,6 +28,7 @@ import {
   allBucketsPermissions,
   BucketTab,
 } from 'src/authorizations/utils/permissions'
+import {isSystemBucket} from 'src/buckets/constants/index'
 
 // Actions
 import {createAuthorization} from 'src/authorizations/actions'
@@ -67,7 +68,6 @@ class BucketsTokenOverlay extends PureComponent<Props, State> {
   }
 
   render() {
-    const {buckets} = this.props
     const {
       description,
       readBuckets,
@@ -107,7 +107,7 @@ class BucketsTokenOverlay extends PureComponent<Props, State> {
                       >
                         <BucketsSelector
                           onSelect={this.handleSelectReadBucket}
-                          buckets={buckets}
+                          buckets={this.nonSystemBuckets}
                           selectedBuckets={readBuckets}
                           title="Read"
                           onSelectAll={this.handleReadSelectAllBuckets}
@@ -122,7 +122,7 @@ class BucketsTokenOverlay extends PureComponent<Props, State> {
                       >
                         <BucketsSelector
                           onSelect={this.handleSelectWriteBucket}
-                          buckets={buckets}
+                          buckets={this.nonSystemBuckets}
                           selectedBuckets={writeBuckets}
                           title="Write"
                           onSelectAll={this.handleWriteSelectAllBuckets}
@@ -264,6 +264,12 @@ class BucketsTokenOverlay extends PureComponent<Props, State> {
     return allBucketsPermissions(orgID, 'write')
   }
 
+  private get nonSystemBuckets(): Bucket[] {
+    const {buckets} = this.props
+
+    return buckets.filter(bucket => !isSystemBucket(bucket.name))
+  }
+
   private handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const {value} = e.target
 

diff --git a/ui/src/buckets/components/BucketAddDataButton.scss b/ui/src/buckets/components/BucketAddDataButton.scss
@@ -50,3 +50,7 @@
     color: $g13-mist;
   }
 }
+
+.system-bucket {
+  color: mix($c-honeydew, $g13-mist);
+}
diff --git a/ui/src/buckets/components/BucketCard.tsx b/ui/src/buckets/components/BucketCard.tsx
@@ -15,6 +15,9 @@ import BucketContextMenu from 'src/buckets/components/BucketContextMenu'
 import BucketAddDataButton from 'src/buckets/components/BucketAddDataButton'
 import {FeatureFlag} from 'src/shared/utils/featureFlag'
 
+// Constants
+import {isSystemBucket} from 'src/buckets/constants/index'
+
 // Types
 import {Bucket} from 'src/types'
 import {DataLoaderType} from 'src/types/dataLoaders'
@@ -40,7 +43,12 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
       <ResourceCard
         testID="bucket--card"
         contextMenu={
-          <BucketContextMenu bucket={bucket} onDeleteBucket={onDeleteBucket} />
+          !isSystemBucket(bucket.name) && (
+            <BucketContextMenu
+              bucket={bucket}
+              onDeleteBucket={onDeleteBucket}
+            />
+          )
         }
         name={
           <ResourceCard.Name
@@ -49,7 +57,12 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
             name={bucket.name}
           />
         }
-        metaData={[<>Retention: {bucket.ruleString}</>]}
+        metaData={[
+          isSystemBucket(bucket.name) && (
+            <span className="system-bucket">System Bucket</span>
+          ),
+          <>Retention: {bucket.ruleString}</>,
+        ]}
       >
         <FlexBox
           direction={FlexDirection.Row}

diff --git a/ui/src/buckets/components/BucketOverlayForm.tsx b/ui/src/buckets/components/BucketOverlayForm.tsx
@@ -8,6 +8,7 @@ import Retention from 'src/buckets/components/Retention'
 
 // Constants
 import {MIN_RETENTION_SECONDS} from 'src/buckets/constants'
+import {isSystemBucket} from 'src/buckets/constants/index'
 
 // Types
 import {
@@ -18,15 +19,14 @@ import {
 
 interface Props {
   name: string
-  nameErrorMessage: string
   retentionSeconds: number
   ruleType: 'expire'
   onSubmit: (e: FormEvent<HTMLFormElement>) => void
   onCloseModal: () => void
   onChangeRetentionRule: (seconds: number) => void
   onChangeRuleType: (t: 'expire') => void
   onChangeInput: (e: ChangeEvent<HTMLInputElement>) => void
-  nameInputStatus: ComponentStatus
+  disableRenaming: boolean
   buttonText: string
 }
 
@@ -37,34 +37,38 @@ export default class BucketOverlayForm extends PureComponent<Props> {
       onSubmit,
       ruleType,
       buttonText,
-      nameErrorMessage,
       retentionSeconds,
-      nameInputStatus,
+      disableRenaming,
       onCloseModal,
       onChangeInput,
       onChangeRuleType,
       onChangeRetentionRule,
     } = this.props
 
+    const nameInputStatus = disableRenaming && ComponentStatus.Disabled
+
     return (
       <Form onSubmit={onSubmit}>
         <Grid>
           <Grid.Row>
             <Grid.Column>
-              <Form.Element
+              <Form.ValidationElement
+                value={name}
                 label="Name"
-                errorMessage={nameErrorMessage}
                 helpText={this.nameHelpText}
+                validationFunc={this.handleNameValidation}
               >
-                <Input
-                  placeholder="Give your bucket a name"
-                  name="name"
-                  autoFocus={true}
-                  value={name}
-                  onChange={onChangeInput}
-                  status={nameInputStatus}
-                />
-              </Form.Element>
+                {status => (
+                  <Input
+                    status={nameInputStatus || status}
+                    placeholder="Give your bucket a name"
+                    name="name"
+                    autoFocus={true}
+                    value={name}
+                    onChange={onChangeInput}
+                  />
+                )}
+              </Form.ValidationElement>
               <Form.Element
                 label="Delete data older than"
                 errorMessage={this.ruleErrorMessage}
@@ -100,12 +104,24 @@ export default class BucketOverlayForm extends PureComponent<Props> {
     )
   }
 
+  private handleNameValidation = (name: string): string | null => {
+    if (isSystemBucket(name)) {
+      return 'Only system bucket names can begin with _'
+    }
+
+    if (!name) {
+      return 'This bucket needs a name'
+    }
+
+    return null
+  }
+
   private get nameHelpText(): string {
-    if (this.props.nameInputStatus !== ComponentStatus.Disabled) {
-      return ''
+    if (this.props.disableRenaming) {
+      return 'To rename the bucket use the RENAME button. Bucket renaming is not allowed here.'
     }
 
-    return 'To rename the bucket use the rename button. Bucket renaming is not allowed here.'
+    return ''
   }
 
   private get submitButtonColor(): ComponentColor {
@@ -120,10 +136,9 @@ export default class BucketOverlayForm extends PureComponent<Props> {
 
   private get submitButtonStatus(): ComponentStatus {
     const {name} = this.props
+    const nameHasErrors = this.handleNameValidation(name)
 
-    const nameEmpty = name === ''
-
-    if (nameEmpty || this.retentionIsTooShort) {
+    if (nameHasErrors || this.retentionIsTooShort) {
       return ComponentStatus.Disabled
     }
 

diff --git a/ui/src/buckets/components/CreateBucketOverlay.tsx b/ui/src/buckets/components/CreateBucketOverlay.tsx
@@ -2,7 +2,7 @@
 import React, {PureComponent, ChangeEvent, FormEvent} from 'react'
 
 // Components
-import {Overlay, ComponentStatus} from '@influxdata/clockface'
+import {Overlay} from '@influxdata/clockface'
 import BucketOverlayForm from 'src/buckets/components/BucketOverlayForm'
 
 // Types
@@ -17,8 +17,6 @@ interface Props {
 interface State {
   bucket: Bucket
   ruleType: 'expire'
-  nameInputStatus: ComponentStatus
-  nameErrorMessage: string
 }
 
 const emptyBucket = {
@@ -30,16 +28,14 @@ export default class CreateBucketOverlay extends PureComponent<Props, State> {
   constructor(props) {
     super(props)
     this.state = {
-      nameErrorMessage: '',
       bucket: emptyBucket,
       ruleType: null,
-      nameInputStatus: ComponentStatus.Default,
     }
   }
 
   public render() {
     const {onCloseModal} = this.props
-    const {bucket, nameInputStatus, nameErrorMessage, ruleType} = this.state
+    const {bucket, ruleType} = this.state
 
     return (
       <Overlay.Container maxWidth={500}>
@@ -51,11 +47,10 @@ export default class CreateBucketOverlay extends PureComponent<Props, State> {
           <BucketOverlayForm
             name={bucket.name}
             buttonText="Create"
+            disableRenaming={false}
             ruleType={ruleType}
             onCloseModal={onCloseModal}
-            nameErrorMessage={nameErrorMessage}
             onSubmit={this.handleSubmit}
-            nameInputStatus={nameInputStatus}
             onChangeInput={this.handleChangeInput}
             retentionSeconds={this.retentionSeconds}
             onChangeRuleType={this.handleChangeRuleType}
@@ -113,18 +108,6 @@ export default class CreateBucketOverlay extends PureComponent<Props, State> {
     const key = e.target.name
     const bucket = {...this.state.bucket, [key]: value}
 
-    if (!value) {
-      return this.setState({
-        bucket,
-        nameInputStatus: ComponentStatus.Error,
-        nameErrorMessage: `Bucket ${key} cannot be empty`,
-      })
-    }
-
-    this.setState({
-      bucket,
-      nameInputStatus: ComponentStatus.Valid,
-      nameErrorMessage: '',
-    })
+    this.setState({bucket})
   }
 }
diff --git a/ui/src/buckets/components/UpdateBucketOverlay.tsx b/ui/src/buckets/components/UpdateBucketOverlay.tsx
@@ -4,7 +4,7 @@ import {withRouter, WithRouterProps} from 'react-router'
 import {connect} from 'react-redux'
 
 // Components
-import {Overlay, ComponentStatus} from '@influxdata/clockface'
+import {Overlay} from '@influxdata/clockface'
 import BucketOverlayForm from 'src/buckets/components/BucketOverlayForm'
 
 // Actions
@@ -18,9 +18,7 @@ import {AppState, Bucket} from 'src/types'
 
 interface State {
   bucket: Bucket
-  nameErrorMessage: string
   ruleType: 'expire'
-  nameInputStatus: ComponentStatus
 }
 
 interface StateProps {
@@ -42,13 +40,11 @@ class UpdateBucketOverlay extends PureComponent<Props, State> {
     this.state = {
       ruleType: this.ruleType(bucket),
       bucket,
-      nameInputStatus: ComponentStatus.Default,
-      nameErrorMessage: '',
     }
   }
 
   public render() {
-    const {bucket, nameErrorMessage, ruleType} = this.state
+    const {bucket, ruleType} = this.state
 
     return (
       <Overlay visible={true}>
@@ -60,9 +56,8 @@ class UpdateBucketOverlay extends PureComponent<Props, State> {
               buttonText="Save Changes"
               ruleType={ruleType}
               onCloseModal={this.handleClose}
-              nameErrorMessage={nameErrorMessage}
               onSubmit={this.handleSubmit}
-              nameInputStatus={ComponentStatus.Disabled}
+              disableRenaming={true}
               onChangeInput={this.handleChangeInput}
               retentionSeconds={this.retentionSeconds}
               onChangeRuleType={this.handleChangeRuleType}
@@ -127,19 +122,7 @@ class UpdateBucketOverlay extends PureComponent<Props, State> {
     const key = e.target.name
     const bucket = {...this.state.bucket, [key]: value}
 
-    if (!value) {
-      return this.setState({
-        bucket,
-        nameInputStatus: ComponentStatus.Error,
-        nameErrorMessage: `Bucket ${key} cannot be empty`,
-      })
-    }
-
-    this.setState({
-      bucket,
-      nameInputStatus: ComponentStatus.Valid,
-      nameErrorMessage: '',
-    })
+    this.setState({bucket})
   }
 
   private handleClose = () => {

diff --git a/ui/src/buckets/constants/index.ts b/ui/src/buckets/constants/index.ts
@@ -1 +1,7 @@
+import {startsWith} from 'lodash'
+
 export const MIN_RETENTION_SECONDS = 3600
+
+export const isSystemBucket = (bucketName: string): boolean => {
+  return startsWith(bucketName, '_')
+}
diff --git a/ui/src/dataLoaders/components/BucketsDropdown.tsx b/ui/src/dataLoaders/components/BucketsDropdown.tsx
@@ -4,6 +4,9 @@ import React, {PureComponent} from 'react'
 // Components
 import {Dropdown, ComponentStatus} from '@influxdata/clockface'
 
+// Utils
+import {isSystemBucket} from 'src/buckets/constants/index'
+
 // Types
 import {Bucket} from 'src/types'
 
@@ -67,7 +70,13 @@ class BucketsDropdown extends PureComponent<Props> {
       return []
     }
 
-    return buckets.map(b => (
+    const nonSystemBuckets = buckets.filter(bucket => {
+      if (!isSystemBucket(bucket.name)) {
+        return bucket
+      }
+    })
+
+    return nonSystemBuckets.map(b => (
       <Dropdown.Item
         key={b.name}
         value={b}