WIP

ui/spec/utils/fieldSpec.js

@@ -0,0 +1,10 @@
+import {numFunctions} from 'utils/fields'
+
+describe('Formatting helpers', () => {
+  describe('formatBytes', () => {
+    it('returns null when passed a falsey value', () => {
+      const actual = numFunctions(null)
+      expect(actual).to.equal(0)
+    })
+  })
+})

ui/src/data_explorer/components/FieldListItem.js

@@ -1,55 +1,47 @@
-import _ from 'lodash'
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
 import classnames from 'classnames'
 
 import FunctionSelector from 'shared/components/FunctionSelector'
-import {numFunctions, fieldNamesDeep, functionNames} from 'utils/fields'
+import {numFunctions, firstFieldName, functionNames} from 'utils/fields'
 
-const {string, shape, func, arrayOf, bool} = PropTypes
-const FieldListItem = React.createClass({
-  propTypes: {
-    fieldFunc: arrayOf(
-      shape({
-        type: string,
-        name: string,
-      })
-    ).isRequired,
-    isSelected: bool.isRequired,
-    onToggleField: func.isRequired,
-    onApplyFuncsToField: func.isRequired,
-    isKapacitorRule: bool.isRequired,
-  },
-
-  getInitialState() {
-    return {
+class FieldListItem extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
       isOpen: false,
     }
-  },
+  }
 
-  toggleFunctionsMenu(e) {
+  toggleFunctionsMenu = e => {
     if (e) {
       e.stopPropagation()
     }
     this.setState({isOpen: !this.state.isOpen})
-  },
+  }
 
-  handleToggleField() {
-    this.props.onToggleField(this.props.fieldFunc)
+  close = () => {
     this.setState({isOpen: false})
-  },
+  }
 
-  handleApplyFunctions(selectedFuncs) {
-    this.props.onApplyFuncsToField({
-      field: this.props.fieldFunc.field,
+  handleToggleField = () => {
+    const {onToggleField, fieldFunc} = this.props
+    onToggleField(fieldFunc)
+    this.close()
+  }
+
+  handleApplyFunctions = selectedFuncs => {
+    const {onApplyFuncsToField, fieldFunc} = this.props
+    onApplyFuncsToField({
+      field: fieldFunc.field,
       funcs: selectedFuncs,
     })
-    this.setState({isOpen: false})
-  },
+    this.close()
+  }
 
   render() {
     const {isKapacitorRule, fieldFunc, isSelected} = this.props
     const {isOpen} = this.state
-    const fieldText = _.head(fieldNamesDeep(fieldFunc))
+    const fieldName = firstFieldName(fieldFunc)
     const funcs = functionNames(fieldFunc)
 
     let fieldFuncsLabel
@@ -57,23 +49,26 @@ const FieldListItem = React.createClass({
     switch (num) {
       case 0:
         fieldFuncsLabel = '0 Functions'
+        break
       case 1:
         fieldFuncsLabel = `${num} Function`
+        break
       default:
         fieldFuncsLabel = `${num} Functions`
+        break
     }
     return (
-      <div key={fieldFunc}>
+      <div key={fieldName}>
         <div
           className={classnames('query-builder--list-item', {
             active: isSelected,
           })}
-          onClick={_.wrap(fieldFunc, this.handleToggleField)}
-          data-test={`query-builder-list-item-field-${fieldText}`}
+          onClick={this.handleToggleField}
+          data-test={`query-builder-list-item-field-${fieldName}`}
         >
           <span>
             <div className="query-builder--checkbox" />
-            {fieldText}
+            {fieldName}
           </span>
           {isSelected
             ? <div
@@ -83,7 +78,7 @@ const FieldListItem = React.createClass({
                   'btn-primary': num,
                 })}
                 onClick={this.toggleFunctionsMenu}
-                data-test={`query-builder-list-item-function-${fieldText}`}
+                data-test={`query-builder-list-item-function-${fieldName}`}
               >
                 {fieldFuncsLabel}
               </div>
@@ -98,7 +93,27 @@ const FieldListItem = React.createClass({
           : null}
       </div>
     )
-  },
-})
+  }
+}
 
+const {string, shape, func, arrayOf, bool} = PropTypes
+FieldListItem.propTypes = {
+  fieldFunc: arrayOf(
+    shape({
+      type: string.isRequired,
+      name: string.isRequired,
+      alias: string,
+      args: arrayOf(
+        shape({
+          type: string.isRequired,
+          name: string.isRequired,
+        })
+      ),
+    })
+  ).isRequired,
+  isSelected: bool.isRequired,
+  onToggleField: func.isRequired,
+  onApplyFuncsToField: func.isRequired,
+  isKapacitorRule: bool.isRequired,
+}
 export default FieldListItem

ui/src/shared/components/FieldList.js

@@ -74,7 +74,7 @@ class FieldList extends Component {
       }
 
       this.setState({
-        fields: fieldSets[measurement].map(f => ({field: f, funcs: []})),
+        fields: fieldSets[measurement].map(f => ({name: f, type: 'field'})),
       })
     })
   }

ui/src/status/fixtures.js

@@ -18,8 +18,15 @@ export const fixtureStatusPageCells = [
           retentionPolicy: 'autogen',
           fields: [
             {
-              field: 'value',
-              funcs: ['count'],
+              name: 'count',
+              type: 'func',
+              alias: 'count_value',
+              args: [
+                {
+                  name: 'value',
+                  type: 'field',
+                },
+              ],
             },
           ],
           tags: {},

ui/src/utils/fields.js

@@ -13,6 +13,9 @@ export const numFunctions = fields => _.size(functions(fields))
 // functionNames returns the names of all top-level functions
 export const functionNames = fields => _.map(functions(fields), f => f.name)
 
+// firstFieldName returns the name of the first of type field
+export const firstFieldName = fields => _.head(fieldNamesDeep(fields))
+
 // getFields returns all of the top-level fields of type field
 export const getFields = fields => ofType(fields, 'field')
 

ui/yarn.lock

@@ -4476,11 +4476,7 @@ lodash.isempty@4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
 
-lodash.isequal@^4.0.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.4.0.tgz#6295768e98e14dc15ce8d362ef6340db82852031"
-
-lodash.isequal@^4.5.0:
+lodash.isequal@^4.0.0, lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
 
@@ -4575,18 +4571,18 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.0.tgz#6b26248c42f6d4fa4b0d8542f78edfcde35642a8"
-  dependencies:
-    js-tokens "^2.0.0"
-
-loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
     js-tokens "^3.0.0"
 
+loose-envify@^1.1.0, loose-envify@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.0.tgz#6b26248c42f6d4fa4b0d8542f78edfcde35642a8"
+  dependencies:
+    js-tokens "^2.0.0"
+
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
@@ -5842,19 +5838,13 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.4:
+prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
 
-prop-types@^15.5.6, prop-types@^15.5.8:
-  version "15.5.8"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
-  dependencies:
-    fbjs "^0.8.9"
-
 proxy-addr@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37"