Merge pull request #1340 from influxdata/bugfix/no-active-query

Bugfix/no active query

CHANGELOG.md

@@ -2,11 +2,13 @@
 
 ### Bug Fixes
   1. [#1337](https://github.com/influxdata/chronograf/pull/1337): Fix no apps for hosts false negative
+  1. [#1340](https://github.com/influxdata/chronograf/pull/1340): Fix no active query in DE and Cell editing
 
 ### Features
 
 ### UI Improvements
   1. [#1335](https://github.com/influxdata/chronograf/pull/1335): Improve UX for sanitized kapacitor settings
+  1. [#1340](https://github.com/influxdata/chronograf/pull/1340): Automatically switch to table view if meta query
 
 ## v1.2.0-beta9 [2017-04-21]
 

ui/src/data_explorer/components/Visualization.js

@@ -4,8 +4,10 @@ import classNames from 'classnames'
 import VisHeader from 'src/data_explorer/components/VisHeader'
 import VisView from 'src/data_explorer/components/VisView'
 import {GRAPH, TABLE} from 'src/shared/constants'
+import _ from 'lodash'
 
 const {arrayOf, func, number, shape, string} = PropTypes
+const META_QUERY_REGEX = /^show/i
 
 const Visualization = React.createClass({
   propTypes: {
@@ -33,18 +35,12 @@ const Visualization = React.createClass({
   },
 
   getInitialState() {
-    const {queryConfigs, activeQueryIndex} = this.props
+    const {activeQueryIndex, queryConfigs} = this.props
-    if (!queryConfigs.length || activeQueryIndex === null) {
+    const activeQueryText = this.getQueryText(queryConfigs, activeQueryIndex)
-      return {
-        view: GRAPH,
-      }
-    }
 
-    return {
+    return activeQueryText.match(META_QUERY_REGEX)
-      view: typeof queryConfigs[activeQueryIndex].rawText === 'string'
+      ? {view: TABLE}
-        ? TABLE
+      : {view: GRAPH}
-        : GRAPH,
-    }
   },
 
   getDefaultProps() {
@@ -54,19 +50,22 @@ const Visualization = React.createClass({
   },
 
   componentWillReceiveProps(nextProps) {
-    const {queryConfigs, activeQueryIndex} = nextProps
+    const {activeQueryIndex, queryConfigs} = nextProps
-    if (
+    const nextQueryText = this.getQueryText(queryConfigs, activeQueryIndex)
-      !queryConfigs.length ||
+    const queryText = this.getQueryText(
-      activeQueryIndex === null ||
+      this.props.queryConfigs,
-      activeQueryIndex === this.props.activeQueryIndex
+      this.props.activeQueryIndex
-    ) {
+    )
+
+    if (queryText === nextQueryText) {
       return
     }
 
-    const activeQuery = queryConfigs[activeQueryIndex]
+    if (nextQueryText.match(META_QUERY_REGEX)) {
-    if (activeQuery && typeof activeQuery.rawText === 'string') {
       return this.setState({view: TABLE})
     }
+
+    this.setState({view: GRAPH})
   },
 
   handleToggleView(view) {
@@ -125,6 +124,11 @@ const Visualization = React.createClass({
       </div>
     )
   },
+
+  getQueryText(queryConfigs, index) {
+    // rawText can be null
+    return _.get(queryConfigs, [`${index}`, 'rawText'], '') || ''
+  },
 })
 
 export default Visualization

ui/src/data_explorer/containers/DataExplorer.js

@@ -57,7 +57,7 @@ const DataExplorer = React.createClass({
 
   getInitialState() {
     return {
-      activeQueryIndex: null,
+      activeQueryIndex: 0,
     }
   },