From cd0d335269baddc6a2d5446011f73f08bb3bf11f Mon Sep 17 00:00:00 2001 From: Vera Liu Date: Thu, 6 Oct 2016 19:06:35 -0700 Subject: [PATCH 1/3] Put formData in store --- .../explorev2/actions/exploreActions.js | 8 +- .../explorev2/components/ChartControl.jsx | 2 +- .../explorev2/components/GroupBy.jsx | 4 +- .../explorev2/components/NotGroupBy.jsx | 4 +- .../explorev2/components/Options.jsx | 4 +- .../explorev2/components/SqlClause.jsx | 8 +- .../explorev2/components/TimeFilter.jsx | 8 +- .../assets/javascripts/explorev2/index.jsx | 24 +-- .../explorev2/reducers/exploreReducer.js | 143 ++++++++++++++++-- .../javascripts/explorev2/stores/store.js | 35 +++-- .../explore/components/actions_spec.js | 27 ---- 11 files changed, 187 insertions(+), 80 deletions(-) diff --git a/caravel/assets/javascripts/explorev2/actions/exploreActions.js b/caravel/assets/javascripts/explorev2/actions/exploreActions.js index 6468c6ac3901f..0eb27ad8d0be2 100644 --- a/caravel/assets/javascripts/explorev2/actions/exploreActions.js +++ b/caravel/assets/javascripts/explorev2/actions/exploreActions.js @@ -179,12 +179,12 @@ export function toggleSearchBox(searchBox) { return { type: TOGGLE_SEARCHBOX, searchBox }; } -export function setWhereClause(whereClause) { - return { type: SET_WHERE_CLAUSE, whereClause }; +export function setWhereClause(where) { + return { type: SET_WHERE_CLAUSE, where }; } -export function setHavingClause(havingClause) { - return { type: SET_HAVING_CLAUSE, havingClause }; +export function setHavingClause(having) { + return { type: SET_HAVING_CLAUSE, having }; } export function addFilter(filter) { diff --git a/caravel/assets/javascripts/explorev2/components/ChartControl.jsx b/caravel/assets/javascripts/explorev2/components/ChartControl.jsx index eee6e0d6ff457..7e1c565219939 100644 --- a/caravel/assets/javascripts/explorev2/components/ChartControl.jsx +++ b/caravel/assets/javascripts/explorev2/components/ChartControl.jsx @@ -77,7 +77,7 @@ function mapStateToProps(state) { datasources: state.datasources, datasourceId: state.datasourceId, datasourceType: state.datasourceType, - vizType: state.vizType, + vizType: state.viz.formData.vizType, }; } diff --git a/caravel/assets/javascripts/explorev2/components/GroupBy.jsx b/caravel/assets/javascripts/explorev2/components/GroupBy.jsx index 2d7756c8df535..2f762466d40b7 100644 --- a/caravel/assets/javascripts/explorev2/components/GroupBy.jsx +++ b/caravel/assets/javascripts/explorev2/components/GroupBy.jsx @@ -67,9 +67,9 @@ GroupBy.defaultProps = defaultProps; function mapStateToProps(state) { return { metricsOpts: state.metricsOpts, - metrics: state.metrics, + metrics: state.viz.formData.metrics, groupByColumnOpts: state.groupByColumnOpts, - groupByColumns: state.groupByColumns, + groupByColumns: state.viz.formData.groupByColumns, }; } diff --git a/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx b/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx index ece64525e266b..c83e30e82dade 100644 --- a/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx +++ b/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx @@ -67,9 +67,9 @@ NotGroupBy.defaultProps = defaultProps; function mapStateToProps(state) { return { columnOpts: state.columnOpts, - columns: state.columns, + columns: state.viz.formData.columns, orderingOpts: state.orderingOpts, - orderings: state.orderings, + orderings: state.viz.formData.orderings, }; } diff --git a/caravel/assets/javascripts/explorev2/components/Options.jsx b/caravel/assets/javascripts/explorev2/components/Options.jsx index 687c197fb5904..6ce67d0ad3fb0 100644 --- a/caravel/assets/javascripts/explorev2/components/Options.jsx +++ b/caravel/assets/javascripts/explorev2/components/Options.jsx @@ -62,8 +62,8 @@ Options.defaultProps = defaultProps; function mapStateToProps(state) { return { - timeStampFormat: state.timeStampFormat, - rowLimit: state.rowLimit, + timeStampFormat: state.viz.formData.timeStampFormat, + rowLimit: state.viz.formData.rowLimit, }; } diff --git a/caravel/assets/javascripts/explorev2/components/SqlClause.jsx b/caravel/assets/javascripts/explorev2/components/SqlClause.jsx index ab484dfe20ab5..c67c69c5e7830 100644 --- a/caravel/assets/javascripts/explorev2/components/SqlClause.jsx +++ b/caravel/assets/javascripts/explorev2/components/SqlClause.jsx @@ -8,11 +8,11 @@ const propTypes = { }; class SqlClause extends React.Component { - changeWhere(whereClause) { - this.props.actions.setWhereClause(whereClause); + changeWhere(where) { + this.props.actions.setWhereClause(where); } - changeHaving(havingClause) { - this.props.actions.setHavingClause(havingClause); + changeHaving(having) { + this.props.actions.setHavingClause(having); } render() { return ( diff --git a/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx b/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx index dfcbd4041d846..d50a1872350c3 100644 --- a/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx +++ b/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx @@ -106,11 +106,11 @@ function mapStateToProps(state) { return { datasourceClass: state.datasourceClass, timeColumnOpts: state.timeColumnOpts, - timeColumn: state.timeColumn, + timeColumn: state.viz.formData.timeColumn, timeGrainOpts: state.timeGrainOpts, - timeGrain: state.timeGrain, - since: state.since, - until: state.until, + timeGrain: state.viz.formData.timeGrain, + since: state.viz.formData.since, + until: state.viz.formData.until, }; } diff --git a/caravel/assets/javascripts/explorev2/index.jsx b/caravel/assets/javascripts/explorev2/index.jsx index 47f1e63ca922c..a3ef614da9545 100644 --- a/caravel/assets/javascripts/explorev2/index.jsx +++ b/caravel/assets/javascripts/explorev2/index.jsx @@ -17,15 +17,21 @@ const bootstrappedState = Object.assign(initialState, { datasourceId: parseInt(bootstrapData.datasource_id, 10), datasourceType: bootstrapData.datasource_type, sliceName: bootstrapData.viz.form_data.slice_name, - sliceId: bootstrapData.viz.form_data.slice_id, - vizType: bootstrapData.viz.form_data.viz_type, - timeColumn: bootstrapData.viz.form_data.granularity_sqla, - timeGrain: bootstrapData.viz.form_data.time_grain_sqla, - metrics: [bootstrapData.viz.form_data.metrics].map((m) => ({ value: m, label: m })), - since: bootstrapData.viz.form_data.since, - until: bootstrapData.viz.form_data.until, - havingClause: bootstrapData.viz.form_data.having, - whereClause: bootstrapData.viz.form_data.where, + viz: { + formData: { + sliceId: bootstrapData.viz.form_data.slice_id, + vizType: bootstrapData.viz.form_data.viz_type, + timeColumn: bootstrapData.viz.form_data.granularity_sqla, + timeGrain: bootstrapData.viz.form_data.time_grain_sqla, + metrics: [bootstrapData.viz.form_data.metrics].map((m) => ({ value: m, label: m })), + since: bootstrapData.viz.form_data.since, + until: bootstrapData.viz.form_data.until, + having: bootstrapData.viz.form_data.having, + where: bootstrapData.viz.form_data.where, + rowLimit: bootstrapData.viz.form_data.row_limit, + timeStampFormat: bootstrapData.viz.form_data.table_timestamp_format, + }, + }, }); const store = createStore(exploreReducer, bootstrappedState, compose(applyMiddleware(thunk)) diff --git a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js index 9e5d9d94f4ea5..8828ac2556680 100644 --- a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js +++ b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js @@ -8,7 +8,16 @@ export const exploreReducer = function (state, action) { return Object.assign({}, state, { datasourceId: action.datasourceId }); }, [actions.SET_VIZTYPE]() { - return Object.assign({}, state, { vizType: action.vizType }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + vizType: action.vizType, + }, + }, + }; }, [actions.SET_TIME_COLUMN_OPTS]() { return Object.assign({}, state, { timeColumnOpts: action.timeColumnOpts }); @@ -17,55 +26,163 @@ export const exploreReducer = function (state, action) { return Object.assign({}, state, { timeGrainOpts: action.timeGrainOpts }); }, [actions.SET_TIME_COLUMN]() { - return Object.assign({}, state, { timeColumn: action.timeColumn }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + timeColumn: action.timeColumn, + }, + }, + }; }, [actions.SET_TIME_GRAIN]() { - return Object.assign({}, state, { timeGrain: action.timeGrain }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + timeGrain: action.timeGrain, + }, + }, + }; }, [actions.SET_SINCE]() { - return Object.assign({}, state, { since: action.since }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + since: action.since, + }, + }, + }; }, [actions.SET_UNTIL]() { - return Object.assign({}, state, { until: action.until }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + until: action.until, + }, + }, + }; }, [actions.SET_GROUPBY_COLUMN_OPTS]() { return Object.assign({}, state, { groupByColumnOpts: action.groupByColumnOpts }); }, [actions.SET_GROUPBY_COLUMNS]() { - return Object.assign({}, state, { groupByColumns: action.groupByColumns }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + groupByColumns: action.groupByColumns, + }, + }, + }; }, [actions.SET_METRICS_OPTS]() { return Object.assign({}, state, { metricsOpts: action.metricsOpts }); }, [actions.SET_METRICS]() { - return Object.assign({}, state, { metrics: action.metrics }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + metrics: action.metrics, + }, + }, + }; }, [actions.SET_COLUMN_OPTS]() { return Object.assign({}, state, { columnOpts: action.columnOpts }); }, [actions.SET_NOT_GROUPBY_COLUMNS]() { - return Object.assign({}, state, { columns: action.columns }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + columns: action.columns, + }, + }, + }; }, [actions.SET_ORDERING_OPTS]() { return Object.assign({}, state, { orderingOpts: action.orderingOpts }); }, [actions.SET_ORDERINGS]() { - return Object.assign({}, state, { orderings: action.orderings }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + orderings: action.orderings, + }, + }, + }; }, [actions.SET_TIME_STAMP_FORMAT]() { - return Object.assign({}, state, { timeStampFormat: action.timeStampFormat }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + timeStampFormat: action.timeStampFormat, + }, + }, + }; }, [actions.SET_ROW_LIMIT]() { - return Object.assign({}, state, { rowLimit: action.rowLimit }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + rowLimit: action.rowLimit, + }, + }, + }; }, [actions.TOGGLE_SEARCHBOX]() { return Object.assign({}, state, { searchBox: action.searchBox }); }, [actions.SET_WHERE_CLAUSE]() { - return Object.assign({}, state, { whereClause: action.whereClause }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + where: action.where, + }, + }, + }; }, [actions.SET_HAVING_CLAUSE]() { - return Object.assign({}, state, { havingClause: action.havingClause }); + return { + ...state, + viz: { + ...state.viz, + formData: { + ...state.viz.formData, + having: action.having, + }, + }, + }; }, [actions.SET_FILTER_COLUMN_OPTS]() { return Object.assign({}, state, { filterColumnOpts: action.filterColumnOpts }); diff --git a/caravel/assets/javascripts/explorev2/stores/store.js b/caravel/assets/javascripts/explorev2/stores/store.js index 236013c1dae0b..633689cf903df 100644 --- a/caravel/assets/javascripts/explorev2/stores/store.js +++ b/caravel/assets/javascripts/explorev2/stores/store.js @@ -2,39 +2,50 @@ export const initialState = { datasources: null, datasourceId: null, datasourceType: null, - vizType: null, timeColumnOpts: [], - timeColumn: null, timeGrainOpts: [], timeGrain: null, - since: null, - until: null, groupByColumnOpts: [], - groupByColumns: [], metricsOpts: [], - metrics: [], columnOpts: [], - columns: [], orderingOpts: [], - orderings: [], - timeStampFormat: 'smart_date', - rowLimit: 50000, searchBox: false, whereClause: '', havingClause: '', filters: [], filterColumnOpts: [], + viz: { + formData: { + sliceId: null, + vizType: null, + timeColumn: null, + timeGrain: null, + groupByColumns: [], + metrics: [], + since: null, + until: null, + having: null, + where: null, + columns: [], + orderings: [], + rowLimit: 50000, + timeStampFormat: 'smart_date', + }, + }, }; // TODO: add datasource_type here after druid support is added export const defaultFormData = { + sliceId: null, vizType: null, timeColumn: null, timeGrain: null, - since: null, - until: null, groupByColumns: [], metrics: [], + since: null, + until: null, + having: null, + where: null, columns: [], orderings: [], timeStampFormat: 'smart_date', diff --git a/caravel/assets/spec/javascripts/explore/components/actions_spec.js b/caravel/assets/spec/javascripts/explore/components/actions_spec.js index 6c18b2a0ee454..808822c3b8bf3 100644 --- a/caravel/assets/spec/javascripts/explore/components/actions_spec.js +++ b/caravel/assets/spec/javascripts/explore/components/actions_spec.js @@ -11,33 +11,6 @@ describe('reducers', () => { expect(newState.datasourceId).to.equal(1); }); - it('should return new state with viz type', () => { - const newState = exploreReducer(initialState, actions.setVizType('bar')); - expect(newState.vizType).to.equal('bar'); - }); - - it('should return new state with not groupby columns', () => { - const newColumn = ['col']; - const newState = exploreReducer(initialState, actions.setNotGroupByColumns(newColumn)); - expect(newState.columns).to.deep.equal(['col']); - }); - - it('should return new state with orderings', () => { - const newOrdering = ['ord']; - const newState = exploreReducer(initialState, actions.setOrderings(newOrdering)); - expect(newState.orderings).to.deep.equal(['ord']); - }); - - it('should return new state with time stamp', () => { - const newState = exploreReducer(initialState, actions.setTimeStampFormat(1)); - expect(newState.timeStampFormat).to.equal(1); - }); - - it('should return new state with row limit', () => { - const newState = exploreReducer(initialState, actions.setRowLimit(10)); - expect(newState.rowLimit).to.equal(10); - }); - it('should return new state with search box toggled', () => { const newState = exploreReducer(initialState, actions.toggleSearchBox(true)); expect(newState.searchBox).to.equal(true); From be5020c14e30bf7c342f02603e25e22efc30f52d Mon Sep 17 00:00:00 2001 From: Vera Liu Date: Fri, 7 Oct 2016 11:17:43 -0700 Subject: [PATCH 2/3] Reform actions and reducers --- .../explorev2/actions/exploreActions.js | 70 +------ .../explorev2/components/ChartControl.jsx | 6 +- .../components/ControlPanelsContainer.jsx | 2 +- .../explorev2/components/GroupBy.jsx | 68 +++---- .../explorev2/components/NotGroupBy.jsx | 68 +++---- .../explorev2/components/Options.jsx | 65 +++---- .../explorev2/components/SelectArray.jsx | 74 +++++++ .../explorev2/components/SqlClause.jsx | 11 +- .../explorev2/components/TimeFilter.jsx | 116 ++++------- .../explorev2/reducers/exploreReducer.js | 180 +++--------------- .../javascripts/explorev2/stores/store.js | 57 ++---- 11 files changed, 252 insertions(+), 465 deletions(-) create mode 100644 caravel/assets/javascripts/explorev2/components/SelectArray.jsx diff --git a/caravel/assets/javascripts/explorev2/actions/exploreActions.js b/caravel/assets/javascripts/explorev2/actions/exploreActions.js index 0eb27ad8d0be2..6b4bad7d3e13b 100644 --- a/caravel/assets/javascripts/explorev2/actions/exploreActions.js +++ b/caravel/assets/javascripts/explorev2/actions/exploreActions.js @@ -1,26 +1,13 @@ const $ = window.$ = require('jquery'); export const SET_DATASOURCE = 'SET_DATASOURCE'; -export const SET_VIZTYPE = 'SET_VIZTYPE'; export const SET_TIME_COLUMN_OPTS = 'SET_TIME_COLUMN_OPTS'; export const SET_TIME_GRAIN_OPTS = 'SET_TIME_GRAIN_OPTS'; -export const SET_TIME_COLUMN = 'SET_TIME_COLUMN'; -export const SET_TIME_GRAIN = 'SET_TIME_GRAIN'; -export const SET_SINCE = 'SET_SINCE'; -export const SET_UNTIL = 'SET_UNTIL'; -export const SET_GROUPBY_COLUMNS = 'SET_GROUPBY_COLUMNS'; export const SET_GROUPBY_COLUMN_OPTS = 'SET_GROUPBY_COLUMN_OPTS'; -export const SET_METRICS = 'SET_METRICS'; export const SET_METRICS_OPTS = 'SET_METRICS_OPTS'; export const SET_COLUMN_OPTS = 'SET_COLUMN_OPTS'; -export const SET_NOT_GROUPBY_COLUMNS = 'SET_NOT_GROUPBY_COLUMNS'; export const SET_ORDERING_OPTS = 'SET_ORDERING_OPTS'; -export const SET_ORDERINGS = 'SET_ORDERINGS'; -export const SET_TIME_STAMP_FORMAT = 'SET_TIME_STAMP_FORMAT'; -export const SET_ROW_LIMIT = 'SET_ROW_LIMIT'; export const TOGGLE_SEARCHBOX = 'TOGGLE_SEARCHBOX'; export const SET_FILTER_COLUMN_OPTS = 'SET_FILTER_COLUMN_OPTS'; -export const SET_WHERE_CLAUSE = 'SET_WHERE_CLAUSE'; -export const SET_HAVING_CLAUSE = 'SET_HAVING_CLAUSE'; export const ADD_FILTER = 'ADD_FILTER'; export const SET_FILTER = 'SET_FILTER'; export const REMOVE_FILTER = 'REMOVE_FILTER'; @@ -30,6 +17,7 @@ export const CHANGE_FILTER_VALUE = 'CHANGE_FILTER_VALUE'; export const RESET_FORM_DATA = 'RESET_FORM_DATA'; export const CLEAR_ALL_OPTS = 'CLEAR_ALL_OPTS'; export const SET_DATASOURCE_TYPE = 'SET_DATASOURCE_TYPE'; +export const SET_FORM_DATA = 'SET_FORM_DATA'; export function setTimeColumnOpts(timeColumnOpts) { return { type: SET_TIME_COLUMN_OPTS, timeColumnOpts }; @@ -131,62 +119,10 @@ export function setDatasource(datasourceId) { return { type: SET_DATASOURCE, datasourceId }; } -export function setVizType(vizType) { - return { type: SET_VIZTYPE, vizType }; -} - -export function setTimeColumn(timeColumn) { - return { type: SET_TIME_COLUMN, timeColumn }; -} - -export function setTimeGrain(timeGrain) { - return { type: SET_TIME_GRAIN, timeGrain }; -} - -export function setSince(since) { - return { type: SET_SINCE, since }; -} - -export function setUntil(until) { - return { type: SET_UNTIL, until }; -} - -export function setGroupByColumns(groupByColumns) { - return { type: SET_GROUPBY_COLUMNS, groupByColumns }; -} - -export function setMetrics(metrics) { - return { type: SET_METRICS, metrics }; -} - -export function setNotGroupByColumns(columns) { - return { type: SET_NOT_GROUPBY_COLUMNS, columns }; -} - -export function setOrderings(orderings) { - return { type: SET_ORDERINGS, orderings }; -} - -export function setTimeStampFormat(timeStampFormat) { - return { type: SET_TIME_STAMP_FORMAT, timeStampFormat }; -} - -export function setRowLimit(rowLimit) { - return { type: SET_ROW_LIMIT, rowLimit }; -} - export function toggleSearchBox(searchBox) { return { type: TOGGLE_SEARCHBOX, searchBox }; } -export function setWhereClause(where) { - return { type: SET_WHERE_CLAUSE, where }; -} - -export function setHavingClause(having) { - return { type: SET_HAVING_CLAUSE, having }; -} - export function addFilter(filter) { return { type: ADD_FILTER, filter }; } @@ -206,3 +142,7 @@ export function changeFilterOp(filter, op) { export function changeFilterValue(filter, value) { return { type: CHANGE_FILTER_VALUE, filter, value }; } + +export function setFormData(key, value) { + return { type: SET_FORM_DATA, key, value }; +} diff --git a/caravel/assets/javascripts/explorev2/components/ChartControl.jsx b/caravel/assets/javascripts/explorev2/components/ChartControl.jsx index 7e1c565219939..1ee24488217ae 100644 --- a/caravel/assets/javascripts/explorev2/components/ChartControl.jsx +++ b/caravel/assets/javascripts/explorev2/components/ChartControl.jsx @@ -32,9 +32,9 @@ class ChartControl extends React.Component { this.props.actions.resetFormData(); this.props.actions.setFormOpts(val, this.props.datasourceType); } - changeViz(vizOpt) { - const val = (vizOpt) ? vizOpt.value : null; - this.props.actions.setVizType(val); + changeViz(opt) { + const val = opt ? opt.value : null; + this.props.actions.setFormData('vizType', val); } render() { return ( diff --git a/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx b/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx index a4c818af70293..0051c91c69e62 100644 --- a/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx +++ b/caravel/assets/javascripts/explorev2/components/ControlPanelsContainer.jsx @@ -29,7 +29,7 @@ ControlPanelsContainer.defaultProps = defaultProps; function mapStateToProps(state) { return { - vizType: state.vizType, + vizType: state.viz.formData.vizType, }; } diff --git a/caravel/assets/javascripts/explorev2/components/GroupBy.jsx b/caravel/assets/javascripts/explorev2/components/GroupBy.jsx index 2f762466d40b7..12c1df46364c1 100644 --- a/caravel/assets/javascripts/explorev2/components/GroupBy.jsx +++ b/caravel/assets/javascripts/explorev2/components/GroupBy.jsx @@ -1,8 +1,8 @@ import React from 'react'; -import Select from 'react-select'; import { bindActionCreators } from 'redux'; import * as actions from '../actions/exploreActions'; import { connect } from 'react-redux'; +import SelectArray from './SelectArray'; const propTypes = { actions: React.PropTypes.object, @@ -19,47 +19,33 @@ const defaultProps = { groupByColumns: [], }; -class GroupBy extends React.Component { - changeColumns(groupByColumns) { - this.props.actions.setGroupByColumns(groupByColumns); - } - changeMetrics(metrics) { - this.props.actions.setMetrics(metrics); - } - render() { - return ( -
-
GroupBy
-
-
-
GroupBy Column
- -
-
+const GroupBy = (props) => { + const selects = []; + selects.push({ + key: 'groupByColumns', + title: 'GroupBy Column', + options: props.groupByColumnOpts, + value: props.groupByColumns, + multi: true, + width: '12', + }); + selects.push({ + key: 'metrics', + title: 'Metrics', + options: props.metricsOpts, + value: props.metrics, + multi: true, + width: '12', + }); + return ( +
+
GroupBy
+
+
- ); - } -} +
+ ); +}; GroupBy.propTypes = propTypes; GroupBy.defaultProps = defaultProps; diff --git a/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx b/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx index c83e30e82dade..5abef41bf2c37 100644 --- a/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx +++ b/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import Select from 'react-select'; +import SelectArray from './SelectArray'; import { bindActionCreators } from 'redux'; import * as actions from '../actions/exploreActions'; import { connect } from 'react-redux'; @@ -19,47 +19,33 @@ const defaultProps = { orderings: [], }; -class NotGroupBy extends React.Component { - changeColumns(columns) { - this.props.actions.setNotGroupByColumns(columns); - } - changeOrderings(orderings) { - this.props.actions.setOrderings(orderings); - } - render() { - return ( -
-
Not GroupBy
-
-
-
Columns
- -
-
+const NotGroupBy = (props) => { + const selects = []; + selects.push({ + key: 'columns', + title: 'Columns', + options: props.columnOpts, + value: props.columns, + multi: true, + width: '12', + }); + selects.push({ + key: 'orderings', + title: 'Orderings', + options: props.orderingOpts, + value: props.orderings, + multi: true, + width: '12', + }); + return ( +
+
Not GroupBy
+
+
- ); - } -} +
+ ); +}; NotGroupBy.propTypes = propTypes; NotGroupBy.defaultProps = defaultProps; diff --git a/caravel/assets/javascripts/explorev2/components/Options.jsx b/caravel/assets/javascripts/explorev2/components/Options.jsx index 6ce67d0ad3fb0..2081526727ec6 100644 --- a/caravel/assets/javascripts/explorev2/components/Options.jsx +++ b/caravel/assets/javascripts/explorev2/components/Options.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import Select from 'react-select'; +import SelectArray from './SelectArray'; import { bindActionCreators } from 'redux'; import * as actions from '../actions/exploreActions'; import { connect } from 'react-redux'; @@ -16,46 +16,31 @@ const defaultProps = { rowLimit: null, }; -class Options extends React.Component { - changeTimeStampFormat(timeStampFormat) { - const val = (timeStampFormat) ? timeStampFormat.value : null; - this.props.actions.setTimeStampFormat(val); - } - changeRowLimit(rowLimit) { - this.props.actions.setRowLimit(rowLimit); - } - render() { - return ( -
-
Options
-
-
-
Table Timestamp Format
- ({ value: r, label: r }))} - value={this.props.rowLimit} - autosize={false} - onChange={this.changeRowLimit.bind(this)} - /> -
-
+const Options = (props) => { + const selects = []; + selects.push({ + key: 'timeStampFormat', + title: 'Timestamp Format', + options: timestampOptions.map((t) => ({ value: t[0], label: t[1] })), + value: props.timeStampFormat, + width: '12', + }); + selects.push({ + key: 'rowLimit', + title: 'Row Limit', + options: rowLimitOptions.map((r) => ({ value: r, label: r })), + value: props.rowLimit, + width: '12', + }); + return ( +
+
Options
+
+
- ); - } -} +
+ ); +}; Options.propTypes = propTypes; Options.defaultProps = defaultProps; diff --git a/caravel/assets/javascripts/explorev2/components/SelectArray.jsx b/caravel/assets/javascripts/explorev2/components/SelectArray.jsx new file mode 100644 index 0000000000000..7c60d1d763bee --- /dev/null +++ b/caravel/assets/javascripts/explorev2/components/SelectArray.jsx @@ -0,0 +1,74 @@ +import React from 'react'; +import Select from 'react-select'; +import { bindActionCreators } from 'redux'; +import * as actions from '../actions/exploreActions'; +import { connect } from 'react-redux'; + +const propTypes = { + actions: React.PropTypes.object, + selectArray: React.PropTypes.arrayOf( + React.PropTypes.shape({ + key: React.PropTypes.string.isRequired, + title: React.PropTypes.string.isRequired, + options: React.PropTypes.array.isRequired, + value: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.array, + ]), + width: React.PropTypes.string, + multi: React.PropTypes.bool, + }) + ).isRequired, +}; + +const defaultProps = { + selectArray: [], +}; + +class SelectArray extends React.Component { + changeSelectData(key, multi, opt) { + if (multi) this.props.actions.setFormData(key, opt); + else { + const val = opt ? opt.value : null; + this.props.actions.setFormData(key, val); + } + } + render() { + const selects = this.props.selectArray.map((obj) => ( +
+
{obj.title}
+ @@ -32,7 +29,7 @@ class SqlClause extends React.Component {
Having
diff --git a/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx b/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx index d50a1872350c3..60c8e075d4003 100644 --- a/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx +++ b/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx @@ -1,13 +1,13 @@ import React from 'react'; -import Select from 'react-select'; import { bindActionCreators } from 'redux'; import * as actions from '../actions/exploreActions'; import { connect } from 'react-redux'; import { sinceOptions, untilOptions } from '../constants'; +import SelectArray from './SelectArray'; const propTypes = { actions: React.PropTypes.object, - datasourceClass: React.PropTypes.string, + datasourceType: React.PropTypes.string, timeColumnOpts: React.PropTypes.array, timeColumn: React.PropTypes.string, timeGrainOpts: React.PropTypes.array, @@ -25,86 +25,52 @@ const defaultProps = { until: null, }; -class TimeFilter extends React.Component { - changeTimeColumn(timeColumnOpt) { - const val = (timeColumnOpt) ? timeColumnOpt.value : null; - this.props.actions.setTimeColumn(val); - } - changeTimeGrain(timeGrainOpt) { - const val = (timeGrainOpt) ? timeGrainOpt.value : null; - this.props.actions.setTimeGrain(val); - } - changeSince(sinceOpt) { - const val = (sinceOpt) ? sinceOpt.value : null; - this.props.actions.setSince(val); - } - changeUntil(untilOpt) { - const val = (untilOpt) ? untilOpt.value : null; - this.props.actions.setUntil(val); - } - render() { - const timeColumnPlaceHolder = - (this.props.datasourceClass === 'SqlaTable') ? 'Time Column' : 'Time Granularity'; - const timeGrainPlaceHolder = - (this.props.datasourceClass === 'SqlaTable') ? 'Time Grain' : 'Origin'; - return ( -
-
Time Filter
-
-
-
Time Column & Grains
- -
-
-
Since - Until
- ({ value: u, label: u }))} - value={this.props.until} - autosize={false} - onChange={this.changeUntil.bind(this)} - /> -
-
+const TimeFilter = (props) => { + const timeColumnTitle = + (props.datasourceType === 'table') ? 'Time Column' : 'Time Granularity'; + const timeGrainTitle = + (props.datasourceType === 'table') ? 'Time Grain' : 'Origin'; + const selects = []; + selects.push({ + key: 'timeColumn', + title: timeColumnTitle, + options: props.timeColumnOpts, + value: props.timeColumn, + }); + selects.push({ + key: 'timeGrain', + title: timeGrainTitle, + options: props.timeGrainOpts, + value: props.timeGrain, + }); + selects.push({ + key: 'since', + title: 'Since', + options: sinceOptions.map((s) => ({ value: s, label: s })), + value: props.since, + }); + selects.push({ + key: 'until', + title: 'Until', + options: untilOptions.map((u) => ({ value: u, label: u })), + value: props.until, + }); + return ( +
+
Time Filter
+
+
- ); - } -} +
+ ); +}; TimeFilter.propTypes = propTypes; TimeFilter.defaultProps = defaultProps; function mapStateToProps(state) { return { - datasourceClass: state.datasourceClass, + datasourceType: state.datasourceType, timeColumnOpts: state.timeColumnOpts, timeColumn: state.viz.formData.timeColumn, timeGrainOpts: state.timeGrainOpts, diff --git a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js index 8828ac2556680..5c771e9f9d1e0 100644 --- a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js +++ b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js @@ -2,188 +2,50 @@ import { defaultFormData, defaultOpts } from '../stores/store'; import * as actions from '../actions/exploreActions'; import { addToArr, removeFromArr, alterInArr } from '../../../utils/reducerUtils'; +const setFormInViz = function (state, action) { + const newForm = Object.assign({}, state); + newForm[action.key] = action.value; + return newForm; +}; + +const setVizInState = function (state, action) { + switch (action.type) { + case actions.SET_FORM_DATA: + return { + ...state, + formData: setFormInViz(state.formData, action), + }; + default: + return state; + } +}; + export const exploreReducer = function (state, action) { const actionHandlers = { [actions.SET_DATASOURCE]() { return Object.assign({}, state, { datasourceId: action.datasourceId }); }, - [actions.SET_VIZTYPE]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - vizType: action.vizType, - }, - }, - }; - }, [actions.SET_TIME_COLUMN_OPTS]() { return Object.assign({}, state, { timeColumnOpts: action.timeColumnOpts }); }, [actions.SET_TIME_GRAIN_OPTS]() { return Object.assign({}, state, { timeGrainOpts: action.timeGrainOpts }); }, - [actions.SET_TIME_COLUMN]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - timeColumn: action.timeColumn, - }, - }, - }; - }, - [actions.SET_TIME_GRAIN]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - timeGrain: action.timeGrain, - }, - }, - }; - }, - [actions.SET_SINCE]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - since: action.since, - }, - }, - }; - }, - [actions.SET_UNTIL]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - until: action.until, - }, - }, - }; - }, [actions.SET_GROUPBY_COLUMN_OPTS]() { return Object.assign({}, state, { groupByColumnOpts: action.groupByColumnOpts }); }, - [actions.SET_GROUPBY_COLUMNS]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - groupByColumns: action.groupByColumns, - }, - }, - }; - }, [actions.SET_METRICS_OPTS]() { return Object.assign({}, state, { metricsOpts: action.metricsOpts }); }, - [actions.SET_METRICS]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - metrics: action.metrics, - }, - }, - }; - }, [actions.SET_COLUMN_OPTS]() { return Object.assign({}, state, { columnOpts: action.columnOpts }); }, - [actions.SET_NOT_GROUPBY_COLUMNS]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - columns: action.columns, - }, - }, - }; - }, [actions.SET_ORDERING_OPTS]() { return Object.assign({}, state, { orderingOpts: action.orderingOpts }); }, - [actions.SET_ORDERINGS]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - orderings: action.orderings, - }, - }, - }; - }, - [actions.SET_TIME_STAMP_FORMAT]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - timeStampFormat: action.timeStampFormat, - }, - }, - }; - }, - [actions.SET_ROW_LIMIT]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - rowLimit: action.rowLimit, - }, - }, - }; - }, [actions.TOGGLE_SEARCHBOX]() { return Object.assign({}, state, { searchBox: action.searchBox }); }, - [actions.SET_WHERE_CLAUSE]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - where: action.where, - }, - }, - }; - }, - [actions.SET_HAVING_CLAUSE]() { - return { - ...state, - viz: { - ...state.viz, - formData: { - ...state.viz.formData, - having: action.having, - }, - }, - }; - }, [actions.SET_FILTER_COLUMN_OPTS]() { return Object.assign({}, state, { filterColumnOpts: action.filterColumnOpts }); }, @@ -211,6 +73,12 @@ export const exploreReducer = function (state, action) { [actions.SET_DATASOURCE_TYPE]() { return Object.assign({}, state, { datasourceType: action.datasourceType }); }, + [actions.SET_FORM_DATA]() { + return { + ...state, + viz: setVizInState(state.viz, action), + }; + }, }; if (action.type in actionHandlers) { return actionHandlers[action.type](); diff --git a/caravel/assets/javascripts/explorev2/stores/store.js b/caravel/assets/javascripts/explorev2/stores/store.js index 633689cf903df..6ea89e6e3a148 100644 --- a/caravel/assets/javascripts/explorev2/stores/store.js +++ b/caravel/assets/javascripts/explorev2/stores/store.js @@ -1,39 +1,3 @@ -export const initialState = { - datasources: null, - datasourceId: null, - datasourceType: null, - timeColumnOpts: [], - timeGrainOpts: [], - timeGrain: null, - groupByColumnOpts: [], - metricsOpts: [], - columnOpts: [], - orderingOpts: [], - searchBox: false, - whereClause: '', - havingClause: '', - filters: [], - filterColumnOpts: [], - viz: { - formData: { - sliceId: null, - vizType: null, - timeColumn: null, - timeGrain: null, - groupByColumns: [], - metrics: [], - since: null, - until: null, - having: null, - where: null, - columns: [], - orderings: [], - rowLimit: 50000, - timeStampFormat: 'smart_date', - }, - }, -}; - // TODO: add datasource_type here after druid support is added export const defaultFormData = { sliceId: null, @@ -56,6 +20,27 @@ export const defaultFormData = { filters: [], }; +export const initialState = { + datasources: null, + datasourceId: null, + datasourceType: null, + timeColumnOpts: [], + timeGrainOpts: [], + timeGrain: null, + groupByColumnOpts: [], + metricsOpts: [], + columnOpts: [], + orderingOpts: [], + searchBox: false, + whereClause: '', + havingClause: '', + filters: [], + filterColumnOpts: [], + viz: { + formData: defaultFormData, + }, +}; + export const defaultOpts = { timeColumnOpts: [], timeGrainOpts: [], From 184134e8404af0dc4d6a9b4675aac24d4d68d901 Mon Sep 17 00:00:00 2001 From: Vera Liu Date: Fri, 7 Oct 2016 13:23:20 -0700 Subject: [PATCH 3/3] Maded modifications based on comments: --- .../explorev2/components/ChartControl.jsx | 2 +- .../explorev2/components/GroupBy.jsx | 36 +++++------ .../explorev2/components/NotGroupBy.jsx | 36 +++++------ .../explorev2/components/Options.jsx | 32 +++++----- .../explorev2/components/SqlClause.jsx | 2 +- .../explorev2/components/TimeFilter.jsx | 59 +++++++++---------- .../explorev2/reducers/exploreReducer.js | 6 +- 7 files changed, 86 insertions(+), 87 deletions(-) diff --git a/caravel/assets/javascripts/explorev2/components/ChartControl.jsx b/caravel/assets/javascripts/explorev2/components/ChartControl.jsx index 1ee24488217ae..fe44d96bbac59 100644 --- a/caravel/assets/javascripts/explorev2/components/ChartControl.jsx +++ b/caravel/assets/javascripts/explorev2/components/ChartControl.jsx @@ -38,7 +38,7 @@ class ChartControl extends React.Component { } render() { return ( -
+
Chart Options
Datasource
diff --git a/caravel/assets/javascripts/explorev2/components/GroupBy.jsx b/caravel/assets/javascripts/explorev2/components/GroupBy.jsx index 12c1df46364c1..a49ab1a78eed5 100644 --- a/caravel/assets/javascripts/explorev2/components/GroupBy.jsx +++ b/caravel/assets/javascripts/explorev2/components/GroupBy.jsx @@ -20,25 +20,25 @@ const defaultProps = { }; const GroupBy = (props) => { - const selects = []; - selects.push({ - key: 'groupByColumns', - title: 'GroupBy Column', - options: props.groupByColumnOpts, - value: props.groupByColumns, - multi: true, - width: '12', - }); - selects.push({ - key: 'metrics', - title: 'Metrics', - options: props.metricsOpts, - value: props.metrics, - multi: true, - width: '12', - }); + const selects = [ + { + key: 'groupByColumns', + title: 'Group By', + options: props.groupByColumnOpts, + value: props.groupByColumns, + multi: true, + width: '12', + }, + { + key: 'metrics', + title: 'Metrics', + options: props.metricsOpts, + value: props.metrics, + multi: true, + width: '12', + }]; return ( -
+
GroupBy
diff --git a/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx b/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx index 5abef41bf2c37..2dabdbc850dc6 100644 --- a/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx +++ b/caravel/assets/javascripts/explorev2/components/NotGroupBy.jsx @@ -20,25 +20,25 @@ const defaultProps = { }; const NotGroupBy = (props) => { - const selects = []; - selects.push({ - key: 'columns', - title: 'Columns', - options: props.columnOpts, - value: props.columns, - multi: true, - width: '12', - }); - selects.push({ - key: 'orderings', - title: 'Orderings', - options: props.orderingOpts, - value: props.orderings, - multi: true, - width: '12', - }); + const selects = [ + { + key: 'columns', + title: 'Columns', + options: props.columnOpts, + value: props.columns, + multi: true, + width: '12', + }, + { + key: 'orderings', + title: 'Orderings', + options: props.orderingOpts, + value: props.orderings, + multi: true, + width: '12', + }]; return ( -
+
Not GroupBy
diff --git a/caravel/assets/javascripts/explorev2/components/Options.jsx b/caravel/assets/javascripts/explorev2/components/Options.jsx index 2081526727ec6..f52662a96de39 100644 --- a/caravel/assets/javascripts/explorev2/components/Options.jsx +++ b/caravel/assets/javascripts/explorev2/components/Options.jsx @@ -17,23 +17,23 @@ const defaultProps = { }; const Options = (props) => { - const selects = []; - selects.push({ - key: 'timeStampFormat', - title: 'Timestamp Format', - options: timestampOptions.map((t) => ({ value: t[0], label: t[1] })), - value: props.timeStampFormat, - width: '12', - }); - selects.push({ - key: 'rowLimit', - title: 'Row Limit', - options: rowLimitOptions.map((r) => ({ value: r, label: r })), - value: props.rowLimit, - width: '12', - }); + const selects = [ + { + key: 'timeStampFormat', + title: 'Timestamp Format', + options: timestampOptions.map((t) => ({ value: t[0], label: t[1] })), + value: props.timeStampFormat, + width: '12', + }, + { + key: 'rowLimit', + title: 'Row Limit', + options: rowLimitOptions.map((r) => ({ value: r, label: r })), + value: props.rowLimit, + width: '12', + }]; return ( -
+
Options
diff --git a/caravel/assets/javascripts/explorev2/components/SqlClause.jsx b/caravel/assets/javascripts/explorev2/components/SqlClause.jsx index d60c418bd4cc4..86e865fbd8d17 100644 --- a/caravel/assets/javascripts/explorev2/components/SqlClause.jsx +++ b/caravel/assets/javascripts/explorev2/components/SqlClause.jsx @@ -13,7 +13,7 @@ class SqlClause extends React.Component { } render() { return ( -
+
SQL
diff --git a/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx b/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx index 60c8e075d4003..0903465f00ed7 100644 --- a/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx +++ b/caravel/assets/javascripts/explorev2/components/TimeFilter.jsx @@ -26,37 +26,36 @@ const defaultProps = { }; const TimeFilter = (props) => { - const timeColumnTitle = - (props.datasourceType === 'table') ? 'Time Column' : 'Time Granularity'; - const timeGrainTitle = - (props.datasourceType === 'table') ? 'Time Grain' : 'Origin'; - const selects = []; - selects.push({ - key: 'timeColumn', - title: timeColumnTitle, - options: props.timeColumnOpts, - value: props.timeColumn, - }); - selects.push({ - key: 'timeGrain', - title: timeGrainTitle, - options: props.timeGrainOpts, - value: props.timeGrain, - }); - selects.push({ - key: 'since', - title: 'Since', - options: sinceOptions.map((s) => ({ value: s, label: s })), - value: props.since, - }); - selects.push({ - key: 'until', - title: 'Until', - options: untilOptions.map((u) => ({ value: u, label: u })), - value: props.until, - }); + const isDatasourceTypeTable = props.datasourceType === 'table'; + const timeColumnTitle = isDatasourceTypeTable ? 'Time Column' : 'Time Granularity'; + const timeGrainTitle = isDatasourceTypeTable ? 'Time Grain' : 'Origin'; + const selects = [ + { + key: 'timeColumn', + title: timeColumnTitle, + options: props.timeColumnOpts, + value: props.timeColumn, + }, + { + key: 'timeGrain', + title: timeGrainTitle, + options: props.timeGrainOpts, + value: props.timeGrain, + }, + { + key: 'since', + title: 'Since', + options: sinceOptions.map((s) => ({ value: s, label: s })), + value: props.since, + }, + { + key: 'until', + title: 'Until', + options: untilOptions.map((u) => ({ value: u, label: u })), + value: props.until, + }]; return ( -
+
Time Filter
diff --git a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js index 5c771e9f9d1e0..8e397c7e52dcb 100644 --- a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js +++ b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js @@ -3,9 +3,9 @@ import * as actions from '../actions/exploreActions'; import { addToArr, removeFromArr, alterInArr } from '../../../utils/reducerUtils'; const setFormInViz = function (state, action) { - const newForm = Object.assign({}, state); - newForm[action.key] = action.value; - return newForm; + const newFormData = Object.assign({}, state); + newFormData[action.key] = action.value; + return newFormData; }; const setVizInState = function (state, action) {