Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Connect TableGraph to redux, update fieldNames if query changes.

table/group-by
ebb-tide 2018-04-20 13:50:03 -07:00
parent 5131b2cdd1
commit ee33fc817c
2 changed files with 74 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
ui/src/dashboards/components/TableOptions.tsx
View File

@ -15,7 +15,6 @@ import ThresholdsList from 'src/shared/components/ThresholdsList'
import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle'
import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay'
import {computeFieldNames} from 'src/dashboards/utils/tableGraph'
import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph'
import {QueryConfig} from 'src/types/query'
@ -77,37 +76,6 @@ export class TableOptions extends PureComponent<Props, {}> {
this.moveField = this.moveField.bind(this)
}
public componentWillMount() {
const {handleUpdateTableOptions, tableOptions} = this.props
handleUpdateTableOptions({
...tableOptions,
fieldNames: computeFieldNames([], this.props.queryASTs),
})
}
public shouldComponentUpdate(nextProps) {
const {tableOptions, queryASTs} = this.props
const tableOptionsDifferent = !_.isEqual(
tableOptions,
nextProps.tableOptions
)
const queryASTsDifferent = !_.isEqual(queryASTs, nextProps.queryASTs)
return tableOptionsDifferent || queryASTsDifferent
}
public componentWillReceiveProps(nextProps) {
const {queryASTs, handleUpdateTableOptions, tableOptions} = this.props
if (!_.isEqual(queryASTs, nextProps.queryASTs)) {
handleUpdateTableOptions({
...tableOptions,
fieldNames: computeFieldNames(
tableOptions.fieldNames,
this.props.queryASTs
),
})
}
}
public render() {
const {
tableOptions: {timeFormat, fieldNames, verticalTimeAxis, fixFirstColumn},
@ -160,17 +128,6 @@ export class TableOptions extends PureComponent<Props, {}> {
)
}
// private get fieldNames() {
// const {tableOptions: {fieldNames}} = this.props
// return fieldNames || []
// }
// private get timeField() {
// return (
// this.fieldNames.find(f => f.internalName === 'time') || TIME_FIELD_DEFAULT
// )
// }
private moveField(dragIndex, hoverIndex) {
const {handleUpdateTableOptions, tableOptions} = this.props
const {fieldNames} = tableOptions
@ -191,32 +148,6 @@ export class TableOptions extends PureComponent<Props, {}> {
})
}
// private get computedFieldNames() {
// const {queryASTs} = this.props
// const existingFieldNames = this.fieldNames
// let astNames = [this.timeField]
// queryASTs.forEach(q => {
// const {fields, sources} = q
// const {name: sourceName} = sources[0]
// fields.forEach(f => {
// const {alias, column: {val}} = f
// const value = val || alias
// const internalName = `${sourceName}.${value}`
// const field = {internalName, displayName: '', visible: true}
// astNames = [...astNames, field]
// })
// })
//
// const intersection = existingFieldNames.filter(f => {
// return astNames.find(a => a.internalName === f.internalName)
// })
//
// const newFields = astNames.filter(a => {
// return !existingFieldNames.find(f => f.internalName === a.internalName)
// })
// return [...intersection, ...newFields]
// }
private handleChooseSortBy = (option: Option) => {
const {tableOptions, handleUpdateTableOptions} = this.props
const sortBy = {

113
ui/src/shared/components/TableGraph.js
View File

@ -2,8 +2,10 @@ import React, {Component} from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'
import classnames from 'classnames'
import {connect} from 'react-redux'
import {MultiGrid, ColumnSizer} from 'react-virtualized'
import {bindActionCreators} from 'redux'
import moment from 'moment'
import {reduce} from 'fast.js'
@ -12,6 +14,7 @@ import {
processTableData,
} from 'src/utils/timeSeriesTransformers'
import {computeFieldNames} from 'src/dashboards/utils/tableGraph'
import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay'
import {
NULL_ARRAY_INDEX,
@ -55,26 +58,44 @@ class TableGraph extends Component {
const updatedProps = _.keys(nextProps).filter(
k => !_.isEqual(this.props[k], nextProps[k])
)
const {sortField, sortDirection} = this.state
const {tableOptions, handleUpdateTableOptions} = nextProps
const {
sortBy: {internalName},
fieldNames,
verticalTimeAxis,
timeFormat,
} = tableOptions
const {data, sortedLabels} =
_.includes(updatedProps, 'data') || _.includes(updatedProps, 'queryASTs')
? timeSeriesToTableGraph(nextProps.data, nextProps.queryASTs)
: this.state
let data
let sortedLabels
let computedFieldNames
if (
_.includes(updatedProps, 'data') ||
_.includes(updatedProps, 'queryASTs')
) {
const returned = timeSeriesToTableGraph(
nextProps.data,
nextProps.queryASTs
)
data = returned.data
sortedLabels = returned.sortedLabels
computedFieldNames = computeFieldNames(fieldNames, sortedLabels)
handleUpdateTableOptions({
...tableOptions,
fieldNames: computedFieldNames,
})
} else {
data = this.state.data
sortedLabels = this.state.sortedLabels
computedFieldNames = computeFieldNames(fieldNames, sortedLabels)
}
if (_.isEmpty(data[0])) {
return
}
const {sortField, sortDirection} = this.state
const {
tableOptions: {
sortBy: {internalName},
fieldNames,
verticalTimeAxis,
timeFormat,
},
} = nextProps
const computedFieldNames = computeFieldNames(fieldNames, sortedLabels)
// MUST UPDATE FIELD NAMES HERE.
let direction, sortFieldName
if (
_.get(this.props, ['tableOptions', 'sortBy', 'internalName'], '') ===
@ -86,30 +107,35 @@ class TableGraph extends Component {
direction = DEFAULT_SORT
sortFieldName = internalName
}
if (
_.includes(updatedProps, 'data') ||
_.includes(updatedProps, 'tableOptions')
) {
const {
processedData,
sortedTimeVals,
columnWidths,
totalWidths,
} = processTableData(
data,
sortFieldName,
direction,
verticalTimeAxis,
computedFieldNames,
timeFormat
)
const {
processedData,
sortedTimeVals,
columnWidths,
totalWidths,
} = processTableData(
data,
sortFieldName,
direction,
verticalTimeAxis,
computedFieldNames,
timeFormat
)
this.setState({
data,
sortedLabels,
processedData,
sortedTimeVals,
sortField: sortFieldName,
sortDirection: direction,
columnWidths,
totalColumnWidths: totalWidths,
})
this.setState({
data,
sortedLabels,
processedData,
sortedTimeVals,
sortField: sortFieldName,
sortDirection: direction,
columnWidths,
totalColumnWidths: totalWidths,
})
}
}
calcScrollToColRow = () => {
@ -421,9 +447,18 @@ TableGraph.propTypes = {
fixFirstColumn: bool,
}),
hoverTime: string,
handleUpdateTableOptions: func,
handleSetHoverTime: func,
colors: colorsStringSchema,
queryASTs: arrayOf(shape()),
}
export default TableGraph
const mapStateToProps = () => {
return {}
}
const mapDispatchToProps = dispatch => ({
handleUpdateTableOptions: bindActionCreators(updateTableOptions, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(TableGraph)