BUGFIX: 'fields' property missing from queryConfig in DataExplorer

CHANGELOG.md

@@ -2,9 +2,11 @@
 ### Bug Fixes
 1. [#1886](https://github.com/influxdata/chronograf/pull/1886): Fix limit of 100 alert rules on alert rules page
 1. [#1930](https://github.com/influxdata/chronograf/pull/1930): Fix graphs when y-values are constant
+1. [#1947](https://github.com/influxdata/chronograf/pull/1947): Fix DataExplorer crash if field property not present on queryConfig
 1. [#1943](https://github.com/influxdata/chronograf/pull/1943): Fix inability to add kapacitor from source page on fresh install
 
 
+
 ### Features
 1. [#1928](https://github.com/influxdata/chronograf/pull/1928): Add prefix, suffix, scale, and other y-axis formatting
 1. [#1886](https://github.com/influxdata/chronograf/pull/1886): Fix limit of 100 alert rules on alert rules page

ui/spec/data_explorer/reducers/queryConfigSpec.js

@@ -146,6 +146,20 @@ describe('Chronograf.Reducers.DataExplorer.queryConfigs', () => {
         expect(newState[queryId].fields[1].funcs.length).to.equal(1)
         expect(newState[queryId].fields[1].funcs[0]).to.equal('func1')
       })
+
+      it('adds the field property to query config if not found', () => {
+        delete state[queryId].fields
+        expect(state[queryId].fields).to.equal(undefined)
+
+        const field = 'fk1'
+        const newState = reducer(
+          state,
+          toggleField(queryId, {field: 'fk1', funcs: []})
+        )
+
+        expect(newState[queryId].fields.length).to.equal(1)
+        expect(newState[queryId].fields[0].field).to.equal(field)
+      })
     })
   })
 

ui/src/shared/components/FieldList.js

@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
 
 import FieldListItem from 'src/data_explorer/components/FieldListItem'
 import GroupByTimeDropdown from 'src/data_explorer/components/GroupByTimeDropdown'
@@ -7,41 +7,13 @@ import FancyScrollbar from 'shared/components/FancyScrollbar'
 import {showFieldKeys} from 'shared/apis/metaQuery'
 import showFieldKeysParser from 'shared/parsing/showFieldKeys'
 
-const {bool, func, shape, string} = PropTypes
-
-const FieldList = React.createClass({
-  propTypes: {
-    query: shape({
-      database: string,
-      retentionPolicy: string,
-      measurement: string,
-    }).isRequired,
-    onToggleField: func.isRequired,
-    onGroupByTime: func.isRequired,
-    applyFuncsToField: func.isRequired,
-    isKapacitorRule: bool,
-    isInDataExplorer: bool,
-  },
-
-  getDefaultProps() {
-    return {
-      isKapacitorRule: false,
-    }
-  },
-
-  contextTypes: {
-    source: shape({
-      links: shape({
-        proxy: string.isRequired,
-      }).isRequired,
-    }).isRequired,
-  },
-
-  getInitialState() {
-    return {
+class FieldList extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
       fields: [],
     }
-  },
+  }
 
   componentDidMount() {
     const {database, measurement} = this.props.query
@@ -50,7 +22,7 @@ const FieldList = React.createClass({
     }
 
     this._getFields()
-  },
+  }
 
   componentDidUpdate(prevProps) {
     const {database, measurement, retentionPolicy} = this.props.query
@@ -72,16 +44,43 @@ const FieldList = React.createClass({
     }
 
     this._getFields()
-  },
+  }
 
-  handleGroupByTime(groupBy) {
+  handleGroupByTime = groupBy => {
     this.props.onGroupByTime(groupBy.menuOption)
-  },
+  }
+
+  _getFields = () => {
+    const {database, measurement, retentionPolicy} = this.props.query
+    const {source} = this.context
+    const proxySource = source.links.proxy
+
+    showFieldKeys(
+      proxySource,
+      database,
+      measurement,
+      retentionPolicy
+    ).then(resp => {
+      const {errors, fieldSets} = showFieldKeysParser(resp.data)
+      if (errors.length) {
+        console.error('Error parsing fields keys: ', errors)
+      }
+
+      this.setState({
+        fields: fieldSets[measurement].map(f => ({field: f, funcs: []})),
+      })
+    })
+  }
 
   render() {
-    const {query, isKapacitorRule, isInDataExplorer} = this.props
-    const hasAggregates = query.fields.some(f => f.funcs && f.funcs.length)
-    const hasGroupByTime = query.groupBy.time
+    const {
+      query: {fields = [], groupBy},
+      isKapacitorRule,
+      isInDataExplorer,
+    } = this.props
+
+    const hasAggregates = fields.some(f => f.funcs && f.funcs.length)
+    const hasGroupByTime = groupBy.time
 
     return (
       <div className="query-builder--column">
@@ -90,7 +89,7 @@ const FieldList = React.createClass({
           {hasAggregates
             ? <GroupByTimeDropdown
                 isOpen={!hasGroupByTime}
-                selected={query.groupBy.time}
+                selected={groupBy.time}
                 onChooseGroupByTime={this.handleGroupByTime}
                 isInRuleBuilder={isKapacitorRule}
                 isInDataExplorer={isInDataExplorer}
@@ -100,10 +99,10 @@ const FieldList = React.createClass({
         {this.renderList()}
       </div>
     )
-  },
+  }
 
   renderList() {
-    const {database, measurement} = this.props.query
+    const {database, measurement, fields = []} = this.props.query
     if (!database || !measurement) {
       return (
         <div className="query-builder--list-empty">
@@ -118,9 +117,7 @@ const FieldList = React.createClass({
       <div className="query-builder--list">
         <FancyScrollbar>
           {this.state.fields.map(fieldFunc => {
-            const selectedField = this.props.query.fields.find(
-              f => f.field === fieldFunc.field
-            )
+            const selectedField = fields.find(f => f.field === fieldFunc.field)
             return (
               <FieldListItem
                 key={fieldFunc.field}
@@ -135,31 +132,34 @@ const FieldList = React.createClass({
         </FancyScrollbar>
       </div>
     )
-  },
+  }
+}
 
-  _getFields() {
-    const {database, measurement, retentionPolicy} = this.props.query
-    const {source} = this.context
-    const proxySource = source.links.proxy
+const {bool, func, shape, string} = PropTypes
 
-    showFieldKeys(
-      proxySource,
-      database,
-      measurement,
-      retentionPolicy
-    ).then(resp => {
-      const {errors, fieldSets} = showFieldKeysParser(resp.data)
-      if (errors.length) {
-        // TODO: do something
-      }
+FieldList.defaultProps = {
+  isKapacitorRule: false,
+}
 
-      this.setState({
-        fields: fieldSets[measurement].map(f => {
-          return {field: f, funcs: []}
-        }),
-      })
-    })
-  },
-})
+FieldList.contextTypes = {
+  source: shape({
+    links: shape({
+      proxy: string.isRequired,
+    }).isRequired,
+  }).isRequired,
+}
+
+FieldList.propTypes = {
+  query: shape({
+    database: string,
+    retentionPolicy: string,
+    measurement: string,
+  }).isRequired,
+  onToggleField: func.isRequired,
+  onGroupByTime: func.isRequired,
+  applyFuncsToField: func.isRequired,
+  isKapacitorRule: bool,
+  isInDataExplorer: bool,
+}
 
 export default FieldList

ui/src/utils/queryTransitions.js

@@ -19,15 +19,23 @@ export function chooseMeasurement(query, measurement) {
 }
 
 export const toggleField = (query, {field, funcs}, isKapacitorRule = false) => {
-  const isSelected = query.fields.find(f => f.field === field)
+  const {fields, groupBy} = query
+
+  if (!fields) {
+    return {
+      ...query,
+      fields: [{field, funcs: ['mean']}],
+    }
+  }
+
+  const isSelected = fields.find(f => f.field === field)
   if (isSelected) {
-    const nextFields = query.fields.filter(f => f.field !== field)
+    const nextFields = fields.filter(f => f.field !== field)
     if (!nextFields.length) {
-      const nextGroupBy = {...query.groupBy, time: null}
       return {
         ...query,
         fields: nextFields,
-        groupBy: nextGroupBy,
+        groupBy: {...groupBy, time: null},
       }
     }