introduce visible as prop to CustomizableColumns and remove duplicate constants

ui/src/dashboards/components/GraphOptionsCustomizableColumn.tsx

@@ -5,11 +5,13 @@ import InputClickToEdit from 'src/shared/components/InputClickToEdit'
 type Column = {
   internalName: string
   displayName: string
+  visible: boolean
 }
 
 interface Props {
   internalName: string
   displayName: string
+  visible: boolean
   onColumnRename: (column: Column) => void
 }
 
@@ -18,19 +20,30 @@ class GraphOptionsCustomizableColumn extends PureComponent<Props, {}> {
     super(props)
 
     this.handleColumnRename = this.handleColumnRename.bind(this)
+    this.handleToggleVisible = this.handleToggleVisible.bind(this)
   }
 
-  handleColumnRename(rename) {
-    const {onColumnRename, internalName} = this.props
-    onColumnRename({internalName, displayName: rename})
+  handleColumnRename(rename: string) {
+    const {onColumnRename, internalName, visible} = this.props
+    onColumnRename({internalName, displayName: rename, visible})
+  }
+
+  handleToggleVisible() {
+    const {onColumnRename, internalName, displayName, visible} = this.props
+    onColumnRename({internalName, displayName, visible: !visible})
   }
 
   render() {
-    const {internalName, displayName} = this.props
+    const {internalName, displayName, visible} = this.props
+    console.log('VISIBLE:', visible)
 
     return (
       <div className="column-controls--section">
-        <div className="column-controls--label">
+        <div
+          className="column-controls--label"
+          onClick={this.handleToggleVisible}
+        >
+          <span className="icon eye" />
           {internalName}
         </div>
         <InputClickToEdit

ui/src/dashboards/components/GraphOptionsCustomizeColumns.tsx

@@ -6,6 +6,7 @@ import uuid from 'uuid'
 type Column = {
   internalName: string
   displayName: string
+  visible: boolean
 }
 
 interface Props {
@@ -26,6 +27,7 @@ const GraphOptionsCustomizeColumns: SFC<Props> = ({
             key={uuid.v4()}
             internalName={col.internalName}
             displayName={col.displayName}
+            visible={col.visible}
             onColumnRename={onColumnRename}
           />
         )

ui/src/dashboards/reducers/cellEditorOverlay.js

@@ -11,6 +11,8 @@ import {
 
 import {initializeOptions} from 'src/dashboards/constants/cellEditor'
 
+import {initializeOptions} from 'src/shared/constants/tableGraph'
+
 export const initialState = {
   cell: null,
   thresholdsListType: THRESHOLD_TYPE_TEXT,

ui/src/shared/constants/tableGraph.js

@@ -6,7 +6,11 @@ export const NULL_HOVER_TIME = '0'
 export const TIME_FORMAT_DEFAULT = 'MM/DD/YYYY HH:mm:ss.ss'
 export const TIME_FORMAT_CUSTOM = 'Custom'
 
-export const TIME_COLUMN_DEFAULT = {internalName: 'time', displayName: ''}
+export const TIME_COLUMN_DEFAULT = {
+  internalName: 'time',
+  displayName: '',
+  visible: true,
+}
 
 export const FIX_FIRST_COLUMN_DEFAULT = true
 

ui/src/shared/constants/thresholds.js

@@ -13,8 +13,6 @@ export const THRESHOLD_TYPE_TEXT = 'text'
 export const THRESHOLD_TYPE_BG = 'background'
 export const THRESHOLD_TYPE_BASE = 'base'
 
-export const TIME_FORMAT_DEFAULT = 'MM/DD/YYYY HH:mm:ss.ss'
-
 export const THRESHOLD_COLORS = [
   {
     hex: '#BF3D5E',
@@ -121,16 +119,6 @@ export const DEFAULT_THRESHOLDS_LIST_COLORS = [
   },
 ]
 
-export const DEFAULT_TABLE_COLORS = [
-  {
-    type: THRESHOLD_TYPE_BG,
-    hex: THRESHOLD_COLORS[18].hex,
-    id: THRESHOLD_TYPE_BASE,
-    name: THRESHOLD_COLORS[18].name,
-    value: 0,
-  },
-]
-
 export const validateThresholdsListColors = (colors, type) => {
   if (!colors || colors.length === 0) {
     return DEFAULT_THRESHOLDS_LIST_COLORS