fix: query builder groups on columns, not tag values

CHANGELOG.md

@@ -5,9 +5,10 @@
 ### Bug Fixes
 1. [16919](https://github.com/influxdata/influxdb/pull/16919): Sort dashboards on homepage alphabetically
 1. [16934](https://github.com/influxdata/influxdb/pull/16934): Tokens page now sorts by status
-1. [16931](https://github.com/influxdata/influxdb/pull/16931): Set the defualt value of tags in a Check
+1. [16931](https://github.com/influxdata/influxdb/pull/16931): Set the default value of tags in a Check
 1. [16935](https://github.com/influxdata/influxdb/pull/16935): Fix sort by variable type
 1. [16973](https://github.com/influxdata/influxdb/pull/16973): Calculate correct stacked line cumulative when lines are different lengths
+1. [16992](https://github.com/influxdata/influxdb/pull/16992): Query Builder now groups on column values, not tag values
 
 ## v2.0.0-beta.4 [2020-02-14]
 
@@ -19,7 +20,7 @@
 ### Bug Fixes
 1. [16852](https://github.com/influxdata/influxdb/pull/16852): Revert for bad indexing of UserResourceMappings and Authorizations
 1. [15911](https://github.com/influxdata/influxdb/pull/15911): Gauge no longer allowed to become too small
-1. [16878](https://github.com/influxdata/influxdb/pull/16878): Fix issue with INFLUX_TOKEN env vars being overridden by default token 
+1. [16878](https://github.com/influxdata/influxdb/pull/16878): Fix issue with INFLUX_TOKEN env vars being overridden by default token
 
 ## v2.0.0-beta.3 [2020-02-11]
 

ui/cypress/e2e/queryBuilder.test.ts

@@ -90,6 +90,41 @@ describe('The Query Builder', () => {
     })
   })
 
+  describe('the group() function', () => {
+    it('creates a query that has a group() function in it', () => {
+      cy.get('@org').then((org: Organization) => {
+        cy.visit(`orgs/${org.id}/data-explorer`)
+      })
+
+      cy.contains('mem').click('left')
+      cy.getByTestID('builder-card')
+        .last()
+        .contains('Filter')
+        .click()
+        .get('.cf-dropdown--menu-container')
+        .contains('group')
+        .click()
+
+      const groupableColums = []
+
+      cy.getByTestID('builder-card')
+        .last()
+        .then($lastBuilderCard => {
+          $lastBuilderCard.find('.selector-list--item').each((index, $item) => {
+            groupableColums.push($item.innerHTML)
+          })
+
+          expect(groupableColums).to.eql([
+            '_start',
+            '_stop',
+            '_time',
+            '_measurement',
+            '_field',
+          ])
+        })
+    })
+  })
+
   // This is flaky in prod
   // https://circleci.com/gh/influxdata/influxdb/74628#artifacts/containers/0
   describe.skip('from the Dashboard view', () => {

ui/src/timeMachine/components/TagSelector.tsx

@@ -35,7 +35,6 @@ import DefaultDebouncer from 'src/shared/utils/debouncer'
 import {toComponentStatus} from 'src/shared/utils/toComponentStatus'
 import {
   getActiveQuery,
-  getActiveTagValues,
   getActiveTimeMachine,
   getIsInCheckOverlay,
 } from 'src/timeMachine/selectors'
@@ -49,6 +48,9 @@ import {
 
 const SEARCH_DEBOUNCE_MS = 500
 
+// We don't show these columns in results but they're able to be grouped on for most queries
+const ADDITIONAL_GROUP_BY_COLUMNS = ['_start', '_stop', '_time']
+
 interface StateProps {
   aggregateFunctionType: BuilderAggregateFunctionType
   emptyText: string
@@ -143,6 +145,10 @@ class TagSelector extends PureComponent<Props> {
       )
     }
 
+    const placeholderText =
+      aggregateFunctionType === 'group'
+        ? 'Search group column values'
+        : `Search ${selectedKey} tag values`
     return (
       <>
         <BuilderCard.Menu testID={`tag-selector--container ${index}`}>
@@ -170,7 +176,7 @@ class TagSelector extends PureComponent<Props> {
           )}
           <Input
             value={valuesSearchTerm}
-            placeholder={`Search ${selectedKey} tag values`}
+            placeholder={placeholderText}
             className="tag-selector--search"
             onChange={this.handleValuesSearch}
           />
@@ -300,16 +306,10 @@ const mstp = (state: AppState, ownProps: OwnProps): StateProps => {
 
   const tags = getActiveQuery(state).builderConfig.tags
 
-  let emptyText: string
+  let emptyText: string = ''
   const previousTagSelector = tags[ownProps.index - 1]
-  if (
-    ownProps.index === 0 ||
-    !previousTagSelector ||
-    !previousTagSelector.key
-  ) {
-    emptyText = ''
-  } else {
-    emptyText = `Select a ${tags[ownProps.index - 1].key} value first`
+  if (previousTagSelector && previousTagSelector.key) {
+    emptyText = `Select a ${previousTagSelector.key} value first`
   }
 
   const {
@@ -318,11 +318,10 @@ const mstp = (state: AppState, ownProps: OwnProps): StateProps => {
     aggregateFunctionType,
   } = tags[ownProps.index]
 
-  const values = getActiveTagValues(
-    activeQueryBuilder.tags,
-    aggregateFunctionType,
-    ownProps.index
-  )
+  let {values} = activeQueryBuilder.tags[ownProps.index]
+  if (aggregateFunctionType === 'group') {
+    values = [...ADDITIONAL_GROUP_BY_COLUMNS, ...tags.map(tag => tag.key)]
+  }
   const isInCheckOverlay = getIsInCheckOverlay(state)
 
   return {

ui/src/timeMachine/selectors/index.test.ts

@@ -1,8 +1,4 @@
-import {
-  getActiveTagValues,
-  getStartTime,
-  getEndTime,
-} from 'src/timeMachine/selectors/index'
+import {getStartTime, getEndTime} from 'src/timeMachine/selectors/index'
 import moment from 'moment'
 
 import {
@@ -62,88 +58,3 @@ describe('TimeMachine.Selectors.Index', () => {
     expect(getEndTime(pastThirtyDaysTimeRange)).toBeGreaterThanOrEqual(now)
   })
 })
-
-describe('getting active tag values', () => {
-  const activeQueryTags = [
-    {
-      keys: [
-        '_field',
-        '_measurement',
-        'cpu',
-        'device',
-        'fstype',
-        'host',
-        'interface',
-        'mode',
-        'name',
-        'path',
-      ],
-      values: [
-        'cpu',
-        'disk',
-        'diskio',
-        'mem',
-        'net',
-        'processes',
-        'swap',
-        'system',
-      ],
-    },
-    {
-      keys: ['_field', 'host'],
-      values: [
-        'active',
-        'available',
-        'available_percent',
-        'buffered',
-        'cached',
-        'commit_limit',
-        'committed_as',
-        'dirty',
-        'free',
-        'high_free',
-        'high_total',
-        'huge_page_size',
-        'huge_pages_free',
-        'huge_pages_total',
-        'inactive',
-        'low_free',
-        'low_total',
-        'mapped',
-        'page_tables',
-        'shared',
-        'slab',
-        'swap_cached',
-        'swap_free',
-        'swap_total',
-        'total',
-        'used',
-        'used_percent',
-        'vmalloc_chunk',
-        'vmalloc_total',
-        'vmalloc_used',
-        'wired',
-        'write_back',
-        'write_back_tmp',
-      ],
-    },
-    {
-      keys: ['host'],
-      values: ['foo_computer'],
-    },
-  ]
-
-  it('returns the active query tag values when the function is filter', () => {
-    const actualTags = getActiveTagValues(activeQueryTags, 'filter', 2)
-    expect(actualTags).toEqual(activeQueryTags[2].values)
-  })
-
-  it('returns all previous tag values when the function is group', () => {
-    const actualTags = getActiveTagValues(activeQueryTags, 'group', 2)
-    expect(actualTags).toEqual([
-      ...activeQueryTags[0].values,
-      ...activeQueryTags[1].values,
-      ...activeQueryTags[2].values,
-    ])
-  })
-})

ui/src/timeMachine/selectors/index.ts

@@ -25,8 +25,6 @@ import {
 // Types
 import {
   QueryView,
-  BuilderAggregateFunctionType,
-  BuilderTagsType,
   DashboardQuery,
   FluxTable,
   AppState,
@@ -244,25 +242,6 @@ export const getActiveTimeRange = (
   return null
 }
 
-export const getActiveTagValues = (
-  activeQueryBuilderTags: BuilderTagsType[],
-  aggregateFunctionType: BuilderAggregateFunctionType,
-  index: number
-): string[] => {
-  // if we're grouping, we want to be able to group on all previous tags
-  if (aggregateFunctionType === 'group') {
-    const values = []
-    activeQueryBuilderTags.forEach(tag => {
-      tag.values.forEach(value => {
-        values.push(value)
-      })
-    })
-    return values
-  }
-
-  return activeQueryBuilderTags[index].values
-}
-
 export const getSaveableView = (state: AppState): QueryView & {id?: string} => {
   const {view, draftQueries} = getActiveTimeMachine(state)