refactor(ui): introduce "Load Data" tab (#14709)

* refactor(ui): extend url activator to check on deeper URLs * refactor(ui): create load data nav and page components * refactor(ui): update telegrafs, scrapers, and buckets to use load data nav * refactor(ui): update side nav and router to expose load data tab * chore(ui): update changelog * refactor(ui): update link to telegrafs page from status page * refactor(ui): fix broken routes * refactor(ui): make settings page tabs consistent with load data tabs * refactor(ui): appease the linter gods * refactor(ui): attempt to fix e2e tests
influxdata · Aug 20, 2019 · 450b85f · 450b85f
1 parent b355527
commit 450b85f
Show file tree

Hide file tree

Showing 22 changed files with 289 additions and 80 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 1. [14694](https://github.com/influxdata/influxdb/pull/14694): Add ability to find tasks by name.
 
 ### UI Improvements
+1. [14709](https://github.com/influxdata/influxdb/pull/14709): Move Buckets, Telgrafs, and Scrapers pages into a tab called "Load Data" for ease of discovery
 
 ### Bug Fixes
 

diff --git a/ui/cypress/e2e/buckets.test.ts b/ui/cypress/e2e/buckets.test.ts
@@ -12,7 +12,7 @@ describe('Buckets', () => {
       cy.wrap(body.org).as('org')
       cy.wrap(bucket).as('bucket')
       cy.fixture('routes').then(({orgs}) => {
-        cy.visit(`${orgs}/${id}/buckets`)
+        cy.visit(`${orgs}/${id}/load-data/buckets`)
       })
     })
   })

diff --git a/ui/cypress/e2e/scrapers.test.ts b/ui/cypress/e2e/scrapers.test.ts
@@ -13,7 +13,7 @@ describe('Scrapers', () => {
       cy.wrap(bucket).as('bucket')
 
       cy.fixture('routes').then(({orgs}) => {
-        cy.visit(`${orgs}/${id}/scrapers`)
+        cy.visit(`${orgs}/${id}/load-data/scrapers`)
       })
     })
   })
@@ -74,7 +74,7 @@ describe('Scrapers', () => {
 
         cy.fixture('routes').then(({orgs}) => {
           cy.get<Organization>('@org').then(({id}: Organization) => {
-            cy.visit(`${orgs}/${id}/scrapers`)
+            cy.visit(`${orgs}/${id}/load-data/scrapers`)
           })
         })
       })

diff --git a/ui/src/buckets/components/BucketCard.tsx b/ui/src/buckets/components/BucketCard.tsx
@@ -63,7 +63,7 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
       router,
     } = this.props
 
-    router.push(`/orgs/${orgID}/buckets/${id}/rename`)
+    router.push(`/orgs/${orgID}/load-data/buckets/${id}/rename`)
   }
 
   private handleNameClick = (): void => {
@@ -73,7 +73,7 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
       router,
     } = this.props
 
-    router.push(`/orgs/${orgID}/buckets/${id}/edit`)
+    router.push(`/orgs/${orgID}/load-data/buckets/${id}/edit`)
   }
 
   private handleAddCollector = (): void => {
@@ -82,7 +82,7 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
       bucket: {id},
     } = this.props
 
-    const link = `/orgs/${orgID}/buckets/${id}/telegrafs/new`
+    const link = `/orgs/${orgID}/load-data/buckets/${id}/telegrafs/new`
     this.props.onAddData(this.props.bucket, DataLoaderType.Streaming, link)
   }
 
@@ -92,7 +92,7 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
       bucket: {id},
     } = this.props
 
-    const link = `/orgs/${orgID}/buckets/${id}/line-protocols/new`
+    const link = `/orgs/${orgID}/load-data/buckets/${id}/line-protocols/new`
     this.props.onAddData(this.props.bucket, DataLoaderType.LineProtocol, link)
   }
 
@@ -102,7 +102,7 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
       bucket: {id},
     } = this.props
 
-    const link = `/orgs/${orgID}/buckets/${id}/scrapers/new`
+    const link = `/orgs/${orgID}/load-data/buckets/${id}/scrapers/new`
     this.props.onAddData(this.props.bucket, DataLoaderType.Scraping, link)
   }
 }

diff --git a/ui/src/buckets/components/BucketList.tsx b/ui/src/buckets/components/BucketList.tsx
@@ -136,13 +136,15 @@ class BucketList extends PureComponent<Props & WithRouterProps, State> {
   private handleStartEdit = (bucket: PrettyBucket) => {
     const {orgID} = this.props.params
 
-    this.props.router.push(`/orgs/${orgID}/buckets/${bucket.id}/edit`)
+    this.props.router.push(`/orgs/${orgID}/load-data/buckets/${bucket.id}/edit`)
   }
 
   private handleStartDeleteData = (bucket: PrettyBucket) => {
     const {orgID} = this.props.params
 
-    this.props.router.push(`/orgs/${orgID}/buckets/${bucket.id}/delete-data`)
+    this.props.router.push(
+      `/orgs/${orgID}/load-data/buckets/${bucket.id}/delete-data`
+    )
   }
 
   private handleStartAddData = (

diff --git a/ui/src/buckets/components/RenameBucketForm.tsx b/ui/src/buckets/components/RenameBucketForm.tsx
@@ -137,7 +137,7 @@ class RenameBucketForm extends PureComponent<Props, State> {
       params: {orgID},
     } = this.props
 
-    router.push(`/orgs/${orgID}/buckets`)
+    router.push(`/orgs/${orgID}/load-data/buckets`)
   }
 }
 

diff --git a/ui/src/buckets/components/RenameBucketOverlay.tsx b/ui/src/buckets/components/RenameBucketOverlay.tsx
@@ -47,7 +47,7 @@ class RenameBucketOverlay extends PureComponent<WithRouterProps> {
       params: {orgID},
     } = this.props
 
-    router.push(`/orgs/${orgID}/buckets`)
+    router.push(`/orgs/${orgID}/load-data/buckets`)
   }
 }
 

diff --git a/ui/src/buckets/components/UpdateBucketOverlay.tsx b/ui/src/buckets/components/UpdateBucketOverlay.tsx
@@ -144,7 +144,7 @@ class UpdateBucketOverlay extends PureComponent<Props, State> {
 
   private handleClose = () => {
     const {orgID} = this.props.params
-    this.props.router.push(`/orgs/${orgID}/buckets`)
+    this.props.router.push(`/orgs/${orgID}/load-data/buckets`)
   }
 }
 

diff --git a/ui/src/buckets/containers/BucketsIndex.tsx b/ui/src/buckets/containers/BucketsIndex.tsx
@@ -4,8 +4,8 @@ import {connect} from 'react-redux'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import SettingsTabbedPage from 'src/settings/components/SettingsTabbedPage'
-import SettingsHeader from 'src/settings/components/SettingsHeader'
+import LoadDataTabbedPage from 'src/settings/components/LoadDataTabbedPage'
+import LoadDataHeader from 'src/settings/components/LoadDataHeader'
 import {Page} from 'src/pageLayout'
 import BucketsTab from 'src/buckets/components/BucketsTab'
 import GetResources, {ResourceTypes} from 'src/shared/components/GetResources'
@@ -26,16 +26,16 @@ class BucketsIndex extends Component<StateProps> {
     return (
       <>
         <Page titleTag={org.name}>
-          <SettingsHeader />
-          <SettingsTabbedPage activeTab="buckets" orgID={org.id}>
+          <LoadDataHeader />
+          <LoadDataTabbedPage activeTab="buckets" orgID={org.id}>
             <GetResources resource={ResourceTypes.Buckets}>
               <GetResources resource={ResourceTypes.Telegrafs}>
                 <GetAssetLimits>
                   <BucketsTab />
                 </GetAssetLimits>
               </GetResources>
             </GetResources>
-          </SettingsTabbedPage>
+          </LoadDataTabbedPage>
         </Page>
         {children}
       </>

diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -217,32 +217,52 @@ class Root extends PureComponent {
                           <Route path="settings">
                             <IndexRoute component={MembersIndex} />
                           </Route>
-                          <Route path="buckets" component={BucketsIndex}>
-                            <Route path=":bucketID">
+                          <Route path="load-data">
+                            <IndexRoute component={BucketsIndex} />
+                            <Route path="buckets" component={BucketsIndex}>
+                              <Route path=":bucketID">
+                                <Route
+                                  path="line-protocols/new"
+                                  component={LineProtocolWizard}
+                                />
+                                <Route
+                                  path="telegrafs/new"
+                                  component={CollectorsWizard}
+                                />
+                                <Route
+                                  path="scrapers/new"
+                                  component={CreateScraperOverlay}
+                                />
+                                <Route
+                                  path="edit"
+                                  component={UpdateBucketOverlay}
+                                />
+                                <Route
+                                  path="delete-data"
+                                  component={BucketsDeleteDataOverlay}
+                                />
+                                <Route
+                                  path="rename"
+                                  component={RenameBucketOverlay}
+                                />
+                              </Route>
+                            </Route>
+                            <Route path="telegrafs" component={TelegrafsPage}>
                               <Route
-                                path="line-protocols/new"
-                                component={LineProtocolWizard}
+                                path=":id/view"
+                                component={TelegrafConfigOverlay}
                               />
                               <Route
-                                path="telegrafs/new"
-                                component={CollectorsWizard}
+                                path=":id/instructions"
+                                component={TelegrafInstructionsOverlay}
                               />
+                              <Route path="new" component={CollectorsWizard} />
+                            </Route>
+                            <Route path="scrapers" component={ScrapersIndex}>
                               <Route
-                                path="scrapers/new"
+                                path="new"
                                 component={CreateScraperOverlay}
                               />
-                              <Route
-                                path="edit"
-                                component={UpdateBucketOverlay}
-                              />
-                              <Route
-                                path="delete-data"
-                                component={BucketsDeleteDataOverlay}
-                              />
-                              <Route
-                                path="rename"
-                                component={RenameBucketOverlay}
-                              />
                             </Route>
                           </Route>
                           <Route path="tokens" component={TokensIndex}>
@@ -312,12 +332,6 @@ class Root extends PureComponent {
                             />
                           </Route>
                           <Route path="labels" component={LabelsIndex} />
-                          <Route path="scrapers" component={ScrapersIndex}>
-                            <Route
-                              path="new"
-                              component={CreateScraperOverlay}
-                            />
-                          </Route>
                           <FeatureFlag name="alerting">
                             <Route path="alerting" component={AlertingIndex}>
                               <Route path="checks/new" component={NewCheckEO} />

diff --git a/ui/src/me/components/GettingStarted.tsx b/ui/src/me/components/GettingStarted.tsx
@@ -17,7 +17,7 @@ class GettingStarted extends PureComponent<WithRouterProps> {
       <div className="getting-started">
         <div className="getting-started--container">
           <Link
-            to={`/orgs/${orgID}/telegrafs`}
+            to={`/orgs/${orgID}/load-data/telegrafs`}
             className="getting-started--card"
           >
             <GradientBorder />

diff --git a/ui/src/pageLayout/containers/Nav.tsx b/ui/src/pageLayout/containers/Nav.tsx
@@ -64,6 +64,10 @@ class SideNav extends PureComponent<Props, State> {
     const tasksLink = `${orgPrefix}/tasks`
     const alertingLink = `${orgPrefix}/alerting`
     const alertHistoryLink = `${orgPrefix}/alert-history`
+    const loadDataLink = `${orgPrefix}/load-data/buckets`
+    const bucketsLink = `${orgPrefix}/load-data/buckets`
+    const telegrafsLink = `${orgPrefix}/load-data/telegrafs`
+    const scrapersLink = `${orgPrefix}/load-data/scrapers`
     const settingsLink = `${orgPrefix}/settings`
     const feedbackLink =
       'https://docs.google.com/forms/d/e/1FAIpQLSdGJpnIZGotN1VFJPkgZEhrt4t4f6QY1lMgMSRUnMeN3FjCKA/viewform?usp=sf_link'
@@ -152,11 +156,55 @@ class SideNav extends PureComponent<Props, State> {
                   Check Statuses
                 </Link>
               )}
-              active={false}
+              active={getNavItemActivation(
+                ['alert-history'],
+                location.pathname
+              )}
               key="alert-history"
             />
           </NavMenu.Item>
         </FeatureFlag>
+        <NavMenu.Item
+          titleLink={className => (
+            <Link className={className} to={loadDataLink}>
+              Load Data
+            </Link>
+          )}
+          iconLink={className => (
+            <Link to={loadDataLink} className={className}>
+              <Icon glyph={IconFont.Disks} />
+            </Link>
+          )}
+          active={getNavItemActivation(['load-data'], location.pathname)}
+        >
+          <NavMenu.SubItem
+            titleLink={className => (
+              <Link to={bucketsLink} className={className}>
+                Buckets
+              </Link>
+            )}
+            active={getNavItemActivation(['buckets'], location.pathname)}
+            key="buckets"
+          />
+          <NavMenu.SubItem
+            titleLink={className => (
+              <Link to={telegrafsLink} className={className}>
+                Telegrafs
+              </Link>
+            )}
+            active={getNavItemActivation(['telegrafs'], location.pathname)}
+            key="telegrafs"
+          />
+          <NavMenu.SubItem
+            titleLink={className => (
+              <Link to={scrapersLink} className={className}>
+                Scrapers
+              </Link>
+            )}
+            active={getNavItemActivation(['scrapers'], location.pathname)}
+            key="scrapers"
+          />
+        </NavMenu.Item>
         <NavMenu.Item
           titleLink={className => (
             <Link className={className} to={settingsLink}>

diff --git a/ui/src/pageLayout/utils/index.ts b/ui/src/pageLayout/utils/index.ts
@@ -1,10 +1,8 @@
-import _ from 'lodash'
-
 export const getNavItemActivation = (
   keywords: string[],
   location: string
 ): boolean => {
   const ignoreOrgAndOrgID = 3
-  const parentPath = _.get(location.split('/'), ignoreOrgAndOrgID, '')
-  return keywords.some(path => path === parentPath)
+  const parentPath = location.split('/').slice(ignoreOrgAndOrgID)
+  return keywords.some(path => parentPath.includes(path))
 }
diff --git a/ui/src/scrapers/components/Scrapers.tsx b/ui/src/scrapers/components/Scrapers.tsx
@@ -184,7 +184,7 @@ class Scrapers extends PureComponent<Props, State> {
       return
     }
 
-    router.push(`/orgs/${orgID}/scrapers/new`)
+    router.push(`/orgs/${orgID}/load-data/scrapers/new`)
   }
 
   private handleFilterChange = (searchTerm: string): void => {

diff --git a/ui/src/scrapers/containers/ScrapersIndex.tsx b/ui/src/scrapers/containers/ScrapersIndex.tsx
@@ -4,8 +4,8 @@ import {connect} from 'react-redux'
 
 // Components
 import {Page} from 'src/pageLayout'
-import SettingsHeader from 'src/settings/components/SettingsHeader'
-import SettingsTabbedPage from 'src/settings/components/SettingsTabbedPage'
+import LoadDataHeader from 'src/settings/components/LoadDataHeader'
+import LoadDataTabbedPage from 'src/settings/components/LoadDataTabbedPage'
 import GetResources, {ResourceTypes} from 'src/shared/components/GetResources'
 import Scrapers from 'src/scrapers/components/Scrapers'
 
@@ -27,14 +27,14 @@ class ScrapersIndex extends Component<StateProps> {
     return (
       <>
         <Page titleTag={org.name}>
-          <SettingsHeader />
-          <SettingsTabbedPage activeTab="scrapers" orgID={org.id}>
+          <LoadDataHeader />
+          <LoadDataTabbedPage activeTab="scrapers" orgID={org.id}>
             <GetResources resource={ResourceTypes.Scrapers}>
               <GetResources resource={ResourceTypes.Buckets}>
                 <Scrapers orgName={org.name} />
               </GetResources>
             </GetResources>
-          </SettingsTabbedPage>
+          </LoadDataTabbedPage>
         </Page>
         {children}
       </>

diff --git a/ui/src/settings/components/LoadDataHeader.tsx b/ui/src/settings/components/LoadDataHeader.tsx
@@ -0,0 +1,20 @@
+import React, {Component} from 'react'
+
+// Components
+import {Page} from 'src/pageLayout'
+import PageTitleWithOrg from 'src/shared/components/PageTitleWithOrg'
+
+class LoadDataHeader extends Component {
+  public render() {
+    return (
+      <Page.Header fullWidth={false}>
+        <Page.Header.Left>
+          <PageTitleWithOrg title="Load Data" />
+        </Page.Header.Left>
+        <Page.Header.Right />
+      </Page.Header>
+    )
+  }
+}
+
+export default LoadDataHeader
-Original file line number
+Diff line change
@@ Expand Up / @@ -184,7 +184,7 @@ class Scrapers extends PureComponent<Props, State> { @@
           return
         }
-        router.push(`/orgs/${orgID}/scrapers/new`)
+        router.push(`/orgs/${orgID}/load-data/scrapers/new`)
       }
       private handleFilterChange = (searchTerm: string): void => {
@@ Expand Down @@