add logic for renaming table columns in tableoptiomns

ui/src/dashboards/components/GraphOptionsCustomizableColumn.js

@@ -1,33 +1,45 @@
-import React from 'react'
+import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 
 import InputClickToEdit from 'shared/components/InputClickToEdit'
 
-const GraphOptionsCustomizableColumn = ({
-  originalColumnName,
-  newColumnName,
-  onColumnRename,
-}) => {
-  return (
-    <div className="column-controls--section">
-      <div className="column-controls--label">
-        {originalColumnName}
+class GraphOptionsCustomizableColumn extends Component {
+  constructor(props) {
+    super(props)
+
+    this.handleColumnRename = this.handleColumnRename.bind(this)
+  }
+
+  handleColumnRename(rename) {
+    const {onColumnRename, internalName} = this.props
+    onColumnRename({internalName, displayName: rename})
+  }
+
+  render() {
+    const {internalName, displayName} = this.props
+
+    return (
+      <div className="column-controls--section">
+        <div className="column-controls--label">
+          {internalName}
+        </div>
+        <InputClickToEdit
+          value={displayName}
+          wrapperClass="column-controls-input"
+          onBlur={this.handleColumnRename}
+          placeholder="Rename..."
+          appearAsNormalInput={true}
+        />
       </div>
-      <InputClickToEdit
-        value={newColumnName}
-        wrapperClass="column-controls-input"
-        onBlur={onColumnRename}
-        placeholder="Rename..."
-        appearAsNormalInput={true}
-      />
-    </div>
-  )
+    )
+  }
 }
+
 const {func, string} = PropTypes
 
 GraphOptionsCustomizableColumn.propTypes = {
-  originalColumnName: string,
-  newColumnName: string,
+  internalName: string,
+  displayName: string,
   onColumnRename: func,
 }
 

ui/src/dashboards/components/GraphOptionsCustomizeColumns.js

@@ -12,8 +12,8 @@ const GraphOptionsCustomizeColumns = ({columns, onColumnRename}) => {
         return (
           <GraphOptionsCustomizableColumn
             key={uuid.v4()}
-            originalColumnName={col.name}
-            newColumnName={col.newName}
+            internalName={col.internalName}
+            displayName={col.displayName}
             onColumnRename={onColumnRename}
           />
         )
@@ -26,8 +26,8 @@ const {arrayOf, func, shape, string} = PropTypes
 GraphOptionsCustomizeColumns.propTypes = {
   columns: arrayOf(
     shape({
-      name: string,
-      newName: string,
+      internalName: string,
+      displayName: string,
     })
   ),
   onColumnRename: func,

ui/src/dashboards/components/TableOptions.js

@@ -28,7 +28,34 @@ const formatColor = color => {
 }
 
 class TableOptions extends Component {
-  state = {TimeAxis: 'VERTICAL', TimeFormat: 'mm/dd/yyyy HH:mm:ss.ss'}
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      TimeAxis: 'VERTICAL',
+      TimeFormat: 'mm/dd/yyyy HH:mm:ss.ss',
+      columns: [],
+    }
+  }
+
+  componentWillMount() {
+    const {queries} = this.props
+    let columns = [{internalName: 'time', displayName: ''}]
+
+    for (let i = 0; i < queries.length; i++) {
+      const q = queries[i]
+      const measurement = q.queryConfig.measurement
+      const fields = q.queryConfig.fields
+      for (let j = 0; j < fields.length; j++) {
+        columns = [
+          ...columns,
+          {internalName: `${measurement}.${fields[j].alias}`, displayName: ''},
+        ]
+      }
+    }
+
+    this.setState({columns})
+  }
 
   handleToggleSingleStatType = () => {}
 
@@ -46,7 +73,13 @@ class TableOptions extends Component {
 
   handleToggleTextWrapping = () => {}
 
-  handleColumnRename = () => {}
+  handleColumnRename = column => {
+    // NOTE: should use redux state instead of component state
+    const columns = this.state.columns.map(
+      op => (op.internalName === column.internalName ? column : op)
+    )
+    this.setState({columns})
+  }
 
   handleUpdateColorValue = () => {}
 
@@ -59,27 +92,18 @@ class TableOptions extends Component {
       //   axes: {y: {prefix, suffix}},
     } = this.props
 
-    const {TimeFormat, TimeAxis} = this.state
+    const {TimeFormat, TimeAxis, columns} = this.state
 
-    const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS
-
-    const sortedColors = _.sortBy(singleStatColors, color => color.value)
-
-    const columns = [
-      'cpu.mean_usage_system',
-      'cpu.mean_usage_idle',
-      'cpu.mean_usage_user',
-    ].map(col => ({
-      text: col,
-      name: col,
-      newName: '',
-    }))
     const tableSortByOptions = [
       'cpu.mean_usage_system',
       'cpu.mean_usage_idle',
       'cpu.mean_usage_user',
     ].map(col => ({text: col}))
 
+    const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS
+
+    const sortedColors = _.sortBy(singleStatColors, color => color.value)
+
     return (
       <FancyScrollbar
         className="display-options--cell y-axis-controls"
@@ -152,14 +176,16 @@ TableOptions.propTypes = {
   handleUpdateSingleStatColors: func.isRequired,
   handleUpdateAxes: func.isRequired,
   axes: shape({}).isRequired,
+  queries: arrayOf(shape()),
 }
 
 const mapStateToProps = ({
-  cellEditorOverlay: {singleStatType, singleStatColors, cell: {axes}},
+  cellEditorOverlay: {singleStatType, singleStatColors, cell: {axes, queries}},
 }) => ({
   singleStatType,
   singleStatColors,
   axes,
+  queries,
 })
 
 const mapDispatchToProps = dispatch => ({

ui/src/shared/components/InputClickToEdit.js

@@ -1,108 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-
-class InputClickToEdit extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      isEditing: null,
-      value: this.props.value,
-    }
-  }
-
-  handleCancel = () => {
-    this.setState({
-      isEditing: false,
-      value: this.props.value,
-    })
-  }
-
-  handleInputClick = () => {
-    this.setState({isEditing: true})
-  }
-
-  handleInputBlur = e => {
-    const {onUpdate, value} = this.props
-
-    if (value !== e.target.value) {
-      onUpdate(e.target.value)
-    }
-
-    this.setState({isEditing: false, value: e.target.value})
-  }
-
-  handleKeyDown = e => {
-    if (e.key === 'Enter') {
-      this.handleInputBlur(e)
-    }
-    if (e.key === 'Escape') {
-      this.handleCancel()
-    }
-  }
-
-  handleFocus = e => {
-    e.target.select()
-  }
-
-  render() {
-    const {isEditing, value} = this.state
-    const {
-      wrapperClass: wrapper,
-      disabled,
-      tabIndex,
-      placeholder,
-      appearAsNormalInput,
-    } = this.props
-
-    const wrapperClass = `${wrapper}${appearAsNormalInput
-      ? ' input-cte__normal'
-      : ''}`
-    const defaultStyle = value ? 'input-cte' : 'input-cte__empty'
-
-    return disabled
-      ? <div className={wrapperClass}>
-          <div className="input-cte__disabled">
-            {value}
-          </div>
-        </div>
-      : <div className={wrapperClass}>
-          {isEditing
-            ? <input
-                type="text"
-                className="form-control input-sm provider--input"
-                defaultValue={value}
-                onBlur={this.handleInputBlur}
-                onKeyDown={this.handleKeyDown}
-                autoFocus={true}
-                onFocus={this.handleFocus}
-                ref={r => (this.inputRef = r)}
-                tabIndex={tabIndex}
-                spellCheck={false}
-              />
-            : <div
-                className={defaultStyle}
-                onClick={this.handleInputClick}
-                onFocus={this.handleInputClick}
-                tabIndex={tabIndex}
-              >
-                {value || placeholder}
-                {appearAsNormalInput || <span className="icon pencil" />}
-              </div>}
-        </div>
-  }
-}
-
-const {func, bool, number, string} = PropTypes
-
-InputClickToEdit.propTypes = {
-  wrapperClass: string.isRequired,
-  value: string,
-  onUpdate: func.isRequired,
-  disabled: bool,
-  tabIndex: number,
-  placeholder: string,
-  appearAsNormalInput: bool,
-}
-
-export default InputClickToEdit