From dda39c171f0452be6dd79dbbbd58d46ee6c800d1 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <andrew.watkinz@gmail.com>
Date: Tue, 25 Apr 2017 11:47:10 -0700
Subject: [PATCH] Not display TABLE toggle in CEO

---
 .../components/CellEditorOverlay.js           |  1 +
 ui/src/data_explorer/components/VisHeader.js  | 29 +++++++++----------
 .../data_explorer/components/Visualization.js | 20 ++++++++-----
 .../data_explorer/containers/DataExplorer.js  |  2 ++
 ui/src/shared/constants/index.js              |  4 +++
 5 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index cdf1b9ff3d..68728b27a9 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/ui/src/dashboards/components/CellEditorOverlay.js
@@ -160,6 +160,7 @@ class CellEditorOverlay extends Component {
             cellType={cellWorkingType}
             cellName={cellWorkingName}
             editQueryStatus={editQueryStatus}
+            views={[]}
           />
           <ResizeBottom>
             <div
diff --git a/ui/src/data_explorer/components/VisHeader.js b/ui/src/data_explorer/components/VisHeader.js
index bc0ff2dae4..b58848e77e 100644
--- a/ui/src/data_explorer/components/VisHeader.js
+++ b/ui/src/data_explorer/components/VisHeader.js
@@ -4,26 +4,25 @@ import classNames from 'classnames'
 const VisHeader = ({views, view, onToggleView, name}) => (
   <div className="graph-heading">
     <div className="graph-actions">
-      <ul className="toggle toggle-sm">
-        {views.map(v => (
-          <li
-            key={v}
-            onClick={() => onToggleView(v)}
-            className={classNames('toggle-btn ', {active: view === v})}>
-            {v}
-          </li>
-        ))}
-      </ul>
+      {views.length
+        ? <ul className="toggle toggle-sm">
+            {views.map(v => (
+              <li
+                key={v}
+                onClick={() => onToggleView(v)}
+                className={classNames('toggle-btn ', {active: view === v})}
+              >
+                {v}
+              </li>
+            ))}
+          </ul>
+        : null}
     </div>
     <div className="graph-title">{name}</div>
   </div>
 )
 
-const {
-  arrayOf,
-  func,
-  string,
-} = PropTypes
+const {arrayOf, func, string} = PropTypes
 
 VisHeader.propTypes = {
   views: arrayOf(string).isRequired,
diff --git a/ui/src/data_explorer/components/Visualization.js b/ui/src/data_explorer/components/Visualization.js
index cc8bd89a48..40c3d2789e 100644
--- a/ui/src/data_explorer/components/Visualization.js
+++ b/ui/src/data_explorer/components/Visualization.js
@@ -3,12 +3,9 @@ import buildInfluxQLQuery from 'utils/influxql'
 import classNames from 'classnames'
 import VisHeader from 'src/data_explorer/components/VisHeader'
 import VisView from 'src/data_explorer/components/VisView'
+import {GRAPH, TABLE} from 'src/shared/constants'
 
-const GRAPH = 'graph'
-const TABLE = 'table'
-const VIEWS = [GRAPH, TABLE]
-
-const {func, arrayOf, number, shape, string} = PropTypes
+const {arrayOf, func, number, shape, string} = PropTypes
 
 const Visualization = React.createClass({
   propTypes: {
@@ -24,6 +21,7 @@ const Visualization = React.createClass({
     height: string,
     heightPixels: number,
     editQueryStatus: func.isRequired,
+    views: arrayOf(string).isRequired,
   },
 
   contextTypes: {
@@ -49,6 +47,12 @@ const Visualization = React.createClass({
     }
   },
 
+  getDefaultProps() {
+    return {
+      cellName: '',
+    }
+  },
+
   componentWillReceiveProps(nextProps) {
     const {queryConfigs, activeQueryIndex} = nextProps
     if (
@@ -71,8 +75,10 @@ const Visualization = React.createClass({
 
   render() {
     const {
+      views,
       height,
       cellType,
+      cellName,
       timeRange,
       autoRefresh,
       heightPixels,
@@ -95,10 +101,10 @@ const Visualization = React.createClass({
     return (
       <div className="graph" style={{height}}>
         <VisHeader
-          views={VIEWS}
+          views={views}
           view={view}
           onToggleView={this.handleToggleView}
-          name={name || 'Graph'}
+          name={cellName}
         />
         <div
           className={classNames({
diff --git a/ui/src/data_explorer/containers/DataExplorer.js b/ui/src/data_explorer/containers/DataExplorer.js
index 12cdeb2f1e..7d8d81e427 100644
--- a/ui/src/data_explorer/containers/DataExplorer.js
+++ b/ui/src/data_explorer/containers/DataExplorer.js
@@ -11,6 +11,7 @@ import ResizeContainer, {
   ResizeBottom,
 } from 'src/shared/components/ResizeContainer'
 
+import {VIS_VIEWS} from 'src/shared/constants'
 import {setAutoRefresh} from 'shared/actions/app'
 import * as viewActions from 'src/data_explorer/actions/view'
 
@@ -107,6 +108,7 @@ const DataExplorer = React.createClass({
               queryConfigs={queryConfigs}
               activeQueryIndex={activeQueryIndex}
               editQueryStatus={queryConfigActions.editQueryStatus}
+              views={VIS_VIEWS}
             />
           </ResizeBottom>
         </ResizeContainer>
diff --git a/ui/src/shared/constants/index.js b/ui/src/shared/constants/index.js
index 6c78f9f106..6df02a514b 100644
--- a/ui/src/shared/constants/index.js
+++ b/ui/src/shared/constants/index.js
@@ -392,3 +392,7 @@ export const HTTP_UNAUTHORIZED = 401
 export const HTTP_FORBIDDEN = 403
 
 export const AUTOREFRESH_DEFAULT = 15000 // in milliseconds
+
+export const GRAPH = 'graph'
+export const TABLE = 'table'
+export const VIS_VIEWS = [GRAPH, TABLE]