From 6a1585b583753af1c06cec9905bc9b0ab7eceb71 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 21 Sep 2017 14:30:18 -0700
Subject: [PATCH 1/3] Return proper empty state for visualizations in the
 dashboard overlay

---
 ui/src/shared/components/RefreshingGraph.js | 12 ++++++++++++
 ui/src/shared/copy/cell.js                  | 11 +++++++++++
 ui/src/style/components/graph.scss          |  3 ++-
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/shared/copy/cell.js

diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js
index bda40a7813..22e8f6b54c 100644
--- a/ui/src/shared/components/RefreshingGraph.js
+++ b/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
diff --git a/ui/src/shared/copy/cell.js b/ui/src/shared/copy/cell.js
new file mode 100644
index 0000000000..7a349eca6f
--- /dev/null
+++ b/ui/src/shared/copy/cell.js
@@ -0,0 +1,11 @@
+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',
+]
+
+const getRandomInt = (min, max) =>
+  Math.floor(Math.random() * (max - min + 1)) + min
+
+export const emptyGraphCopy = emptyFunny[getRandomInt(0, 3)]
diff --git a/ui/src/style/components/graph.scss b/ui/src/style/components/graph.scss
index 318d901e54..ff5da9f496 100644
--- a/ui/src/style/components/graph.scss
+++ b/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 {

From d238907f61cb22ef47bc2e2a871edd7372ca1d06 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 21 Sep 2017 14:43:56 -0700
Subject: [PATCH 2/3] Update CHANGELOG

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 84178b9ea4..0a6de2683c 100644
--- a/CHANGELOG.md
+++ b/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

From f19bd728e494938474678b39605a40f80aaba3c4 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 21 Sep 2017 15:24:06 -0700
Subject: [PATCH 3/3] Use lodash to get random element from array

---
 ui/src/shared/copy/cell.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/ui/src/shared/copy/cell.js b/ui/src/shared/copy/cell.js
index 7a349eca6f..8044790b27 100644
--- a/ui/src/shared/copy/cell.js
+++ b/ui/src/shared/copy/cell.js
@@ -1,3 +1,5 @@
+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!',
@@ -5,7 +7,4 @@ const emptyFunny = [
   '1) Create a query below \n2) Profit',
 ]
 
-const getRandomInt = (min, max) =>
-  Math.floor(Math.random() * (max - min + 1)) + min
-
-export const emptyGraphCopy = emptyFunny[getRandomInt(0, 3)]
+export const emptyGraphCopy = _.sample(emptyFunny)