Merge pull request #2018 from influxdata/bugfix/unresponsive-display-options

BUGFIX: Unresponsive query builder, display options, and cell

CHANGELOG.md

@@ -2,6 +2,7 @@
 ### Bug Fixes
 1.[#2004](https://github.com/influxdata/chronograf/pull/2004): Fix DE query templates dropdown disappearance.
 1.[#2006](https://github.com/influxdata/chronograf/pull/2006): Fix no alert for duplicate db name
+1.[#2018](https://github.com/influxdata/chronograf/pull/2018): Fix unresponsive display options and query builder in dashboards
 ### Features
 1. [#1885](https://github.com/influxdata/chronograf/pull/1885): Add `fill` options to data explorer and dashboard queries
 1. [#1978](https://github.com/influxdata/chronograf/pull/1978): Support editing kapacitor TICKScript

ui/src/shared/components/RefreshingGraph.js

@@ -1,5 +1,7 @@
 import React, {PropTypes} from 'react'
 
+import {emptyGraphCopy} from 'src/shared/copy/cell'
+
 import AutoRefresh from 'shared/components/AutoRefresh'
 import LineGraph from 'shared/components/LineGraph'
 import SingleStat from 'shared/components/SingleStat'
@@ -19,6 +21,16 @@ const RefreshingGraph = ({
   synchronizer,
   editQueryStatus,
 }) => {
+  if (!queries.length) {
+    return (
+      <div className="graph-empty">
+        <p data-test="data-explorer-no-results">
+          {emptyGraphCopy}
+        </p>
+      </div>
+    )
+  }
+
   if (type === 'single-stat') {
     return (
       <RefreshingSingleStat

ui/src/shared/copy/cell.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+
+const emptyFunny = [
+  'Looks like you dont have any queries.  Be a lot cooler if you did.',
+  'Create a query below. Go on, I dare ya!',
+  'Create a query below.  Have fun!',
+  '1) Create a query below \n2) Profit',
+]
+
+export const emptyGraphCopy = _.sample(emptyFunny)

ui/src/style/components/graph.scss

@@ -95,8 +95,9 @@ $graph-gutter: 16px;
     font-size: 20px;
     font-weight: 400;
     margin: 0;
-    text-align: center;
+    text-align: left;
     color: $g8-storm;
+    white-space: pre-wrap;
   }
 }
 .graph-fetching {