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

WIP Move timeFormat and fieldNames/fieldOptions outside of tableOptions in the client

pull/10616/head
Iris Scholten 2018-04-19 18:57:22 -07:00
parent a0adb2e206
commit 265897d17b
10 changed files with 134 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/src/dashboards/actions/cellEditorOverlay.js
View File

@ -64,3 +64,10 @@ export const updateLineColors = lineColors => ({
lineColors,
},
})
export const updateDisplayOptions = update => ({
type: 'UPDATE_DISPLAY_OPTIONS',
payload: {
update,
},
})

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

@ -14,7 +14,10 @@ import _ from 'lodash'
import ThresholdsList from 'src/shared/components/ThresholdsList'
import ThresholdsListTypeToggle from 'src/shared/components/ThresholdsListTypeToggle'
import {updateTableOptions} from 'src/dashboards/actions/cellEditorOverlay'
import {
updateTableOptions,
updateDisplayOptions,
} from 'src/dashboards/actions/cellEditorOverlay'
import {TIME_FIELD_DEFAULT} from 'src/shared/constants/tableGraph'
import {QueryConfig} from 'src/types/query'
import {ErrorHandling} from 'src/shared/decorators/errors'
@ -31,17 +34,18 @@ interface RenamableField {
}
interface Options {
timeFormat: string
verticalTimeAxis: boolean
sortBy: RenamableField
fieldNames: RenamableField[]
fixFirstColumn: boolean
}
interface Props {
queryConfigs: QueryConfig[]
handleUpdateTableOptions: (options: Options) => void
handleUpdateDisplayOptions: (displayOption: string | RenamableField[]) => void
tableOptions: Options
fieldOptions: RenamableField[]
timeFormat: string
onResetFocus: () => void
}
@ -53,10 +57,9 @@ export class TableOptions extends PureComponent<Props, {}> {
}
public componentWillMount() {
const {handleUpdateTableOptions, tableOptions} = this.props
handleUpdateTableOptions({
...tableOptions,
fieldNames: this.computedFieldNames,
const {handleUpdateDisplayOptions, tableOptions} = this.props
handleUpdateDisplayOptions({
fieldOptions: this.computedFieldOptions,
})
}
@ -72,12 +75,14 @@ export class TableOptions extends PureComponent<Props, {}> {
public render() {
const {
tableOptions: {timeFormat, fieldNames, verticalTimeAxis, fixFirstColumn},
tableOptions: {verticalTimeAxis, fixFirstColumn},
fieldOptions,
timeFormat,
onResetFocus,
tableOptions,
} = this.props
const tableSortByOptions = fieldNames.map(field => ({
const tableSortByOptions = fieldOptions.map(field => ({
key: field.internalName,
text: field.displayName || field.internalName,
}))
@ -109,7 +114,7 @@ export class TableOptions extends PureComponent<Props, {}> {
/>
</div>
<GraphOptionsCustomizeFields
fields={fieldNames}
fields={fieldOptions}
onFieldUpdate={this.handleFieldUpdate}
moveField={this.moveField}
/>
@ -122,21 +127,21 @@ export class TableOptions extends PureComponent<Props, {}> {
)
}
private get fieldNames() {
const {tableOptions: {fieldNames}} = this.props
return fieldNames || []
private get fieldOptions() {
return this.props.fieldOptions || []
}
private get timeField() {
return (
this.fieldNames.find(f => f.internalName === 'time') || TIME_FIELD_DEFAULT
this.fieldOptions.find(f => f.internalName === 'time') ||
TIME_FIELD_DEFAULT
)
}
private moveField(dragIndex, hoverIndex) {
const {handleUpdateTableOptions, tableOptions} = this.props
const {fieldNames} = tableOptions
const fields = fieldNames.length > 1 ? fieldNames : this.computedFieldNames
const {handleUpdateDisplayOptions, tableOptions, fieldOptions} = this.props
const fields =
fieldOptions.length > 1 ? fieldOptions : this.computedFieldOptions
const dragField = fields[dragIndex]
const removedFields = _.concat(
@ -148,19 +153,18 @@ export class TableOptions extends PureComponent<Props, {}> {
[dragField],
_.slice(removedFields, hoverIndex)
)
handleUpdateTableOptions({
...tableOptions,
fieldNames: addedFields,
handleUpdateDisplayOptions({
fieldOptions: addedFields,
})
}
private get computedFieldNames() {
private get computedFieldOptions() {
const {queryConfigs} = this.props
const queryFields = _.flatten(
queryConfigs.map(({measurement, fields}) => {
return fields.map(({alias}) => {
const internalName = `${measurement}.${alias}`
const existing = this.fieldNames.find(
const existing = this.fieldOptions.find(
c => c.internalName === internalName
)
return existing || {internalName, displayName: '', visible: true}
@ -183,8 +187,8 @@ export class TableOptions extends PureComponent<Props, {}> {
}
private handleTimeFormatChange = timeFormat => {
const {tableOptions, handleUpdateTableOptions} = this.props
handleUpdateTableOptions({...tableOptions, timeFormat})
const {handleUpdateDisplayOptions} = this.props
handleUpdateDisplayOptions({timeFormat})
}
private handleToggleVerticalTimeAxis = verticalTimeAxis => () => {
@ -199,9 +203,14 @@ export class TableOptions extends PureComponent<Props, {}> {
}
private handleFieldUpdate = field => {
const {handleUpdateTableOptions, tableOptions} = this.props
const {sortBy, fieldNames} = tableOptions
const updatedFields = fieldNames.map(
const {
handleUpdateTableOptions,
handleUpdateDisplayOptions,
tableOptions,
fieldOptions,
} = this.props
const {sortBy} = tableOptions
const updatedFields = fieldOptions.map(
f => (f.internalName === field.internalName ? field : f)
)
const updatedSortBy =
@ -211,18 +220,28 @@ export class TableOptions extends PureComponent<Props, {}> {
handleUpdateTableOptions({
...tableOptions,
fieldNames: updatedFields,
sortBy: updatedSortBy,
})
handleUpdateDisplayOptions({
fieldOptions: updatedFields,
})
}
}
const mapStateToProps = ({cellEditorOverlay: {cell: {tableOptions}}}) => ({
const mapStateToProps = ({
cellEditorOverlay: {cell: {tableOptions, timeFormat, fieldOptions}},
}) => ({
tableOptions,
timeFormat,
fieldOptions,
})
const mapDispatchToProps = dispatch => ({
handleUpdateTableOptions: bindActionCreators(updateTableOptions, dispatch),
handleUpdateDisplayOptions: bindActionCreators(
updateDisplayOptions,
dispatch
),
})
export default connect(mapStateToProps, mapDispatchToProps)(TableOptions)

16
ui/src/dashboards/components/Visualization.js
View File

@ -24,6 +24,8 @@ const DashVisualization = (
staticLegend,
thresholdsListColors,
tableOptions,
timeFormat,
fieldOptions,
},
{source: {links: {proxy}}}
) => {
@ -49,6 +51,8 @@ const DashVisualization = (
editQueryStatus={editQueryStatus}
resizerTopHeight={resizerTopHeight}
staticLegend={staticLegend}
timeFormat={timeFormat}
fieldOptions={fieldOptions}
/>
</div>
</div>
@ -73,6 +77,14 @@ DashVisualization.propTypes = {
}),
}),
tableOptions: shape({}),
timeFormat: string.isRequired,
fieldOptions: arrayOf(
shape({
internalName: string.isRequired,
displayName: string.isRequired,
visible: string.isRequired,
})
),
resizerTopHeight: number,
thresholdsListColors: colorsNumberSchema,
gaugeColors: colorsNumberSchema,
@ -93,7 +105,7 @@ const mapStateToProps = ({
thresholdsListColors,
gaugeColors,
lineColors,
cell: {type, axes, tableOptions},
cell: {type, axes, tableOptions, fieldOptions, timeFormat},
},
}) => ({
gaugeColors,
@ -102,6 +114,8 @@ const mapStateToProps = ({
type,
axes,
tableOptions,
fieldOptions,
timeFormat,
})
export default connect(mapStateToProps, null)(DashVisualization)

6
ui/src/dashboards/reducers/cellEditorOverlay.js
View File

@ -116,6 +116,12 @@ export default function cellEditorOverlay(state = initialState, action) {
return {...state, lineColors}
}
case 'UPDATE_DISPLAY_OPTIONS': {
const {update} = action.payload
const cell = {...state.cell, ...update}
return {...state, cell}
}
}
return state

13
ui/src/shared/components/Layout.js
View File

@ -45,7 +45,16 @@ const Layout = (
{
host,
cell,
cell: {h, axes, type, colors, legend, tableOptions},
cell: {
h,
axes,
type,
colors,
legend,
timeFormat,
fieldOptions,
tableOptions,
},
source,
sources,
onZoom,
@ -85,6 +94,8 @@ const Layout = (
axes={axes}
type={type}
tableOptions={tableOptions}
fieldOptions={fieldOptions}
timeFormat={timeFormat}
staticLegend={IS_STATIC_LEGEND(legend)}
cellHeight={h}
onZoom={onZoom}

12
ui/src/shared/components/RefreshingGraph.js
View File

@ -33,6 +33,8 @@ const RefreshingGraph = ({
timeRange,
cellHeight,
autoRefresh,
fieldOptions,
timeFormat,
resizerTopHeight,
staticLegend,
manualRefresh, // when changed, re-mounts the component
@ -101,6 +103,8 @@ const RefreshingGraph = ({
cellHeight={cellHeight}
resizeCoords={resizeCoords}
tableOptions={tableOptions}
fieldOptions={fieldOptions}
timeFormat={timeFormat}
resizerTopHeight={resizerTopHeight}
handleSetHoverTime={handleSetHoverTime}
/>
@ -159,6 +163,14 @@ RefreshingGraph.propTypes = {
cellID: string,
inView: bool,
tableOptions: shape({}),
fieldOptions: arrayOf(
shape({
internalName: string.isRequired,
displayName: string.isRequired,
visible: bool.isRequired,
})
),
timeFormat: string.isRequired,
hoverTime: string.isRequired,
handleSetHoverTime: func.isRequired,
}

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

@ -61,12 +61,9 @@ class TableGraph extends Component {
const {sortField, sortDirection} = this.state
const {
tableOptions: {
sortBy: {internalName},
fieldNames,
verticalTimeAxis,
tableOptions: {sortBy: {internalName}, verticalTimeAxis},
timeFormat,
},
fieldOptions,
} = nextProps
let direction, sortFieldName
@ -91,7 +88,7 @@ class TableGraph extends Component {
sortFieldName,
direction,
verticalTimeAxis,
fieldNames,
fieldOptions,
timeFormat
)
@ -166,7 +163,7 @@ class TableGraph extends Component {
const {tableOptions} = this.props
const {data, sortField, sortDirection} = this.state
const verticalTimeAxis = _.get(tableOptions, 'verticalTimeAxis', true)
const fieldNames = _.get(tableOptions, 'fieldNames', [TIME_FIELD_DEFAULT])
const fieldOptions = _.get(this.props, 'fieldOptions', [TIME_FIELD_DEFAULT])
let direction
if (fieldName === sortField) {
@ -180,7 +177,7 @@ class TableGraph extends Component {
fieldName,
direction,
verticalTimeAxis,
fieldNames
fieldOptions
)
this.setState({
@ -226,22 +223,25 @@ class TableGraph extends Component {
sortField,
sortDirection,
} = this.state
const {tableOptions, colors} = parent.props
const {
tableOptions,
fieldOptions = [TIME_FIELD_DEFAULT],
colors,
} = parent.props
const {
timeFormat = TIME_FORMAT_DEFAULT,
verticalTimeAxis = VERTICAL_TIME_AXIS_DEFAULT,
fixFirstColumn = FIX_FIRST_COLUMN_DEFAULT,
fieldNames = [TIME_FIELD_DEFAULT],
} = tableOptions
const cellData = processedData[rowIndex][columnIndex]
const timeFieldIndex = fieldNames.findIndex(
const timeFieldIndex = fieldOptions.findIndex(
field => field.internalName === TIME_FIELD_DEFAULT.internalName
)
const visibleTime = _.get(fieldNames, [timeFieldIndex, 'visible'], true)
const visibleTime = _.get(fieldOptions, [timeFieldIndex, 'visible'], true)
const isFixedRow = rowIndex === 0 && columnIndex > 0
const isFixedColumn = fixFirstColumn && rowIndex > 0 && columnIndex === 0
@ -277,7 +277,7 @@ class TableGraph extends Component {
}
const foundField =
isFieldName && fieldNames.find(field => field.internalName === cellData)
isFieldName && fieldOptions.find(field => field.internalName === cellData)
const fieldName =
foundField && (foundField.displayName || foundField.internalName)
@ -394,7 +394,6 @@ class TableGraph extends Component {
TableGraph.propTypes = {
data: arrayOf(shape()),
tableOptions: shape({
timeFormat: string.isRequired,
verticalTimeAxis: bool.isRequired,
sortBy: shape({
internalName: string.isRequired,
@ -402,15 +401,16 @@ TableGraph.propTypes = {
visible: bool.isRequired,
}).isRequired,
wrapping: string.isRequired,
fieldNames: arrayOf(
fixFirstColumn: bool,
}),
timeFormat: string.isRequired,
fieldOptions: arrayOf(
shape({
internalName: string.isRequired,
displayName: string.isRequired,
visible: bool.isRequired,
})
).isRequired,
fixFirstColumn: bool,
}),
hoverTime: string,
handleSetHoverTime: func,
colors: colorsStringSchema,

2
ui/src/shared/constants/tableGraph.js
View File

@ -36,9 +36,7 @@ export const FORMAT_OPTIONS = [
export const DEFAULT_TABLE_OPTIONS = {
verticalTimeAxis: VERTICAL_TIME_AXIS_DEFAULT,
timeFormat: TIME_FORMAT_DEFAULT,
sortBy: TIME_FIELD_DEFAULT,
wrapping: 'truncate',
fieldNames: [TIME_FIELD_DEFAULT],
fixFirstColumn: FIX_FIRST_COLUMN_DEFAULT,
}

18
ui/src/utils/timeSeriesTransformers.js
View File

@ -184,12 +184,14 @@ export const timeSeriesToTableGraph = raw => {
}
}
export const filterTableColumns = (data, fieldNames) => {
export const filterTableColumns = (data, fieldOptions) => {
const visibility = {}
const filteredData = map(data, (row, i) => {
return filter(row, (col, j) => {
if (i === 0) {
const foundField = fieldNames.find(field => field.internalName === col)
const foundField = fieldOptions.find(
field => field.internalName === col
)
visibility[j] = foundField ? foundField.visible : true
}
return visibility[j]
@ -198,8 +200,8 @@ export const filterTableColumns = (data, fieldNames) => {
return filteredData[0].length ? filteredData : [[]]
}
export const orderTableColumns = (data, fieldNames) => {
const fieldsSortOrder = fieldNames.map(fieldName => {
export const orderTableColumns = (data, fieldOptions) => {
const fieldsSortOrder = fieldOptions.map(fieldName => {
return _.findIndex(data[0], dataLabel => {
return dataLabel === fieldName.internalName
})
@ -216,7 +218,7 @@ export const processTableData = (
sortFieldName,
direction,
verticalTimeAxis,
fieldNames,
fieldOptions,
timeFormat
) => {
const sortIndex = _.indexOf(data[0], sortFieldName)
@ -225,12 +227,12 @@ export const processTableData = (
..._.orderBy(_.drop(data, 1), sortIndex, [direction]),
]
const sortedTimeVals = map(sortedData, r => r[0])
const filteredData = filterTableColumns(sortedData, fieldNames)
const orderedData = orderTableColumns(filteredData, fieldNames)
const filteredData = filterTableColumns(sortedData, fieldOptions)
const orderedData = orderTableColumns(filteredData, fieldOptions)
const processedData = verticalTimeAxis ? orderedData : _.unzip(orderedData)
const {widths: columnWidths, totalWidths} = calculateColumnWidths(
processedData,
fieldNames,
fieldOptions,
timeFormat,
verticalTimeAxis
)

4
ui/test/dashboards/components/TableOptions.test.tsx
View File

@ -16,12 +16,12 @@ const defaultProps = {
queryConfigs: [],
tableOptions: {
columnNames: [],
fieldNames: [],
fixFirstColumn: true,
sortBy: {displayName: '', internalName: '', visible: true},
timeFormat: '',
verticalTimeAxis: true,
},
fieldOptions: [],
timeFormat: '',
}
const setup = (override = {}) => {