Merge branch 'master' into bugfix/dup-kapa-name-error-misfire

CHANGELOG.md

@@ -3,6 +3,7 @@
 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.[#2019](https://github.com/influxdata/chronograf/pull/2006): Fix false error warning for duplicate kapacitor 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

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 {