Start breaking up the sadness in applyFuncsToFields

ui/src/data_explorer/actions/view/index.js

@@ -42,26 +42,14 @@ export const fill = (queryId, value) => ({
   },
 })
 
-/*
-// all fields implicitly have a function applied to them by default, unless
-// it was explicitly removed previously, so set the auto group by time except
-// under that removal condition
-export const toggleFieldWithGroupByInterval = (queryID, fieldFunc) => (
-  dispatch,
-  getState
-) => {
-  dispatch(toggleField(queryID, fieldFunc))
-  // toggleField determines whether to add a func, so now check state for funcs
-  // presence, and if present then apply default group by time
-  const updatedFieldFunc = getState().dataExplorerQueryConfigs[
-    queryID
-  ].fields.find(({field}) => field === fieldFunc.field)
-  // updatedFieldFunc could be undefined if it was toggled for removal
-  if (updatedFieldFunc && updatedFieldFunc.funcs.length) {
-    dispatch(groupByTime(queryID, DEFAULT_DATA_EXPLORER_GROUP_BY_INTERVAL))
-  }
-}
-*/
+export const removeFuncs = (queryID, fields, groupBy) => ({
+  type: 'DE_REMOVE_FUNCS',
+  payload: {
+    queryID,
+    fields,
+    groupBy,
+  },
+})
 
 export const applyFuncsToField = (queryId, fieldFunc) => ({
   type: 'DE_APPLY_FUNCS_TO_FIELD',

ui/src/data_explorer/constants/index.js

@@ -82,4 +82,4 @@ export const QUERY_TEMPLATES = [
   {text: 'Show Diagnostics', query: 'SHOW DIAGNOSTICS'},
 ]
 
-export const DEFAULT_DATA_EXPLORER_GROUP_BY_INTERVAL = '10s'
+export const INITIAL_GROUP_BY_TIME = '10s'

ui/src/data_explorer/reducers/queryConfigs.js

@@ -2,18 +2,20 @@ import _ from 'lodash'
 
 import defaultQueryConfig from 'src/utils/defaultQueryConfig'
 import {
-  editRawText,
-  applyFuncsToField,
-  chooseMeasurement,
-  chooseNamespace,
+  fill,
   chooseTag,
   groupByTag,
+  removeFuncs,
   groupByTime,
   toggleField,
-  toggleTagAcceptance,
-  fill,
+  editRawText,
   updateRawQuery,
+  chooseNamespace,
+  chooseMeasurement,
+  applyFuncsToField,
+  toggleTagAcceptance,
 } from 'src/utils/queryTransitions'
+import {INITIAL_GROUP_BY_TIME} from 'src/data_explorer/constants'
 
 const queryConfigs = (state = {}, action) => {
   switch (action.type) {
@@ -99,9 +101,11 @@ const queryConfigs = (state = {}, action) => {
 
     case 'DE_APPLY_FUNCS_TO_FIELD': {
       const {queryId, fieldFunc} = action.payload
-      const nextQueryConfig = applyFuncsToField(state[queryId], fieldFunc, {
-        preventAutoGroupBy: true,
-      })
+      const nextQueryConfig = applyFuncsToField(
+        state[queryId],
+        fieldFunc,
+        INITIAL_GROUP_BY_TIME
+      )
 
       return Object.assign({}, state, {
         [queryId]: nextQueryConfig,
@@ -151,6 +155,21 @@ const queryConfigs = (state = {}, action) => {
 
       return {...state, ...nextState}
     }
+
+    case 'DE_REMOVE_FUNCS': {
+      const {queryID, fields, groupBy} = action.payload
+
+      // fields with no functions cannot have a group by time
+      const nextState = {
+        [queryID]: {
+          ...state[queryID],
+          fields: removeFuncs(fields),
+          groupBy: {...groupBy, time: null},
+        },
+      }
+
+      return {...state, ...nextState}
+    }
   }
   return state
 }

ui/src/shared/components/FieldList.js

@@ -64,6 +64,19 @@ class FieldList extends Component {
     this.props.onFill(fill)
   }
 
+  handleApplyFuncs = fieldFunc => {
+    const {removeFuncs, query, applyFuncsToField} = this.props
+    const {id, fields, groupBy} = query
+    const {field, funcs} = fieldFunc
+
+    // If one field has no funcs, all fields must have no funcs
+    if (!_.size(funcs)) {
+      return removeFuncs(fields, groupBy)
+    }
+
+    applyFuncsToField(fieldFunc)
+  }
+
   _getFields = () => {
     const {database, measurement, retentionPolicy} = this.props.query
     const {source} = this.context
@@ -90,7 +103,6 @@ class FieldList extends Component {
       isKapacitorRule,
       isInDataExplorer,
       onToggleField,
-      applyFuncsToField,
     } = this.props
 
     const hasAggregates = numFunctions(fields) > 0
@@ -136,7 +148,7 @@ class FieldList extends Component {
                     <FieldListItem
                       key={i}
                       onToggleField={onToggleField}
-                      onApplyFuncsToField={applyFuncsToField}
+                      onApplyFuncsToField={this.handleApplyFuncs}
                       isSelected={!!selectedFields.length}
                       fieldFuncs={
                         selectedFields.length ? selectedFields : [fieldFunc]
@@ -184,6 +196,7 @@ FieldList.propTypes = {
       proxy: string.isRequired,
     }).isRequired,
   }),
+  removeFuncs: func.isRequired,
 }
 
 export default FieldList

ui/src/shared/components/SchemaExplorer.js

@@ -4,7 +4,8 @@ import DatabaseList from 'src/shared/components/DatabaseList'
 import MeasurementList from 'src/shared/components/MeasurementList'
 import FieldList from 'src/shared/components/FieldList'
 
-const actionBinder = (id, action) => item => action(id, item)
+const actionBinder = (id, action) => (item, ...args) =>
+  action(id, item, ...args)
 
 const SchemaExplorer = ({
   query,
@@ -19,6 +20,7 @@ const SchemaExplorer = ({
     chooseNamespace,
     chooseMeasurement,
     applyFuncsToField,
+    removeFuncs,
     toggleTagAcceptance,
   },
 }) =>
@@ -45,6 +47,7 @@ const SchemaExplorer = ({
       onFill={actionBinder(id, fill)}
       onGroupByTime={actionBinder(id, groupByTime)}
       applyFuncsToField={actionBinder(id, applyFuncsToField)}
+      removeFuncs={actionBinder(id, removeFuncs)}
     />
   </div>
 

ui/src/utils/queryTransitions.js

@@ -1,9 +1,8 @@
 import defaultQueryConfig from 'utils/defaultQueryConfig'
-import {DEFAULT_DASHBOARD_GROUP_BY_INTERVAL} from 'shared/constants'
-import {DEFAULT_DATA_EXPLORER_GROUP_BY_INTERVAL} from 'src/data_explorer/constants'
 import {
   hasField,
   removeField,
+  getFieldsDeep,
   getFuncsByFieldName,
 } from 'shared/reducers/helpers/fields'
 import _ from 'lodash'
@@ -136,21 +135,10 @@ export function toggleTagAcceptance(query) {
   })
 }
 
-export function applyFuncsToField(
-  query,
-  {field, funcs = []},
-  {preventAutoGroupBy = false} = {}
-) {
-  const shouldRemoveFuncs = funcs.length === 0
-  const nextFields = query.fields.reduce((acc, f) => {
-    // If one field has no funcs, all fields must have no funcs
-    if (shouldRemoveFuncs) {
-      return _.uniq(
-        [...acc, ...f.args.filter(a => a.type === 'field')],
-        fld => fld.name
-      )
-    }
+export const removeFuncs = fields => getFieldsDeep(fields)
 
+export const applyFuncsToField = (query, {field, funcs = []}, time) => {
+  const nextFields = query.fields.reduce((acc, f) => {
     // If there is a func applied to only one field, add it to the other fields
     if (f.type === 'field') {
       return [
@@ -194,15 +182,11 @@ export function applyFuncsToField(
     return [...acc, f]
   }, [])
 
-  const defaultGroupBy = preventAutoGroupBy
-    ? DEFAULT_DATA_EXPLORER_GROUP_BY_INTERVAL
-    : DEFAULT_DASHBOARD_GROUP_BY_INTERVAL
-
-  // If there are no functions, then there should be no GROUP BY time
-  const nextTime = shouldRemoveFuncs ? null : defaultGroupBy
-  const nextGroupBy = {...query.groupBy, time: nextTime}
-
-  return {...query, fields: _.flatten(nextFields), groupBy: nextGroupBy}
+  return {
+    ...query,
+    fields: _.flatten(nextFields),
+    groupBy: {...query.groupBy, time},
+  }
 }
 
 export function updateRawQuery(query, rawText) {