From 265897d17bb0d89fcc9f2556723a869a1a0e82f2 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Thu, 19 Apr 2018 18:57:22 -0700 Subject: [PATCH] WIP Move timeFormat and fieldNames/fieldOptions outside of tableOptions in the client --- .../dashboards/actions/cellEditorOverlay.js | 7 ++ ui/src/dashboards/components/TableOptions.tsx | 77 ++++++++++++------- ui/src/dashboards/components/Visualization.js | 16 +++- .../dashboards/reducers/cellEditorOverlay.js | 6 ++ ui/src/shared/components/Layout.js | 13 +++- ui/src/shared/components/RefreshingGraph.js | 12 +++ ui/src/shared/components/TableGraph.js | 44 +++++------ ui/src/shared/constants/tableGraph.js | 2 - ui/src/utils/timeSeriesTransformers.js | 18 +++-- .../components/TableOptions.test.tsx | 4 +- 10 files changed, 134 insertions(+), 65 deletions(-) diff --git a/ui/src/dashboards/actions/cellEditorOverlay.js b/ui/src/dashboards/actions/cellEditorOverlay.js index f9efe0de08..dae56aa318 100644 --- a/ui/src/dashboards/actions/cellEditorOverlay.js +++ b/ui/src/dashboards/actions/cellEditorOverlay.js @@ -64,3 +64,10 @@ export const updateLineColors = lineColors => ({ lineColors, }, }) + +export const updateDisplayOptions = update => ({ + type: 'UPDATE_DISPLAY_OPTIONS', + payload: { + update, + }, +}) diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index eb4f872c32..f9025bc50c 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -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 { } 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 { 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 { /> @@ -122,21 +127,21 @@ export class TableOptions extends PureComponent { ) } - 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 { [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 { } 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 { } 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 { 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) diff --git a/ui/src/dashboards/components/Visualization.js b/ui/src/dashboards/components/Visualization.js index 82cf5ce831..750accbad8 100644 --- a/ui/src/dashboards/components/Visualization.js +++ b/ui/src/dashboards/components/Visualization.js @@ -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} /> @@ -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) diff --git a/ui/src/dashboards/reducers/cellEditorOverlay.js b/ui/src/dashboards/reducers/cellEditorOverlay.js index d51d2c503c..42c73fbedf 100644 --- a/ui/src/dashboards/reducers/cellEditorOverlay.js +++ b/ui/src/dashboards/reducers/cellEditorOverlay.js @@ -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 diff --git a/ui/src/shared/components/Layout.js b/ui/src/shared/components/Layout.js index 684afbc858..ff727452e4 100644 --- a/ui/src/shared/components/Layout.js +++ b/ui/src/shared/components/Layout.js @@ -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} diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js index 56c906347b..fc82a37a76 100644 --- a/ui/src/shared/components/RefreshingGraph.js +++ b/ui/src/shared/components/RefreshingGraph.js @@ -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, } diff --git a/ui/src/shared/components/TableGraph.js b/ui/src/shared/components/TableGraph.js index 9a1db53e48..e12128a19c 100644 --- a/ui/src/shared/components/TableGraph.js +++ b/ui/src/shared/components/TableGraph.js @@ -61,12 +61,9 @@ class TableGraph extends Component { const {sortField, sortDirection} = this.state const { - tableOptions: { - sortBy: {internalName}, - fieldNames, - verticalTimeAxis, - timeFormat, - }, + 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( - shape({ - internalName: string.isRequired, - displayName: string.isRequired, - visible: bool.isRequired, - }) - ).isRequired, fixFirstColumn: bool, }), + timeFormat: string.isRequired, + fieldOptions: arrayOf( + shape({ + internalName: string.isRequired, + displayName: string.isRequired, + visible: bool.isRequired, + }) + ).isRequired, hoverTime: string, handleSetHoverTime: func, colors: colorsStringSchema, diff --git a/ui/src/shared/constants/tableGraph.js b/ui/src/shared/constants/tableGraph.js index 04ba2ede50..52b19dfa28 100644 --- a/ui/src/shared/constants/tableGraph.js +++ b/ui/src/shared/constants/tableGraph.js @@ -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, } diff --git a/ui/src/utils/timeSeriesTransformers.js b/ui/src/utils/timeSeriesTransformers.js index f1bebd87d0..28eb625da0 100644 --- a/ui/src/utils/timeSeriesTransformers.js +++ b/ui/src/utils/timeSeriesTransformers.js @@ -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 ) diff --git a/ui/test/dashboards/components/TableOptions.test.tsx b/ui/test/dashboards/components/TableOptions.test.tsx index e65fbe0310..1672cc1564 100644 --- a/ui/test/dashboards/components/TableOptions.test.tsx +++ b/ui/test/dashboards/components/TableOptions.test.tsx @@ -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 = {}) => {