From 6974f5ab471cec90aa1776fb3111904d10c9c1e2 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Wed, 14 Mar 2018 19:03:03 -0700 Subject: [PATCH 01/63] Add timeAxis toggle to tableOptions --- .../components/GraphOptionsTimeAxis.js | 19 ++++++++++--------- ui/src/dashboards/components/TableOptions.tsx | 18 ++++++++---------- ui/src/dashboards/constants/gaugeColors.js | 17 ----------------- .../dashboards/reducers/cellEditorOverlay.js | 9 +++++++-- ui/src/shared/constants/tableGraph.js | 2 +- 5 files changed, 26 insertions(+), 39 deletions(-) diff --git a/ui/src/dashboards/components/GraphOptionsTimeAxis.js b/ui/src/dashboards/components/GraphOptionsTimeAxis.js index ac6090b00d..26e43570cb 100644 --- a/ui/src/dashboards/components/GraphOptionsTimeAxis.js +++ b/ui/src/dashboards/components/GraphOptionsTimeAxis.js @@ -1,29 +1,30 @@ import React from 'react' import PropTypes from 'prop-types' -const VERTICAL = 'VERTICAL' -const HORIZONTAL = 'HORIZONTAL' -const GraphOptionsTimeAxis = ({TimeAxis, onToggleTimeAxis}) => +const GraphOptionsTimeAxis = ({verticalTimeAxis, onToggleVerticalTimeAxis}) =>
-const {func, string} = PropTypes +const {bool, func} = PropTypes -GraphOptionsTimeAxis.propTypes = {TimeAxis: string, onToggleTimeAxis: func} +GraphOptionsTimeAxis.propTypes = { + verticalTimeAxis: bool, + onToggleVerticalTimeAxis: func, +} export default GraphOptionsTimeAxis diff --git a/ui/src/dashboards/components/TableOptions.tsx b/ui/src/dashboards/components/TableOptions.tsx index d88770de75..5c43bbf527 100644 --- a/ui/src/dashboards/components/TableOptions.tsx +++ b/ui/src/dashboards/components/TableOptions.tsx @@ -16,7 +16,7 @@ import {MAX_THRESHOLDS} from 'src/dashboards/constants/gaugeColors' import { updateSingleStatType, updateSingleStatColors, - updateTableOptions, + updateTableOptions } from 'src/dashboards/actions/cellEditorOverlay' const formatColor = color => { @@ -79,7 +79,10 @@ export class TableOptions extends PureComponent { handleUpdateTableOptions({...tableOptions, timeFormat}) } - handleToggleTimeAxis = () => {} + onToggleVerticalTimeAxis = verticalTimeAxis => () => { + const {tableOptions, handleUpdateTableOptions} = this.props + handleUpdateTableOptions({...tableOptions, verticalTimeAxis}) + } handleToggleTextWrapping = () => {} @@ -90,14 +93,9 @@ export class TableOptions extends PureComponent { handleValidateColorValue = () => {} render() { - const { - singleStatColors, - singleStatType, - tableOptions: {timeFormat}, - } = this.props + const {singleStatColors, singleStatType, tableOptions: {timeFormat, verticalTimeAxis}} = this.props const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS - const TimeAxis = 'vertical' const sortedColors = _.sortBy(singleStatColors, color => color.value) const columns = [ @@ -128,8 +126,8 @@ export class TableOptions extends PureComponent { onTimeFormatChange={this.handleTimeFormatChange} /> { if (!colors || colors.length === 0) { return DEFAULT_SINGLESTAT_COLORS @@ -196,15 +188,6 @@ export const validateGaugeColors = colors => { return formattedColors } -export const initializeOptions = cellType => { - switch (cellType) { - case 'table': - return DEFAULT_TABLE_OPTIONS - default: - return {} - } -} - export const stringifyColorValues = colors => { return colors.map(color => ({...color, value: `${color.value}`})) } diff --git a/ui/src/dashboards/reducers/cellEditorOverlay.js b/ui/src/dashboards/reducers/cellEditorOverlay.js index a551d831d3..7dbd622925 100644 --- a/ui/src/dashboards/reducers/cellEditorOverlay.js +++ b/ui/src/dashboards/reducers/cellEditorOverlay.js @@ -1,3 +1,5 @@ +import _ from 'lodash' + import { SINGLE_STAT_TEXT, DEFAULT_SINGLESTAT_COLORS, @@ -5,9 +7,10 @@ import { validateGaugeColors, validateSingleStatColors, getSingleStatType, - initializeOptions, } from 'src/dashboards/constants/gaugeColors' +import {initializeOptions} from 'src/shared/constants/tableGraph' + export const initialState = { cell: null, singleStatType: SINGLE_STAT_TEXT, @@ -24,7 +27,9 @@ export default function cellEditorOverlay(state = initialState, action) { const singleStatColors = validateSingleStatColors(colors, singleStatType) const gaugeColors = validateGaugeColors(colors) - const tableOptions = cell.tableOptions || initializeOptions('table') + const tableOptions = _.get(cell, ['tableOptions', 'timeFormat'], '') + ? cell.tableOptions + : initializeOptions('table') return { ...state, diff --git a/ui/src/shared/constants/tableGraph.js b/ui/src/shared/constants/tableGraph.js index ebf97a7695..f7a16cec08 100644 --- a/ui/src/shared/constants/tableGraph.js +++ b/ui/src/shared/constants/tableGraph.js @@ -19,8 +19,8 @@ export const FORMAT_OPTIONS = [ ] export const DEFAULT_TABLE_OPTIONS = { - timeFormat: 'MM/DD/YYYY HH:mm:ss.ss', verticalTimeAxis: true, + timeFormat: TIME_FORMAT_DEFAULT, sortBy: {internalName: 'time', displayName: ''}, wrapping: 'truncate', columnNames: [{internalName: 'time', displayName: ''}], From 4142def2e120c8063fb393356b77dc612feea177 Mon Sep 17 00:00:00 2001 From: ebb-tide Date: Fri, 16 Mar 2018 17:01:47 -0700 Subject: [PATCH 02/63] Implement flip data array --- ui/src/dashboards/components/GraphOptionsTimeAxis.js | 4 ++-- ui/src/shared/components/TableGraph.js | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/ui/src/dashboards/components/GraphOptionsTimeAxis.js b/ui/src/dashboards/components/GraphOptionsTimeAxis.js index 26e43570cb..e92e3ac295 100644 --- a/ui/src/dashboards/components/GraphOptionsTimeAxis.js +++ b/ui/src/dashboards/components/GraphOptionsTimeAxis.js @@ -6,13 +6,13 @@ const GraphOptionsTimeAxis = ({verticalTimeAxis, onToggleVerticalTimeAxis}) =>