From 2276e9f7cb609db0aa229d0d2b1810edcb13b6a2 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Thu, 10 Aug 2017 14:19:33 -0700 Subject: [PATCH] Pull out tab list into separate component --- ui/src/dashboards/components/QueryMaker.js | 76 ++++++-------------- ui/src/dashboards/components/QueryTabList.js | 49 +++++++++++++ 2 files changed, 69 insertions(+), 56 deletions(-) create mode 100644 ui/src/dashboards/components/QueryTabList.js diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js index 2ead74a064..5867b88633 100644 --- a/ui/src/dashboards/components/QueryMaker.js +++ b/ui/src/dashboards/components/QueryMaker.js @@ -1,8 +1,7 @@ import React, {PropTypes} from 'react' import QueryBuilder from 'src/data_explorer/components/QueryBuilder' -import QueryMakerTab from 'src/data_explorer/components/QueryMakerTab' -import buildInfluxQLQuery from 'utils/influxql' +import QueryTabList from 'src/dashboards/components/QueryTabList' import classnames from 'classnames' const {arrayOf, bool, func, node, number, shape, string} = PropTypes @@ -67,7 +66,17 @@ const QueryMaker = React.createClass({ }, render() { - const {height, top, layout} = this.props + const { + height, + top, + layout, + queries, + timeRange, + onDeleteQuery, + activeQueryIndex, + setActiveQueryIndex, + } = this.props + return (
- {this.renderQueryTabList()} + {this.renderQueryBuilder()}
) @@ -108,19 +124,6 @@ const QueryMaker = React.createClass({ ) } - // NOTE - // the layout prop is intended to toggle between a horizontal and vertical layout - // the layout will be horizontal by default - // vertical layout is known as "panel" layout as it will be used to build - // a "cell editor panel" though that term might change - // Currently, if set to "panel" the only noticeable difference is that the - // DatabaseList becomes DatabaseDropdown (more space efficient in vertical layout) - // and is outside the container with measurements/tags/fields - // - // TODO: - // - perhaps switch to something like "isVertical" and accept boolean instead of string - // - more css/markup work to make the alternate appearance look good - return ( ) }, - - renderQueryTabList() { - const { - queries, - activeQueryIndex, - onDeleteQuery, - timeRange, - setActiveQueryIndex, - } = this.props - - return ( -
- {queries.map((q, i) => { - return ( - - ) - })} - {this.props.children} -
- -
-
- ) - }, }) QueryMaker.defaultProps = { diff --git a/ui/src/dashboards/components/QueryTabList.js b/ui/src/dashboards/components/QueryTabList.js new file mode 100644 index 0000000000..49d7225764 --- /dev/null +++ b/ui/src/dashboards/components/QueryTabList.js @@ -0,0 +1,49 @@ +import React, {PropTypes} from 'react' +import QueryMakerTab from 'src/data_explorer/components/QueryMakerTab' +import buildInfluxQLQuery from 'utils/influxql' + +const QueryTabList = ({ + queries, + timeRange, + onAddQuery, + onDeleteQuery, + activeQueryIndex, + setActiveQueryIndex, +}) => +
+ {queries.map((q, i) => + + )} +
+ +
+
+ +const {arrayOf, func, number, shape, string} = PropTypes + +QueryTabList.propTypes = { + queries: arrayOf(shape({})).isRequired, + timeRange: shape({ + upper: string, + lower: string, + }).isRequired, + onAddQuery: func.isRequired, + onDeleteQuery: func.isRequired, + activeQueryIndex: number.isRequired, + setActiveQueryIndex: func.isRequired, +} + +export default QueryTabList