From 812d7c0147646325a21318e992dee39b0c0e944c Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Mon, 10 Jul 2017 17:10:45 -0600
Subject: [PATCH 01/62] Initial IE 11 support. Add babel polyfill. Fix a small
 event error.

---
 ui/src/index.js                          | 2 ++
 ui/src/shared/middleware/resizeLayout.js | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/src/index.js b/ui/src/index.js
index 7b656caffc..cc292ca0ff 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -1,3 +1,5 @@
+import 'babel-polyfill'
+
 import React from 'react'
 import {render} from 'react-dom'
 import {Provider} from 'react-redux'
diff --git a/ui/src/shared/middleware/resizeLayout.js b/ui/src/shared/middleware/resizeLayout.js
index df6d3c2bf3..0e682d2682 100644
--- a/ui/src/shared/middleware/resizeLayout.js
+++ b/ui/src/shared/middleware/resizeLayout.js
@@ -7,7 +7,9 @@ export default function resizeLayout() {
       action.type === 'ENABLE_PRESENTATION_MODE' ||
       action.type === 'DISABLE_PRESENTATION_MODE'
     ) {
-      window.dispatchEvent(new Event('resize'))
+      const evt = document.createEvent('HTMLEvents')
+      evt.initEvent('resize', false, true)
+      window.dispatchEvent(evt)
     }
   }
 }

From b81e1113bac653e9efba239dd06700b0161316c8 Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Mon, 24 Jul 2017 12:59:01 -0600
Subject: [PATCH 02/62] Use older data attribute accessor technique for pre IE
 11 compat.

---
 ui/src/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/index.js b/ui/src/index.js
index cc292ca0ff..0cc35d03a6 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -49,7 +49,8 @@ const errorsQueue = []
 
 const rootNode = document.getElementById('react-root')
 
-const basepath = rootNode.dataset.basepath || ''
+// Older method used for pre-IE 11 compatibility
+const basepath = rootNode.getAttribute('data-basepath') || ''
 window.basepath = basepath
 const browserHistory = useRouterHistory(createHistory)({
   basename: basepath, // this is written in when available by the URL prefixer middleware

From c9cbe94de91516a8c536b938b3065f6b445162e0 Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Thu, 27 Jul 2017 13:34:10 -0600
Subject: [PATCH 03/62] Fix incorrect windows uptime query. Fix how the Windows
 value is used in the UI.

---
 ui/src/hosts/apis/index.js            | 10 ++++++----
 ui/src/hosts/components/HostsTable.js |  4 +++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/ui/src/hosts/apis/index.js b/ui/src/hosts/apis/index.js
index 225ac59a3e..1c0324dcfb 100644
--- a/ui/src/hosts/apis/index.js
+++ b/ui/src/hosts/apis/index.js
@@ -10,7 +10,7 @@ export function getCpuAndLoadForHosts(proxyLink, telegrafDB) {
       SELECT non_negative_derivative(mean(uptime)) AS deltaUptime FROM "system" WHERE time > now() - 10m GROUP BY host, time(1m) fill(0);
       SELECT mean("Percent_Processor_Time") FROM win_cpu WHERE time > now() - 10m GROUP BY host;
       SELECT mean("Processor_Queue_Length") FROM win_system WHERE time > now() - 10s GROUP BY host;
-      SELECT non_negative_derivative(mean("System_Up_Time")) AS deltaUptime FROM "telegraf"."autogen"."win_uptime" WHERE time > now() - 10m GROUP BY host, time(1m) fill(0);
+      SELECT non_negative_derivative(mean("System_Up_Time")) AS winDeltaUptime FROM "telegraf"."autogen"."win_system" WHERE time > now() - 10m GROUP BY host, time(1m) fill(0);
       SHOW TAG VALUES FROM /win_system|system/ WITH KEY = "host"`,
     db: telegrafDB,
   }).then(resp => {
@@ -72,9 +72,11 @@ export function getCpuAndLoadForHosts(proxyLink, telegrafDB) {
     })
 
     winUptimeSeries.forEach(s => {
-      const uptimeIndex = s.columns.findIndex(col => col === 'deltaUptime')
-      hosts[s.tags.host].deltaUptime =
-        s.values[s.values.length - 1][uptimeIndex]
+      const winUptimeIndex = s.columns.findIndex(
+        col => col === 'winDeltaUptime'
+      )
+      hosts[s.tags.host].winDeltaUptime =
+        s.values[s.values.length - 1][winUptimeIndex]
     })
 
     return hosts
diff --git a/ui/src/hosts/components/HostsTable.js b/ui/src/hosts/components/HostsTable.js
index 365eb6e721..bd04942725 100644
--- a/ui/src/hosts/components/HostsTable.js
+++ b/ui/src/hosts/components/HostsTable.js
@@ -209,7 +209,9 @@ const HostRow = React.createClass({
           <div
             className={classnames(
               'table-dot',
-              host.deltaUptime > 0 ? 'dot-success' : 'dot-critical'
+              Math.max(host.deltaUptime || 0, host.winDeltaUptime || 0) > 0
+                ? 'dot-success'
+                : 'dot-critical'
             )}
           />
         </td>

From b29ea3ad37ae88417c13df7683441164e0976a98 Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Thu, 27 Jul 2017 13:39:51 -0600
Subject: [PATCH 04/62] CHANGELOG.

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bce5079bc6..25f3085fdc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## v1.3.6.0 [unreleased]
 ### Bug Fixes
+1. [#1795](https://github.com/influxdata/chronograf/pull/1795): Fix uptime status on Windows hosts running Telegraf
+
 ### Features
 ### UI Improvements
 

From 352f3640325157b665d0fb7a0bec430bc7b54712 Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Thu, 27 Jul 2017 17:28:55 -0600
Subject: [PATCH 05/62] We simply mustn't forget units on our flex-basis
 shorthand for IE11.

---
 ui/src/dashboards/components/DashboardHeaderEdit.js    |  2 +-
 ui/src/kapacitor/components/RuleMessageOptions.js      |  4 ++--
 ui/src/style/components/dygraphs.scss                  |  4 ++--
 ui/src/style/components/query-builder.scss             | 10 +++++-----
 ui/src/style/components/query-editor.scss              |  2 +-
 ui/src/style/components/query-maker.scss               |  4 ++--
 ui/src/style/components/tables.scss                    |  4 ++--
 ui/src/style/components/template-control-bar.scss      |  4 ++--
 .../style/components/template-variables-manager.scss   |  2 +-
 ui/src/style/pages/admin.scss                          |  6 +++---
 ui/src/style/pages/config-endpoints.scss               |  8 ++++----
 ui/src/style/pages/overlay-technology.scss             |  2 +-
 ui/src/style/theme/bootstrap-theme.scss                |  4 ++--
 13 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/ui/src/dashboards/components/DashboardHeaderEdit.js b/ui/src/dashboards/components/DashboardHeaderEdit.js
index a79273a39d..f1dd5bc8a4 100644
--- a/ui/src/dashboards/components/DashboardHeaderEdit.js
+++ b/ui/src/dashboards/components/DashboardHeaderEdit.js
@@ -38,7 +38,7 @@ class DashboardEditHeader extends Component {
         <div className="page-header__container">
           <form
             className="page-header__left"
-            style={{flex: '1 0 0'}}
+            style={{flex: '1 0 0%'}}
             onSubmit={this.handleFormSubmit}
           >
             <input
diff --git a/ui/src/kapacitor/components/RuleMessageOptions.js b/ui/src/kapacitor/components/RuleMessageOptions.js
index 77fd068636..0dc1690d3d 100644
--- a/ui/src/kapacitor/components/RuleMessageOptions.js
+++ b/ui/src/kapacitor/components/RuleMessageOptions.js
@@ -44,7 +44,7 @@ class RuleMessageOptions extends Component {
               <input
                 id="alert-input"
                 className="form-control input-sm form-malachite"
-                style={{flex: '1 0 0'}}
+                style={{flex: '1 0 0%'}}
                 type="text"
                 placeholder={args.placeholder}
                 onChange={e =>
@@ -83,7 +83,7 @@ class RuleMessageOptions extends Component {
                         className="form-control input-sm form-malachite"
                         style={{
                           margin: '0 15px 0 5px',
-                          flex: '1 0 0',
+                          flex: '1 0 0%',
                         }}
                         type="text"
                         placeholder={placeholder}
diff --git a/ui/src/style/components/dygraphs.scss b/ui/src/style/components/dygraphs.scss
index 654c309042..f38b0420a6 100644
--- a/ui/src/style/components/dygraphs.scss
+++ b/ui/src/style/components/dygraphs.scss
@@ -161,10 +161,10 @@
   line-height: 30px;
   font-weight: 600;
   color: $g13-mist;
-  flex: 1 0 0;
+  flex: 1 0 0%;
 }
 .dygraph-legend--filter {
-  flex: 1 0 0;
+  flex: 1 0 0%;
   margin-top: 8px;
 }
 .dygraph-legend--divider {
diff --git a/ui/src/style/components/query-builder.scss b/ui/src/style/components/query-builder.scss
index b9642a98e7..40ec78de1d 100644
--- a/ui/src/style/components/query-builder.scss
+++ b/ui/src/style/components/query-builder.scss
@@ -5,7 +5,7 @@
 */
 .query-builder {
   width: 100%;
-  flex: 1 0 0;
+  flex: 1 0 0%;
   display: flex;
   align-items: stretch;
   flex-wrap: nowrap;
@@ -13,10 +13,10 @@
 .query-builder--column {
   display: flex;
   flex-direction: column;
-  flex: 2 0 0;
+  flex: 2 0 0%;
 }
 .query-builder--column-db {
-  flex: 1 0 0;
+  flex: 1 0 0%;
 }
 .query-builder--heading {
   @include no-user-select();
@@ -39,7 +39,7 @@
 }
 .query-builder--list,
 .query-builder--list-empty {
-  flex: 1 0 0;
+  flex: 1 0 0%;
 }
 .query-builder--list {
   padding: 0;
@@ -99,7 +99,7 @@
 }
 /* Filter Element */
 .query-builder--filter {
-  flex: 1 0 0;
+  flex: 1 0 0%;
   display: flex;
 
   & > span {
diff --git a/ui/src/style/components/query-editor.scss b/ui/src/style/components/query-editor.scss
index 0874272cca..f5045dc005 100644
--- a/ui/src/style/components/query-editor.scss
+++ b/ui/src/style/components/query-editor.scss
@@ -64,7 +64,7 @@
   }
 }
 .query-status-output {
-  flex: 1 0 0;
+  flex: 1 0 0%;
   display: inline-block;
   color: $query-editor--status-default;
   white-space: nowrap;
diff --git a/ui/src/style/components/query-maker.scss b/ui/src/style/components/query-maker.scss
index 172f1832b2..d74c40dbdf 100644
--- a/ui/src/style/components/query-maker.scss
+++ b/ui/src/style/components/query-maker.scss
@@ -94,7 +94,7 @@ $query-editor-tab-active: $g3-castle;
   height: $query-maker--tabs-height;
   margin: 0 2px 0 0;
   max-width: $query-maker--tab-width;
-  flex: 1 0 0;
+  flex: 1 0 0%;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -170,7 +170,7 @@ $query-editor-tab-active: $g3-castle;
 }
 .query-maker--tab-contents,
 .query-maker--empty {
-  flex: 1 0 0;
+  flex: 1 0 0%;
   margin: 0 0 $query-maker--gutter 0;
   background-color: $query-maker--tab-contents-bg;
 }
diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss
index 632f17e193..9425cce4f8 100644
--- a/ui/src/style/components/tables.scss
+++ b/ui/src/style/components/tables.scss
@@ -191,7 +191,7 @@ $table-tab-scrollbar-height: 6px;
     flex-direction: column;
     align-items: stretch;
 
-    > .panel-body {flex: 1 0 0;}
+    > .panel-body {flex: 1 0 0%;}
     .generic-empty-state {height: 100%;}
   }
 }
@@ -234,7 +234,7 @@ $table-tab-scrollbar-height: 6px;
   color: $g17-whisper;
 }
 .alert-history-table--tbody {
-  flex: 1 0 0;
+  flex: 1 0 0%;
   width: 100%;
 }
 .alert-history-table--tr {
diff --git a/ui/src/style/components/template-control-bar.scss b/ui/src/style/components/template-control-bar.scss
index 6ad2375e24..074e42508a 100644
--- a/ui/src/style/components/template-control-bar.scss
+++ b/ui/src/style/components/template-control-bar.scss
@@ -42,7 +42,7 @@ button.btn.template-control--manage {
 }
 .template-control--controls {
   display: flex;
-  flex: 1 0 0;
+  flex: 1 0 0%;
   flex-wrap: wrap;
 }
 .template-control--empty {
@@ -64,7 +64,7 @@ button.btn.template-control--manage {
   .dropdown {
     order: 2;
     margin: 0;
-    flex: 1 0 0;
+    flex: 1 0 0%;
   }
   .dropdown-toggle {
     border-radius: 0 0 $radius-small $radius-small;
diff --git a/ui/src/style/components/template-variables-manager.scss b/ui/src/style/components/template-variables-manager.scss
index 622e27c584..ad85d3c211 100644
--- a/ui/src/style/components/template-variables-manager.scss
+++ b/ui/src/style/components/template-variables-manager.scss
@@ -166,7 +166,7 @@ $tvmp-table-gutter: 8px;
   > *:last-child {margin-right: 0;}
 
   .dropdown {
-    flex: 1 0 0;
+    flex: 1 0 0%;
 
     & > .dropdown-toggle {width: 100%;}
   }
diff --git a/ui/src/style/pages/admin.scss b/ui/src/style/pages/admin.scss
index 8c1cce54a1..fc66cc6f34 100644
--- a/ui/src/style/pages/admin.scss
+++ b/ui/src/style/pages/admin.scss
@@ -103,7 +103,7 @@ table.table-highlight > tbody > tr.admin-table--edit-row:hover {
 
   .form-control {
     margin: 0 4px 0 0;
-    flex: 1 0 0;
+    flex: 1 0 0%;
   }
 }
 pre.admin-table--query {
@@ -118,7 +118,7 @@ pre.admin-table--query {
   align-items: center;
 
   > .form-control {
-    flex: 1 0 0;
+    flex: 1 0 0%;
     margin-right: 4px;
   }
 }
@@ -157,7 +157,7 @@ pre.admin-table--query {
 
   .form-control {
     margin: 0 8px 0 0;
-    flex: 1 0 0;
+    flex: 1 0 0%;
   }
 }
 
diff --git a/ui/src/style/pages/config-endpoints.scss b/ui/src/style/pages/config-endpoints.scss
index 37aac2ca1f..44562000d3 100644
--- a/ui/src/style/pages/config-endpoints.scss
+++ b/ui/src/style/pages/config-endpoints.scss
@@ -18,7 +18,7 @@ $config-endpoint-tab-bg-active: $g3-castle;
   align-items: stretch;
 }
 .config-endpoint--tabs {
-  flex: 0 0 0;
+  flex: 0 0 0%;
   display: flex;
 
   .btn-group.tab-group {
@@ -27,7 +27,7 @@ $config-endpoint-tab-bg-active: $g3-castle;
     border-radius: $radius 0 0 $radius;
     margin: 0;
     display: flex;
-    flex: 1 0 0;
+    flex: 1 0 0%;
     flex-direction: column;
     align-items: stretch;
 
@@ -58,8 +58,8 @@ $config-endpoint-tab-bg-active: $g3-castle;
   }
 }
 .config-endpoint--tab-contents {
-  flex: 1 0 0;
+  flex: 1 0 0%;
   background-color: $config-endpoint-tab-bg-active;
   border-radius: 0 $radius $radius 0;
   padding: 16px 42px;
-}
\ No newline at end of file
+}
diff --git a/ui/src/style/pages/overlay-technology.scss b/ui/src/style/pages/overlay-technology.scss
index 7062562499..59222a71e7 100644
--- a/ui/src/style/pages/overlay-technology.scss
+++ b/ui/src/style/pages/overlay-technology.scss
@@ -85,7 +85,7 @@ $overlay-z: 100;
   margin: 0 15%;
 }
 .overlay-technology .query-maker {
-  flex: 1 0 0;
+  flex: 1 0 0%;
   padding: 0 8px;
   border-radius: 0 0 $radius $radius;
   background-color: $g2-kevlar;
diff --git a/ui/src/style/theme/bootstrap-theme.scss b/ui/src/style/theme/bootstrap-theme.scss
index 8345c8ee16..dc9e8897fd 100755
--- a/ui/src/style/theme/bootstrap-theme.scss
+++ b/ui/src/style/theme/bootstrap-theme.scss
@@ -3887,7 +3887,7 @@ p .label {
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  flex: 1 0 0;
+  flex: 1 0 0%;
 }
 .dropdown-toggle.btn-xs .caret {
   right: 7px;
@@ -4041,7 +4041,7 @@ p .label {
   outline: none;
   transition: color .25s ease;
 
-  flex: 1 0 0;
+  flex: 1 0 0%;
 }
 .dropdown-menu li.dropdown-item > a,
 .dropdown-menu li.dropdown-item > a:hover,

From f6b399d3a76b1a7124f48fa9d02063f2e7e49d6b Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Thu, 27 Jul 2017 17:31:24 -0600
Subject: [PATCH 06/62] CHAMGELOG

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3516dfe021..a34d7616b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## v1.3.6.0 [unreleased]
 ### Bug Fixes
+1. [#1715](https://github.com/influxdata/chronograf/pull/1715): Chronograf now renders properly on IE11.
+
 ### Features
 ### UI Improvements
 1. [#1796](https://github.com/influxdata/chronograf/pull/1796): Add spinner to indicate data is being written

From badc0a73749060194d5e5664bdc53b495931b615 Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Thu, 27 Jul 2017 17:43:45 -0600
Subject: [PATCH 07/62] Remember, kids... Always leave a note.

---
 ui/src/shared/middleware/resizeLayout.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/shared/middleware/resizeLayout.js b/ui/src/shared/middleware/resizeLayout.js
index 0e682d2682..d7a657d4ba 100644
--- a/ui/src/shared/middleware/resizeLayout.js
+++ b/ui/src/shared/middleware/resizeLayout.js
@@ -7,6 +7,7 @@ export default function resizeLayout() {
       action.type === 'ENABLE_PRESENTATION_MODE' ||
       action.type === 'DISABLE_PRESENTATION_MODE'
     ) {
+      // Uses longer event object creation method due to IE compatibility.
       const evt = document.createEvent('HTMLEvents')
       evt.initEvent('resize', false, true)
       window.dispatchEvent(evt)

From 228920fde4266887fad85f2437012ebad7ee7b3e Mon Sep 17 00:00:00 2001
From: Tim Raymond <tim@timraymond.com>
Date: Tue, 8 Aug 2017 11:05:50 -0700
Subject: [PATCH 08/62] Add absolute time range support to :interval:

Previously, users of the :interval: macro were restricted to using a
relative time range in their queries, or the :dashboardTime: macro. This
permits users to also supply an absolute time range in the form of:

time > '2017-01-01T00:00:00Z' and time < '2017-06-01T00:00:00Z'
---
 chronograf.go      | 88 +++++++++++++++++++++++++++++++++++++++++-----
 chronograf_test.go | 49 ++++++++++++++++++++++++++
 2 files changed, 129 insertions(+), 8 deletions(-)
 create mode 100644 chronograf_test.go

diff --git a/chronograf.go b/chronograf.go
index 319065befc..aa9c6bc6c9 100644
--- a/chronograf.go
+++ b/chronograf.go
@@ -8,6 +8,7 @@ import (
 	"fmt"
 	"io"
 	"net/http"
+	"regexp"
 	"strconv"
 	"strings"
 	"time"
@@ -193,32 +194,103 @@ type GroupByVar struct {
 
 // Exec is responsible for extracting the Duration from the query
 func (g *GroupByVar) Exec(query string) {
-	whereClause := "WHERE time > now() - "
+	whereClause := "WHERE"
 	start := strings.Index(query, whereClause)
 	if start == -1 {
 		// no where clause
 		return
 	}
 
-	// reposition start to the END of the where clause
+	// reposition start to after the 'where' keyword
 	durStr := query[start+len(whereClause):]
 
-	// advance to next space
+	// attempt to parse out a relative time range
+	dur, err := g.parseRelative(durStr)
+	if err == nil {
+		// we parsed relative duration successfully
+		g.Duration = dur
+		return
+	}
+
+	dur, err = g.parseAbsolute(durStr)
+	if err == nil {
+		// we found an absolute time range
+		g.Duration = dur
+	}
+}
+
+// parseRelative locates and extracts a duration value from a fragment of an
+// InfluxQL query following the "where" keyword. For example, in the fragment
+// "time > now() - 180d GROUP BY :interval:", parseRelative would return a
+// duration equal to 180d
+func (g *GroupByVar) parseRelative(fragment string) (time.Duration, error) {
+	// locate duration literal start
+	prefix := "time > now() - "
+	start := strings.Index(fragment, prefix)
+	if start == -1 {
+		return time.Duration(0), errors.New("not a relative duration")
+	}
+
+	// reposition to duration literal
+	durFragment := fragment[start+len(prefix):]
+
+	// init counters
 	pos := 0
-	for pos < len(durStr) {
-		rn, _ := utf8.DecodeRuneInString(durStr[pos:])
+
+	// locate end of duration literal
+	for pos < len(durFragment) {
+		rn, _ := utf8.DecodeRuneInString(durFragment[pos:])
 		if unicode.IsSpace(rn) {
 			break
 		}
 		pos++
 	}
 
-	dur, err := influxql.ParseDuration(durStr[:pos])
+	// attempt to parse what we suspect is a duration literal
+	dur, err := influxql.ParseDuration(durFragment[:pos])
 	if err != nil {
-		return
+		return dur, err
 	}
 
-	g.Duration = dur
+	return dur, nil
+}
+
+// parseAbsolute will determine the duration between two absolute timestamps
+// found within an InfluxQL fragment following the "where" keyword. For
+// example, the fragement "time > '1985-10-25T00:01:21-0800 and time <
+// '1985-10-25T00:01:22-0800'" would yield a duration of 1m'
+func (g *GroupByVar) parseAbsolute(fragment string) (time.Duration, error) {
+	timePtn := `time\s[>|<]\s'([0-9\-TZ\:]+)'` // Playground: http://gobular.com/x/41a45095-c384-46ea-b73c-54ef91ab93af
+	re, err := regexp.Compile(timePtn)
+	if err != nil {
+		// this is a developer error and should complain loudly
+		panic("Bad Regex: err:" + err.Error())
+	}
+
+	if !re.Match([]byte(fragment)) {
+		return time.Duration(0), errors.New("absolute duration not found")
+	}
+
+	// extract at most two times
+	matches := re.FindAll([]byte(fragment), 2)
+
+	// parse out absolute times
+	durs := make([]time.Time, 0, 2)
+	for _, match := range matches {
+		durStr := re.FindSubmatch(match)
+		if tm, err := time.Parse(time.RFC3339Nano, string(durStr[1])); err == nil {
+			durs = append(durs, tm)
+		}
+	}
+
+	// reject more than 2 times found
+	if len(durs) != 2 {
+		return time.Duration(0), errors.New("must provide exactly two absolute times")
+	}
+
+	dur := durs[1].Sub(durs[0])
+
+	return dur, nil
 }
 
 func (g *GroupByVar) String() string {
diff --git a/chronograf_test.go b/chronograf_test.go
new file mode 100644
index 0000000000..60164d5880
--- /dev/null
+++ b/chronograf_test.go
@@ -0,0 +1,49 @@
+package chronograf_test
+
+import (
+	"testing"
+	"time"
+
+	"github.com/influxdata/chronograf"
+)
+
+func Test_GroupByVar(t *testing.T) {
+	gbvTests := []struct {
+		name              string
+		query             string
+		expected          time.Duration
+		resolution        uint // the screen resolution to render queries into
+		reportingInterval time.Duration
+	}{
+		{
+			"relative time",
+			"SELECT mean(usage_idle) FROM cpu WHERE time > now() - 180d GROUP BY :interval:",
+			4320 * time.Hour,
+			1000,
+			10 * time.Second,
+		},
+		{
+			"absolute time",
+			"SELECT mean(usage_idle) FROM cpu WHERE time > '1985-10-25T00:01:00Z' and time < '1985-10-25T00:02:00Z' GROUP BY :interval:",
+			1 * time.Minute,
+			1000,
+			10 * time.Second,
+		},
+	}
+
+	for _, test := range gbvTests {
+		t.Run(test.name, func(t *testing.T) {
+			gbv := chronograf.GroupByVar{
+				Var:               ":interval:",
+				Resolution:        test.resolution,
+				ReportingInterval: test.reportingInterval,
+			}
+
+			gbv.Exec(test.query)
+
+			if gbv.Duration != test.expected {
+				t.Fatalf("%q - durations not equal! Want: %s, Got: %s", test.name, test.expected, gbv.Duration)
+			}
+		})
+	}
+}

From 5bcfda06658b265bd21ea86972b5df9e5b5a1291 Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Tue, 8 Aug 2017 22:43:16 -0700
Subject: [PATCH 09/62] Add SHOW DATABASES integration test with Nightwatch.js.

---
 .gitignore               |  1 +
 ui/.eslintrc             |  2 +-
 ui/nightwatch.json       | 37 +++++++++++++++++++++++++++++++++++++
 ui/package.json          |  1 +
 ui/tests/DataExplorer.js | 34 ++++++++++++++++++++++++++++++++++
 5 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 ui/nightwatch.json
 create mode 100644 ui/tests/DataExplorer.js

diff --git a/.gitignore b/.gitignore
index bbef07c3ad..b580642afd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,4 @@ npm-debug.log
 .jssrc
 .dev-jssrc
 .bindata
+ui/reports
diff --git a/ui/.eslintrc b/ui/.eslintrc
index 2dda26b78f..a9ca0ef627 100644
--- a/ui/.eslintrc
+++ b/ui/.eslintrc
@@ -102,7 +102,7 @@
     'no-iterator': 2,
     'no-lone-blocks': 2,
     'no-loop-func': 2,
-    'no-magic-numbers': [2, {ignore: [-1, 0, 1, 2]}],
+    'no-magic-numbers': [0, {ignore: [-1, 0, 1, 2]}],
     'no-multi-spaces': 2,
     'no-multi-str': 2,
     'no-native-reassign': 2,
diff --git a/ui/nightwatch.json b/ui/nightwatch.json
new file mode 100644
index 0000000000..9cf577fea3
--- /dev/null
+++ b/ui/nightwatch.json
@@ -0,0 +1,37 @@
+{
+  "src_folders": ["tests"],
+  "output_folder": "reports",
+  "custom_commands_path": "",
+  "custom_assertions_path": "",
+  "page_objects_path": "",
+  "globals_path": "",
+
+  "use_xpath": true,
+
+  "selenium": {
+    "start_process": false,
+    "host": "hub-cloud.browserstack.com",
+    "port": 80
+  },
+
+  "test_settings": {
+    "default": {
+      "selenium_port": 80,
+      "selenium_host": "hub-cloud.browserstack.com",
+      "silent": false,
+      "screenshots": {
+        "enabled": true,
+        "path": "screenshots"
+      },
+      "desiredCapabilities": {
+        "browser": "chrome",
+        "build": "nightwatch-browserstack",
+        "browserstack.user": "${BROWSERSTACK_USER}",
+        "browserstack.key": "${BROWSERSTACK_KEY}",
+        "browserstack.debug": true,
+        "browserstack.local": true,
+        "resolution": "1920x1080"
+      }
+    }
+  }
+}
diff --git a/ui/package.json b/ui/package.json
index 19304204b7..f6ebfab52a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -16,6 +16,7 @@
     "test": "karma start",
     "test:lint": "npm run lint; npm run test",
     "test:dev": "nodemon --exec npm run test:lint",
+    "test:integration": "nightwatch tests --skip",
     "clean": "rm -rf build",
     "storybook": "node ./storybook",
     "prettier": "prettier --single-quote --trailing-comma es5 --bracket-spacing false --semi false --write \"{src,spec}/**/*.js\"; eslint src --fix"
diff --git a/ui/tests/DataExplorer.js b/ui/tests/DataExplorer.js
new file mode 100644
index 0000000000..5be92de2a2
--- /dev/null
+++ b/ui/tests/DataExplorer.js
@@ -0,0 +1,34 @@
+const src = process.argv.find(s => s.includes('--src=')).replace('--src=', '')
+const url = `http://localhost:8888/sources/${src}/chronograf/data-explorer`
+
+module.exports = {
+  'Data Explorer (functional) - SHOW DATABASES'(browser) {
+    browser
+      .url(url)
+      .useXpath()
+      .waitForElementVisible(
+        '//div[@class="btn btn-primary"][contains(.,"Add a Query")]',
+        1000
+      )
+      .click('//div[@class="btn btn-primary"][contains(.,"Add a Query")]')
+      .pause(500)
+      .waitForElementVisible(
+        '//textarea[contains(@class,"query-editor--field")]',
+        1000
+      )
+      .setValue(
+        '//textarea[contains(@class,"query-editor--field")]',
+        'SHOW DATABASES\n'
+      )
+      .pause(1000)
+      .waitForElementVisible(
+        '*//div[@class="fixedDataTableCellLayout_main public_fixedDataTableCell_main"]/span[contains(.,"_internal")]',
+        5000
+      )
+      .assert.containsText(
+        '*//div[@class="fixedDataTableCellLayout_main public_fixedDataTableCell_main"]/span[contains(.,"_internal")]',
+        '_internal'
+      )
+      .end()
+  },
+}

From 47a4ff913079c605add9f1073807201c2196224d Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Wed, 9 Aug 2017 01:43:23 -0700
Subject: [PATCH 10/62] Refactor test selectors with data-test attributes.
 Excellent reduction in complexity.

---
 ui/nightwatch.json                            |  2 --
 .../data_explorer/components/QueryEditor.js   |  1 +
 ui/src/data_explorer/components/QueryMaker.js |  1 +
 ui/src/data_explorer/components/Table.js      |  2 +-
 ui/tests/DataExplorer.js                      | 28 ++++---------------
 5 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/ui/nightwatch.json b/ui/nightwatch.json
index 9cf577fea3..782749e185 100644
--- a/ui/nightwatch.json
+++ b/ui/nightwatch.json
@@ -6,8 +6,6 @@
   "page_objects_path": "",
   "globals_path": "",
 
-  "use_xpath": true,
-
   "selenium": {
     "start_process": false,
     "host": "hub-cloud.browserstack.com",
diff --git a/ui/src/data_explorer/components/QueryEditor.js b/ui/src/data_explorer/components/QueryEditor.js
index 4e6f49431d..c9b8e5a5eb 100644
--- a/ui/src/data_explorer/components/QueryEditor.js
+++ b/ui/src/data_explorer/components/QueryEditor.js
@@ -220,6 +220,7 @@ class QueryEditor extends Component {
           placeholder="Enter a query or select database, measurement, and field below and have us build one for you..."
           autoComplete="off"
           spellCheck="false"
+          data-test="query-editor-field"
         />
         <div
           className={classnames('varmoji', {'varmoji-rotated': isTemplating})}
diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index ae73677ca1..6e5dce0f58 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -101,6 +101,7 @@ const QueryMaker = React.createClass({
             className="btn btn-primary"
             role="button"
             onClick={this.handleAddQuery}
+            data-test="add-query-button"
           >
             Add a Query
           </div>
diff --git a/ui/src/data_explorer/components/Table.js b/ui/src/data_explorer/components/Table.js
index 4f13a53e53..c8ace2c54f 100644
--- a/ui/src/data_explorer/components/Table.js
+++ b/ui/src/data_explorer/components/Table.js
@@ -177,7 +177,7 @@ const ChronoTable = React.createClass({
               selected={series[activeSeriesIndex].name}
               buttonSize="btn-xs"
             />}
-        <div className="table--tabs-content">
+        <div className="table--tabs-content" data-test="data-table">
           {(columns && !columns.length) || (values && !values.length)
             ? <div className="generic-empty-state">This series is empty</div>
             : <Table
diff --git a/ui/tests/DataExplorer.js b/ui/tests/DataExplorer.js
index 5be92de2a2..b46b159566 100644
--- a/ui/tests/DataExplorer.js
+++ b/ui/tests/DataExplorer.js
@@ -5,30 +5,14 @@ module.exports = {
   'Data Explorer (functional) - SHOW DATABASES'(browser) {
     browser
       .url(url)
-      .useXpath()
-      .waitForElementVisible(
-        '//div[@class="btn btn-primary"][contains(.,"Add a Query")]',
-        1000
-      )
-      .click('//div[@class="btn btn-primary"][contains(.,"Add a Query")]')
+      .waitForElementVisible('[data-test="add-query-button"]', 1000)
+      .click('[data-test="add-query-button"]')
       .pause(500)
-      .waitForElementVisible(
-        '//textarea[contains(@class,"query-editor--field")]',
-        1000
-      )
-      .setValue(
-        '//textarea[contains(@class,"query-editor--field")]',
-        'SHOW DATABASES\n'
-      )
+      .waitForElementVisible('[data-test="query-editor-field"]', 1000)
+      .setValue('[data-test="query-editor-field"]', 'SHOW DATABASES\n')
       .pause(1000)
-      .waitForElementVisible(
-        '*//div[@class="fixedDataTableCellLayout_main public_fixedDataTableCell_main"]/span[contains(.,"_internal")]',
-        5000
-      )
-      .assert.containsText(
-        '*//div[@class="fixedDataTableCellLayout_main public_fixedDataTableCell_main"]/span[contains(.,"_internal")]',
-        '_internal'
-      )
+      .waitForElementVisible('[data-test="data-table"]', 5000)
+      .assert.containsText('[data-test="data-table"]', '_internal')
       .end()
   },
 }

From 0a529ac6b5cfe575bde9b6244163296680d8003f Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Wed, 9 Aug 2017 15:16:15 -0700
Subject: [PATCH 11/62] Integration testing improvements and comments. WIP
 Query Builder test.

---
 ui/nightwatch.json                            |  2 +-
 .../data_explorer/components/DatabaseList.js  |  1 +
 .../data_explorer/components/FieldListItem.js |  1 +
 .../components/MeasurementList.js             |  1 +
 ui/src/data_explorer/components/QueryMaker.js |  1 +
 .../data_explorer/components/QueryMakerTab.js |  6 +-
 ui/src/data_explorer/components/Table.js      |  2 +-
 .../data_explorer/components/TagListItem.js   |  8 +-
 .../data_explorer/components/WriteDataBody.js |  1 +
 .../components/WriteDataFooter.js             |  1 +
 .../components/WriteDataHeader.js             |  1 +
 ui/src/data_explorer/containers/Header.js     |  6 +-
 ui/src/shared/components/AutoRefresh.js       |  2 +-
 ui/src/shared/components/LayoutRenderer.js    |  2 +-
 ui/tests/DataExplorer.js                      | 90 +++++++++++++++++--
 15 files changed, 110 insertions(+), 15 deletions(-)

diff --git a/ui/nightwatch.json b/ui/nightwatch.json
index 782749e185..d47fca7b18 100644
--- a/ui/nightwatch.json
+++ b/ui/nightwatch.json
@@ -28,7 +28,7 @@
         "browserstack.key": "${BROWSERSTACK_KEY}",
         "browserstack.debug": true,
         "browserstack.local": true,
-        "resolution": "1920x1080"
+        "resolution": "1024x768"
       }
     }
   }
diff --git a/ui/src/data_explorer/components/DatabaseList.js b/ui/src/data_explorer/components/DatabaseList.js
index 23ad6143a1..db1a34ab7c 100644
--- a/ui/src/data_explorer/components/DatabaseList.js
+++ b/ui/src/data_explorer/components/DatabaseList.js
@@ -83,6 +83,7 @@ const DatabaseList = React.createClass({
                   })}
                   key={`${database}..${retentionPolicy}`}
                   onClick={_.wrap(namespace, onChooseNamespace)}
+                  data-test={`query-builder-list-item-database-${database}`}
                 >
                   {database}.{retentionPolicy}
                 </div>
diff --git a/ui/src/data_explorer/components/FieldListItem.js b/ui/src/data_explorer/components/FieldListItem.js
index a91673de08..f1f463b5f6 100644
--- a/ui/src/data_explorer/components/FieldListItem.js
+++ b/ui/src/data_explorer/components/FieldListItem.js
@@ -64,6 +64,7 @@ const FieldListItem = React.createClass({
             active: isSelected,
           })}
           onClick={_.wrap(fieldFunc, this.handleToggleField)}
+          data-test={`query-builder-list-item-field-${fieldText}`}
         >
           <span>
             <div className="query-builder--checkbox" />
diff --git a/ui/src/data_explorer/components/MeasurementList.js b/ui/src/data_explorer/components/MeasurementList.js
index d69d751989..5b9b993a3a 100644
--- a/ui/src/data_explorer/components/MeasurementList.js
+++ b/ui/src/data_explorer/components/MeasurementList.js
@@ -144,6 +144,7 @@ const MeasurementList = React.createClass({
                   className={classnames('query-builder--list-item', {
                     active: isActive,
                   })}
+                  data-test={`query-builder-list-item-measurement-${measurement}`}
                 >
                   <span>
                     <div className="query-builder--caret icon caret-right" />
diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index 6e5dce0f58..c05b694dc9 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -168,6 +168,7 @@ const QueryMaker = React.createClass({
         <div
           className="query-maker--new btn btn-sm btn-primary"
           onClick={this.handleAddQuery}
+          data-test="new-query-button"
         >
           <span className="icon plus" />
         </div>
diff --git a/ui/src/data_explorer/components/QueryMakerTab.js b/ui/src/data_explorer/components/QueryMakerTab.js
index 03207c4b46..68f0c51a13 100644
--- a/ui/src/data_explorer/components/QueryMakerTab.js
+++ b/ui/src/data_explorer/components/QueryMakerTab.js
@@ -33,7 +33,11 @@ const QueryMakerTab = React.createClass({
         <label>
           {this.props.queryTabText}
         </label>
-        <span className="query-maker--delete" onClick={this.handleDelete} />
+        <span
+          className="query-maker--delete"
+          onClick={this.handleDelete}
+          data-test="query-maker-delete"
+        />
       </div>
     )
   },
diff --git a/ui/src/data_explorer/components/Table.js b/ui/src/data_explorer/components/Table.js
index c8ace2c54f..4f13a53e53 100644
--- a/ui/src/data_explorer/components/Table.js
+++ b/ui/src/data_explorer/components/Table.js
@@ -177,7 +177,7 @@ const ChronoTable = React.createClass({
               selected={series[activeSeriesIndex].name}
               buttonSize="btn-xs"
             />}
-        <div className="table--tabs-content" data-test="data-table">
+        <div className="table--tabs-content">
           {(columns && !columns.length) || (values && !values.length)
             ? <div className="generic-empty-state">This series is empty</div>
             : <Table
diff --git a/ui/src/data_explorer/components/TagListItem.js b/ui/src/data_explorer/components/TagListItem.js
index 5575e6f980..73d2ee6642 100644
--- a/ui/src/data_explorer/components/TagListItem.js
+++ b/ui/src/data_explorer/components/TagListItem.js
@@ -76,7 +76,12 @@ const TagListItem = React.createClass({
             active: selectedTagValues.indexOf(v) > -1,
           })
           return (
-            <div className={cx} onClick={_.wrap(v, this.handleChoose)} key={v}>
+            <div
+              className={cx}
+              onClick={_.wrap(v, this.handleChoose)}
+              key={v}
+              data-test={`query-builder-list-item-tag-value-${v}`}
+            >
               <span>
                 <div className="query-builder--checkbox" />
                 {v}
@@ -103,6 +108,7 @@ const TagListItem = React.createClass({
         <div
           className={classnames('query-builder--list-item', {active: isOpen})}
           onClick={this.handleClickKey}
+          data-test={`query-builder-list-item-tag-${tagKey}`}
         >
           <span>
             <div className="query-builder--caret icon caret-right" />
diff --git a/ui/src/data_explorer/components/WriteDataBody.js b/ui/src/data_explorer/components/WriteDataBody.js
index 2cb59caab0..d94521a890 100644
--- a/ui/src/data_explorer/components/WriteDataBody.js
+++ b/ui/src/data_explorer/components/WriteDataBody.js
@@ -24,6 +24,7 @@ const WriteDataBody = ({
           onKeyUp={handleKeyUp}
           onChange={handleEdit}
           autoFocus={true}
+          data-test="manual-entry-field"
         />
       : <div className="write-data-form--file">
           <input
diff --git a/ui/src/data_explorer/components/WriteDataFooter.js b/ui/src/data_explorer/components/WriteDataFooter.js
index 503b302ebe..7b7df4e833 100644
--- a/ui/src/data_explorer/components/WriteDataFooter.js
+++ b/ui/src/data_explorer/components/WriteDataFooter.js
@@ -37,6 +37,7 @@ const WriteDataFooter = ({
         (!uploadContent && !isManual) ||
         isUploading
       }
+      data-test="write-data-submit-button"
     >
       Write
     </button>
diff --git a/ui/src/data_explorer/components/WriteDataHeader.js b/ui/src/data_explorer/components/WriteDataHeader.js
index beba8b7420..80c704f205 100644
--- a/ui/src/data_explorer/components/WriteDataHeader.js
+++ b/ui/src/data_explorer/components/WriteDataHeader.js
@@ -27,6 +27,7 @@ const WriteDataHeader = ({
         <li
           onClick={() => toggleWriteView(true)}
           className={isManual ? 'active' : ''}
+          data-test="manual-entry-button"
         >
           Manual Entry
         </li>
diff --git a/ui/src/data_explorer/containers/Header.js b/ui/src/data_explorer/containers/Header.js
index 6913d778ae..32cd0e0bff 100644
--- a/ui/src/data_explorer/containers/Header.js
+++ b/ui/src/data_explorer/containers/Header.js
@@ -49,7 +49,11 @@ const Header = React.createClass({
           <div className="page-header__right">
             <GraphTips />
             <SourceIndicator sourceName={this.context.source.name} />
-            <div className="btn btn-sm btn-default" onClick={showWriteForm}>
+            <div
+              className="btn btn-sm btn-default"
+              onClick={showWriteForm}
+              data-test="write-data-button"
+            >
               <span className="icon pencil" />
               Write Data
             </div>
diff --git a/ui/src/shared/components/AutoRefresh.js b/ui/src/shared/components/AutoRefresh.js
index 2574c19512..1997e1b6c9 100644
--- a/ui/src/shared/components/AutoRefresh.js
+++ b/ui/src/shared/components/AutoRefresh.js
@@ -215,7 +215,7 @@ const AutoRefresh = ComposedComponent => {
 
       return (
         <div className="graph-empty">
-          <p>No Results</p>
+          <p data-test="data-explorer-no-results">No Results</p>
         </div>
       )
     },
diff --git a/ui/src/shared/components/LayoutRenderer.js b/ui/src/shared/components/LayoutRenderer.js
index 61f1fc11ad..f43e6c7fba 100644
--- a/ui/src/shared/components/LayoutRenderer.js
+++ b/ui/src/shared/components/LayoutRenderer.js
@@ -127,7 +127,7 @@ class LayoutRenderer extends Component {
     }
     return (
       <div className="graph-empty">
-        <p>No Results</p>
+        <p data-test="data-explorer-no-results">No Results</p>
       </div>
     )
   }
diff --git a/ui/tests/DataExplorer.js b/ui/tests/DataExplorer.js
index b46b159566..c5e546392b 100644
--- a/ui/tests/DataExplorer.js
+++ b/ui/tests/DataExplorer.js
@@ -1,18 +1,92 @@
 const src = process.argv.find(s => s.includes('--src=')).replace('--src=', '')
-const url = `http://localhost:8888/sources/${src}/chronograf/data-explorer`
+const dataExplorerUrl = `http://localhost:8888/sources/${src}/chronograf/data-explorer`
+const dataTest = s => `[data-test="${s}"]`
 
 module.exports = {
   'Data Explorer (functional) - SHOW DATABASES'(browser) {
     browser
-      .url(url)
-      .waitForElementVisible('[data-test="add-query-button"]', 1000)
-      .click('[data-test="add-query-button"]')
+      // Navigate to the Data Explorer
+      .url(dataExplorerUrl)
+      // Open a new query tab
+      .waitForElementVisible(dataTest('add-query-button'), 1000)
+      .click(dataTest('add-query-button'))
+      .waitForElementVisible(dataTest('query-editor-field'), 1000)
+      // Drop any existing testing database
+      .setValue(dataTest('query-editor-field'), 'DROP DATABASE "testing"\n')
+      .click(dataTest('query-editor-field'))
       .pause(500)
-      .waitForElementVisible('[data-test="query-editor-field"]', 1000)
-      .setValue('[data-test="query-editor-field"]', 'SHOW DATABASES\n')
+      // Create a new testing database
+      .clearValue(dataTest('query-editor-field'))
+      .setValue(dataTest('query-editor-field'), 'CREATE DATABASE "testing"\n')
+      .click(dataTest('query-editor-field'))
+      .pause(2000)
+      .refresh()
+      .waitForElementVisible(dataTest('query-editor-field'), 1000)
+      .clearValue(dataTest('query-editor-field'))
+      .setValue(dataTest('query-editor-field'), 'SHOW DATABASES\n')
+      .click(dataTest('query-editor-field'))
       .pause(1000)
-      .waitForElementVisible('[data-test="data-table"]', 5000)
-      .assert.containsText('[data-test="data-table"]', '_internal')
+      .waitForElementVisible(
+        dataTest('query-builder-list-item-database-testing'),
+        5000
+      )
+      .assert.containsText(
+        dataTest('query-builder-list-item-database-testing'),
+        'testing'
+      )
+      .end()
+  },
+  'Query Builder'(browser) {
+    browser
+      // Navigate to the Data Explorer
+      .url(dataExplorerUrl)
+      // Check to see that there are no results displayed
+      .waitForElementVisible(dataTest('data-explorer-no-results'), 5000)
+      .assert.containsText(dataTest('data-explorer-no-results'), 'No Results')
+      // Open up the Write Data dialog
+      .click(dataTest('write-data-button'))
+      // Set the dialog to manual entry mode
+      .waitForElementVisible(dataTest('manual-entry-button'), 1000)
+      .click(dataTest('manual-entry-button'))
+      // Enter some time-series data
+      .setValue(
+        dataTest('manual-entry-field'),
+        'testing,test_measurement=1,test_measurement2=2 value=3,value2=4'
+      )
+      // Pause, then click the submit button
+      .pause(500)
+      .click(dataTest('write-data-submit-button'))
+      .pause(5000)
+      // Open a new query tab
+      .waitForElementVisible(dataTest('new-query-button'), 1000)
+      .click(dataTest('new-query-button'))
+      // Start building a query
+      // Select the testing database
+      .waitForElementVisible(
+        dataTest('query-builder-list-item-database-testing'),
+        1000
+      )
+      .click(dataTest('query-builder-list-item-database-testing'))
+      // Select both test measurements
+      .waitForElementVisible(
+        dataTest('query-builder-list-item-tag-test_measurement'),
+        1000
+      )
+      .click('query-builder-list-item-tag-test_measurement')
+      .click('query-builder-list-item-tag-test_measurement2')
+      .waitForElementVisible(
+        dataTest('query-builder-list-item-tag-value-1'),
+        1000
+      )
+      .click(dataTest('query-builder-list-item-tag-value-1'))
+      .click(dataTest('query-builder-list-item-tag-value-2'))
+      .waitForElementVisible(dataTest('query-builder-list-item-field-value'))
+      .click(dataTest('query-builder-list-item-field-value'))
+      .click(dataTest('query-builder-list-item-field-value2'))
+      .assert.containsText(
+        dataTest('query-editor-field'),
+        'SELECT mean("value") AS "mean_value", mean("value2") AS "mean_value2" FROM "testing"."autogen"."testing" WHERE time > now() - 1h AND "test_measurement"=\'1\' AND "test_measurement2"=\'2\' GROUP BY time(10s)'
+      )
       .end()
   },
 }

From 0509c7bf5c9fabc9f17f60713b323d9fad21f8dd Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Wed, 9 Aug 2017 16:13:27 -0700
Subject: [PATCH 12/62] Finish the second Query Builder test.

---
 ui/tests/DataExplorer.js | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/ui/tests/DataExplorer.js b/ui/tests/DataExplorer.js
index c5e546392b..6eaa6629b7 100644
--- a/ui/tests/DataExplorer.js
+++ b/ui/tests/DataExplorer.js
@@ -43,6 +43,15 @@ module.exports = {
       // Check to see that there are no results displayed
       .waitForElementVisible(dataTest('data-explorer-no-results'), 5000)
       .assert.containsText(dataTest('data-explorer-no-results'), 'No Results')
+      // Open a new query tab
+      .waitForElementVisible(dataTest('new-query-button'), 1000)
+      .click(dataTest('new-query-button'))
+      // Select the testing database
+      .waitForElementVisible(
+        dataTest('query-builder-list-item-database-testing'),
+        1000
+      )
+      .click(dataTest('query-builder-list-item-database-testing'))
       // Open up the Write Data dialog
       .click(dataTest('write-data-button'))
       // Set the dialog to manual entry mode
@@ -56,33 +65,36 @@ module.exports = {
       // Pause, then click the submit button
       .pause(500)
       .click(dataTest('write-data-submit-button'))
-      .pause(5000)
-      // Open a new query tab
-      .waitForElementVisible(dataTest('new-query-button'), 1000)
-      .click(dataTest('new-query-button'))
+      .pause(2000)
       // Start building a query
-      // Select the testing database
+      // Select the testing measurement
       .waitForElementVisible(
-        dataTest('query-builder-list-item-database-testing'),
-        1000
+        dataTest('query-builder-list-item-measurement-testing'),
+        2000
       )
-      .click(dataTest('query-builder-list-item-database-testing'))
+      .click(dataTest('query-builder-list-item-measurement-testing'))
       // Select both test measurements
       .waitForElementVisible(
         dataTest('query-builder-list-item-tag-test_measurement'),
         1000
       )
-      .click('query-builder-list-item-tag-test_measurement')
-      .click('query-builder-list-item-tag-test_measurement2')
+      .click(dataTest('query-builder-list-item-tag-test_measurement'))
+      .click(dataTest('query-builder-list-item-tag-test_measurement2'))
+      // Select both tag values
       .waitForElementVisible(
         dataTest('query-builder-list-item-tag-value-1'),
         1000
       )
       .click(dataTest('query-builder-list-item-tag-value-1'))
       .click(dataTest('query-builder-list-item-tag-value-2'))
-      .waitForElementVisible(dataTest('query-builder-list-item-field-value'))
+      // Select both field values
+      .waitForElementVisible(
+        dataTest('query-builder-list-item-field-value'),
+        1000
+      )
       .click(dataTest('query-builder-list-item-field-value'))
       .click(dataTest('query-builder-list-item-field-value2'))
+      // Assert the built query string
       .assert.containsText(
         dataTest('query-editor-field'),
         'SELECT mean("value") AS "mean_value", mean("value2") AS "mean_value2" FROM "testing"."autogen"."testing" WHERE time > now() - 1h AND "test_measurement"=\'1\' AND "test_measurement2"=\'2\' GROUP BY time(10s)'

From 89a92a9cf3942cc165af72b1fc96a647dc53744e Mon Sep 17 00:00:00 2001
From: Hunter Trujillo <cryptoquick@gmail.com>
Date: Wed, 9 Aug 2017 18:03:32 -0700
Subject: [PATCH 13/62] Add more integration test instrumentation for Query
 Builder test. Increase screen test resolution.

---
 ui/nightwatch.json                               | 4 +++-
 ui/src/data_explorer/components/FieldListItem.js | 1 +
 ui/src/data_explorer/components/VisHeader.js     | 1 +
 ui/src/shared/components/FunctionSelector.js     | 2 ++
 ui/tests/DataExplorer.js                         | 8 ++++++++
 5 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/ui/nightwatch.json b/ui/nightwatch.json
index d47fca7b18..367e9e2fe2 100644
--- a/ui/nightwatch.json
+++ b/ui/nightwatch.json
@@ -12,6 +12,8 @@
     "port": 80
   },
 
+  "live_output" : true,
+
   "test_settings": {
     "default": {
       "selenium_port": 80,
@@ -28,7 +30,7 @@
         "browserstack.key": "${BROWSERSTACK_KEY}",
         "browserstack.debug": true,
         "browserstack.local": true,
-        "resolution": "1024x768"
+        "resolution": "1280x1024"
       }
     }
   }
diff --git a/ui/src/data_explorer/components/FieldListItem.js b/ui/src/data_explorer/components/FieldListItem.js
index f1f463b5f6..9c730a47c9 100644
--- a/ui/src/data_explorer/components/FieldListItem.js
+++ b/ui/src/data_explorer/components/FieldListItem.js
@@ -78,6 +78,7 @@ const FieldListItem = React.createClass({
                   'btn-primary': fieldFunc.funcs.length,
                 })}
                 onClick={this.toggleFunctionsMenu}
+                data-test={`query-builder-list-item-function-${fieldText}`}
               >
                 {fieldFuncsLabel}
               </div>
diff --git a/ui/src/data_explorer/components/VisHeader.js b/ui/src/data_explorer/components/VisHeader.js
index 8a822a52a5..4f118145ad 100644
--- a/ui/src/data_explorer/components/VisHeader.js
+++ b/ui/src/data_explorer/components/VisHeader.js
@@ -11,6 +11,7 @@ const VisHeader = ({views, view, onToggleView, name}) =>
               key={v}
               onClick={() => onToggleView(v)}
               className={classnames({active: view === v})}
+              data-test={`data-${v}`}
             >
               {_.upperFirst(v)}
             </li>
diff --git a/ui/src/shared/components/FunctionSelector.js b/ui/src/shared/components/FunctionSelector.js
index 75be5eb5ae..5abc26dd7d 100644
--- a/ui/src/shared/components/FunctionSelector.js
+++ b/ui/src/shared/components/FunctionSelector.js
@@ -74,6 +74,7 @@ class FunctionSelector extends Component {
               <div
                 className="btn btn-xs btn-success"
                 onClick={this.handleApplyFunctions}
+                data-test="function-selector-apply"
               >
                 Apply
               </div>
@@ -90,6 +91,7 @@ class FunctionSelector extends Component {
                   f,
                   singleSelect ? this.onSingleSelect : this.onSelect
                 )}
+                data-test={`function-selector-item-${f}`}
               >
                 {f}
               </div>
diff --git a/ui/tests/DataExplorer.js b/ui/tests/DataExplorer.js
index 6eaa6629b7..bcaeb34c71 100644
--- a/ui/tests/DataExplorer.js
+++ b/ui/tests/DataExplorer.js
@@ -80,6 +80,7 @@ module.exports = {
       )
       .click(dataTest('query-builder-list-item-tag-test_measurement'))
       .click(dataTest('query-builder-list-item-tag-test_measurement2'))
+      .pause(500)
       // Select both tag values
       .waitForElementVisible(
         dataTest('query-builder-list-item-tag-value-1'),
@@ -87,6 +88,7 @@ module.exports = {
       )
       .click(dataTest('query-builder-list-item-tag-value-1'))
       .click(dataTest('query-builder-list-item-tag-value-2'))
+      .pause(500)
       // Select both field values
       .waitForElementVisible(
         dataTest('query-builder-list-item-field-value'),
@@ -94,11 +96,17 @@ module.exports = {
       )
       .click(dataTest('query-builder-list-item-field-value'))
       .click(dataTest('query-builder-list-item-field-value2'))
+      .pause(500)
       // Assert the built query string
       .assert.containsText(
         dataTest('query-editor-field'),
         'SELECT mean("value") AS "mean_value", mean("value2") AS "mean_value2" FROM "testing"."autogen"."testing" WHERE time > now() - 1h AND "test_measurement"=\'1\' AND "test_measurement2"=\'2\' GROUP BY time(10s)'
       )
+      .click(dataTest('data-table'))
+      .click(dataTest('query-builder-list-item-function-value'))
+      .waitForElementVisible(dataTest('function-selector-item-mean'), 1000)
+      .click(dataTest('function-selector-item-mean'))
+      .click(dataTest('function-selector-apply'))
       .end()
   },
 }

From 436f5fdb345d70d8c41298d5ea051e015d160bb5 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Mon, 7 Aug 2017 19:28:23 +0000
Subject: [PATCH 14/62] Change some remaining npm mentions to yarn

While `npm` is still installed as part of the build process, most of the
scripts and documentation should be using yarn.

Change `npm` to `yarn` where appropriate.

Signed-off-by: Nathan L Smith <smith@nlsmith.com>
---
 CONTRIBUTING.md  | 8 ++++----
 Makefile         | 8 ++++----
 ui/README.md     | 2 +-
 ui/karma.conf.js | 2 +-
 ui/package.json  | 6 +++---
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 27f84f45ce..f5090bb7c4 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -21,7 +21,7 @@ We really like to receive feature requests, as it helps us prioritize our work.
 
 Contributing to the source code
 -------------------------------
-Chronograf is built using Go for its API backend and serving the front-end assets. The front-end visualization is built with React and uses NPM for package management. The assumption is that all your Go development are done in `$GOPATH/src`. `GOPATH` can be any directory under which Chronograf and all its dependencies will be cloned. For full details on the project structure, follow along below.
+Chronograf is built using Go for its API backend and serving the front-end assets. The front-end visualization is built with React and uses Yarn for package management. The assumption is that all your Go development are done in `$GOPATH/src`. `GOPATH` can be any directory under which Chronograf and all its dependencies will be cloned. For full details on the project structure, follow along below.
 
 Submitting a pull request
 -------------------------
@@ -43,9 +43,9 @@ Signing the CLA
 If you are going to be contributing back to Chronograf please take a second to sign our CLA, which can be found
 [on our website](https://influxdata.com/community/cla/).
 
-Installing NPM
+Installing Yarn
 --------------
-You'll need to install NPM to manage the JavaScript modules that the front-end uses. This varies depending on what platform you're developing on, but you should be able to find an installer on [the NPM downloads page](https://nodejs.org/en/download/).
+You'll need to install Yarn to manage the JavaScript modules that the front-end uses. This varies depending on what platform you're developing on, but you should be able to find an installer on [the Yarn installation page](https://yarnpkg.com/en/docs/install).
 
 Installing Go
 -------------
@@ -105,7 +105,7 @@ Retaining the directory structure `$GOPATH/src/github.com/influxdata` is necessa
 
 Build and Test
 --------------
-Make sure you have `go` and `npm` installed and the project structure as shown above. We provide a `Makefile` to get up and running quickly, so all you'll need to do is run the following:
+Make sure you have `go` and `yarn` installed and the project structure as shown above. We provide a `Makefile` to get up and running quickly, so all you'll need to do is run the following:
 
 ```bash
   cd $GOPATH/src/github.com/influxdata/chronograf
diff --git a/Makefile b/Makefile
index 25c9df79b0..a4de270cc2 100644
--- a/Makefile
+++ b/Makefile
@@ -60,11 +60,11 @@ canned/bin_gen.go: canned/*.json
 	go generate -x ./canned
 
 .jssrc: $(UISOURCES)
-	cd ui && npm run build
+	cd ui && yarn run build
 	@touch .jssrc
 
 .dev-jssrc: $(UISOURCES)
-	cd ui && npm run build:dev
+	cd ui && yarn run build:dev
 	@touch .dev-jssrc
 
 dep: .jsdep .godep
@@ -98,7 +98,7 @@ gotestrace:
 	go test -race `go list ./... | grep -v /vendor/`
 
 jstest:
-	cd ui && npm test
+	cd ui && yarn test
 
 run: ${BINARY}
 	./chronograf
@@ -108,7 +108,7 @@ run-dev: chronogiraffe
 
 clean:
 	if [ -f ${BINARY} ] ; then rm ${BINARY} ; fi
-	cd ui && npm run clean
+	cd ui && yarn run clean
 	cd ui && rm -rf node_modules
 	rm -f dist/dist_gen.go canned/bin_gen.go server/swagger_gen.go
 	@rm -f .godep .jsdep .jssrc .dev-jssrc .bindata
diff --git a/ui/README.md b/ui/README.md
index 997412b204..24f34aec5c 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -33,4 +33,4 @@ yarn upgrade packageName
 ```
 
 ## Testing
-Tests can be run via command line with `npm test`, from within the `/ui` directory. For more detailed reporting, use `npm test -- --reporters=verbose`.
+Tests can be run via command line with `yarn test`, from within the `/ui` directory. For more detailed reporting, use `yarn test -- --reporters=verbose`.
diff --git a/ui/karma.conf.js b/ui/karma.conf.js
index a8a4f693f0..dad28ee4e2 100644
--- a/ui/karma.conf.js
+++ b/ui/karma.conf.js
@@ -16,7 +16,7 @@ module.exports = function(config) {
       'spec/index.js': ['webpack', 'sourcemap'],
     },
     // For more detailed reporting on tests, you can add 'verbose' and/or 'progress'.
-    // This can also be done via the command line with `npm test -- --reporters=verbose`.
+    // This can also be done via the command line with `yarn test -- --reporters=verbose`.
     reporters: ['dots'],
     webpack: {
       devtool: 'inline-source-map',
diff --git a/ui/package.json b/ui/package.json
index f6ebfab52a..963e71b7c8 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -9,14 +9,14 @@
     "url": "github:influxdata/chronograf"
   },
   "scripts": {
-    "build": "npm run clean && env NODE_ENV=production node_modules/webpack/bin/webpack.js -p --config ./webpack/prodConfig.js",
+    "build": "yarn run clean && env NODE_ENV=production node_modules/webpack/bin/webpack.js -p --config ./webpack/prodConfig.js",
     "build:dev": "node_modules/webpack/bin/webpack.js --config ./webpack/devConfig.js",
     "start": "node_modules/webpack/bin/webpack.js -w --config ./webpack/devConfig.js",
     "lint": "node_modules/eslint/bin/eslint.js src/",
     "test": "karma start",
-    "test:lint": "npm run lint; npm run test",
-    "test:dev": "nodemon --exec npm run test:lint",
     "test:integration": "nightwatch tests --skip",
+    "test:lint": "yarn run lint; yarn run test",
+    "test:dev": "nodemon --exec yarn run test:lint",
     "clean": "rm -rf build",
     "storybook": "node ./storybook",
     "prettier": "prettier --single-quote --trailing-comma es5 --bracket-spacing false --semi false --write \"{src,spec}/**/*.js\"; eslint src --fix"

From 08a1fbcfc373db2ee67bd22a7c0d4b997daec3f4 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Tue, 8 Aug 2017 16:33:08 -0700
Subject: [PATCH 15/62] Change height of table dynamically according to resizer

---
 ui/src/data_explorer/components/Table.js      | 11 +++++-----
 ui/src/data_explorer/components/VisView.js    |  4 +++-
 .../data_explorer/components/Visualization.js |  3 +++
 ui/src/shared/components/ResizeContainer.js   | 22 ++++++++++++++-----
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/ui/src/data_explorer/components/Table.js b/ui/src/data_explorer/components/Table.js
index 4f13a53e53..72538180f6 100644
--- a/ui/src/data_explorer/components/Table.js
+++ b/ui/src/data_explorer/components/Table.js
@@ -12,7 +12,6 @@ import {Table, Column, Cell} from 'fixed-data-table'
 
 const {arrayOf, bool, func, number, oneOfType, shape, string} = PropTypes
 
-const defaultTableHeight = 1000
 const emptySeries = {columns: [], values: []}
 
 const CustomCell = React.createClass({
@@ -64,7 +63,7 @@ const ChronoTable = React.createClass({
 
   getDefaultProps() {
     return {
-      height: defaultTableHeight,
+      height: 500,
     }
   },
 
@@ -139,11 +138,11 @@ const ChronoTable = React.createClass({
     const maximumTabsCount = 11
     // adjust height to proper value by subtracting the heights of the UI around it
     // tab height, graph-container vertical padding, graph-heading height, multitable-header height
-    const stylePixelOffset = 136
-    const rowHeight = 34
-    const defaultColumnWidth = 200
-    const headerHeight = 30
     const minWidth = 70
+    const rowHeight = 34
+    const headerHeight = 30
+    const stylePixelOffset = 130
+    const defaultColumnWidth = 200
     const styleAdjustedHeight = height - stylePixelOffset
     const width =
       columns && columns.length > 1 ? defaultColumnWidth : containerWidth
diff --git a/ui/src/data_explorer/components/VisView.js b/ui/src/data_explorer/components/VisView.js
index 9e717c6f14..1862405294 100644
--- a/ui/src/data_explorer/components/VisView.js
+++ b/ui/src/data_explorer/components/VisView.js
@@ -13,6 +13,7 @@ const VisView = ({
   heightPixels,
   editQueryStatus,
   activeQueryIndex,
+  resizerBottomHeight,
 }) => {
   const activeQuery = queries[activeQueryIndex]
   const defaultQuery = queries[0]
@@ -30,7 +31,7 @@ const VisView = ({
     return (
       <Table
         query={query}
-        height={heightPixels}
+        height={resizerBottomHeight}
         editQueryStatus={editQueryStatus}
       />
     )
@@ -60,6 +61,7 @@ VisView.propTypes = {
   heightPixels: number,
   editQueryStatus: func.isRequired,
   activeQueryIndex: number,
+  resizerBottomHeight: number,
 }
 
 export default VisView
diff --git a/ui/src/data_explorer/components/Visualization.js b/ui/src/data_explorer/components/Visualization.js
index b33b99a7b3..e9cb86a4a0 100644
--- a/ui/src/data_explorer/components/Visualization.js
+++ b/ui/src/data_explorer/components/Visualization.js
@@ -31,6 +31,7 @@ const Visualization = React.createClass({
         bounds: arrayOf(string),
       }),
     }),
+    resizerBottomHeight: number,
   },
 
   contextTypes: {
@@ -95,6 +96,7 @@ const Visualization = React.createClass({
       editQueryStatus,
       activeQueryIndex,
       isInDataExplorer,
+      resizerBottomHeight,
     } = this.props
     const {source: {links: {proxy}}} = this.context
     const {view} = this.state
@@ -134,6 +136,7 @@ const Visualization = React.createClass({
             editQueryStatus={editQueryStatus}
             activeQueryIndex={activeQueryIndex}
             isInDataExplorer={isInDataExplorer}
+            resizerBottomHeight={resizerBottomHeight}
           />
         </div>
       </div>
diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js
index cb3fb19baf..a8baab69e7 100644
--- a/ui/src/shared/components/ResizeContainer.js
+++ b/ui/src/shared/components/ResizeContainer.js
@@ -31,6 +31,12 @@ class ResizeContainer extends Component {
     initialBottomHeight: defaultInitialBottomHeight,
   }
 
+  componentDidMount() {
+    this.setState({
+      bottomHeightPixels: this.bottom.getBoundingClientRect().height,
+    })
+  }
+
   handleStartDrag() {
     this.setState({isDragging: true})
   }
@@ -51,7 +57,7 @@ class ResizeContainer extends Component {
     const {minTopHeight, minBottomHeight} = this.props
     const oneHundred = 100
     const containerHeight = parseInt(
-      getComputedStyle(this.refs.resizeContainer).height,
+      getComputedStyle(this.resizeContainer).height,
       10
     )
     // verticalOffset moves the resize handle as many pixels as the page-heading is taking up.
@@ -85,11 +91,12 @@ class ResizeContainer extends Component {
     this.setState({
       topHeight: `${newTopPanelPercent}%`,
       bottomHeight: `${newBottomPanelPercent}%`,
+      bottomHeightPixels,
     })
   }
 
   render() {
-    const {topHeight, bottomHeight, isDragging} = this.state
+    const {bottomHeightPixels, topHeight, bottomHeight, isDragging} = this.state
     const {containerClass, children} = this.props
 
     if (React.Children.count(children) > maximumNumChildren) {
@@ -107,10 +114,12 @@ class ResizeContainer extends Component {
         onMouseLeave={this.handleMouseLeave}
         onMouseUp={this.handleStopDrag}
         onMouseMove={this.handleDrag}
-        ref="resizeContainer"
+        ref={r => (this.resizeContainer = r)}
       >
         <div className="resize--top" style={{height: topHeight}}>
-          {React.cloneElement(children[0])}
+          {React.cloneElement(children[0], {
+            resizerBottomHeight: bottomHeightPixels,
+          })}
         </div>
         <ResizeHandle
           isDragging={isDragging}
@@ -120,8 +129,11 @@ class ResizeContainer extends Component {
         <div
           className="resize--bottom"
           style={{height: bottomHeight, top: topHeight}}
+          ref={r => (this.bottom = r)}
         >
-          {React.cloneElement(children[1])}
+          {React.cloneElement(children[1], {
+            resizerBottomHeight: bottomHeightPixels,
+          })}
         </div>
       </div>
     )

From eae327f25da37075e5581771eb7f7da3be5bf58f Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 9 Aug 2017 11:29:25 -0700
Subject: [PATCH 16/62] Pixel perfect

---
 ui/src/data_explorer/components/Table.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/data_explorer/components/Table.js b/ui/src/data_explorer/components/Table.js
index 72538180f6..b2dbb5574a 100644
--- a/ui/src/data_explorer/components/Table.js
+++ b/ui/src/data_explorer/components/Table.js
@@ -141,7 +141,7 @@ const ChronoTable = React.createClass({
     const minWidth = 70
     const rowHeight = 34
     const headerHeight = 30
-    const stylePixelOffset = 130
+    const stylePixelOffset = 125
     const defaultColumnWidth = 200
     const styleAdjustedHeight = height - stylePixelOffset
     const width =

From 718c1085a9b2add1bc4b5e655a1f71387514f4aa Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 9 Aug 2017 12:35:06 -0700
Subject: [PATCH 17/62] Update CHANGELOG

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c266631d2..9e0e1cb1e5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## v1.3.7.0 [unreleased]
 ### Bug Fixes
+1. [#1845](https://github.com/influxdata/chronograf/pull/1845): Fix no-scroll bar appearing in the Data Explorer table
 
 ### Features
 

From 27c9e0a4e4993de2740b7442b3cc1ecb072add20 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 9 Aug 2017 13:23:08 -0700
Subject: [PATCH 18/62] Pass editQueryStatus action creator

---
 ui/src/data_explorer/components/VisView.js  |  1 +
 ui/src/shared/components/RefreshingGraph.js | 15 +++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/src/data_explorer/components/VisView.js b/ui/src/data_explorer/components/VisView.js
index 1862405294..1f9ddcdb12 100644
--- a/ui/src/data_explorer/components/VisView.js
+++ b/ui/src/data_explorer/components/VisView.js
@@ -45,6 +45,7 @@ const VisView = ({
       templates={templates}
       cellHeight={heightPixels}
       autoRefresh={autoRefresh}
+      editQueryStatus={editQueryStatus}
     />
   )
 }
diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js
index 56e43857ff..e70ff5b5f1 100644
--- a/ui/src/shared/components/RefreshingGraph.js
+++ b/ui/src/shared/components/RefreshingGraph.js
@@ -8,14 +8,15 @@ const RefreshingLineGraph = AutoRefresh(LineGraph)
 const RefreshingSingleStat = AutoRefresh(SingleStat)
 
 const RefreshingGraph = ({
-  timeRange,
-  autoRefresh,
-  templates,
-  synchronizer,
+  axes,
   type,
   queries,
+  templates,
+  timeRange,
   cellHeight,
-  axes,
+  autoRefresh,
+  synchronizer,
+  editQueryStatus,
 }) => {
   if (type === 'single-stat') {
     return (
@@ -43,6 +44,7 @@ const RefreshingGraph = ({
       isBarGraph={type === 'bar'}
       displayOptions={displayOptions}
       synchronizer={synchronizer}
+      editQueryStatus={editQueryStatus}
       axes={axes}
     />
   )
@@ -58,9 +60,10 @@ RefreshingGraph.propTypes = {
   templates: arrayOf(shape()),
   synchronizer: func,
   type: string.isRequired,
-  queries: arrayOf(shape()).isRequired,
   cellHeight: number,
   axes: shape(),
+  queries: arrayOf(shape()).isRequired,
+  editQueryStatus: func,
 }
 
 export default RefreshingGraph

From 1a8d2dd625c5c1c53abbc2bfb07b8eee83e544bd Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 9 Aug 2017 16:25:07 -0700
Subject: [PATCH 19/62] Update DataExplorer to extend Component

---
 .../data_explorer/containers/DataExplorer.js  | 113 +++++++++---------
 1 file changed, 58 insertions(+), 55 deletions(-)

diff --git a/ui/src/data_explorer/containers/DataExplorer.js b/ui/src/data_explorer/containers/DataExplorer.js
index 5ec4ee93f8..588384aa5e 100644
--- a/ui/src/data_explorer/containers/DataExplorer.js
+++ b/ui/src/data_explorer/containers/DataExplorer.js
@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
@@ -18,64 +18,29 @@ import {setAutoRefresh} from 'shared/actions/app'
 import * as dataExplorerActionCreators from 'src/data_explorer/actions/view'
 import {writeLineProtocolAsync} from 'src/data_explorer/actions/view/write'
 
-const {arrayOf, func, number, shape, string} = PropTypes
+class DataExplorer extends Component {
+  constructor(props) {
+    super(props)
 
-const DataExplorer = React.createClass({
-  propTypes: {
-    source: shape({
-      links: shape({
-        proxy: string.isRequired,
-        self: string.isRequired,
-        queries: string.isRequired,
-      }).isRequired,
-    }).isRequired,
-    queryConfigs: arrayOf(shape({})).isRequired,
-    queryConfigActions: shape({
-      editQueryStatus: func.isRequired,
-    }).isRequired,
-    autoRefresh: number.isRequired,
-    handleChooseAutoRefresh: func.isRequired,
-    timeRange: shape({
-      upper: string,
-      lower: string,
-    }).isRequired,
-    setTimeRange: func.isRequired,
-    dataExplorer: shape({
-      queryIDs: arrayOf(string).isRequired,
-    }).isRequired,
-    writeLineProtocol: func.isRequired,
-    errorThrownAction: func.isRequired,
-  },
-
-  childContextTypes: {
-    source: shape({
-      links: shape({
-        proxy: string.isRequired,
-        self: string.isRequired,
-      }).isRequired,
-    }).isRequired,
-  },
-
-  getChildContext() {
-    return {source: this.props.source}
-  },
-
-  getInitialState() {
-    return {
+    this.state = {
       activeQueryIndex: 0,
       showWriteForm: false,
     }
-  },
+  }
+
+  getChildContext() {
+    return {source: this.props.source}
+  }
 
   handleSetActiveQueryIndex(index) {
     this.setState({activeQueryIndex: index})
-  },
+  }
 
   handleDeleteQuery(index) {
-    const {queryConfigs} = this.props
+    const {queryConfigs, queryConfigActions} = this.props
     const query = queryConfigs[index]
-    this.props.queryConfigActions.deleteQuery(query.id)
-  },
+    queryConfigActions.deleteQuery(query.id)
+  }
 
   render() {
     const {
@@ -89,6 +54,7 @@ const DataExplorer = React.createClass({
       source,
       writeLineProtocol,
     } = this.props
+
     const {activeQueryIndex, showWriteForm} = this.state
     const selectedDatabase = _.get(
       queryConfigs,
@@ -129,8 +95,8 @@ const DataExplorer = React.createClass({
             autoRefresh={autoRefresh}
             timeRange={timeRange}
             isInDataExplorer={true}
-            setActiveQueryIndex={this.handleSetActiveQueryIndex}
-            onDeleteQuery={this.handleDeleteQuery}
+            setActiveQueryIndex={::this.handleSetActiveQueryIndex}
+            onDeleteQuery={::this.handleDeleteQuery}
             activeQueryIndex={activeQueryIndex}
           />
           <Visualization
@@ -145,10 +111,47 @@ const DataExplorer = React.createClass({
         </ResizeContainer>
       </div>
     )
-  },
-})
+  }
+}
 
-function mapStateToProps(state) {
+const {arrayOf, func, number, shape, string} = PropTypes
+
+DataExplorer.propTypes = {
+  source: shape({
+    links: shape({
+      proxy: string.isRequired,
+      self: string.isRequired,
+      queries: string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  queryConfigs: arrayOf(shape({})).isRequired,
+  queryConfigActions: shape({
+    editQueryStatus: func.isRequired,
+  }).isRequired,
+  autoRefresh: number.isRequired,
+  handleChooseAutoRefresh: func.isRequired,
+  timeRange: shape({
+    upper: string,
+    lower: string,
+  }).isRequired,
+  setTimeRange: func.isRequired,
+  dataExplorer: shape({
+    queryIDs: arrayOf(string).isRequired,
+  }).isRequired,
+  writeLineProtocol: func.isRequired,
+  errorThrownAction: func.isRequired,
+}
+
+DataExplorer.childContextTypes = {
+  source: shape({
+    links: shape({
+      proxy: string.isRequired,
+      self: string.isRequired,
+    }).isRequired,
+  }).isRequired,
+}
+
+const mapStateToProps = state => {
   const {
     app: {persisted: {autoRefresh}},
     dataExplorer,
@@ -165,7 +168,7 @@ function mapStateToProps(state) {
   }
 }
 
-function mapDispatchToProps(dispatch) {
+const mapDispatchToProps = dispatch => {
   return {
     handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch),
     errorThrownAction: bindActionCreators(errorThrown, dispatch),

From a61406b7799b726b3259505fdc519f7e10a43230 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 9 Aug 2017 16:36:59 -0700
Subject: [PATCH 20/62] Remove table logic from dashboard visualization

---
 .../components/CellEditorOverlay.js           |   2 +-
 ui/src/dashboards/components/Visualization.js | 112 ++++++++++++++++++
 2 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/dashboards/components/Visualization.js

diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index 57ce0d3492..4c2241360c 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/ui/src/dashboards/components/CellEditorOverlay.js
@@ -5,7 +5,7 @@ import uuid from 'node-uuid'
 
 import ResizeContainer from 'shared/components/ResizeContainer'
 import QueryMaker from 'src/data_explorer/components/QueryMaker'
-import Visualization from 'src/data_explorer/components/Visualization'
+import Visualization from 'src/dashboards/components/Visualization'
 import OverlayControls from 'src/dashboards/components/OverlayControls'
 import DisplayOptions from 'src/dashboards/components/DisplayOptions'
 
diff --git a/ui/src/dashboards/components/Visualization.js b/ui/src/dashboards/components/Visualization.js
new file mode 100644
index 0000000000..267b8a5a9f
--- /dev/null
+++ b/ui/src/dashboards/components/Visualization.js
@@ -0,0 +1,112 @@
+import React, {PropTypes} from 'react'
+import buildInfluxQLQuery from 'utils/influxql'
+import VisHeader from 'src/data_explorer/components/VisHeader'
+import VisView from 'src/data_explorer/components/VisView'
+import {GRAPH} from 'shared/constants'
+import _ from 'lodash'
+
+const {arrayOf, bool, func, number, shape, string} = PropTypes
+
+const Visualization = React.createClass({
+  propTypes: {
+    cellName: string,
+    cellType: string,
+    autoRefresh: number.isRequired,
+    templates: arrayOf(shape()),
+    isInDataExplorer: bool,
+    timeRange: shape({
+      upper: string,
+      lower: string,
+    }).isRequired,
+    queryConfigs: arrayOf(shape({})).isRequired,
+    activeQueryIndex: number,
+    height: string,
+    heightPixels: number,
+    editQueryStatus: func.isRequired,
+    views: arrayOf(string).isRequired,
+    axes: shape({
+      y: shape({
+        bounds: arrayOf(string),
+      }),
+    }),
+    resizerBottomHeight: number,
+  },
+
+  contextTypes: {
+    source: PropTypes.shape({
+      links: PropTypes.shape({
+        proxy: PropTypes.string.isRequired,
+      }).isRequired,
+    }).isRequired,
+  },
+
+  getDefaultProps() {
+    return {
+      cellName: '',
+      cellType: '',
+    }
+  },
+
+  render() {
+    const {
+      axes,
+      views,
+      height,
+      cellType,
+      cellName,
+      timeRange,
+      templates,
+      autoRefresh,
+      heightPixels,
+      queryConfigs,
+      editQueryStatus,
+      activeQueryIndex,
+      isInDataExplorer,
+      resizerBottomHeight,
+    } = this.props
+
+    const {source: {links: {proxy}}} = this.context
+    const statements = queryConfigs.map(query => {
+      const text =
+        query.rawText || buildInfluxQLQuery(query.range || timeRange, query)
+      return {text, id: query.id, queryConfig: query}
+    })
+
+    const queries = statements.filter(s => s.text !== null).map(s => {
+      return {host: [proxy], text: s.text, id: s.id, queryConfig: s.queryConfig}
+    })
+
+    return (
+      <div className="graph" style={{height}}>
+        <VisHeader
+          views={views}
+          view={GRAPH}
+          onToggleView={this.handleToggleView}
+          name={cellName}
+        />
+        <div className="graph-container">
+          <VisView
+            view={GRAPH}
+            axes={axes}
+            queries={queries}
+            templates={templates}
+            cellType={cellType}
+            autoRefresh={autoRefresh}
+            heightPixels={heightPixels}
+            editQueryStatus={editQueryStatus}
+            activeQueryIndex={activeQueryIndex}
+            isInDataExplorer={isInDataExplorer}
+            resizerBottomHeight={resizerBottomHeight}
+          />
+        </div>
+      </div>
+    )
+  },
+
+  getQueryText(queryConfigs, index) {
+    // rawText can be null
+    return _.get(queryConfigs, [`${index}`, 'rawText'], '') || ''
+  },
+})
+
+export default Visualization

From 538dda35410c4c0d3fd294f718a8eaf180a01506 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 9 Aug 2017 16:48:50 -0700
Subject: [PATCH 21/62] Move logic from render and remove VisView

---
 ui/src/dashboards/components/Visualization.js | 71 ++++++++-----------
 1 file changed, 30 insertions(+), 41 deletions(-)

diff --git a/ui/src/dashboards/components/Visualization.js b/ui/src/dashboards/components/Visualization.js
index 267b8a5a9f..c6de4ab0ad 100644
--- a/ui/src/dashboards/components/Visualization.js
+++ b/ui/src/dashboards/components/Visualization.js
@@ -1,35 +1,29 @@
 import React, {PropTypes} from 'react'
+import RefreshingGraph from 'shared/components/RefreshingGraph'
 import buildInfluxQLQuery from 'utils/influxql'
-import VisHeader from 'src/data_explorer/components/VisHeader'
-import VisView from 'src/data_explorer/components/VisView'
-import {GRAPH} from 'shared/constants'
 import _ from 'lodash'
 
-const {arrayOf, bool, func, number, shape, string} = PropTypes
+const {arrayOf, func, number, shape, string} = PropTypes
 
-const Visualization = React.createClass({
+const DashVisualization = React.createClass({
   propTypes: {
     cellName: string,
     cellType: string,
     autoRefresh: number.isRequired,
     templates: arrayOf(shape()),
-    isInDataExplorer: bool,
     timeRange: shape({
       upper: string,
       lower: string,
     }).isRequired,
     queryConfigs: arrayOf(shape({})).isRequired,
-    activeQueryIndex: number,
     height: string,
     heightPixels: number,
     editQueryStatus: func.isRequired,
-    views: arrayOf(string).isRequired,
     axes: shape({
       y: shape({
         bounds: arrayOf(string),
       }),
     }),
-    resizerBottomHeight: number,
   },
 
   contextTypes: {
@@ -50,22 +44,41 @@ const Visualization = React.createClass({
   render() {
     const {
       axes,
-      views,
       height,
       cellType,
       cellName,
-      timeRange,
       templates,
       autoRefresh,
       heightPixels,
-      queryConfigs,
       editQueryStatus,
-      activeQueryIndex,
-      isInDataExplorer,
-      resizerBottomHeight,
     } = this.props
 
+    return (
+      <div className="graph" style={{height}}>
+        <div className="graph-heading">
+          <div className="graph-title">
+            {cellName}
+          </div>
+        </div>
+        <div className="graph-container">
+          <RefreshingGraph
+            axes={axes}
+            type={cellType}
+            queries={::this.buildQueries()}
+            templates={templates}
+            cellHeight={heightPixels}
+            autoRefresh={autoRefresh}
+            editQueryStatus={editQueryStatus}
+          />
+        </div>
+      </div>
+    )
+  },
+
+  buildQueries() {
     const {source: {links: {proxy}}} = this.context
+    const {queryConfigs, timeRange} = this.props
+
     const statements = queryConfigs.map(query => {
       const text =
         query.rawText || buildInfluxQLQuery(query.range || timeRange, query)
@@ -76,31 +89,7 @@ const Visualization = React.createClass({
       return {host: [proxy], text: s.text, id: s.id, queryConfig: s.queryConfig}
     })
 
-    return (
-      <div className="graph" style={{height}}>
-        <VisHeader
-          views={views}
-          view={GRAPH}
-          onToggleView={this.handleToggleView}
-          name={cellName}
-        />
-        <div className="graph-container">
-          <VisView
-            view={GRAPH}
-            axes={axes}
-            queries={queries}
-            templates={templates}
-            cellType={cellType}
-            autoRefresh={autoRefresh}
-            heightPixels={heightPixels}
-            editQueryStatus={editQueryStatus}
-            activeQueryIndex={activeQueryIndex}
-            isInDataExplorer={isInDataExplorer}
-            resizerBottomHeight={resizerBottomHeight}
-          />
-        </div>
-      </div>
-    )
+    return queries
   },
 
   getQueryText(queryConfigs, index) {
@@ -109,4 +98,4 @@ const Visualization = React.createClass({
   },
 })
 
-export default Visualization
+export default DashVisualization

From abcf8976261364f849ae90903c8aaaae2ac7d73f Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 9 Aug 2017 17:17:45 -0700
Subject: [PATCH 22/62] Turn DashVisualization stateless

---
 ui/src/dashboards/components/Visualization.js | 155 ++++++++----------
 ui/src/utils/buildQueriesForGraphs.js         |  17 ++
 2 files changed, 81 insertions(+), 91 deletions(-)
 create mode 100644 ui/src/utils/buildQueriesForGraphs.js

diff --git a/ui/src/dashboards/components/Visualization.js b/ui/src/dashboards/components/Visualization.js
index c6de4ab0ad..2ff3275c20 100644
--- a/ui/src/dashboards/components/Visualization.js
+++ b/ui/src/dashboards/components/Visualization.js
@@ -1,101 +1,74 @@
 import React, {PropTypes} from 'react'
 import RefreshingGraph from 'shared/components/RefreshingGraph'
-import buildInfluxQLQuery from 'utils/influxql'
-import _ from 'lodash'
+import buildQueries from 'utils/buildQueriesForGraphs'
+
+const DashVisualization = (
+  {
+    axes,
+    height,
+    cellType,
+    cellName,
+    templates,
+    timeRange,
+    autoRefresh,
+    queryConfigs,
+    heightPixels,
+    editQueryStatus,
+  },
+  {source: {links: {proxy}}}
+) =>
+  <div className="graph" style={{height}}>
+    <div className="graph-heading">
+      <div className="graph-title">
+        {cellName}
+      </div>
+    </div>
+    <div className="graph-container">
+      <RefreshingGraph
+        axes={axes}
+        type={cellType}
+        queries={buildQueries(proxy, queryConfigs, timeRange)}
+        templates={templates}
+        cellHeight={heightPixels}
+        autoRefresh={autoRefresh}
+        editQueryStatus={editQueryStatus}
+      />
+    </div>
+  </div>
 
 const {arrayOf, func, number, shape, string} = PropTypes
 
-const DashVisualization = React.createClass({
-  propTypes: {
-    cellName: string,
-    cellType: string,
-    autoRefresh: number.isRequired,
-    templates: arrayOf(shape()),
-    timeRange: shape({
-      upper: string,
-      lower: string,
-    }).isRequired,
-    queryConfigs: arrayOf(shape({})).isRequired,
-    height: string,
-    heightPixels: number,
-    editQueryStatus: func.isRequired,
-    axes: shape({
-      y: shape({
-        bounds: arrayOf(string),
-      }),
+DashVisualization.defaultProps = {
+  cellName: '',
+  cellType: '',
+}
+
+DashVisualization.propTypes = {
+  cellName: string,
+  cellType: string,
+  autoRefresh: number.isRequired,
+  templates: arrayOf(shape()),
+  timeRange: shape({
+    upper: string,
+    lower: string,
+  }).isRequired,
+  queryConfigs: arrayOf(shape({})).isRequired,
+  height: string,
+  heightPixels: number,
+  editQueryStatus: func.isRequired,
+  axes: shape({
+    y: shape({
+      bounds: arrayOf(string),
     }),
-  },
+  }),
+}
 
-  contextTypes: {
-    source: PropTypes.shape({
-      links: PropTypes.shape({
-        proxy: PropTypes.string.isRequired,
-      }).isRequired,
+DashVisualization.contextTypes = {
+  source: PropTypes.shape({
+    links: PropTypes.shape({
+      proxy: PropTypes.string.isRequired,
     }).isRequired,
-  },
-
-  getDefaultProps() {
-    return {
-      cellName: '',
-      cellType: '',
-    }
-  },
-
-  render() {
-    const {
-      axes,
-      height,
-      cellType,
-      cellName,
-      templates,
-      autoRefresh,
-      heightPixels,
-      editQueryStatus,
-    } = this.props
-
-    return (
-      <div className="graph" style={{height}}>
-        <div className="graph-heading">
-          <div className="graph-title">
-            {cellName}
-          </div>
-        </div>
-        <div className="graph-container">
-          <RefreshingGraph
-            axes={axes}
-            type={cellType}
-            queries={::this.buildQueries()}
-            templates={templates}
-            cellHeight={heightPixels}
-            autoRefresh={autoRefresh}
-            editQueryStatus={editQueryStatus}
-          />
-        </div>
-      </div>
-    )
-  },
-
-  buildQueries() {
-    const {source: {links: {proxy}}} = this.context
-    const {queryConfigs, timeRange} = this.props
-
-    const statements = queryConfigs.map(query => {
-      const text =
-        query.rawText || buildInfluxQLQuery(query.range || timeRange, query)
-      return {text, id: query.id, queryConfig: query}
-    })
-
-    const queries = statements.filter(s => s.text !== null).map(s => {
-      return {host: [proxy], text: s.text, id: s.id, queryConfig: s.queryConfig}
-    })
-
-    return queries
-  },
-
-  getQueryText(queryConfigs, index) {
-    // rawText can be null
-    return _.get(queryConfigs, [`${index}`, 'rawText'], '') || ''
-  },
-})
+  }).isRequired,
+}
 
 export default DashVisualization
diff --git a/ui/src/utils/buildQueriesForGraphs.js b/ui/src/utils/buildQueriesForGraphs.js
new file mode 100644
index 0000000000..39ff302e5f
--- /dev/null
+++ b/ui/src/utils/buildQueriesForGraphs.js
@@ -0,0 +1,17 @@
+import buildInfluxQLQuery from 'utils/influxql'
+
+const buildQueries = (proxy, queryConfigs, timeRange) => {
+  const statements = queryConfigs.map(query => {
+    const text =
+      query.rawText || buildInfluxQLQuery(query.range || timeRange, query)
+    return {text, id: query.id, queryConfig: query}
+  })
+
+  const queries = statements.filter(s => s.text !== null).map(s => {
+    return {host: [proxy], text: s.text, id: s.id, queryConfig: s.queryConfig}
+  })
+
+  return queries
+}
+
+export default buildQueries

From 3dbdc5e0950d1c95b1f70440d8bf4540fb0ede01 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 12:50:12 -0700
Subject: [PATCH 23/62] Remove unused props and simplify prop names

---
 .../components/CellEditorOverlay.js           | 10 ++++----
 ui/src/dashboards/components/Visualization.js | 23 ++++++++-----------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index 4c2241360c..d19bbaaef5 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/ui/src/dashboards/components/CellEditorOverlay.js
@@ -222,16 +222,14 @@ class CellEditorOverlay extends Component {
           initialBottomHeight={INITIAL_HEIGHTS.queryMaker}
         >
           <Visualization
-            autoRefresh={autoRefresh}
+            axes={axes}
+            type={cellWorkingType}
+            name={cellWorkingName}
             timeRange={timeRange}
             templates={templates}
+            autoRefresh={autoRefresh}
             queryConfigs={queriesWorkingDraft}
-            activeQueryIndex={0}
-            cellType={cellWorkingType}
-            cellName={cellWorkingName}
             editQueryStatus={editQueryStatus}
-            axes={axes}
-            views={[]}
           />
           <div className="overlay-technology--editor">
             <OverlayControls
diff --git a/ui/src/dashboards/components/Visualization.js b/ui/src/dashboards/components/Visualization.js
index 2ff3275c20..624b797d57 100644
--- a/ui/src/dashboards/components/Visualization.js
+++ b/ui/src/dashboards/components/Visualization.js
@@ -5,31 +5,28 @@ import buildQueries from 'utils/buildQueriesForGraphs'
 const DashVisualization = (
   {
     axes,
-    height,
-    cellType,
-    cellName,
+    type,
+    name,
     templates,
     timeRange,
     autoRefresh,
     queryConfigs,
-    heightPixels,
     editQueryStatus,
   },
   {source: {links: {proxy}}}
 ) =>
-  <div className="graph" style={{height}}>
+  <div className="graph">
     <div className="graph-heading">
       <div className="graph-title">
-        {cellName}
+        {name}
       </div>
     </div>
     <div className="graph-container">
       <RefreshingGraph
         axes={axes}
-        type={cellType}
+        type={type}
         queries={buildQueries(proxy, queryConfigs, timeRange)}
         templates={templates}
-        cellHeight={heightPixels}
         autoRefresh={autoRefresh}
         editQueryStatus={editQueryStatus}
       />
@@ -39,13 +36,13 @@ const DashVisualization = (
 const {arrayOf, func, number, shape, string} = PropTypes
 
 DashVisualization.defaultProps = {
-  cellName: '',
-  cellType: '',
+  name: '',
+  type: '',
 }
 
 DashVisualization.propTypes = {
-  cellName: string,
-  cellType: string,
+  name: string,
+  type: string,
   autoRefresh: number.isRequired,
   templates: arrayOf(shape()),
   timeRange: shape({
@@ -53,8 +50,6 @@ DashVisualization.propTypes = {
     lower: string,
   }).isRequired,
   queryConfigs: arrayOf(shape({})).isRequired,
-  height: string,
-  heightPixels: number,
   editQueryStatus: func.isRequired,
   axes: shape({
     y: shape({

From 8dbd407107c9c1c4e59068d2b3dc413707199b2a Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 13:08:43 -0700
Subject: [PATCH 24/62] WIP moving query maker to sep component

---
 .../components/CellEditorOverlay.js           |   2 +-
 ui/src/dashboards/components/QueryMaker.js    | 181 ++++++++++++++++++
 2 files changed, 182 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/dashboards/components/QueryMaker.js

diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index d19bbaaef5..41999b23eb 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/ui/src/dashboards/components/CellEditorOverlay.js
@@ -4,7 +4,7 @@ import _ from 'lodash'
 import uuid from 'node-uuid'
 
 import ResizeContainer from 'shared/components/ResizeContainer'
-import QueryMaker from 'src/data_explorer/components/QueryMaker'
+import QueryMaker from 'src/dashboards/components/QueryMaker'
 import Visualization from 'src/dashboards/components/Visualization'
 import OverlayControls from 'src/dashboards/components/OverlayControls'
 import DisplayOptions from 'src/dashboards/components/DisplayOptions'
diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
new file mode 100644
index 0000000000..2ead74a064
--- /dev/null
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -0,0 +1,181 @@
+import React, {PropTypes} from 'react'
+
+import QueryBuilder from 'src/data_explorer/components/QueryBuilder'
+import QueryMakerTab from 'src/data_explorer/components/QueryMakerTab'
+import buildInfluxQLQuery from 'utils/influxql'
+import classnames from 'classnames'
+
+const {arrayOf, bool, func, node, number, shape, string} = PropTypes
+
+const QueryMaker = React.createClass({
+  propTypes: {
+    source: shape({
+      links: shape({
+        queries: string.isRequired,
+      }).isRequired,
+    }).isRequired,
+    queries: arrayOf(shape({})).isRequired,
+    timeRange: shape({
+      upper: string,
+      lower: string,
+    }).isRequired,
+    templates: arrayOf(
+      shape({
+        tempVar: string.isRequired,
+      })
+    ),
+    isInDataExplorer: bool,
+    actions: shape({
+      chooseNamespace: func.isRequired,
+      chooseMeasurement: func.isRequired,
+      chooseTag: func.isRequired,
+      groupByTag: func.isRequired,
+      addQuery: func.isRequired,
+      toggleField: func.isRequired,
+      groupByTime: func.isRequired,
+      toggleTagAcceptance: func.isRequired,
+      applyFuncsToField: func.isRequired,
+      editRawTextAsync: func.isRequired,
+    }).isRequired,
+    height: string,
+    top: string,
+    setActiveQueryIndex: func.isRequired,
+    onDeleteQuery: func.isRequired,
+    activeQueryIndex: number,
+    children: node,
+    layout: string,
+  },
+
+  handleAddQuery() {
+    const newIndex = this.props.queries.length
+    this.props.actions.addQuery()
+    this.props.setActiveQueryIndex(newIndex)
+  },
+
+  handleAddRawQuery() {
+    const newIndex = this.props.queries.length
+    this.props.actions.addQuery({rawText: ''})
+    this.props.setActiveQueryIndex(newIndex)
+  },
+
+  getActiveQuery() {
+    const {queries, activeQueryIndex} = this.props
+    const activeQuery = queries[activeQueryIndex]
+    const defaultQuery = queries[0]
+
+    return activeQuery || defaultQuery
+  },
+
+  render() {
+    const {height, top, layout} = this.props
+    return (
+      <div
+        className={classnames('query-maker', {
+          'query-maker--panel': layout === 'panel',
+        })}
+        style={{height, top}}
+      >
+        {this.renderQueryTabList()}
+        {this.renderQueryBuilder()}
+      </div>
+    )
+  },
+
+  renderQueryBuilder() {
+    const {
+      timeRange,
+      actions,
+      source,
+      templates,
+      layout,
+      isInDataExplorer,
+    } = this.props
+    const query = this.getActiveQuery()
+
+    if (!query) {
+      return (
+        <div className="query-maker--empty">
+          <h5>This Graph has no Queries</h5>
+          <br />
+          <div
+            className="btn btn-primary"
+            role="button"
+            onClick={this.handleAddQuery}
+          >
+            Add a Query
+          </div>
+        </div>
+      )
+    }
+
+    // NOTE
+    // the layout prop is intended to toggle between a horizontal and vertical layout
+    // the layout will be horizontal by default
+    // vertical layout is known as "panel" layout as it will be used to build
+    // a "cell editor panel" though that term might change
+    // Currently, if set to "panel" the only noticeable difference is that the
+    // DatabaseList becomes DatabaseDropdown (more space efficient in vertical layout)
+    // and is outside the container with measurements/tags/fields
+    //
+    // TODO:
+    // - perhaps switch to something like "isVertical" and accept boolean instead of string
+    // - more css/markup work to make the alternate appearance look good
+
+    return (
+      <QueryBuilder
+        source={source}
+        timeRange={timeRange}
+        templates={templates}
+        query={query}
+        actions={actions}
+        onAddQuery={this.handleAddQuery}
+        layout={layout}
+        isInDataExplorer={isInDataExplorer}
+      />
+    )
+  },
+
+  renderQueryTabList() {
+    const {
+      queries,
+      activeQueryIndex,
+      onDeleteQuery,
+      timeRange,
+      setActiveQueryIndex,
+    } = this.props
+
+    return (
+      <div className="query-maker--tabs">
+        {queries.map((q, i) => {
+          return (
+            <QueryMakerTab
+              isActive={i === activeQueryIndex}
+              key={i}
+              queryIndex={i}
+              query={q}
+              onSelect={setActiveQueryIndex}
+              onDelete={onDeleteQuery}
+              queryTabText={
+                q.rawText ||
+                buildInfluxQLQuery(timeRange, q) ||
+                `Query ${i + 1}`
+              }
+            />
+          )
+        })}
+        {this.props.children}
+        <div
+          className="query-maker--new btn btn-sm btn-primary"
+          onClick={this.handleAddQuery}
+        >
+          <span className="icon plus" />
+        </div>
+      </div>
+    )
+  },
+})
+
+QueryMaker.defaultProps = {
+  layout: 'default',
+}
+export default QueryMaker

From 2276e9f7cb609db0aa229d0d2b1810edcb13b6a2 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 14:19:33 -0700
Subject: [PATCH 25/62] Pull out tab list into separate component

---
 ui/src/dashboards/components/QueryMaker.js   | 76 ++++++--------------
 ui/src/dashboards/components/QueryTabList.js | 49 +++++++++++++
 2 files changed, 69 insertions(+), 56 deletions(-)
 create mode 100644 ui/src/dashboards/components/QueryTabList.js

diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index 2ead74a064..5867b88633 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -1,8 +1,7 @@
 import React, {PropTypes} from 'react'
 
 import QueryBuilder from 'src/data_explorer/components/QueryBuilder'
-import QueryMakerTab from 'src/data_explorer/components/QueryMakerTab'
-import buildInfluxQLQuery from 'utils/influxql'
+import QueryTabList from 'src/dashboards/components/QueryTabList'
 import classnames from 'classnames'
 
 const {arrayOf, bool, func, node, number, shape, string} = PropTypes
@@ -67,7 +66,17 @@ const QueryMaker = React.createClass({
   },
 
   render() {
-    const {height, top, layout} = this.props
+    const {
+      height,
+      top,
+      layout,
+      queries,
+      timeRange,
+      onDeleteQuery,
+      activeQueryIndex,
+      setActiveQueryIndex,
+    } = this.props
+
     return (
       <div
         className={classnames('query-maker', {
@@ -75,7 +84,14 @@ const QueryMaker = React.createClass({
         })}
         style={{height, top}}
       >
-        {this.renderQueryTabList()}
+        <QueryTabList
+          queries={queries}
+          timeRange={timeRange}
+          onAddQuery={this.handleAddQuery}
+          onDeleteQuery={onDeleteQuery}
+          activeQueryIndex={activeQueryIndex}
+          setActiveQueryIndex={setActiveQueryIndex}
+        />
         {this.renderQueryBuilder()}
       </div>
     )
@@ -108,19 +124,6 @@ const QueryMaker = React.createClass({
       )
     }
 
-    // NOTE
-    // the layout prop is intended to toggle between a horizontal and vertical layout
-    // the layout will be horizontal by default
-    // vertical layout is known as "panel" layout as it will be used to build
-    // a "cell editor panel" though that term might change
-    // Currently, if set to "panel" the only noticeable difference is that the
-    // DatabaseList becomes DatabaseDropdown (more space efficient in vertical layout)
-    // and is outside the container with measurements/tags/fields
-    //
-    // TODO:
-    // - perhaps switch to something like "isVertical" and accept boolean instead of string
-    // - more css/markup work to make the alternate appearance look good
-
     return (
       <QueryBuilder
         source={source}
@@ -134,45 +137,6 @@ const QueryMaker = React.createClass({
       />
     )
   },
-
-  renderQueryTabList() {
-    const {
-      queries,
-      activeQueryIndex,
-      onDeleteQuery,
-      timeRange,
-      setActiveQueryIndex,
-    } = this.props
-
-    return (
-      <div className="query-maker--tabs">
-        {queries.map((q, i) => {
-          return (
-            <QueryMakerTab
-              isActive={i === activeQueryIndex}
-              key={i}
-              queryIndex={i}
-              query={q}
-              onSelect={setActiveQueryIndex}
-              onDelete={onDeleteQuery}
-              queryTabText={
-                q.rawText ||
-                buildInfluxQLQuery(timeRange, q) ||
-                `Query ${i + 1}`
-              }
-            />
-          )
-        })}
-        {this.props.children}
-        <div
-          className="query-maker--new btn btn-sm btn-primary"
-          onClick={this.handleAddQuery}
-        >
-          <span className="icon plus" />
-        </div>
-      </div>
-    )
-  },
 })
 
 QueryMaker.defaultProps = {
diff --git a/ui/src/dashboards/components/QueryTabList.js b/ui/src/dashboards/components/QueryTabList.js
new file mode 100644
index 0000000000..49d7225764
--- /dev/null
+++ b/ui/src/dashboards/components/QueryTabList.js
@@ -0,0 +1,49 @@
+import React, {PropTypes} from 'react'
+import QueryMakerTab from 'src/data_explorer/components/QueryMakerTab'
+import buildInfluxQLQuery from 'utils/influxql'
+
+const QueryTabList = ({
+  queries,
+  timeRange,
+  onAddQuery,
+  onDeleteQuery,
+  activeQueryIndex,
+  setActiveQueryIndex,
+}) =>
+  <div className="query-maker--tabs">
+    {queries.map((q, i) =>
+      <QueryMakerTab
+        isActive={i === activeQueryIndex}
+        key={i}
+        queryIndex={i}
+        query={q}
+        onSelect={setActiveQueryIndex}
+        onDelete={onDeleteQuery}
+        queryTabText={
+          q.rawText || buildInfluxQLQuery(timeRange, q) || `Query ${i + 1}`
+        }
+      />
+    )}
+    <div
+      className="query-maker--new btn btn-sm btn-primary"
+      onClick={onAddQuery}
+    >
+      <span className="icon plus" />
+    </div>
+  </div>
+
+const {arrayOf, func, number, shape, string} = PropTypes
+
+QueryTabList.propTypes = {
+  queries: arrayOf(shape({})).isRequired,
+  timeRange: shape({
+    upper: string,
+    lower: string,
+  }).isRequired,
+  onAddQuery: func.isRequired,
+  onDeleteQuery: func.isRequired,
+  activeQueryIndex: number.isRequired,
+  setActiveQueryIndex: func.isRequired,
+}
+
+export default QueryTabList

From 160fa8663e4e6f68779187ef2db71fe65f53033d Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 14:26:43 -0700
Subject: [PATCH 26/62] Remove unused packages and props

---
 ui/src/dashboards/components/QueryMaker.js | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index 5867b88633..b77b762454 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -2,7 +2,6 @@ import React, {PropTypes} from 'react'
 
 import QueryBuilder from 'src/data_explorer/components/QueryBuilder'
 import QueryTabList from 'src/dashboards/components/QueryTabList'
-import classnames from 'classnames'
 
 const {arrayOf, bool, func, node, number, shape, string} = PropTypes
 
@@ -36,8 +35,6 @@ const QueryMaker = React.createClass({
       applyFuncsToField: func.isRequired,
       editRawTextAsync: func.isRequired,
     }).isRequired,
-    height: string,
-    top: string,
     setActiveQueryIndex: func.isRequired,
     onDeleteQuery: func.isRequired,
     activeQueryIndex: number,
@@ -67,9 +64,6 @@ const QueryMaker = React.createClass({
 
   render() {
     const {
-      height,
-      top,
-      layout,
       queries,
       timeRange,
       onDeleteQuery,
@@ -78,12 +72,7 @@ const QueryMaker = React.createClass({
     } = this.props
 
     return (
-      <div
-        className={classnames('query-maker', {
-          'query-maker--panel': layout === 'panel',
-        })}
-        style={{height, top}}
-      >
+      <div className="query-maker query-maker--panel">
         <QueryTabList
           queries={queries}
           timeRange={timeRange}
@@ -103,8 +92,8 @@ const QueryMaker = React.createClass({
       actions,
       source,
       templates,
-      layout,
       isInDataExplorer,
+      layout,
     } = this.props
     const query = this.getActiveQuery()
 
@@ -142,4 +131,5 @@ const QueryMaker = React.createClass({
 QueryMaker.defaultProps = {
   layout: 'default',
 }
+
 export default QueryMaker

From c001bcda6b6c567d3e5a36120eeed5c449d26c08 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 14:35:29 -0700
Subject: [PATCH 27/62] Move empty state to separate component

---
 ui/src/dashboards/components/EmptyQuery.js | 18 +++++++
 ui/src/dashboards/components/QueryMaker.js | 60 +++++++---------------
 2 files changed, 36 insertions(+), 42 deletions(-)
 create mode 100644 ui/src/dashboards/components/EmptyQuery.js

diff --git a/ui/src/dashboards/components/EmptyQuery.js b/ui/src/dashboards/components/EmptyQuery.js
new file mode 100644
index 0000000000..e37b9cf72b
--- /dev/null
+++ b/ui/src/dashboards/components/EmptyQuery.js
@@ -0,0 +1,18 @@
+import React, {PropTypes} from 'react'
+
+const EmptyQueryState = ({onAddQuery}) =>
+  <div className="query-maker--empty">
+    <h5>This Graph has no Queries</h5>
+    <br />
+    <div className="btn btn-primary" onClick={onAddQuery}>
+      Add a Query
+    </div>
+  </div>
+
+const {func} = PropTypes
+
+EmptyQueryState.propTypes = {
+  onAddQuery: func.isRequired,
+}
+
+export default EmptyQueryState
diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index b77b762454..efca3807dc 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react'
 
 import QueryBuilder from 'src/data_explorer/components/QueryBuilder'
 import QueryTabList from 'src/dashboards/components/QueryTabList'
+import EmptyQuery from 'src/dashboards/components/EmptyQuery'
 
 const {arrayOf, bool, func, node, number, shape, string} = PropTypes
 
@@ -64,13 +65,19 @@ const QueryMaker = React.createClass({
 
   render() {
     const {
+      layout,
+      source,
+      actions,
       queries,
       timeRange,
+      templates,
       onDeleteQuery,
       activeQueryIndex,
       setActiveQueryIndex,
     } = this.props
 
+    const query = this.getActiveQuery()
+
     return (
       <div className="query-maker query-maker--panel">
         <QueryTabList
@@ -81,51 +88,20 @@ const QueryMaker = React.createClass({
           activeQueryIndex={activeQueryIndex}
           setActiveQueryIndex={setActiveQueryIndex}
         />
-        {this.renderQueryBuilder()}
+        {query
+          ? <QueryBuilder
+              query={query}
+              layout={layout}
+              source={source}
+              actions={actions}
+              timeRange={timeRange}
+              templates={templates}
+              onAddQuery={this.handleAddQuery}
+            />
+          : <EmptyQuery onAddQuery={this.handleAddQuery} />}
       </div>
     )
   },
-
-  renderQueryBuilder() {
-    const {
-      timeRange,
-      actions,
-      source,
-      templates,
-      isInDataExplorer,
-      layout,
-    } = this.props
-    const query = this.getActiveQuery()
-
-    if (!query) {
-      return (
-        <div className="query-maker--empty">
-          <h5>This Graph has no Queries</h5>
-          <br />
-          <div
-            className="btn btn-primary"
-            role="button"
-            onClick={this.handleAddQuery}
-          >
-            Add a Query
-          </div>
-        </div>
-      )
-    }
-
-    return (
-      <QueryBuilder
-        source={source}
-        timeRange={timeRange}
-        templates={templates}
-        query={query}
-        actions={actions}
-        onAddQuery={this.handleAddQuery}
-        layout={layout}
-        isInDataExplorer={isInDataExplorer}
-      />
-    )
-  },
 })
 
 QueryMaker.defaultProps = {

From dbf7702fb91a1ab97302bb49fdf76c79f234912d Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 14:42:52 -0700
Subject: [PATCH 28/62] Make QueryMaker an SFC

---
 ui/src/dashboards/components/QueryMaker.js | 171 ++++++++++-----------
 1 file changed, 80 insertions(+), 91 deletions(-)

diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index efca3807dc..d7660905e7 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -4,105 +4,94 @@ import QueryBuilder from 'src/data_explorer/components/QueryBuilder'
 import QueryTabList from 'src/dashboards/components/QueryTabList'
 import EmptyQuery from 'src/dashboards/components/EmptyQuery'
 
-const {arrayOf, bool, func, node, number, shape, string} = PropTypes
+const QueryMaker = ({
+  layout,
+  source,
+  actions,
+  queries,
+  timeRange,
+  templates,
+  onDeleteQuery,
+  activeQueryIndex,
+  setActiveQueryIndex,
+}) => {
+  const handleAddQuery = () => {
+    const newIndex = queries.length
+    actions.addQuery()
+    setActiveQueryIndex(newIndex)
+  }
 
-const QueryMaker = React.createClass({
-  propTypes: {
-    source: shape({
-      links: shape({
-        queries: string.isRequired,
-      }).isRequired,
-    }).isRequired,
-    queries: arrayOf(shape({})).isRequired,
-    timeRange: shape({
-      upper: string,
-      lower: string,
-    }).isRequired,
-    templates: arrayOf(
-      shape({
-        tempVar: string.isRequired,
-      })
-    ),
-    isInDataExplorer: bool,
-    actions: shape({
-      chooseNamespace: func.isRequired,
-      chooseMeasurement: func.isRequired,
-      chooseTag: func.isRequired,
-      groupByTag: func.isRequired,
-      addQuery: func.isRequired,
-      toggleField: func.isRequired,
-      groupByTime: func.isRequired,
-      toggleTagAcceptance: func.isRequired,
-      applyFuncsToField: func.isRequired,
-      editRawTextAsync: func.isRequired,
-    }).isRequired,
-    setActiveQueryIndex: func.isRequired,
-    onDeleteQuery: func.isRequired,
-    activeQueryIndex: number,
-    children: node,
-    layout: string,
-  },
-
-  handleAddQuery() {
-    const newIndex = this.props.queries.length
-    this.props.actions.addQuery()
-    this.props.setActiveQueryIndex(newIndex)
-  },
-
-  handleAddRawQuery() {
-    const newIndex = this.props.queries.length
-    this.props.actions.addQuery({rawText: ''})
-    this.props.setActiveQueryIndex(newIndex)
-  },
-
-  getActiveQuery() {
-    const {queries, activeQueryIndex} = this.props
+  const getActiveQuery = () => {
     const activeQuery = queries[activeQueryIndex]
     const defaultQuery = queries[0]
 
     return activeQuery || defaultQuery
-  },
+  }
 
-  render() {
-    const {
-      layout,
-      source,
-      actions,
-      queries,
-      timeRange,
-      templates,
-      onDeleteQuery,
-      activeQueryIndex,
-      setActiveQueryIndex,
-    } = this.props
+  const query = getActiveQuery()
 
-    const query = this.getActiveQuery()
+  return (
+    <div className="query-maker query-maker--panel">
+      <QueryTabList
+        queries={queries}
+        timeRange={timeRange}
+        onAddQuery={handleAddQuery}
+        onDeleteQuery={onDeleteQuery}
+        activeQueryIndex={activeQueryIndex}
+        setActiveQueryIndex={setActiveQueryIndex}
+      />
+      {query
+        ? <QueryBuilder
+            query={query}
+            layout={layout}
+            source={source}
+            actions={actions}
+            timeRange={timeRange}
+            templates={templates}
+            onAddQuery={handleAddQuery}
+          />
+        : <EmptyQuery onAddQuery={handleAddQuery} />}
+    </div>
+  )
+}
 
-    return (
-      <div className="query-maker query-maker--panel">
-        <QueryTabList
-          queries={queries}
-          timeRange={timeRange}
-          onAddQuery={this.handleAddQuery}
-          onDeleteQuery={onDeleteQuery}
-          activeQueryIndex={activeQueryIndex}
-          setActiveQueryIndex={setActiveQueryIndex}
-        />
-        {query
-          ? <QueryBuilder
-              query={query}
-              layout={layout}
-              source={source}
-              actions={actions}
-              timeRange={timeRange}
-              templates={templates}
-              onAddQuery={this.handleAddQuery}
-            />
-          : <EmptyQuery onAddQuery={this.handleAddQuery} />}
-      </div>
-    )
-  },
-})
+const {arrayOf, bool, func, node, number, shape, string} = PropTypes
+
+QueryMaker.propTypes = {
+  source: shape({
+    links: shape({
+      queries: string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  queries: arrayOf(shape({})).isRequired,
+  timeRange: shape({
+    upper: string,
+    lower: string,
+  }).isRequired,
+  templates: arrayOf(
+    shape({
+      tempVar: string.isRequired,
+    })
+  ),
+  isInDataExplorer: bool,
+  actions: shape({
+    chooseNamespace: func.isRequired,
+    chooseMeasurement: func.isRequired,
+    chooseTag: func.isRequired,
+    groupByTag: func.isRequired,
+    addQuery: func.isRequired,
+    toggleField: func.isRequired,
+    groupByTime: func.isRequired,
+    toggleTagAcceptance: func.isRequired,
+    applyFuncsToField: func.isRequired,
+    editRawTextAsync: func.isRequired,
+  }).isRequired,
+  setActiveQueryIndex: func.isRequired,
+  onDeleteQuery: func.isRequired,
+  activeQueryIndex: number,
+  children: node,
+  layout: string,
+}
 
 QueryMaker.defaultProps = {
   layout: 'default',

From fac077914b1cfe67a023d56f6cf83abad9c0fd12 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 15:38:44 -0700
Subject: [PATCH 29/62] Move addQuery logic to container

---
 ui/src/dashboards/components/CellEditorOverlay.js | 13 ++++++++-----
 ui/src/dashboards/components/QueryMaker.js        | 13 ++++---------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index 41999b23eb..2104da4db6 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/ui/src/dashboards/components/CellEditorOverlay.js
@@ -111,10 +111,14 @@ class CellEditorOverlay extends Component {
     e.preventDefault()
   }
 
-  handleAddQuery(options) {
-    const newQuery = Object.assign({}, defaultQueryConfig(uuid.v4()), options)
-    const nextQueries = this.state.queriesWorkingDraft.concat(newQuery)
+  handleAddQuery() {
+    const {queriesWorkingDraft} = this.state
+    const newIndex = queriesWorkingDraft.length
+    const newQuery = {...defaultQueryConfig(uuid.v4())}
+    const nextQueries = queriesWorkingDraft.concat(newQuery)
+
     this.setState({queriesWorkingDraft: nextQueries})
+    this.handleSetActiveQueryIndex(newIndex)
   }
 
   handleDeleteQuery(index) {
@@ -203,7 +207,6 @@ class CellEditorOverlay extends Component {
     } = this.state
 
     const queryActions = {
-      addQuery: this.handleAddQuery,
       editRawTextAsync: this.handleEditRawText,
       ..._.mapValues(queryModifiers, qm => this.queryStateReducer(qm)),
     }
@@ -254,8 +257,8 @@ class CellEditorOverlay extends Component {
                   actions={queryActions}
                   autoRefresh={autoRefresh}
                   timeRange={timeRange}
-                  setActiveQueryIndex={this.handleSetActiveQueryIndex}
                   onDeleteQuery={this.handleDeleteQuery}
+                  onAddQuery={this.handleAddQuery}
                   activeQueryIndex={activeQueryIndex}
                 />}
           </div>
diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index d7660905e7..167fb5fe50 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -11,16 +11,11 @@ const QueryMaker = ({
   queries,
   timeRange,
   templates,
+  onAddQuery,
   onDeleteQuery,
   activeQueryIndex,
   setActiveQueryIndex,
 }) => {
-  const handleAddQuery = () => {
-    const newIndex = queries.length
-    actions.addQuery()
-    setActiveQueryIndex(newIndex)
-  }
-
   const getActiveQuery = () => {
     const activeQuery = queries[activeQueryIndex]
     const defaultQuery = queries[0]
@@ -35,7 +30,7 @@ const QueryMaker = ({
       <QueryTabList
         queries={queries}
         timeRange={timeRange}
-        onAddQuery={handleAddQuery}
+        onAddQuery={onAddQuery}
         onDeleteQuery={onDeleteQuery}
         activeQueryIndex={activeQueryIndex}
         setActiveQueryIndex={setActiveQueryIndex}
@@ -48,9 +43,9 @@ const QueryMaker = ({
             actions={actions}
             timeRange={timeRange}
             templates={templates}
-            onAddQuery={handleAddQuery}
+            onAddQuery={onAddQuery}
           />
-        : <EmptyQuery onAddQuery={handleAddQuery} />}
+        : <EmptyQuery onAddQuery={onAddQuery} />}
     </div>
   )
 }

From 3a153ea1d6d572dbc1728616ccd163290af5d760 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 15:48:07 -0700
Subject: [PATCH 30/62] Move active query logic to container

---
 .../components/CellEditorOverlay.js           | 10 +++++++
 ui/src/dashboards/components/QueryMaker.js    | 28 +++++--------------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index 2104da4db6..f15e95c91d 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/ui/src/dashboards/components/CellEditorOverlay.js
@@ -34,6 +34,7 @@ class CellEditorOverlay extends Component {
     this.handleEditRawText = ::this.handleEditRawText
     this.handleSetYAxisBounds = ::this.handleSetYAxisBounds
     this.handleSetLabel = ::this.handleSetLabel
+    this.getActiveQuery = ::this.getActiveQuery
 
     const {cell: {name, type, queries, axes}} = props
 
@@ -171,6 +172,14 @@ class CellEditorOverlay extends Component {
     this.setState({activeQueryIndex})
   }
 
+  getActiveQuery() {
+    const {queriesWorkingDraft, activeQueryIndex} = this.state
+    const activeQuery = queriesWorkingDraft[activeQueryIndex]
+    const defaultQuery = queriesWorkingDraft[0]
+
+    return activeQuery || defaultQuery
+  }
+
   async handleEditRawText(url, id, text) {
     const templates = removeUnselectedTemplateValues(this.props.templates)
 
@@ -260,6 +269,7 @@ class CellEditorOverlay extends Component {
                   onDeleteQuery={this.handleDeleteQuery}
                   onAddQuery={this.handleAddQuery}
                   activeQueryIndex={activeQueryIndex}
+                  activeQuery={this.getActiveQuery()}
                 />}
           </div>
         </ResizeContainer>
diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index 167fb5fe50..a4b89b7e11 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -5,26 +5,17 @@ import QueryTabList from 'src/dashboards/components/QueryTabList'
 import EmptyQuery from 'src/dashboards/components/EmptyQuery'
 
 const QueryMaker = ({
-  layout,
   source,
   actions,
   queries,
   timeRange,
   templates,
   onAddQuery,
+  activeQuery,
   onDeleteQuery,
   activeQueryIndex,
   setActiveQueryIndex,
 }) => {
-  const getActiveQuery = () => {
-    const activeQuery = queries[activeQueryIndex]
-    const defaultQuery = queries[0]
-
-    return activeQuery || defaultQuery
-  }
-
-  const query = getActiveQuery()
-
   return (
     <div className="query-maker query-maker--panel">
       <QueryTabList
@@ -35,10 +26,10 @@ const QueryMaker = ({
         activeQueryIndex={activeQueryIndex}
         setActiveQueryIndex={setActiveQueryIndex}
       />
-      {query
+      {activeQuery
         ? <QueryBuilder
-            query={query}
-            layout={layout}
+            query={activeQuery}
+            layout={'default'}
             source={source}
             actions={actions}
             timeRange={timeRange}
@@ -50,7 +41,7 @@ const QueryMaker = ({
   )
 }
 
-const {arrayOf, bool, func, node, number, shape, string} = PropTypes
+const {arrayOf, bool, func, number, shape, string} = PropTypes
 
 QueryMaker.propTypes = {
   source: shape({
@@ -74,7 +65,6 @@ QueryMaker.propTypes = {
     chooseMeasurement: func.isRequired,
     chooseTag: func.isRequired,
     groupByTag: func.isRequired,
-    addQuery: func.isRequired,
     toggleField: func.isRequired,
     groupByTime: func.isRequired,
     toggleTagAcceptance: func.isRequired,
@@ -84,12 +74,8 @@ QueryMaker.propTypes = {
   setActiveQueryIndex: func.isRequired,
   onDeleteQuery: func.isRequired,
   activeQueryIndex: number,
-  children: node,
-  layout: string,
-}
-
-QueryMaker.defaultProps = {
-  layout: 'default',
+  activeQuery: shape({}),
+  onAddQuery: func.isRequired,
 }
 
 export default QueryMaker

From 2f1162ce3c0960b10fd11819137222daeafa3c1b Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 16:45:46 -0700
Subject: [PATCH 31/62] Make the QueryBuilder an SFC and rename it to
 SchemaExplorer

---
 ui/src/dashboards/components/QueryMaker.js    |  8 +-
 .../dashboards/components/SchemaExplorer.js   | 94 +++++++++++++++++++
 2 files changed, 97 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/dashboards/components/SchemaExplorer.js

diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index a4b89b7e11..8e7dda73c2 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -1,8 +1,8 @@
 import React, {PropTypes} from 'react'
 
-import QueryBuilder from 'src/data_explorer/components/QueryBuilder'
-import QueryTabList from 'src/dashboards/components/QueryTabList'
 import EmptyQuery from 'src/dashboards/components/EmptyQuery'
+import QueryTabList from 'src/dashboards/components/QueryTabList'
+import SchemaExplorer from 'src/dashboards/components/SchemaExplorer'
 
 const QueryMaker = ({
   source,
@@ -27,12 +27,10 @@ const QueryMaker = ({
         setActiveQueryIndex={setActiveQueryIndex}
       />
       {activeQuery
-        ? <QueryBuilder
+        ? <SchemaExplorer
             query={activeQuery}
-            layout={'default'}
             source={source}
             actions={actions}
-            timeRange={timeRange}
             templates={templates}
             onAddQuery={onAddQuery}
           />
diff --git a/ui/src/dashboards/components/SchemaExplorer.js b/ui/src/dashboards/components/SchemaExplorer.js
new file mode 100644
index 0000000000..6ed4820757
--- /dev/null
+++ b/ui/src/dashboards/components/SchemaExplorer.js
@@ -0,0 +1,94 @@
+import React, {PropTypes} from 'react'
+
+import DatabaseList from 'src/data_explorer/components/DatabaseList'
+import MeasurementList from 'src/data_explorer/components/MeasurementList'
+import FieldList from 'src/data_explorer/components/FieldList'
+import QueryEditor from 'src/data_explorer/components/QueryEditor'
+import buildInfluxQLQuery from 'utils/influxql'
+
+const TEMPLATE_RANGE = {upper: null, lower: ':dashboardTime:'}
+
+const actionBinder = (id, action) => item => action(id, item)
+
+const rawTextBinder = (links, id, action) => text =>
+  action(links.queries, id, text)
+
+const SchemaExplorer = ({
+  source: {links},
+  query,
+  query: {id, range},
+  templates,
+  actions: {
+    chooseTag,
+    groupByTag,
+    groupByTime,
+    chooseNamespace,
+    editRawTextAsync,
+    chooseMeasurement,
+    applyFuncsToField,
+    toggleTagAcceptance,
+    toggleFieldWithGroupByInterval,
+  },
+}) =>
+  <div className="query-maker--tab-contents">
+    <QueryEditor
+      query={
+        query.rawText ||
+        buildInfluxQLQuery(range || TEMPLATE_RANGE, query) ||
+        ''
+      }
+      config={query}
+      onUpdate={rawTextBinder(links, id, editRawTextAsync)}
+      templates={templates}
+    />
+    <div className="query-builder">
+      <DatabaseList
+        query={query}
+        onChooseNamespace={actionBinder(id, chooseNamespace)}
+      />
+      <MeasurementList
+        query={query}
+        onChooseTag={actionBinder(id, chooseTag)}
+        onGroupByTag={actionBinder(id, groupByTag)}
+        onChooseMeasurement={actionBinder(id, chooseMeasurement)}
+        onToggleTagAcceptance={actionBinder(id, toggleTagAcceptance)}
+      />
+      <FieldList
+        query={query}
+        onToggleField={actionBinder(id, toggleFieldWithGroupByInterval)}
+        onGroupByTime={actionBinder(id, groupByTime)}
+        applyFuncsToField={actionBinder(id, applyFuncsToField)}
+      />
+    </div>
+  </div>
+
+const {arrayOf, func, shape, string} = PropTypes
+
+SchemaExplorer.propTypes = {
+  source: shape({
+    links: shape({
+      queries: string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  query: shape({
+    id: string,
+  }).isRequired,
+  templates: arrayOf(
+    shape({
+      tempVar: string.isRequired,
+    })
+  ),
+  actions: shape({
+    chooseNamespace: func.isRequired,
+    chooseMeasurement: func.isRequired,
+    applyFuncsToField: func.isRequired,
+    chooseTag: func.isRequired,
+    groupByTag: func.isRequired,
+    toggleField: func.isRequired,
+    groupByTime: func.isRequired,
+    toggleTagAcceptance: func.isRequired,
+    editRawTextAsync: func.isRequired,
+  }).isRequired,
+}
+
+export default SchemaExplorer

From b9ee0dece60db9f3e372eac6a43f1f2973b43c62 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 17:10:38 -0700
Subject: [PATCH 32/62] Separate QueryEditor from SchemaExplorer

---
 ui/src/dashboards/components/QueryMaker.js    | 33 ++++++---
 .../dashboards/components/SchemaExplorer.js   | 70 +++++--------------
 2 files changed, 44 insertions(+), 59 deletions(-)

diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index 8e7dda73c2..cfe04ecad3 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -2,16 +2,26 @@ import React, {PropTypes} from 'react'
 
 import EmptyQuery from 'src/dashboards/components/EmptyQuery'
 import QueryTabList from 'src/dashboards/components/QueryTabList'
+import QueryEditor from 'src/data_explorer/components/QueryEditor'
 import SchemaExplorer from 'src/dashboards/components/SchemaExplorer'
+import buildInfluxQLQuery from 'utils/influxql'
+
+const TEMPLATE_RANGE = {upper: null, lower: ':dashboardTime:'}
+const rawTextBinder = (links, id, action) => text =>
+  action(links.queries, id, text)
+
+const buildText = (rawText, range, q) =>
+  rawText || buildInfluxQLQuery(range || TEMPLATE_RANGE, q) || ''
 
 const QueryMaker = ({
-  source,
+  source: {links},
   actions,
   queries,
   timeRange,
   templates,
   onAddQuery,
   activeQuery,
+  activeQuery: {id, range, rawText},
   onDeleteQuery,
   activeQueryIndex,
   setActiveQueryIndex,
@@ -27,13 +37,20 @@ const QueryMaker = ({
         setActiveQueryIndex={setActiveQueryIndex}
       />
       {activeQuery
-        ? <SchemaExplorer
-            query={activeQuery}
-            source={source}
-            actions={actions}
-            templates={templates}
-            onAddQuery={onAddQuery}
-          />
+        ? <div className="query-maker--tab-contents">
+            <QueryEditor
+              query={buildText(rawText, range, activeQuery)}
+              config={activeQuery}
+              onUpdate={rawTextBinder(links, id, actions.editRawTextAsync)}
+              templates={templates}
+            />
+            <SchemaExplorer
+              query={activeQuery}
+              actions={actions}
+              templates={templates}
+              onAddQuery={onAddQuery}
+            />
+          </div>
         : <EmptyQuery onAddQuery={onAddQuery} />}
     </div>
   )
diff --git a/ui/src/dashboards/components/SchemaExplorer.js b/ui/src/dashboards/components/SchemaExplorer.js
index 6ed4820757..1b9b6087af 100644
--- a/ui/src/dashboards/components/SchemaExplorer.js
+++ b/ui/src/dashboards/components/SchemaExplorer.js
@@ -3,81 +3,49 @@ import React, {PropTypes} from 'react'
 import DatabaseList from 'src/data_explorer/components/DatabaseList'
 import MeasurementList from 'src/data_explorer/components/MeasurementList'
 import FieldList from 'src/data_explorer/components/FieldList'
-import QueryEditor from 'src/data_explorer/components/QueryEditor'
-import buildInfluxQLQuery from 'utils/influxql'
-
-const TEMPLATE_RANGE = {upper: null, lower: ':dashboardTime:'}
 
 const actionBinder = (id, action) => item => action(id, item)
 
-const rawTextBinder = (links, id, action) => text =>
-  action(links.queries, id, text)
-
 const SchemaExplorer = ({
-  source: {links},
   query,
-  query: {id, range},
-  templates,
+  query: {id},
   actions: {
     chooseTag,
     groupByTag,
     groupByTime,
     chooseNamespace,
-    editRawTextAsync,
     chooseMeasurement,
     applyFuncsToField,
     toggleTagAcceptance,
     toggleFieldWithGroupByInterval,
   },
 }) =>
-  <div className="query-maker--tab-contents">
-    <QueryEditor
-      query={
-        query.rawText ||
-        buildInfluxQLQuery(range || TEMPLATE_RANGE, query) ||
-        ''
-      }
-      config={query}
-      onUpdate={rawTextBinder(links, id, editRawTextAsync)}
-      templates={templates}
+  <div className="query-builder">
+    <DatabaseList
+      query={query}
+      onChooseNamespace={actionBinder(id, chooseNamespace)}
+    />
+    <MeasurementList
+      query={query}
+      onChooseTag={actionBinder(id, chooseTag)}
+      onGroupByTag={actionBinder(id, groupByTag)}
+      onChooseMeasurement={actionBinder(id, chooseMeasurement)}
+      onToggleTagAcceptance={actionBinder(id, toggleTagAcceptance)}
+    />
+    <FieldList
+      query={query}
+      onToggleField={actionBinder(id, toggleFieldWithGroupByInterval)}
+      onGroupByTime={actionBinder(id, groupByTime)}
+      applyFuncsToField={actionBinder(id, applyFuncsToField)}
     />
-    <div className="query-builder">
-      <DatabaseList
-        query={query}
-        onChooseNamespace={actionBinder(id, chooseNamespace)}
-      />
-      <MeasurementList
-        query={query}
-        onChooseTag={actionBinder(id, chooseTag)}
-        onGroupByTag={actionBinder(id, groupByTag)}
-        onChooseMeasurement={actionBinder(id, chooseMeasurement)}
-        onToggleTagAcceptance={actionBinder(id, toggleTagAcceptance)}
-      />
-      <FieldList
-        query={query}
-        onToggleField={actionBinder(id, toggleFieldWithGroupByInterval)}
-        onGroupByTime={actionBinder(id, groupByTime)}
-        applyFuncsToField={actionBinder(id, applyFuncsToField)}
-      />
-    </div>
   </div>
 
-const {arrayOf, func, shape, string} = PropTypes
+const {func, shape, string} = PropTypes
 
 SchemaExplorer.propTypes = {
-  source: shape({
-    links: shape({
-      queries: string.isRequired,
-    }).isRequired,
-  }).isRequired,
   query: shape({
     id: string,
   }).isRequired,
-  templates: arrayOf(
-    shape({
-      tempVar: string.isRequired,
-    })
-  ),
   actions: shape({
     chooseNamespace: func.isRequired,
     chooseMeasurement: func.isRequired,

From 8eca27a20ffa8b13775596379f285eac4216df7c Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 17:19:48 -0700
Subject: [PATCH 33/62] Rename QueryEditor to QueryTextArea

---
 ui/src/dashboards/components/QueryMaker.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index cfe04ecad3..7de7511e6a 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -2,14 +2,13 @@ import React, {PropTypes} from 'react'
 
 import EmptyQuery from 'src/dashboards/components/EmptyQuery'
 import QueryTabList from 'src/dashboards/components/QueryTabList'
-import QueryEditor from 'src/data_explorer/components/QueryEditor'
+import QueryTextArea from 'src/dashboards/components/QueryTextArea'
 import SchemaExplorer from 'src/dashboards/components/SchemaExplorer'
 import buildInfluxQLQuery from 'utils/influxql'
 
 const TEMPLATE_RANGE = {upper: null, lower: ':dashboardTime:'}
 const rawTextBinder = (links, id, action) => text =>
   action(links.queries, id, text)
-
 const buildText = (rawText, range, q) =>
   rawText || buildInfluxQLQuery(range || TEMPLATE_RANGE, q) || ''
 
@@ -38,7 +37,7 @@ const QueryMaker = ({
       />
       {activeQuery
         ? <div className="query-maker--tab-contents">
-            <QueryEditor
+            <QueryTextArea
               query={buildText(rawText, range, activeQuery)}
               config={activeQuery}
               onUpdate={rawTextBinder(links, id, actions.editRawTextAsync)}

From 6f0c77a51cd204939ae5444951e27365e6df24b4 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 17:26:38 -0700
Subject: [PATCH 34/62] Make QueryTextArea and QueryStatus components

---
 ui/src/dashboards/components/QueryStatus.js   |  50 ++++
 ui/src/dashboards/components/QueryTextArea.js | 263 ++++++++++++++++++
 2 files changed, 313 insertions(+)
 create mode 100644 ui/src/dashboards/components/QueryStatus.js
 create mode 100644 ui/src/dashboards/components/QueryTextArea.js

diff --git a/ui/src/dashboards/components/QueryStatus.js b/ui/src/dashboards/components/QueryStatus.js
new file mode 100644
index 0000000000..95b8c2052e
--- /dev/null
+++ b/ui/src/dashboards/components/QueryStatus.js
@@ -0,0 +1,50 @@
+import React, {PropTypes} from 'react'
+import LoadingDots from 'shared/components/LoadingDots'
+import classnames from 'classnames'
+
+const QueryStatus = ({status}) => {
+  if (!status) {
+    return <div className="query-editor--status" />
+  }
+
+  if (status.loading) {
+    return (
+      <div className="query-editor--status">
+        <LoadingDots />
+      </div>
+    )
+  }
+
+  return (
+    <div className="query-editor--status">
+      <span
+        className={classnames('query-status-output', {
+          'query-status-output--error': status.error,
+          'query-status-output--success': status.success,
+          'query-status-output--warning': status.warn,
+        })}
+      >
+        <span
+          className={classnames('icon', {
+            stop: status.error,
+            checkmark: status.success,
+            'alert-triangle': status.warn,
+          })}
+        />
+        {status.error || status.warn || status.success}
+      </span>
+    </div>
+  )
+}
+
+const {shape, string} = PropTypes
+
+QueryStatus.propTypes = {
+  status: shape({
+    error: string,
+    success: string,
+    warn: string,
+  }),
+}
+
+export default QueryStatus
diff --git a/ui/src/dashboards/components/QueryTextArea.js b/ui/src/dashboards/components/QueryTextArea.js
new file mode 100644
index 0000000000..fc07ebef7d
--- /dev/null
+++ b/ui/src/dashboards/components/QueryTextArea.js
@@ -0,0 +1,263 @@
+import React, {PropTypes, Component} from 'react'
+import _ from 'lodash'
+import classnames from 'classnames'
+
+import TemplateDrawer from 'shared/components/TemplateDrawer'
+import QueryStatus from 'src/dashboards/components/QueryStatus'
+
+import {
+  MATCH_INCOMPLETE_TEMPLATES,
+  applyMasks,
+  insertTempVar,
+  unMask,
+} from 'src/dashboards/constants'
+
+class QueryEditor extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: this.props.query,
+      isTemplating: false,
+      selectedTemplate: {
+        tempVar: _.get(this.props.templates, ['0', 'tempVar'], ''),
+      },
+      filteredTemplates: this.props.templates,
+    }
+
+    this.handleKeyDown = ::this.handleKeyDown
+    this.handleChange = ::this.handleChange
+    this.handleUpdate = ::this.handleUpdate
+    this.handleChooseTemplate = ::this.handleChooseTemplate
+    this.handleCloseDrawer = ::this.handleCloseDrawer
+    this.findTempVar = ::this.findTempVar
+    this.handleTemplateReplace = ::this.handleTemplateReplace
+    this.handleMouseOverTempVar = ::this.handleMouseOverTempVar
+    this.handleClickTempVar = ::this.handleClickTempVar
+    this.closeDrawer = ::this.closeDrawer
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.query !== nextProps.query) {
+      this.setState({value: nextProps.query})
+    }
+  }
+
+  handleCloseDrawer() {
+    this.setState({isTemplating: false})
+  }
+
+  handleMouseOverTempVar(template) {
+    this.handleTemplateReplace(template)
+  }
+
+  handleClickTempVar(template) {
+    // Clicking a tempVar does the same thing as hitting 'Enter'
+    this.handleTemplateReplace(template, true)
+    this.closeDrawer()
+  }
+
+  closeDrawer() {
+    this.setState({
+      isTemplating: false,
+      selectedTemplate: {
+        tempVar: _.get(this.props.templates, ['0', 'tempVar'], ''),
+      },
+    })
+  }
+
+  handleKeyDown(e) {
+    const {isTemplating, value} = this.state
+
+    if (isTemplating) {
+      switch (e.key) {
+        case 'Tab':
+        case 'ArrowRight':
+        case 'ArrowDown':
+          e.preventDefault()
+          return this.handleTemplateReplace(this.findTempVar('next'))
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          e.preventDefault()
+          return this.handleTemplateReplace(this.findTempVar('previous'))
+        case 'Enter':
+          e.preventDefault()
+          this.handleTemplateReplace(this.state.selectedTemplate, true)
+          return this.closeDrawer()
+        case 'Escape':
+          e.preventDefault()
+          return this.closeDrawer()
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      this.setState({value, isTemplating: false})
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      this.handleUpdate()
+    }
+  }
+
+  handleTemplateReplace(selectedTemplate, replaceWholeTemplate) {
+    const {selectionStart, value} = this.editor
+    const {tempVar} = selectedTemplate
+    const newTempVar = replaceWholeTemplate
+      ? tempVar
+      : tempVar.substring(0, tempVar.length - 1)
+
+    // mask matches that will confuse our regex
+    const masked = applyMasks(value)
+    const matched = masked.match(MATCH_INCOMPLETE_TEMPLATES)
+
+    let templatedValue
+    if (matched) {
+      templatedValue = insertTempVar(masked, newTempVar)
+      templatedValue = unMask(templatedValue)
+    }
+
+    const enterModifier = replaceWholeTemplate ? 0 : -1
+    const diffInLength =
+      tempVar.length - _.get(matched, '0', []).length + enterModifier
+
+    this.setState({value: templatedValue, selectedTemplate}, () =>
+      this.editor.setSelectionRange(
+        selectionStart + diffInLength,
+        selectionStart + diffInLength
+      )
+    )
+  }
+
+  findTempVar(direction) {
+    const {filteredTemplates: templates} = this.state
+    const {selectedTemplate} = this.state
+
+    const i = _.findIndex(templates, selectedTemplate)
+    const lastIndex = templates.length - 1
+
+    if (i >= 0) {
+      if (direction === 'next') {
+        return templates[(i + 1) % templates.length]
+      }
+
+      if (direction === 'previous') {
+        if (i === 0) {
+          return templates[lastIndex]
+        }
+
+        return templates[i - 1]
+      }
+    }
+
+    return templates[0]
+  }
+
+  handleChange() {
+    const {templates} = this.props
+    const {selectedTemplate} = this.state
+    const value = this.editor.value
+
+    // mask matches that will confuse our regex
+    const masked = applyMasks(value)
+    const matched = masked.match(MATCH_INCOMPLETE_TEMPLATES)
+
+    if (matched && !_.isEmpty(templates)) {
+      // maintain cursor poition
+      const start = this.editor.selectionStart
+
+      const end = this.editor.selectionEnd
+      const filterText = matched[0].substr(1).toLowerCase()
+
+      const filteredTemplates = templates.filter(t =>
+        t.tempVar.toLowerCase().includes(filterText)
+      )
+
+      const found = filteredTemplates.find(
+        t => t.tempVar === selectedTemplate && selectedTemplate.tempVar
+      )
+      const newTemplate = found ? found : filteredTemplates[0]
+
+      this.setState({
+        isTemplating: true,
+        selectedTemplate: newTemplate,
+        filteredTemplates,
+        value,
+      })
+      this.editor.setSelectionRange(start, end)
+    } else {
+      this.setState({isTemplating: false, value})
+    }
+  }
+
+  handleUpdate() {
+    this.props.onUpdate(this.state.value)
+  }
+
+  handleChooseTemplate(template) {
+    this.setState({value: template.query})
+  }
+
+  handleSelectTempVar(tempVar) {
+    this.setState({selectedTemplate: tempVar})
+  }
+
+  render() {
+    const {config: {status}} = this.props
+    const {
+      value,
+      isTemplating,
+      selectedTemplate,
+      filteredTemplates,
+    } = this.state
+
+    return (
+      <div className="query-editor">
+        <textarea
+          className="query-editor--field"
+          onChange={this.handleChange}
+          onKeyDown={this.handleKeyDown}
+          onBlur={this.handleUpdate}
+          ref={editor => (this.editor = editor)}
+          value={value}
+          placeholder="Enter a query or select database, measurement, and field below and have us build one for you..."
+          autoComplete="off"
+          spellCheck="false"
+          data-test="query-editor-field"
+        />
+        <div
+          className={classnames('varmoji', {'varmoji-rotated': isTemplating})}
+        >
+          <div className="varmoji-container">
+            <div className="varmoji-front">
+              <QueryStatus status={status} />
+            </div>
+            <div className="varmoji-back">
+              {isTemplating
+                ? <TemplateDrawer
+                    onClickTempVar={this.handleClickTempVar}
+                    templates={filteredTemplates}
+                    selected={selectedTemplate}
+                    onMouseOverTempVar={this.handleMouseOverTempVar}
+                    handleClickOutside={this.handleCloseDrawer}
+                  />
+                : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const {arrayOf, bool, func, shape, string} = PropTypes
+
+QueryEditor.propTypes = {
+  query: string.isRequired,
+  onUpdate: func.isRequired,
+  config: shape().isRequired,
+  isInDataExplorer: bool,
+  templates: arrayOf(
+    shape({
+      tempVar: string.isRequired,
+    })
+  ),
+}
+
+export default QueryEditor

From 47aae8e285c568fa97a755053f2e312536bcdc64 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 18:20:04 -0700
Subject: [PATCH 35/62] Add accidentally removed prop

---
 ui/src/dashboards/components/CellEditorOverlay.js |  1 +
 ui/src/dashboards/components/QueryMaker.js        | 15 +++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index f15e95c91d..8e62f12748 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/ui/src/dashboards/components/CellEditorOverlay.js
@@ -270,6 +270,7 @@ class CellEditorOverlay extends Component {
                   onAddQuery={this.handleAddQuery}
                   activeQueryIndex={activeQueryIndex}
                   activeQuery={this.getActiveQuery()}
+                  setActiveQueryIndex={this.handleSetActiveQueryIndex}
                 />}
           </div>
         </ResizeContainer>
diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index 7de7511e6a..7292ecd39b 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -9,8 +9,8 @@ import buildInfluxQLQuery from 'utils/influxql'
 const TEMPLATE_RANGE = {upper: null, lower: ':dashboardTime:'}
 const rawTextBinder = (links, id, action) => text =>
   action(links.queries, id, text)
-const buildText = (rawText, range, q) =>
-  rawText || buildInfluxQLQuery(range || TEMPLATE_RANGE, q) || ''
+const buildText = q =>
+  q.rawText || buildInfluxQLQuery(q.range || TEMPLATE_RANGE, q) || ''
 
 const QueryMaker = ({
   source: {links},
@@ -20,7 +20,6 @@ const QueryMaker = ({
   templates,
   onAddQuery,
   activeQuery,
-  activeQuery: {id, range, rawText},
   onDeleteQuery,
   activeQueryIndex,
   setActiveQueryIndex,
@@ -35,12 +34,16 @@ const QueryMaker = ({
         activeQueryIndex={activeQueryIndex}
         setActiveQueryIndex={setActiveQueryIndex}
       />
-      {activeQuery
+      {activeQuery && activeQuery.id
         ? <div className="query-maker--tab-contents">
             <QueryTextArea
-              query={buildText(rawText, range, activeQuery)}
+              query={buildText(activeQuery)}
               config={activeQuery}
-              onUpdate={rawTextBinder(links, id, actions.editRawTextAsync)}
+              onUpdate={rawTextBinder(
+                links,
+                activeQuery.id,
+                actions.editRawTextAsync
+              )}
               templates={templates}
             />
             <SchemaExplorer

From 38224d3a16d30f112056ecdc478f53e78672d437 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Thu, 10 Aug 2017 18:23:33 -0700
Subject: [PATCH 36/62] Move EmptyQuery to shared dir

---
 ui/src/dashboards/components/QueryMaker.js             | 2 +-
 ui/src/{dashboards => shared}/components/EmptyQuery.js | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename ui/src/{dashboards => shared}/components/EmptyQuery.js (100%)

diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index 7292ecd39b..f6dc36a9fb 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -1,6 +1,6 @@
 import React, {PropTypes} from 'react'
 
-import EmptyQuery from 'src/dashboards/components/EmptyQuery'
+import EmptyQuery from 'src/shared/components/EmptyQuery'
 import QueryTabList from 'src/dashboards/components/QueryTabList'
 import QueryTextArea from 'src/dashboards/components/QueryTextArea'
 import SchemaExplorer from 'src/dashboards/components/SchemaExplorer'
diff --git a/ui/src/dashboards/components/EmptyQuery.js b/ui/src/shared/components/EmptyQuery.js
similarity index 100%
rename from ui/src/dashboards/components/EmptyQuery.js
rename to ui/src/shared/components/EmptyQuery.js

From 7de81b4bde9f6ab0cec1491a1404fd0a86b0d1ad Mon Sep 17 00:00:00 2001
From: Nathan L Smith <smith@nlsmith.com>
Date: Thu, 10 Aug 2017 20:54:16 +0000
Subject: [PATCH 37/62] Improvements to npm scripts

When trying to run `npm run test:dev`, I noticed that `nodemon` was not found,
so that task will not work unless you've done `npm install -g nodemon`.

Replace `nodemon`, which would watch for changes to files and restart
Karma, with [concurrenty](https://www.npmjs.com/package/concurrently) and
[eslint-watch](https://www.npmjs.com/package/eslint-watch).

The NPM scripts also had some full paths to binaries that were not necessary
which have been replaced with the shorter versions, and short configuration
options that have been replaced with longer ones for readability (`-w` vs
`--watch`, etc.)

The `eslint` package was updated to remove a warning about an incorrect peer
dependency with `eslint-plugin-prettier`.

Signed-off-by: Nathan L Smith <smith@nlsmith.com>
---
 ui/README.md    |   2 +
 ui/package.json |  16 +++--
 ui/yarn.lock    | 186 +++++++++++++++++++++++++++++++++++++-----------
 3 files changed, 157 insertions(+), 47 deletions(-)

diff --git a/ui/README.md b/ui/README.md
index 24f34aec5c..73698695b0 100644
--- a/ui/README.md
+++ b/ui/README.md
@@ -1,6 +1,8 @@
 ## Packages
 We are using [yarn](https://yarnpkg.com/en/docs/install) 0.19.1.
 
+Run `yarn run` to see a list of available tasks.
+
 ### Adding new packages
 To add a new package, run
 
diff --git a/ui/package.json b/ui/package.json
index 253f0bf1dc..95431eb2eb 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -9,15 +9,15 @@
     "url": "github:influxdata/chronograf"
   },
   "scripts": {
-    "build": "yarn run clean && env NODE_ENV=production node_modules/webpack/bin/webpack.js -p --config ./webpack/prodConfig.js",
-    "build:dev": "node_modules/webpack/bin/webpack.js --config ./webpack/devConfig.js",
-    "start": "node_modules/webpack/bin/webpack.js -w --config ./webpack/devConfig.js",
-    "lint": "node_modules/eslint/bin/eslint.js src/",
+    "build": "yarn run clean && env NODE_ENV=production webpack --optimize-minimize --config ./webpack/prodConfig.js",
+    "build:dev": "webpack --config ./webpack/devConfig.js",
+    "start": "webpack --watch --config ./webpack/devConfig.js",
+    "lint": "esw src/",
     "test": "karma start",
     "test:lint": "yarn run lint; yarn run test",
-    "test:dev": "nodemon --exec yarn run test:lint",
+    "test:dev": "concurrently \"yarn run lint -- --watch\" \"yarn run test -- --no-single-run --reporters=verbose\"",
     "clean": "rm -rf build",
-    "storybook": "node ./storybook",
+    "storybook": "node ./storybook.js",
     "prettier": "prettier --single-quote --trailing-comma es5 --bracket-spacing false --semi false --write \"{src,spec}/**/*.js\"; eslint src --fix"
   },
   "author": "",
@@ -45,14 +45,16 @@
     "babel-runtime": "^6.5.0",
     "bower": "^1.7.7",
     "chai": "^3.5.0",
+    "concurrently": "^3.5.0",
     "core-js": "^2.1.3",
     "css-loader": "^0.23.1",
     "envify": "^3.4.0",
     "enzyme": "^2.4.1",
-    "eslint": "3.9.1",
+    "eslint": "^3.14.1",
     "eslint-loader": "1.6.1",
     "eslint-plugin-prettier": "^2.1.2",
     "eslint-plugin-react": "6.6.0",
+    "eslint-watch": "^3.1.2",
     "express": "^4.14.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 8d89c10604..94370d9900 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -140,9 +140,9 @@ acorn@^3.0.0, acorn@^3.0.4, acorn@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
-acorn@^4.0.1:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a"
+acorn@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.1.tgz#53fe161111f912ab999ee887a90a0bc52822fd75"
 
 add-px-to-style@1.0.0:
   version "1.0.0"
@@ -200,10 +200,18 @@ ansi-html@0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.6.tgz#bda8e33dd2ee1c20f54c08eb405713cbfc0ed80e"
 
+ansi-regex@^0.2.0, ansi-regex@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-0.2.1.tgz#0d8e946967a3d8143f93e24e298525fc1b2235f9"
+
 ansi-regex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.0.0.tgz#c5061b6e0ef8a81775e50f5d66151bf6bf371107"
 
+ansi-styles@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.1.0.tgz#eaecbf66cd706882760b2f4691582b8f55d7a7de"
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -1105,7 +1113,7 @@ babel-plugin-transform-strict-mode@^6.18.0:
     babel-runtime "^6.0.0"
     babel-types "^6.18.0"
 
-babel-polyfill@^6.13.0:
+babel-polyfill@^6.13.0, babel-polyfill@^6.20.0:
   version "6.20.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.20.0.tgz#de4a371006139e20990aac0be367d398331204e7"
   dependencies:
@@ -1452,7 +1460,7 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
-bluebird@^3.1.1, bluebird@^3.3.0, bluebird@^3.4.6:
+bluebird@^3.1.1, bluebird@^3.3.0, bluebird@^3.4.6, bluebird@^3.4.7:
   version "3.4.7"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.7.tgz#f72d760be09b7f76d08ed8fae98b289a8d05fab3"
 
@@ -1642,6 +1650,16 @@ chai@^3.5.0:
     deep-eql "^0.1.3"
     type-detect "^1.0.0"
 
+chalk@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.5.1.tgz#663b3a648b68b55d04690d49167aa837858f2174"
+  dependencies:
+    ansi-styles "^1.1.0"
+    escape-string-regexp "^1.0.0"
+    has-ansi "^0.1.0"
+    strip-ansi "^0.3.0"
+    supports-color "^0.2.0"
+
 chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1679,7 +1697,7 @@ cheerio@^0.22.0:
     lodash.reject "^4.4.0"
     lodash.some "^4.4.0"
 
-chokidar@^1.0.0, chokidar@^1.4.1:
+chokidar@^1.0.0, chokidar@^1.4.1, chokidar@^1.4.3:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
   dependencies:
@@ -1832,6 +1850,10 @@ commander@2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.3.0.tgz#fd430e889832ec353b9acd1de217c11cb3eef873"
 
+commander@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.6.0.tgz#9df7e52fb2a0cb0fb89058ee80c3104225f37e1d"
+
 commander@2.8.x:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
@@ -1917,7 +1939,7 @@ concat-stream@1.5.0:
     readable-stream "~2.0.0"
     typedarray "~0.0.5"
 
-concat-stream@^1.4.6:
+concat-stream@^1.5.2:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
   dependencies:
@@ -1925,6 +1947,19 @@ concat-stream@^1.4.6:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concurrently@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-3.5.0.tgz#8cf1b7707a6916a78a4ff5b77bb04dec54b379b2"
+  dependencies:
+    chalk "0.5.1"
+    commander "2.6.0"
+    date-fns "^1.23.0"
+    lodash "^4.5.1"
+    rx "2.3.24"
+    spawn-command "^0.0.2-1"
+    supports-color "^3.2.3"
+    tree-kill "^1.1.0"
+
 configstore@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/configstore/-/configstore-2.1.0.tgz#737a3a7036e9886102aa6099e47bb33ab1aba1a1"
@@ -2256,6 +2291,10 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^1.23.0:
+  version "1.28.5"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.28.5.tgz#257cfc45d322df45ef5658665967ee841cd73faf"
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@@ -2276,11 +2315,11 @@ debug@2.3.3:
   dependencies:
     ms "0.7.2"
 
-debug@^2.1.1, debug@^2.2.0:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.5.2.tgz#50c295a53dbf1657146e0c1b21307275e90d49cb"
+debug@^2.1.1, debug@^2.2.0, debug@^2.6.3:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
   dependencies:
-    ms "0.7.2"
+    ms "2.0.0"
 
 decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
@@ -2706,7 +2745,7 @@ escape-string-regexp@1.0.2, escape-string-regexp@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.2.tgz#4dbc2fe674e71949caf3fb2695ce7f2dc1d9a8d1"
 
-escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
@@ -2753,23 +2792,40 @@ eslint-plugin-react@6.6.0:
     doctrine "^1.2.2"
     jsx-ast-utils "^1.3.3"
 
-eslint@3.9.1:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.9.1.tgz#5a8597706fc6048bc6061ac754d4a211d28f4f5b"
+eslint-watch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/eslint-watch/-/eslint-watch-3.1.2.tgz#b93b3eca08915f113dc900994f880db1364de4b3"
+  dependencies:
+    babel-polyfill "^6.20.0"
+    bluebird "^3.4.7"
+    chalk "^1.1.3"
+    chokidar "^1.4.3"
+    debug "^2.6.3"
+    keypress "^0.2.1"
+    lodash "^4.17.4"
+    optionator "^0.8.2"
+    source-map-support "^0.4.14"
+    text-table "^0.2.0"
+    unicons "0.0.3"
+
+eslint@^3.14.1:
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.19.0.tgz#c8fc6201c7f40dd08941b87c085767386a679acc"
   dependencies:
     babel-code-frame "^6.16.0"
     chalk "^1.1.3"
-    concat-stream "^1.4.6"
+    concat-stream "^1.5.2"
     debug "^2.1.1"
-    doctrine "^1.2.2"
+    doctrine "^2.0.0"
     escope "^3.6.0"
-    espree "^3.3.1"
+    espree "^3.4.0"
+    esquery "^1.0.0"
     estraverse "^4.2.0"
     esutils "^2.0.2"
     file-entry-cache "^2.0.0"
     glob "^7.0.3"
-    globals "^9.2.0"
-    ignore "^3.1.5"
+    globals "^9.14.0"
+    ignore "^3.2.0"
     imurmurhash "^0.1.4"
     inquirer "^0.12.0"
     is-my-json-valid "^2.10.0"
@@ -2787,16 +2843,16 @@ eslint@3.9.1:
     require-uncached "^1.0.2"
     shelljs "^0.7.5"
     strip-bom "^3.0.0"
-    strip-json-comments "~1.0.1"
+    strip-json-comments "~2.0.1"
     table "^3.7.8"
     text-table "~0.2.0"
     user-home "^2.0.0"
 
-espree@^3.3.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.3.2.tgz#dbf3fadeb4ecb4d4778303e50103b3d36c88b89c"
+espree@^3.4.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.0.tgz#98358625bdd055861ea27e2867ea729faf463d8d"
   dependencies:
-    acorn "^4.0.1"
+    acorn "^5.1.1"
     acorn-jsx "^3.0.0"
 
 esprima-fb@^15001.1.0-dev-harmony-fb:
@@ -2815,6 +2871,12 @@ esprima@~3.1.0:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
 
+esquery@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+  dependencies:
+    estraverse "^4.0.0"
+
 esrecurse@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220"
@@ -2826,7 +2888,7 @@ estraverse@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.9.3.tgz#af67f2dc922582415950926091a4005d29c9bb44"
 
-estraverse@^4.1.1, estraverse@^4.2.0:
+estraverse@^4.0.0, estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
@@ -3331,7 +3393,7 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.4, glob@^7.0.5, glob@~7.1.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-globals@^9.0.0, globals@^9.2.0:
+globals@^9.0.0, globals@^9.14.0:
   version "9.14.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
 
@@ -3394,6 +3456,12 @@ har-validator@~2.0.6:
     is-my-json-valid "^2.12.4"
     pinkie-promise "^2.0.0"
 
+has-ansi@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-0.1.0.tgz#84f265aae8c0e6a88a12d7022894b7568894c62e"
+  dependencies:
+    ansi-regex "^0.2.0"
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -3596,9 +3664,9 @@ ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
 
-ignore@^3.1.5:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.0.tgz#8d88f03c3002a0ac52114db25d2c673b0bf1e435"
+ignore@^3.2.0:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
 
 immutable@^3.8.1:
   version "3.8.1"
@@ -4147,6 +4215,10 @@ keycode@^2.1.1:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.1.8.tgz#94d2b7098215eff0e8f9a8931d5a59076c4532fb"
 
+keypress@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/keypress/-/keypress-0.2.1.tgz#1e80454250018dbad4c3fe94497d6e67b6269c77"
+
 kind-of@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
@@ -4428,7 +4500,7 @@ lodash.words@^3.0.0:
   dependencies:
     lodash._root "^3.0.0"
 
-lodash@4.x.x, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0:
+lodash@4.x.x, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.1.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.5.1:
   version "4.17.3"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.3.tgz#557ed7d2a9438cac5fd5a43043ca60cb455e01f7"
 
@@ -4436,6 +4508,10 @@ lodash@^3.8.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
+lodash@^4.17.4:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
 lodash@~4.16.4:
   version "4.16.6"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.6.tgz#d22c9ac660288f3843e16ba7d2b5d06cca27d777"
@@ -4697,6 +4773,10 @@ ms@0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
 
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
 mustache@^2.2.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/mustache/-/mustache-2.3.0.tgz#4028f7778b17708a489930a6e52ac3bca0da41d0"
@@ -6352,6 +6432,10 @@ rx-lite@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
 
+rx@2.3.24:
+  version "2.3.24"
+  resolved "https://registry.yarnpkg.com/rx/-/rx-2.3.24.tgz#14f950a4217d7e35daa71bbcbe58eff68ea4b2b7"
+
 samsam@1.1.2, samsam@~1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.1.2.tgz#bec11fdc83a9fda063401210e40176c3024d1567"
@@ -6668,11 +6752,11 @@ source-map-resolve@^0.3.0:
     source-map-url "~0.3.0"
     urix "~0.1.0"
 
-source-map-support@^0.4.2:
-  version "0.4.8"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.8.tgz#4871918d8a3af07289182e974e32844327b2e98b"
+source-map-support@^0.4.14, source-map-support@^0.4.2:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.15.tgz#03202df65c06d2bd8c7ec2362a193056fef8d3b1"
   dependencies:
-    source-map "^0.5.3"
+    source-map "^0.5.6"
 
 source-map-url@~0.3.0:
   version "0.3.0"
@@ -6704,6 +6788,10 @@ spawn-args@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/spawn-args/-/spawn-args-0.2.0.tgz#fb7d0bd1d70fd4316bd9e3dec389e65f9d6361bb"
 
+spawn-command@^0.0.2-1:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2.tgz#9544e1a43ca045f8531aac1a48cb29bdae62338e"
+
 spdx-correct@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
@@ -6823,6 +6911,12 @@ stringstream@~0.0.4:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
 
+strip-ansi@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-0.3.0.tgz#25f48ea22ca79187f3174a4db8759347bb126220"
+  dependencies:
+    ansi-regex "^0.2.1"
+
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -6845,10 +6939,14 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
-strip-json-comments@~1.0.1, strip-json-comments@~1.0.4:
+strip-json-comments@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
 
+strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+
 style-loader@0.13.1, style-loader@^0.13.0:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.13.1.tgz#468280efbc0473023cd3a6cd56e33b5a1d7fc3a9"
@@ -6877,9 +6975,9 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
-supports-color@^3.1.0, supports-color@^3.1.1, supports-color@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
+supports-color@^3.1.0, supports-color@^3.1.1, supports-color@^3.1.2, supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
   dependencies:
     has-flag "^1.0.0"
 
@@ -6983,7 +7081,7 @@ testem@^1.2.1:
     tap-parser "^3.0.2"
     xmldom "^0.1.19"
 
-text-table@~0.2.0:
+text-table@^0.2.0, text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
@@ -7057,6 +7155,10 @@ tr46@~0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
 
+tree-kill@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.1.0.tgz#c963dcf03722892ec59cba569e940b71954d1729"
+
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
@@ -7131,6 +7233,10 @@ underscore@>=1.8.3:
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022"
 
+unicons@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/unicons/-/unicons-0.0.3.tgz#6e6a7a1a6eaebb01ca3d8b12ad9687279eaba524"
+
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"

From 974e9eaf7ded41de176376857d9ea3f343507464 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 11 Aug 2017 11:54:16 -0700
Subject: [PATCH 38/62] Add 'type' to new-sources server flag example

---
 server/server.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/server.go b/server/server.go
index eff14cbf38..d51d8148c6 100644
--- a/server/server.go
+++ b/server/server.go
@@ -50,7 +50,7 @@ type Server struct {
 	KapacitorUsername string `long:"kapacitor-username" description:"Username of your Kapacitor instance" env:"KAPACITOR_USERNAME"`
 	KapacitorPassword string `long:"kapacitor-password" description:"Password of your Kapacitor instance" env:"KAPACITOR_PASSWORD"`
 
-	NewSources string `long:"new-sources" description:"Config for adding a new InfluxDB source and Kapacitor server, in JSON as an array of objects, and surrounded by single quotes. E.g. --new-sources='[{\"influxdb\":{\"name\":\"Influx 1\",\"username\":\"user1\",\"password\":\"pass1\",\"url\":\"http://localhost:8086\",\"metaUrl\":\"http://metaurl.com\",\"insecureSkipVerify\":false,\"default\":true,\"telegraf\":\"telegraf\",\"sharedSecret\":\"hunter2\"},\"kapacitor\":{\"name\":\"Kapa 1\",\"url\":\"http://localhost:9092\",\"active\":true}}]'" env:"NEW_SOURCES" hidden:"true"`
+	NewSources string `long:"new-sources" description:"Config for adding a new InfluxDB source and Kapacitor server, in JSON as an array of objects, and surrounded by single quotes. E.g. --new-sources='[{\"influxdb\":{\"name\":\"Influx 1\",\"username\":\"user1\",\"password\":\"pass1\",\"url\":\"http://localhost:8086\",\"metaUrl\":\"http://metaurl.com\",\"type\":\"influx-enterprise\",\"insecureSkipVerify\":false,\"default\":true,\"telegraf\":\"telegraf\",\"sharedSecret\":\"cubeapples\"},\"kapacitor\":{\"name\":\"Kapa 1\",\"url\":\"http://localhost:9092\",\"active\":true}}]'" env:"NEW_SOURCES" hidden:"true"`
 
 	Develop      bool          `short:"d" long:"develop" description:"Run server in develop mode."`
 	BoltPath     string        `short:"b" long:"bolt-path" description:"Full path to boltDB file (e.g. './chronograf-v1.db')" env:"BOLT_PATH" default:"chronograf-v1.db"`

From 26847e0316f9074acba4362c6574dabaf86ad95f Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 11 Aug 2017 13:34:26 -0700
Subject: [PATCH 39/62] Update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ebaa98621..a4e832729e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 1. [#1845](https://github.com/influxdata/chronograf/pull/1845): Fix no-scroll bar appearing in the Data Explorer table
 
 ### Features
+1. [#1863](https://github.com/influxdata/chronograf/pull/1863): Improve 'new-sources' server flag example by adding 'type' key
 
 ### UI Improvements
 1. [#1846](https://github.com/influxdata/chronograf/pull/1846): Increase screen real estate of Query Maker in the Cell Editor Overlay

From 72f574c165d296e5d5a80253015cf6dafb5b68fb Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 13:34:27 -0700
Subject: [PATCH 40/62] Remove templates from DataExplorer

---
 ui/src/data_explorer/components/QueryMaker.js | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index c05b694dc9..aac450e4c8 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -19,11 +19,6 @@ const QueryMaker = React.createClass({
       upper: string,
       lower: string,
     }).isRequired,
-    templates: arrayOf(
-      shape({
-        tempVar: string.isRequired,
-      })
-    ),
     isInDataExplorer: bool,
     actions: shape({
       chooseNamespace: func.isRequired,
@@ -82,14 +77,7 @@ const QueryMaker = React.createClass({
   },
 
   renderQueryBuilder() {
-    const {
-      timeRange,
-      actions,
-      source,
-      templates,
-      layout,
-      isInDataExplorer,
-    } = this.props
+    const {timeRange, actions, source, layout, isInDataExplorer} = this.props
     const query = this.getActiveQuery()
 
     if (!query) {
@@ -126,7 +114,6 @@ const QueryMaker = React.createClass({
       <QueryBuilder
         source={source}
         timeRange={timeRange}
-        templates={templates}
         query={query}
         actions={actions}
         onAddQuery={this.handleAddQuery}

From 58f3dba17c7a8fa600f62a64c290493e7eb0bb97 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 13:36:52 -0700
Subject: [PATCH 41/62] Remove unused class property

---
 ui/src/data_explorer/components/QueryMaker.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index aac450e4c8..250730d0a1 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -47,12 +47,6 @@ const QueryMaker = React.createClass({
     this.props.setActiveQueryIndex(newIndex)
   },
 
-  handleAddRawQuery() {
-    const newIndex = this.props.queries.length
-    this.props.actions.addQuery({rawText: ''})
-    this.props.setActiveQueryIndex(newIndex)
-  },
-
   getActiveQuery() {
     const {queries, activeQueryIndex} = this.props
     const activeQuery = queries[activeQueryIndex]

From e949ac9091299937c7e434248898ef312bdaf52b Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 13:47:51 -0700
Subject: [PATCH 42/62] Move handlers into parent

---
 ui/src/data_explorer/components/QueryMaker.js | 36 ++++++++-----------
 .../data_explorer/containers/DataExplorer.js  | 17 +++++++++
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index 250730d0a1..b1dca91654 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -41,20 +41,6 @@ const QueryMaker = React.createClass({
     layout: string,
   },
 
-  handleAddQuery() {
-    const newIndex = this.props.queries.length
-    this.props.actions.addQuery()
-    this.props.setActiveQueryIndex(newIndex)
-  },
-
-  getActiveQuery() {
-    const {queries, activeQueryIndex} = this.props
-    const activeQuery = queries[activeQueryIndex]
-    const defaultQuery = queries[0]
-
-    return activeQuery || defaultQuery
-  },
-
   render() {
     const {height, top, layout} = this.props
     return (
@@ -71,10 +57,17 @@ const QueryMaker = React.createClass({
   },
 
   renderQueryBuilder() {
-    const {timeRange, actions, source, layout, isInDataExplorer} = this.props
-    const query = this.getActiveQuery()
+    const {
+      timeRange,
+      actions,
+      source,
+      layout,
+      isInDataExplorer,
+      activeQuery,
+      onAddQuery,
+    } = this.props
 
-    if (!query) {
+    if (!activeQuery) {
       return (
         <div className="query-maker--empty">
           <h5>This Graph has no Queries</h5>
@@ -82,7 +75,7 @@ const QueryMaker = React.createClass({
           <div
             className="btn btn-primary"
             role="button"
-            onClick={this.handleAddQuery}
+            onClick={onAddQuery}
             data-test="add-query-button"
           >
             Add a Query
@@ -108,9 +101,9 @@ const QueryMaker = React.createClass({
       <QueryBuilder
         source={source}
         timeRange={timeRange}
-        query={query}
+        query={activeQuery}
         actions={actions}
-        onAddQuery={this.handleAddQuery}
+        onAddQuery={onAddQuery}
         layout={layout}
         isInDataExplorer={isInDataExplorer}
       />
@@ -124,6 +117,7 @@ const QueryMaker = React.createClass({
       onDeleteQuery,
       timeRange,
       setActiveQueryIndex,
+      onAddQuery,
     } = this.props
 
     return (
@@ -148,7 +142,7 @@ const QueryMaker = React.createClass({
         {this.props.children}
         <div
           className="query-maker--new btn btn-sm btn-primary"
-          onClick={this.handleAddQuery}
+          onClick={onAddQuery}
           data-test="new-query-button"
         >
           <span className="icon plus" />
diff --git a/ui/src/data_explorer/containers/DataExplorer.js b/ui/src/data_explorer/containers/DataExplorer.js
index 588384aa5e..d019393bda 100644
--- a/ui/src/data_explorer/containers/DataExplorer.js
+++ b/ui/src/data_explorer/containers/DataExplorer.js
@@ -42,6 +42,21 @@ class DataExplorer extends Component {
     queryConfigActions.deleteQuery(query.id)
   }
 
+  handleAddQuery() {
+    const newIndex = this.props.queryConfigs.length
+    this.props.queryConfigActions.addQuery()
+    this.handleSetActiveQueryIndex(newIndex)
+  }
+
+  getActiveQuery() {
+    const {activeQueryIndex} = this.state
+    const {queryConfigs} = this.props
+    const activeQuery = queryConfigs[activeQueryIndex]
+    const defaultQuery = queryConfigs[0]
+
+    return activeQuery || defaultQuery
+  }
+
   render() {
     const {
       autoRefresh,
@@ -97,7 +112,9 @@ class DataExplorer extends Component {
             isInDataExplorer={true}
             setActiveQueryIndex={::this.handleSetActiveQueryIndex}
             onDeleteQuery={::this.handleDeleteQuery}
+            onAddQuery={::this.handleAddQuery}
             activeQueryIndex={activeQueryIndex}
+            activeQuery={::this.getActiveQuery()}
           />
           <Visualization
             isInDataExplorer={true}

From 86e5dc217bc63d0e0fa6fe60fdabb9ef06050c95 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 13:53:13 -0700
Subject: [PATCH 43/62] Use QueryTabList component

---
 ui/src/data_explorer/components/QueryMaker.js | 64 ++++++-------------
 1 file changed, 21 insertions(+), 43 deletions(-)

diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index b1dca91654..bf866b0fcd 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react'
 
 import QueryBuilder from './QueryBuilder'
 import QueryMakerTab from './QueryMakerTab'
+import QueryTabList from 'src/dashboards/components/QueryTabList'
 import buildInfluxQLQuery from 'utils/influxql'
 import classnames from 'classnames'
 
@@ -42,7 +43,18 @@ const QueryMaker = React.createClass({
   },
 
   render() {
-    const {height, top, layout} = this.props
+    const {
+      height,
+      top,
+      layout,
+      queries,
+      timeRange,
+      onAddQuery,
+      onDeleteQuery,
+      activeQueryIndex,
+      setActiveQueryIndex,
+    } = this.props
+
     return (
       <div
         className={classnames('query-maker', {
@@ -50,7 +62,14 @@ const QueryMaker = React.createClass({
         })}
         style={{height, top}}
       >
-        {this.renderQueryTabList()}
+        <QueryTabList
+          queries={queries}
+          timeRange={timeRange}
+          onAddQuery={onAddQuery}
+          onDeleteQuery={onDeleteQuery}
+          activeQueryIndex={activeQueryIndex}
+          setActiveQueryIndex={setActiveQueryIndex}
+        />
         {this.renderQueryBuilder()}
       </div>
     )
@@ -109,47 +128,6 @@ const QueryMaker = React.createClass({
       />
     )
   },
-
-  renderQueryTabList() {
-    const {
-      queries,
-      activeQueryIndex,
-      onDeleteQuery,
-      timeRange,
-      setActiveQueryIndex,
-      onAddQuery,
-    } = this.props
-
-    return (
-      <div className="query-maker--tabs">
-        {queries.map((q, i) => {
-          return (
-            <QueryMakerTab
-              isActive={i === activeQueryIndex}
-              key={i}
-              queryIndex={i}
-              query={q}
-              onSelect={setActiveQueryIndex}
-              onDelete={onDeleteQuery}
-              queryTabText={
-                q.rawText ||
-                buildInfluxQLQuery(timeRange, q) ||
-                `Query ${i + 1}`
-              }
-            />
-          )
-        })}
-        {this.props.children}
-        <div
-          className="query-maker--new btn btn-sm btn-primary"
-          onClick={onAddQuery}
-          data-test="new-query-button"
-        >
-          <span className="icon plus" />
-        </div>
-      </div>
-    )
-  },
 })
 
 QueryMaker.defaultProps = {

From 492618500db487b665b279204c5f8cf48f223ad1 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 13:57:50 -0700
Subject: [PATCH 44/62] Move QueryTabList to shared dir

---
 ui/src/dashboards/components/QueryMaker.js               | 2 +-
 ui/src/data_explorer/components/QueryMaker.js            | 2 +-
 ui/src/{dashboards => shared}/components/QueryTabList.js | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename ui/src/{dashboards => shared}/components/QueryTabList.js (100%)

diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index f6dc36a9fb..169f9e230f 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react'
 
 import EmptyQuery from 'src/shared/components/EmptyQuery'
-import QueryTabList from 'src/dashboards/components/QueryTabList'
+import QueryTabList from 'src/shared/components/QueryTabList'
 import QueryTextArea from 'src/dashboards/components/QueryTextArea'
 import SchemaExplorer from 'src/dashboards/components/SchemaExplorer'
 import buildInfluxQLQuery from 'utils/influxql'
diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index bf866b0fcd..d4c056139f 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -2,7 +2,7 @@ import React, {PropTypes} from 'react'
 
 import QueryBuilder from './QueryBuilder'
 import QueryMakerTab from './QueryMakerTab'
-import QueryTabList from 'src/dashboards/components/QueryTabList'
+import QueryTabList from 'src/shared/components/QueryTabList'
 import buildInfluxQLQuery from 'utils/influxql'
 import classnames from 'classnames'
 
diff --git a/ui/src/dashboards/components/QueryTabList.js b/ui/src/shared/components/QueryTabList.js
similarity index 100%
rename from ui/src/dashboards/components/QueryTabList.js
rename to ui/src/shared/components/QueryTabList.js

From a2a360d1dc10a69d4a903c1abdbafb46042ef00a Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 14:05:58 -0700
Subject: [PATCH 45/62] Make DataExplorer's QueryMaker an SFC

---
 ui/src/data_explorer/components/QueryMaker.js | 184 ++++++------------
 1 file changed, 60 insertions(+), 124 deletions(-)

diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index d4c056139f..7f5accd90d 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -1,136 +1,72 @@
 import React, {PropTypes} from 'react'
 
 import QueryBuilder from './QueryBuilder'
-import QueryMakerTab from './QueryMakerTab'
+import EmptyQuery from 'src/shared/components/EmptyQuery'
 import QueryTabList from 'src/shared/components/QueryTabList'
-import buildInfluxQLQuery from 'utils/influxql'
-import classnames from 'classnames'
 
-const {arrayOf, bool, func, node, number, shape, string} = PropTypes
-
-const QueryMaker = React.createClass({
-  propTypes: {
-    source: shape({
-      links: shape({
-        queries: string.isRequired,
-      }).isRequired,
-    }).isRequired,
-    queries: arrayOf(shape({})).isRequired,
-    timeRange: shape({
-      upper: string,
-      lower: string,
-    }).isRequired,
-    isInDataExplorer: bool,
-    actions: shape({
-      chooseNamespace: func.isRequired,
-      chooseMeasurement: func.isRequired,
-      chooseTag: func.isRequired,
-      groupByTag: func.isRequired,
-      addQuery: func.isRequired,
-      toggleField: func.isRequired,
-      groupByTime: func.isRequired,
-      toggleTagAcceptance: func.isRequired,
-      applyFuncsToField: func.isRequired,
-      editRawTextAsync: func.isRequired,
-    }).isRequired,
-    height: string,
-    top: string,
-    setActiveQueryIndex: func.isRequired,
-    onDeleteQuery: func.isRequired,
-    activeQueryIndex: number,
-    children: node,
-    layout: string,
-  },
-
-  render() {
-    const {
-      height,
-      top,
-      layout,
-      queries,
-      timeRange,
-      onAddQuery,
-      onDeleteQuery,
-      activeQueryIndex,
-      setActiveQueryIndex,
-    } = this.props
-
-    return (
-      <div
-        className={classnames('query-maker', {
-          'query-maker--panel': layout === 'panel',
-        })}
-        style={{height, top}}
-      >
-        <QueryTabList
-          queries={queries}
+const QueryMaker = ({
+  source,
+  actions,
+  queries,
+  timeRange,
+  onAddQuery,
+  activeQuery,
+  onDeleteQuery,
+  activeQueryIndex,
+  setActiveQueryIndex,
+}) =>
+  <div className="query-maker query-maker--panel">
+    <QueryTabList
+      queries={queries}
+      timeRange={timeRange}
+      onAddQuery={onAddQuery}
+      onDeleteQuery={onDeleteQuery}
+      activeQueryIndex={activeQueryIndex}
+      setActiveQueryIndex={setActiveQueryIndex}
+    />
+    {activeQuery
+      ? <QueryBuilder
+          layout={'default'}
+          source={source}
+          actions={actions}
+          query={activeQuery}
           timeRange={timeRange}
           onAddQuery={onAddQuery}
-          onDeleteQuery={onDeleteQuery}
-          activeQueryIndex={activeQueryIndex}
-          setActiveQueryIndex={setActiveQueryIndex}
+          isInDataExplorer={true}
         />
-        {this.renderQueryBuilder()}
-      </div>
-    )
-  },
+      : <EmptyQuery onAddQuery={onAddQuery} />}
+  </div>
 
-  renderQueryBuilder() {
-    const {
-      timeRange,
-      actions,
-      source,
-      layout,
-      isInDataExplorer,
-      activeQuery,
-      onAddQuery,
-    } = this.props
+const {arrayOf, func, number, shape, string} = PropTypes
 
-    if (!activeQuery) {
-      return (
-        <div className="query-maker--empty">
-          <h5>This Graph has no Queries</h5>
-          <br />
-          <div
-            className="btn btn-primary"
-            role="button"
-            onClick={onAddQuery}
-            data-test="add-query-button"
-          >
-            Add a Query
-          </div>
-        </div>
-      )
-    }
-
-    // NOTE
-    // the layout prop is intended to toggle between a horizontal and vertical layout
-    // the layout will be horizontal by default
-    // vertical layout is known as "panel" layout as it will be used to build
-    // a "cell editor panel" though that term might change
-    // Currently, if set to "panel" the only noticeable difference is that the
-    // DatabaseList becomes DatabaseDropdown (more space efficient in vertical layout)
-    // and is outside the container with measurements/tags/fields
-    //
-    // TODO:
-    // - perhaps switch to something like "isVertical" and accept boolean instead of string
-    // - more css/markup work to make the alternate appearance look good
-
-    return (
-      <QueryBuilder
-        source={source}
-        timeRange={timeRange}
-        query={activeQuery}
-        actions={actions}
-        onAddQuery={onAddQuery}
-        layout={layout}
-        isInDataExplorer={isInDataExplorer}
-      />
-    )
-  },
-})
-
-QueryMaker.defaultProps = {
-  layout: 'default',
+QueryMaker.propTypes = {
+  source: shape({
+    links: shape({
+      queries: string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  queries: arrayOf(shape({})).isRequired,
+  timeRange: shape({
+    upper: string,
+    lower: string,
+  }).isRequired,
+  actions: shape({
+    chooseNamespace: func.isRequired,
+    chooseMeasurement: func.isRequired,
+    chooseTag: func.isRequired,
+    groupByTag: func.isRequired,
+    addQuery: func.isRequired,
+    toggleField: func.isRequired,
+    groupByTime: func.isRequired,
+    toggleTagAcceptance: func.isRequired,
+    applyFuncsToField: func.isRequired,
+    editRawTextAsync: func.isRequired,
+  }).isRequired,
+  setActiveQueryIndex: func.isRequired,
+  onDeleteQuery: func.isRequired,
+  onAddQuery: func.isRequired,
+  activeQuery: shape({}),
+  activeQueryIndex: number,
 }
+
 export default QueryMaker

From 3b8417897cb9aefb832cdc64b6f12c2d7e8ede4d Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 14:18:24 -0700
Subject: [PATCH 46/62] Break QueryBuilder into smaller components

---
 ui/src/data_explorer/components/QueryMaker.js | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index 7f5accd90d..58d50bce0d 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -1,8 +1,16 @@
 import React, {PropTypes} from 'react'
 
-import QueryBuilder from './QueryBuilder'
+import QueryEditor from './QueryEditor'
 import EmptyQuery from 'src/shared/components/EmptyQuery'
 import QueryTabList from 'src/shared/components/QueryTabList'
+import SchemaExplorer from 'src/dashboards/components/SchemaExplorer'
+import buildInfluxQLQuery from 'utils/influxql'
+
+const rawTextBinder = (links, id, action) => text =>
+  action(links.queries, id, text)
+
+const buildText = (q, timeRange) =>
+  q.rawText || buildInfluxQLQuery(q.range || timeRange, q) || ''
 
 const QueryMaker = ({
   source,
@@ -24,16 +32,24 @@ const QueryMaker = ({
       activeQueryIndex={activeQueryIndex}
       setActiveQueryIndex={setActiveQueryIndex}
     />
-    {activeQuery
-      ? <QueryBuilder
-          layout={'default'}
-          source={source}
-          actions={actions}
-          query={activeQuery}
-          timeRange={timeRange}
-          onAddQuery={onAddQuery}
-          isInDataExplorer={true}
-        />
+    {activeQuery && activeQuery.id
+      ? <div className="query-maker--tab-contents">
+          <QueryEditor
+            query={buildText(activeQuery, timeRange)}
+            config={activeQuery}
+            isInDataExplorer={true}
+            onUpdate={rawTextBinder(
+              source.links,
+              activeQuery.id,
+              actions.editRawTextAsync
+            )}
+          />
+          <SchemaExplorer
+            query={activeQuery}
+            actions={actions}
+            onAddQuery={onAddQuery}
+          />
+        </div>
       : <EmptyQuery onAddQuery={onAddQuery} />}
   </div>
 

From 251cf72e2e4e103bf8a0383b7d373a3da636006c Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 14:19:04 -0700
Subject: [PATCH 47/62] Remove QueryBuilder component

Dont worry!  It's been replaced by smaller more
reusable components.
---
 .../data_explorer/components/QueryBuilder.js  | 177 ------------------
 1 file changed, 177 deletions(-)
 delete mode 100644 ui/src/data_explorer/components/QueryBuilder.js

diff --git a/ui/src/data_explorer/components/QueryBuilder.js b/ui/src/data_explorer/components/QueryBuilder.js
deleted file mode 100644
index a7613c724c..0000000000
--- a/ui/src/data_explorer/components/QueryBuilder.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, {PropTypes} from 'react'
-
-import DatabaseList from './DatabaseList'
-import DatabaseDropdown from 'shared/components/DatabaseDropdown'
-import MeasurementList from './MeasurementList'
-import FieldList from './FieldList'
-import QueryEditor from './QueryEditor'
-import buildInfluxQLQuery from 'utils/influxql'
-
-const {arrayOf, bool, func, shape, string} = PropTypes
-
-const QueryBuilder = React.createClass({
-  propTypes: {
-    source: shape({
-      links: shape({
-        queries: string.isRequired,
-      }).isRequired,
-    }).isRequired,
-    query: shape({
-      id: string,
-    }).isRequired,
-    timeRange: shape({
-      upper: string,
-      lower: string,
-    }).isRequired,
-    templates: arrayOf(
-      shape({
-        tempVar: string.isRequired,
-      })
-    ),
-    isInDataExplorer: bool,
-    actions: shape({
-      chooseNamespace: func.isRequired,
-      chooseMeasurement: func.isRequired,
-      applyFuncsToField: func.isRequired,
-      chooseTag: func.isRequired,
-      groupByTag: func.isRequired,
-      toggleField: func.isRequired,
-      groupByTime: func.isRequired,
-      toggleTagAcceptance: func.isRequired,
-      editRawTextAsync: func.isRequired,
-    }).isRequired,
-    layout: string,
-  },
-
-  handleChooseNamespace(namespace) {
-    this.props.actions.chooseNamespace(this.props.query.id, namespace)
-  },
-
-  handleChooseMeasurement(measurement) {
-    this.props.actions.chooseMeasurement(this.props.query.id, measurement)
-  },
-
-  handleToggleField(field) {
-    this.props.actions.toggleFieldWithGroupByInterval(
-      this.props.query.id,
-      field
-    )
-  },
-
-  handleGroupByTime(time) {
-    this.props.actions.groupByTime(this.props.query.id, time)
-  },
-
-  handleApplyFuncsToField(fieldFunc) {
-    this.props.actions.applyFuncsToField(
-      this.props.query.id,
-      fieldFunc,
-      this.props.isInDataExplorer
-    )
-  },
-
-  handleChooseTag(tag) {
-    this.props.actions.chooseTag(this.props.query.id, tag)
-  },
-
-  handleToggleTagAcceptance() {
-    this.props.actions.toggleTagAcceptance(this.props.query.id)
-  },
-
-  handleGroupByTag(tagKey) {
-    this.props.actions.groupByTag(this.props.query.id, tagKey)
-  },
-
-  handleEditRawText(text) {
-    const {source: {links}, query} = this.props
-    this.props.actions.editRawTextAsync(links.queries, query.id, text)
-  },
-
-  render() {
-    const {query, templates, isInDataExplorer} = this.props
-
-    // DE does not understand templating. :dashboardTime: is specific to dashboards
-    let timeRange
-
-    if (isInDataExplorer) {
-      timeRange = this.props.timeRange
-    } else {
-      timeRange = query.range || {upper: null, lower: ':dashboardTime:'}
-    }
-
-    const q = query.rawText || buildInfluxQLQuery(timeRange, query) || ''
-
-    return (
-      <div className="query-maker--tab-contents">
-        <QueryEditor
-          query={q}
-          config={query}
-          onUpdate={this.handleEditRawText}
-          templates={templates}
-          isInDataExplorer={isInDataExplorer}
-        />
-        {this.renderLists()}
-      </div>
-    )
-  },
-
-  renderLists() {
-    const {query, layout, isInDataExplorer} = this.props
-
-    // Panel layout uses a dropdown instead of a list for database selection
-    // Also groups measurements & fields into their own container so they
-    // can be stacked vertically.
-    // TODO: Styles to make all this look proper
-    if (layout === 'panel') {
-      return (
-        <div className="query-builder--panel">
-          <DatabaseDropdown
-            query={query}
-            onChooseNamespace={this.handleChooseNamespace}
-          />
-          <div className="query-builder">
-            <MeasurementList
-              query={query}
-              onChooseMeasurement={this.handleChooseMeasurement}
-              onChooseTag={this.handleChooseTag}
-              onToggleTagAcceptance={this.handleToggleTagAcceptance}
-              onGroupByTag={this.handleGroupByTag}
-            />
-            <FieldList
-              query={query}
-              onToggleField={this.handleToggleField}
-              onGroupByTime={this.handleGroupByTime}
-              applyFuncsToField={this.handleApplyFuncsToField}
-              isInDataExplorer={isInDataExplorer}
-            />
-          </div>
-        </div>
-      )
-    }
-
-    return (
-      <div className="query-builder">
-        <DatabaseList
-          query={query}
-          onChooseNamespace={this.handleChooseNamespace}
-        />
-        <MeasurementList
-          query={query}
-          onChooseMeasurement={this.handleChooseMeasurement}
-          onChooseTag={this.handleChooseTag}
-          onToggleTagAcceptance={this.handleToggleTagAcceptance}
-          onGroupByTag={this.handleGroupByTag}
-        />
-        <FieldList
-          query={query}
-          onToggleField={this.handleToggleField}
-          onGroupByTime={this.handleGroupByTime}
-          applyFuncsToField={this.handleApplyFuncsToField}
-          isInDataExplorer={isInDataExplorer}
-        />
-      </div>
-    )
-  },
-})
-
-export default QueryBuilder

From d8941fffd60d294a73ac47ba90bfd1c964e5d0c3 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 14:29:17 -0700
Subject: [PATCH 48/62] Use QueryStatus component

---
 ui/src/dashboards/components/QueryStatus.js   |  7 +-
 .../data_explorer/components/QueryEditor.js   | 97 +++----------------
 2 files changed, 17 insertions(+), 87 deletions(-)

diff --git a/ui/src/dashboards/components/QueryStatus.js b/ui/src/dashboards/components/QueryStatus.js
index 95b8c2052e..951fa65ba8 100644
--- a/ui/src/dashboards/components/QueryStatus.js
+++ b/ui/src/dashboards/components/QueryStatus.js
@@ -2,7 +2,7 @@ import React, {PropTypes} from 'react'
 import LoadingDots from 'shared/components/LoadingDots'
 import classnames from 'classnames'
 
-const QueryStatus = ({status}) => {
+const QueryStatus = ({status, children}) => {
   if (!status) {
     return <div className="query-editor--status" />
   }
@@ -11,6 +11,7 @@ const QueryStatus = ({status}) => {
     return (
       <div className="query-editor--status">
         <LoadingDots />
+        {children}
       </div>
     )
   }
@@ -33,11 +34,12 @@ const QueryStatus = ({status}) => {
         />
         {status.error || status.warn || status.success}
       </span>
+      {children}
     </div>
   )
 }
 
-const {shape, string} = PropTypes
+const {node, shape, string} = PropTypes
 
 QueryStatus.propTypes = {
   status: shape({
@@ -45,6 +47,7 @@ QueryStatus.propTypes = {
     success: string,
     warn: string,
   }),
+  children: node,
 }
 
 export default QueryStatus
diff --git a/ui/src/data_explorer/components/QueryEditor.js b/ui/src/data_explorer/components/QueryEditor.js
index c9b8e5a5eb..b06f371c1b 100644
--- a/ui/src/data_explorer/components/QueryEditor.js
+++ b/ui/src/data_explorer/components/QueryEditor.js
@@ -1,11 +1,10 @@
 import React, {PropTypes, Component} from 'react'
 import _ from 'lodash'
-import classnames from 'classnames'
 
 import Dropdown from 'shared/components/Dropdown'
-import LoadingDots from 'shared/components/LoadingDots'
-import TemplateDrawer from 'shared/components/TemplateDrawer'
 import {QUERY_TEMPLATES} from 'src/data_explorer/constants'
+import QueryStatus from 'src/dashboards/components/QueryStatus'
+
 import {
   MATCH_INCOMPLETE_TEMPLATES,
   applyMasks,
@@ -222,96 +221,24 @@ class QueryEditor extends Component {
           spellCheck="false"
           data-test="query-editor-field"
         />
-        <div
-          className={classnames('varmoji', {'varmoji-rotated': isTemplating})}
-        >
+        <div className="varmoji">
           <div className="varmoji-container">
             <div className="varmoji-front">
-              {this.renderStatus(status)}
-            </div>
-            <div className="varmoji-back">
-              {isTemplating
-                ? <TemplateDrawer
-                    onClickTempVar={this.handleClickTempVar}
-                    templates={filteredTemplates}
-                    selected={selectedTemplate}
-                    onMouseOverTempVar={this.handleMouseOverTempVar}
-                    handleClickOutside={this.handleCloseDrawer}
-                  />
-                : null}
+              <QueryStatus status={status}>
+                <Dropdown
+                  items={QUERY_TEMPLATES}
+                  selected={'Query Templates'}
+                  onChoose={this.handleChooseTemplate}
+                  className="dropdown-140 query-editor--templates"
+                  buttonSize="btn-xs"
+                />
+              </QueryStatus>
             </div>
           </div>
         </div>
       </div>
     )
   }
-
-  renderStatus(status) {
-    const {isInDataExplorer} = this.props
-
-    if (!status) {
-      return (
-        <div className="query-editor--status">
-          {isInDataExplorer
-            ? <Dropdown
-                items={QUERY_TEMPLATES}
-                selected={'Query Templates'}
-                onChoose={this.handleChooseTemplate}
-                className="dropdown-140 query-editor--templates"
-                buttonSize="btn-xs"
-              />
-            : null}
-        </div>
-      )
-    }
-
-    if (status.loading) {
-      return (
-        <div className="query-editor--status">
-          <LoadingDots />
-          {isInDataExplorer
-            ? <Dropdown
-                items={QUERY_TEMPLATES}
-                selected={'Query Templates'}
-                onChoose={this.handleChooseTemplate}
-                className="dropdown-140 query-editor--templates"
-                buttonSize="btn-xs"
-              />
-            : null}
-        </div>
-      )
-    }
-
-    return (
-      <div className="query-editor--status">
-        <span
-          className={classnames('query-status-output', {
-            'query-status-output--error': status.error,
-            'query-status-output--success': status.success,
-            'query-status-output--warning': status.warn,
-          })}
-        >
-          <span
-            className={classnames('icon', {
-              stop: status.error,
-              checkmark: status.success,
-              'alert-triangle': status.warn,
-            })}
-          />
-          {status.error || status.warn || status.success}
-        </span>
-        {isInDataExplorer
-          ? <Dropdown
-              items={QUERY_TEMPLATES}
-              selected={'Query Templates'}
-              onChoose={this.handleChooseTemplate}
-              className="dropdown-140 query-editor--templates"
-              buttonSize="btn-xs"
-            />
-          : null}
-      </div>
-    )
-  }
 }
 
 const {arrayOf, bool, func, shape, string} = PropTypes

From 6a536b4a1081c864c4a8155a9e4b156c564b7b84 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 14:30:56 -0700
Subject: [PATCH 49/62] Move QueryStatus component to shared dir

---
 ui/src/dashboards/components/QueryTextArea.js           | 2 +-
 ui/src/data_explorer/components/QueryEditor.js          | 2 +-
 ui/src/{dashboards => shared}/components/QueryStatus.js | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename ui/src/{dashboards => shared}/components/QueryStatus.js (100%)

diff --git a/ui/src/dashboards/components/QueryTextArea.js b/ui/src/dashboards/components/QueryTextArea.js
index fc07ebef7d..e8f7d08aac 100644
--- a/ui/src/dashboards/components/QueryTextArea.js
+++ b/ui/src/dashboards/components/QueryTextArea.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 import classnames from 'classnames'
 
 import TemplateDrawer from 'shared/components/TemplateDrawer'
-import QueryStatus from 'src/dashboards/components/QueryStatus'
+import QueryStatus from 'shared/components/QueryStatus'
 
 import {
   MATCH_INCOMPLETE_TEMPLATES,
diff --git a/ui/src/data_explorer/components/QueryEditor.js b/ui/src/data_explorer/components/QueryEditor.js
index b06f371c1b..2301895b2e 100644
--- a/ui/src/data_explorer/components/QueryEditor.js
+++ b/ui/src/data_explorer/components/QueryEditor.js
@@ -3,7 +3,7 @@ import _ from 'lodash'
 
 import Dropdown from 'shared/components/Dropdown'
 import {QUERY_TEMPLATES} from 'src/data_explorer/constants'
-import QueryStatus from 'src/dashboards/components/QueryStatus'
+import QueryStatus from 'shared/components/QueryStatus'
 
 import {
   MATCH_INCOMPLETE_TEMPLATES,
diff --git a/ui/src/dashboards/components/QueryStatus.js b/ui/src/shared/components/QueryStatus.js
similarity index 100%
rename from ui/src/dashboards/components/QueryStatus.js
rename to ui/src/shared/components/QueryStatus.js

From 5b79db1f90daafbe9a97833504b0ba0791a7e8d4 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 14:38:55 -0700
Subject: [PATCH 50/62] Remove template variable logic from DataExplorer

---
 .../data_explorer/components/QueryEditor.js   | 175 +-----------------
 1 file changed, 8 insertions(+), 167 deletions(-)

diff --git a/ui/src/data_explorer/components/QueryEditor.js b/ui/src/data_explorer/components/QueryEditor.js
index 2301895b2e..ec296cc249 100644
--- a/ui/src/data_explorer/components/QueryEditor.js
+++ b/ui/src/data_explorer/components/QueryEditor.js
@@ -1,39 +1,19 @@
 import React, {PropTypes, Component} from 'react'
-import _ from 'lodash'
 
 import Dropdown from 'shared/components/Dropdown'
 import {QUERY_TEMPLATES} from 'src/data_explorer/constants'
 import QueryStatus from 'shared/components/QueryStatus'
 
-import {
-  MATCH_INCOMPLETE_TEMPLATES,
-  applyMasks,
-  insertTempVar,
-  unMask,
-} from 'src/dashboards/constants'
-
 class QueryEditor extends Component {
   constructor(props) {
     super(props)
     this.state = {
       value: this.props.query,
-      isTemplating: false,
-      selectedTemplate: {
-        tempVar: _.get(this.props.templates, ['0', 'tempVar'], ''),
-      },
-      filteredTemplates: this.props.templates,
     }
 
     this.handleKeyDown = ::this.handleKeyDown
     this.handleChange = ::this.handleChange
     this.handleUpdate = ::this.handleUpdate
-    this.handleChooseTemplate = ::this.handleChooseTemplate
-    this.handleCloseDrawer = ::this.handleCloseDrawer
-    this.findTempVar = ::this.findTempVar
-    this.handleTemplateReplace = ::this.handleTemplateReplace
-    this.handleMouseOverTempVar = ::this.handleMouseOverTempVar
-    this.handleClickTempVar = ::this.handleClickTempVar
-    this.closeDrawer = ::this.closeDrawer
   }
 
   componentWillReceiveProps(nextProps) {
@@ -42,170 +22,31 @@ class QueryEditor extends Component {
     }
   }
 
-  handleCloseDrawer() {
-    this.setState({isTemplating: false})
-  }
-
-  handleMouseOverTempVar(template) {
-    this.handleTemplateReplace(template)
-  }
-
-  handleClickTempVar(template) {
-    // Clicking a tempVar does the same thing as hitting 'Enter'
-    this.handleTemplateReplace(template, true)
-    this.closeDrawer()
-  }
-
-  closeDrawer() {
-    this.setState({
-      isTemplating: false,
-      selectedTemplate: {
-        tempVar: _.get(this.props.templates, ['0', 'tempVar'], ''),
-      },
-    })
-  }
-
   handleKeyDown(e) {
-    const {isTemplating, value} = this.state
+    const {value} = this.state
 
-    if (isTemplating) {
-      switch (e.key) {
-        case 'Tab':
-        case 'ArrowRight':
-        case 'ArrowDown':
-          e.preventDefault()
-          return this.handleTemplateReplace(this.findTempVar('next'))
-        case 'ArrowLeft':
-        case 'ArrowUp':
-          e.preventDefault()
-          return this.handleTemplateReplace(this.findTempVar('previous'))
-        case 'Enter':
-          e.preventDefault()
-          this.handleTemplateReplace(this.state.selectedTemplate, true)
-          return this.closeDrawer()
-        case 'Escape':
-          e.preventDefault()
-          return this.closeDrawer()
-      }
-    } else if (e.key === 'Escape') {
+    if (e.key === 'Escape') {
       e.preventDefault()
-      this.setState({value, isTemplating: false})
-    } else if (e.key === 'Enter') {
+      this.setState({value})
+    }
+
+    if (e.key === 'Enter') {
       e.preventDefault()
       this.handleUpdate()
     }
   }
 
-  handleTemplateReplace(selectedTemplate, replaceWholeTemplate) {
-    const {selectionStart, value} = this.editor
-    const {tempVar} = selectedTemplate
-    const newTempVar = replaceWholeTemplate
-      ? tempVar
-      : tempVar.substring(0, tempVar.length - 1)
-
-    // mask matches that will confuse our regex
-    const masked = applyMasks(value)
-    const matched = masked.match(MATCH_INCOMPLETE_TEMPLATES)
-
-    let templatedValue
-    if (matched) {
-      templatedValue = insertTempVar(masked, newTempVar)
-      templatedValue = unMask(templatedValue)
-    }
-
-    const enterModifier = replaceWholeTemplate ? 0 : -1
-    const diffInLength =
-      tempVar.length - _.get(matched, '0', []).length + enterModifier
-
-    this.setState({value: templatedValue, selectedTemplate}, () =>
-      this.editor.setSelectionRange(
-        selectionStart + diffInLength,
-        selectionStart + diffInLength
-      )
-    )
-  }
-
-  findTempVar(direction) {
-    const {filteredTemplates: templates} = this.state
-    const {selectedTemplate} = this.state
-
-    const i = _.findIndex(templates, selectedTemplate)
-    const lastIndex = templates.length - 1
-
-    if (i >= 0) {
-      if (direction === 'next') {
-        return templates[(i + 1) % templates.length]
-      }
-
-      if (direction === 'previous') {
-        if (i === 0) {
-          return templates[lastIndex]
-        }
-
-        return templates[i - 1]
-      }
-    }
-
-    return templates[0]
-  }
-
   handleChange() {
-    const {templates} = this.props
-    const {selectedTemplate} = this.state
-    const value = this.editor.value
-
-    // mask matches that will confuse our regex
-    const masked = applyMasks(value)
-    const matched = masked.match(MATCH_INCOMPLETE_TEMPLATES)
-
-    if (matched && !_.isEmpty(templates)) {
-      // maintain cursor poition
-      const start = this.editor.selectionStart
-
-      const end = this.editor.selectionEnd
-      const filterText = matched[0].substr(1).toLowerCase()
-
-      const filteredTemplates = templates.filter(t =>
-        t.tempVar.toLowerCase().includes(filterText)
-      )
-
-      const found = filteredTemplates.find(
-        t => t.tempVar === selectedTemplate && selectedTemplate.tempVar
-      )
-      const newTemplate = found ? found : filteredTemplates[0]
-
-      this.setState({
-        isTemplating: true,
-        selectedTemplate: newTemplate,
-        filteredTemplates,
-        value,
-      })
-      this.editor.setSelectionRange(start, end)
-    } else {
-      this.setState({isTemplating: false, value})
-    }
+    this.setState({value: this.editor.value})
   }
 
   handleUpdate() {
     this.props.onUpdate(this.state.value)
   }
 
-  handleChooseTemplate(template) {
-    this.setState({value: template.query})
-  }
-
-  handleSelectTempVar(tempVar) {
-    this.setState({selectedTemplate: tempVar})
-  }
-
   render() {
     const {config: {status}} = this.props
-    const {
-      value,
-      isTemplating,
-      selectedTemplate,
-      filteredTemplates,
-    } = this.state
+    const {value} = this.state
 
     return (
       <div className="query-editor">

From 380b4bbea9d91a7807a7ba37a2517f30d2b9aa44 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 14:42:03 -0700
Subject: [PATCH 51/62] Rename handler

---
 ui/src/data_explorer/components/QueryEditor.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/data_explorer/components/QueryEditor.js b/ui/src/data_explorer/components/QueryEditor.js
index ec296cc249..59e4f9d60a 100644
--- a/ui/src/data_explorer/components/QueryEditor.js
+++ b/ui/src/data_explorer/components/QueryEditor.js
@@ -14,6 +14,7 @@ class QueryEditor extends Component {
     this.handleKeyDown = ::this.handleKeyDown
     this.handleChange = ::this.handleChange
     this.handleUpdate = ::this.handleUpdate
+    this.handleChooseMetaQuery = ::this.handleChooseMetaQuery
   }
 
   componentWillReceiveProps(nextProps) {
@@ -44,6 +45,10 @@ class QueryEditor extends Component {
     this.props.onUpdate(this.state.value)
   }
 
+  handleChooseMetaQuery(template) {
+    this.setState({value: template.query})
+  }
+
   render() {
     const {config: {status}} = this.props
     const {value} = this.state
@@ -69,7 +74,7 @@ class QueryEditor extends Component {
                 <Dropdown
                   items={QUERY_TEMPLATES}
                   selected={'Query Templates'}
-                  onChoose={this.handleChooseTemplate}
+                  onChoose={this.handleChooseMetaQuery}
                   className="dropdown-140 query-editor--templates"
                   buttonSize="btn-xs"
                 />

From 686f1d79b1e62e2d4f3f7093054b3699622ddf76 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 11 Aug 2017 14:45:31 -0700
Subject: [PATCH 52/62] Remove unused props and proptypes

---
 ui/src/data_explorer/components/QueryEditor.js  | 8 +-------
 ui/src/data_explorer/components/QueryMaker.js   | 1 -
 ui/src/data_explorer/containers/DataExplorer.js | 1 -
 3 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/ui/src/data_explorer/components/QueryEditor.js b/ui/src/data_explorer/components/QueryEditor.js
index 59e4f9d60a..cb1e7a0277 100644
--- a/ui/src/data_explorer/components/QueryEditor.js
+++ b/ui/src/data_explorer/components/QueryEditor.js
@@ -87,18 +87,12 @@ class QueryEditor extends Component {
   }
 }
 
-const {arrayOf, bool, func, shape, string} = PropTypes
+const {func, shape, string} = PropTypes
 
 QueryEditor.propTypes = {
   query: string.isRequired,
   onUpdate: func.isRequired,
   config: shape().isRequired,
-  isInDataExplorer: bool,
-  templates: arrayOf(
-    shape({
-      tempVar: string.isRequired,
-    })
-  ),
 }
 
 export default QueryEditor
diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index 58d50bce0d..aa755ff2df 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -37,7 +37,6 @@ const QueryMaker = ({
           <QueryEditor
             query={buildText(activeQuery, timeRange)}
             config={activeQuery}
-            isInDataExplorer={true}
             onUpdate={rawTextBinder(
               source.links,
               activeQuery.id,
diff --git a/ui/src/data_explorer/containers/DataExplorer.js b/ui/src/data_explorer/containers/DataExplorer.js
index d019393bda..ae2fb2b34d 100644
--- a/ui/src/data_explorer/containers/DataExplorer.js
+++ b/ui/src/data_explorer/containers/DataExplorer.js
@@ -109,7 +109,6 @@ class DataExplorer extends Component {
             actions={queryConfigActions}
             autoRefresh={autoRefresh}
             timeRange={timeRange}
-            isInDataExplorer={true}
             setActiveQueryIndex={::this.handleSetActiveQueryIndex}
             onDeleteQuery={::this.handleDeleteQuery}
             onAddQuery={::this.handleAddQuery}

From 74f464800ddd236f092e33a6b426271dd9b28984 Mon Sep 17 00:00:00 2001
From: Tim Raymond <tim@timraymond.com>
Date: Mon, 14 Aug 2017 13:13:39 -0400
Subject: [PATCH 53/62] Fix missing cell type

Because we are now creating new instances of dashboards when we create a
response, it's critical to copy every element of Dashboards from the
previous to the new instance.

We were not previously copying the Type field of cells, so this was
defaulting to the empty string zero value. This patch adds "Type" to the
tests and ensures that it's properly copied
---
 server/cells.go      | 1 +
 server/cells_test.go | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/server/cells.go b/server/cells.go
index 29c0bd57a2..29d78b000d 100644
--- a/server/cells.go
+++ b/server/cells.go
@@ -45,6 +45,7 @@ func newCellResponses(dID chronograf.DashboardID, dcells []chronograf.DashboardC
 		newCell.H = cell.H
 		newCell.Name = cell.Name
 		newCell.ID = cell.ID
+		newCell.Type = cell.Type
 
 		for _, lbl := range labels {
 			if axis, found := cell.Axes[lbl]; !found {
diff --git a/server/cells_test.go b/server/cells_test.go
index 5ca5dce5e1..c0ade6f5f7 100644
--- a/server/cells_test.go
+++ b/server/cells_test.go
@@ -105,6 +105,7 @@ func Test_Service_DashboardCells(t *testing.T) {
 					W:       4,
 					H:       4,
 					Name:    "CPU",
+					Type:    "bar",
 					Queries: []chronograf.DashboardQuery{},
 					Axes:    map[string]chronograf.Axis{},
 				},
@@ -117,6 +118,7 @@ func Test_Service_DashboardCells(t *testing.T) {
 					W:       4,
 					H:       4,
 					Name:    "CPU",
+					Type:    "bar",
 					Queries: []chronograf.DashboardQuery{},
 					Axes: map[string]chronograf.Axis{
 						"x": chronograf.Axis{

From 8573b99ed04176b67b4c043973218825176fae33 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 14 Aug 2017 10:43:24 -0700
Subject: [PATCH 54/62] Update CHANGELOG.md

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a34d7616b1..d04c7d2355 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## v1.3.6.0 [unreleased]
 ### Bug Fixes
-1. [#1715](https://github.com/influxdata/chronograf/pull/1715): Chronograf now renders properly on IE11.
+1. [#1715](https://github.com/influxdata/chronograf/pull/1715): Chronograf now renders on IE11.
 
 ### Features
 ### UI Improvements

From f89d95eb02c0c51adf98585760191c5d691673f0 Mon Sep 17 00:00:00 2001
From: Tim Raymond <tim@timraymond.com>
Date: Mon, 14 Aug 2017 14:03:40 -0400
Subject: [PATCH 55/62] Update CHANGELOG w/ fix for single stat

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ebaa98621..16a52aee3c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## v1.3.7.0 [unreleased]
 ### Bug Fixes
 1. [#1845](https://github.com/influxdata/chronograf/pull/1845): Fix no-scroll bar appearing in the Data Explorer table
+1. [#1866](https://github.com/influxdata/chronograf/pull/1866): Fix missing cell type (and consequently single-stat)
 
 ### Features
 

From 730be0434cb872889fa218c6bd5b3426df19e756 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 14 Aug 2017 14:02:21 -0700
Subject: [PATCH 56/62] Remove unused props

---
 ui/src/dashboards/components/QueryMaker.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index 169f9e230f..c5d20dc06f 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -17,7 +17,6 @@ const QueryMaker = ({
   actions,
   queries,
   timeRange,
-  templates,
   onAddQuery,
   activeQuery,
   onDeleteQuery,
@@ -44,12 +43,10 @@ const QueryMaker = ({
                 activeQuery.id,
                 actions.editRawTextAsync
               )}
-              templates={templates}
             />
             <SchemaExplorer
               query={activeQuery}
               actions={actions}
-              templates={templates}
               onAddQuery={onAddQuery}
             />
           </div>
@@ -71,11 +68,6 @@ QueryMaker.propTypes = {
     upper: string,
     lower: string,
   }).isRequired,
-  templates: arrayOf(
-    shape({
-      tempVar: string.isRequired,
-    })
-  ),
   isInDataExplorer: bool,
   actions: shape({
     chooseNamespace: func.isRequired,

From c02edbb85ed4eaf83ea8bad28b69d4125729d852 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 14 Aug 2017 14:15:48 -0700
Subject: [PATCH 57/62] Add templates back to query text editor

---
 ui/src/dashboards/components/QueryMaker.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index c5d20dc06f..82121047a2 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -17,6 +17,7 @@ const QueryMaker = ({
   actions,
   queries,
   timeRange,
+  templates,
   onAddQuery,
   activeQuery,
   onDeleteQuery,
@@ -43,6 +44,7 @@ const QueryMaker = ({
                 activeQuery.id,
                 actions.editRawTextAsync
               )}
+              templates={templates}
             />
             <SchemaExplorer
               query={activeQuery}
@@ -85,6 +87,11 @@ QueryMaker.propTypes = {
   activeQueryIndex: number,
   activeQuery: shape({}),
   onAddQuery: func.isRequired,
+  templates: arrayOf(
+    shape({
+      tempVar: string.isRequired,
+    })
+  ).isRequired,
 }
 
 export default QueryMaker

From d38d12c666a1d0efe0b3977c421d322c9f06ea7d Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 14 Aug 2017 14:17:34 -0700
Subject: [PATCH 58/62] Rename component

---
 ui/src/dashboards/components/QueryTextArea.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/dashboards/components/QueryTextArea.js b/ui/src/dashboards/components/QueryTextArea.js
index e8f7d08aac..8fe3bf39a1 100644
--- a/ui/src/dashboards/components/QueryTextArea.js
+++ b/ui/src/dashboards/components/QueryTextArea.js
@@ -12,7 +12,7 @@ import {
   unMask,
 } from 'src/dashboards/constants'
 
-class QueryEditor extends Component {
+class QueryTextArea extends Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -248,7 +248,7 @@ class QueryEditor extends Component {
 
 const {arrayOf, bool, func, shape, string} = PropTypes
 
-QueryEditor.propTypes = {
+QueryTextArea.propTypes = {
   query: string.isRequired,
   onUpdate: func.isRequired,
   config: shape().isRequired,
@@ -260,4 +260,4 @@ QueryEditor.propTypes = {
   ),
 }
 
-export default QueryEditor
+export default QueryTextArea

From 361a1cb3f9f1a369ce76ad374a7757c6aba7d55c Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 14 Aug 2017 14:20:46 -0700
Subject: [PATCH 59/62] Use spread instead of concat

---
 ui/src/dashboards/components/CellEditorOverlay.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index 8e62f12748..a5708abcd7 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/ui/src/dashboards/components/CellEditorOverlay.js
@@ -115,10 +115,13 @@ class CellEditorOverlay extends Component {
   handleAddQuery() {
     const {queriesWorkingDraft} = this.state
     const newIndex = queriesWorkingDraft.length
-    const newQuery = {...defaultQueryConfig(uuid.v4())}
-    const nextQueries = queriesWorkingDraft.concat(newQuery)
 
-    this.setState({queriesWorkingDraft: nextQueries})
+    this.setState({
+      queriesWorkingDraft: [
+        ...queriesWorkingDraft,
+        defaultQueryConfig(uuid.v4()),
+      ],
+    })
     this.handleSetActiveQueryIndex(newIndex)
   }
 

From 4e80460dff458d6a2ea7b61dd0e7e75fada7e23d Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 14 Aug 2017 14:23:07 -0700
Subject: [PATCH 60/62] Implicitly return from sfc

---
 ui/src/dashboards/components/QueryMaker.js | 63 +++++++++++-----------
 1 file changed, 30 insertions(+), 33 deletions(-)

diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index 82121047a2..95408ff600 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -23,39 +23,36 @@ const QueryMaker = ({
   onDeleteQuery,
   activeQueryIndex,
   setActiveQueryIndex,
-}) => {
-  return (
-    <div className="query-maker query-maker--panel">
-      <QueryTabList
-        queries={queries}
-        timeRange={timeRange}
-        onAddQuery={onAddQuery}
-        onDeleteQuery={onDeleteQuery}
-        activeQueryIndex={activeQueryIndex}
-        setActiveQueryIndex={setActiveQueryIndex}
-      />
-      {activeQuery && activeQuery.id
-        ? <div className="query-maker--tab-contents">
-            <QueryTextArea
-              query={buildText(activeQuery)}
-              config={activeQuery}
-              onUpdate={rawTextBinder(
-                links,
-                activeQuery.id,
-                actions.editRawTextAsync
-              )}
-              templates={templates}
-            />
-            <SchemaExplorer
-              query={activeQuery}
-              actions={actions}
-              onAddQuery={onAddQuery}
-            />
-          </div>
-        : <EmptyQuery onAddQuery={onAddQuery} />}
-    </div>
-  )
-}
+}) =>
+  <div className="query-maker query-maker--panel">
+    <QueryTabList
+      queries={queries}
+      timeRange={timeRange}
+      onAddQuery={onAddQuery}
+      onDeleteQuery={onDeleteQuery}
+      activeQueryIndex={activeQueryIndex}
+      setActiveQueryIndex={setActiveQueryIndex}
+    />
+    {activeQuery && activeQuery.id
+      ? <div className="query-maker--tab-contents">
+          <QueryTextArea
+            query={buildText(activeQuery)}
+            config={activeQuery}
+            onUpdate={rawTextBinder(
+              links,
+              activeQuery.id,
+              actions.editRawTextAsync
+            )}
+            templates={templates}
+          />
+          <SchemaExplorer
+            query={activeQuery}
+            actions={actions}
+            onAddQuery={onAddQuery}
+          />
+        </div>
+      : <EmptyQuery onAddQuery={onAddQuery} />}
+  </div>
 
 const {arrayOf, bool, func, number, shape, string} = PropTypes
 

From 934e474cd2d57ca81c5622727863248e00ea936a Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 14 Aug 2017 14:27:10 -0700
Subject: [PATCH 61/62] Move DB, Meas, and Field List components to /shared

---
 ui/src/dashboards/components/SchemaExplorer.js              | 6 +++---
 ui/src/kapacitor/components/DataSection.js                  | 6 +++---
 ui/src/{data_explorer => shared}/components/DatabaseList.js | 0
 ui/src/{data_explorer => shared}/components/FieldList.js    | 0
 .../{data_explorer => shared}/components/MeasurementList.js | 0
 5 files changed, 6 insertions(+), 6 deletions(-)
 rename ui/src/{data_explorer => shared}/components/DatabaseList.js (100%)
 rename ui/src/{data_explorer => shared}/components/FieldList.js (100%)
 rename ui/src/{data_explorer => shared}/components/MeasurementList.js (100%)

diff --git a/ui/src/dashboards/components/SchemaExplorer.js b/ui/src/dashboards/components/SchemaExplorer.js
index 1b9b6087af..24089aa23b 100644
--- a/ui/src/dashboards/components/SchemaExplorer.js
+++ b/ui/src/dashboards/components/SchemaExplorer.js
@@ -1,8 +1,8 @@
 import React, {PropTypes} from 'react'
 
-import DatabaseList from 'src/data_explorer/components/DatabaseList'
-import MeasurementList from 'src/data_explorer/components/MeasurementList'
-import FieldList from 'src/data_explorer/components/FieldList'
+import DatabaseList from 'src/shared/components/DatabaseList'
+import MeasurementList from 'src/shared/components/MeasurementList'
+import FieldList from 'src/shared/components/FieldList'
 
 const actionBinder = (id, action) => item => action(id, item)
 
diff --git a/ui/src/kapacitor/components/DataSection.js b/ui/src/kapacitor/components/DataSection.js
index 00946d5f44..88e73a3b34 100644
--- a/ui/src/kapacitor/components/DataSection.js
+++ b/ui/src/kapacitor/components/DataSection.js
@@ -2,9 +2,9 @@ import React, {PropTypes} from 'react'
 import buildInfluxQLQuery from 'utils/influxql'
 import classnames from 'classnames'
 
-import DatabaseList from '../../data_explorer/components/DatabaseList'
-import MeasurementList from '../../data_explorer/components/MeasurementList'
-import FieldList from '../../data_explorer/components/FieldList'
+import DatabaseList from 'src/shared/components/DatabaseList'
+import MeasurementList from 'src/shared/components/MeasurementList'
+import FieldList from 'src/shared/components/FieldList'
 
 import {defaultEveryFrequency} from 'src/kapacitor/constants'
 
diff --git a/ui/src/data_explorer/components/DatabaseList.js b/ui/src/shared/components/DatabaseList.js
similarity index 100%
rename from ui/src/data_explorer/components/DatabaseList.js
rename to ui/src/shared/components/DatabaseList.js
diff --git a/ui/src/data_explorer/components/FieldList.js b/ui/src/shared/components/FieldList.js
similarity index 100%
rename from ui/src/data_explorer/components/FieldList.js
rename to ui/src/shared/components/FieldList.js
diff --git a/ui/src/data_explorer/components/MeasurementList.js b/ui/src/shared/components/MeasurementList.js
similarity index 100%
rename from ui/src/data_explorer/components/MeasurementList.js
rename to ui/src/shared/components/MeasurementList.js

From 42f1f68f40d952a188c907e9fb1411104aa15f7b Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 14 Aug 2017 14:29:11 -0700
Subject: [PATCH 62/62] Move SchemaExplorer to shared dir

---
 ui/src/dashboards/components/QueryMaker.js                 | 2 +-
 ui/src/data_explorer/components/QueryMaker.js              | 2 +-
 ui/src/{dashboards => shared}/components/SchemaExplorer.js | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename ui/src/{dashboards => shared}/components/SchemaExplorer.js (100%)

diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js
index 95408ff600..015d728535 100644
--- a/ui/src/dashboards/components/QueryMaker.js
+++ b/ui/src/dashboards/components/QueryMaker.js
@@ -3,7 +3,7 @@ import React, {PropTypes} from 'react'
 import EmptyQuery from 'src/shared/components/EmptyQuery'
 import QueryTabList from 'src/shared/components/QueryTabList'
 import QueryTextArea from 'src/dashboards/components/QueryTextArea'
-import SchemaExplorer from 'src/dashboards/components/SchemaExplorer'
+import SchemaExplorer from 'src/shared/components/SchemaExplorer'
 import buildInfluxQLQuery from 'utils/influxql'
 
 const TEMPLATE_RANGE = {upper: null, lower: ':dashboardTime:'}
diff --git a/ui/src/data_explorer/components/QueryMaker.js b/ui/src/data_explorer/components/QueryMaker.js
index aa755ff2df..66ceb3609c 100644
--- a/ui/src/data_explorer/components/QueryMaker.js
+++ b/ui/src/data_explorer/components/QueryMaker.js
@@ -3,7 +3,7 @@ import React, {PropTypes} from 'react'
 import QueryEditor from './QueryEditor'
 import EmptyQuery from 'src/shared/components/EmptyQuery'
 import QueryTabList from 'src/shared/components/QueryTabList'
-import SchemaExplorer from 'src/dashboards/components/SchemaExplorer'
+import SchemaExplorer from 'src/shared/components/SchemaExplorer'
 import buildInfluxQLQuery from 'utils/influxql'
 
 const rawTextBinder = (links, id, action) => text =>
diff --git a/ui/src/dashboards/components/SchemaExplorer.js b/ui/src/shared/components/SchemaExplorer.js
similarity index 100%
rename from ui/src/dashboards/components/SchemaExplorer.js
rename to ui/src/shared/components/SchemaExplorer.js