From 5c0549531068c1d3fd211293f4d2ba3f96d622b3 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Fri, 15 Feb 2019 23:23:51 +0200 Subject: [PATCH 1/2] =?UTF-8?q?=E2=80=9CAdd=20Widget=E2=80=9D=20Dialog=20s?= =?UTF-8?q?teps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/app/assets/less/ant.less | 1 + .../components/dashboards/AddWidgetDialog.jsx | 173 +++++++++++++----- 2 files changed, 130 insertions(+), 44 deletions(-) diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less index b1d3dc4c0e..b8dc4ca199 100644 --- a/client/app/assets/less/ant.less +++ b/client/app/assets/less/ant.less @@ -20,6 +20,7 @@ @import '~antd/lib/tag/style/index'; @import '~antd/lib/grid/style/index'; @import '~antd/lib/switch/style/index'; +@import '~antd/lib/steps/style/index'; @import 'inc/ant-variables'; // Remove bold in labels for Ant checkboxes and radio buttons diff --git a/client/app/components/dashboards/AddWidgetDialog.jsx b/client/app/components/dashboards/AddWidgetDialog.jsx index b7cb1f22fc..765a577c7b 100644 --- a/client/app/components/dashboards/AddWidgetDialog.jsx +++ b/client/app/components/dashboards/AddWidgetDialog.jsx @@ -3,6 +3,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import Select from 'antd/lib/select'; import Modal from 'antd/lib/modal'; +import Steps from 'antd/lib/steps'; +import Button from 'antd/lib/button'; +import Icon from 'antd/lib/icon'; import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper'; import { BigMessage } from '@/components/BigMessage'; import highlight from '@/lib/highlight'; @@ -26,8 +29,11 @@ class AddWidgetDialog extends React.Component { dialog: DialogPropType.isRequired, }; + steps = [] + constructor(props) { super(props); + this.state = { saveInProgress: false, selectedQuery: null, @@ -38,6 +44,7 @@ class AddWidgetDialog extends React.Component { selectedVis: null, parameterMappings: [], isLoaded: false, + currStepIdx: 0, }; const searchQueries = debounce(this.searchQueries.bind(this), 200); @@ -46,6 +53,19 @@ class AddWidgetDialog extends React.Component { this.setState({ searchTerm }); searchQueries(searchTerm); }; + + this.steps = [{ + id: 'query', + title: 'Select Query', + allowNext: () => this.state.selectedQuery, + }, { + id: 'visualization', + title: 'Select Visualization', + }, { + id: 'params', + title: 'Review Parameters', + active: () => this.state.parameterMappings.length > 0, + }]; } componentDidMount() { @@ -76,9 +96,10 @@ class AddWidgetDialog extends React.Component { this.props.dashboard.getParametersDefs(), param => param.name, ); + const params = query.getParametersDefs(); this.setState({ selectedQuery: query, - parameterMappings: map(query.getParametersDefs(), param => ({ + parameterMappings: map(params, param => ({ name: param.name, type: includes(existingParamNames, param.name) ? MappingType.DashboardMapToExisting : MappingType.DashboardAddNew, @@ -265,61 +286,125 @@ class AddWidgetDialog extends React.Component { } visualizationGroups = values(visualizationGroups); return ( -
-
- - + + +
+ - VISUALIZATION HERE SOON -
-
+ + ); + } + + renderStepContent(currStep) { + switch (currStep.id) { + case 'query': + return ( + + {this.renderQueryInput()} + {this.renderSearchQueryResults()} + + ); + case 'visualization': + return this.renderVisualizationInput(); + case 'params': + return ( + this.updateParamMappings(mappings)} + /> + ); + // no default + } + } + + renderPrevButton() { + const { currStepIdx } = this.state; + if (currStepIdx === 0) { + return null; + } + + return ( + + ); + } + + renderNextOrDoneButton(steps) { + const { currStepIdx } = this.state; + const next = () => this.setState({ currStepIdx: currStepIdx + 1 }); + + // next + if (currStepIdx < steps.length - 1) { + return ( + + ); + } + + // done + return ( + ); } render() { - const existingParams = this.props.dashboard.getParametersDefs(); const { dialog } = this.props; + const { currStepIdx } = this.state; + const currStep = this.steps[currStepIdx]; + + // filter by active() + const steps = this.steps.filter(step => (step.active ? step.active() : true)); return ( this.saveWidget()} - okButtonProps={{ - loading: this.state.saveInProgress, - disabled: !this.state.selectedQuery, - }} - okText="Add to Dashboard" - width={700} + footer={[this.renderPrevButton(), this.renderNextOrDoneButton(steps)]} + width={800} > - {this.renderQueryInput()} - {!this.state.selectedQuery && this.renderSearchQueryResults()} - {this.state.selectedQuery && this.renderVisualizationInput()} - - { - (this.state.parameterMappings.length > 0) && [ - , - this.updateParamMappings(mappings)} - />, - ] - } + + {steps.map(({ title }) => ( + + ))} + } /> + +
+ {this.renderStepContent(currStep)} +
); } From 396c9097a7203e19b0b186a283adf80ce5d5eee4 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Sat, 16 Feb 2019 16:35:18 +0200 Subject: [PATCH 2/2] Updated visualization step look --- client/app/assets/less/ant.less | 1 + .../components/dashboards/AddWidgetDialog.jsx | 77 +++++++++---------- 2 files changed, 37 insertions(+), 41 deletions(-) diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less index b8dc4ca199..73c8cf62dc 100644 --- a/client/app/assets/less/ant.less +++ b/client/app/assets/less/ant.less @@ -21,6 +21,7 @@ @import '~antd/lib/grid/style/index'; @import '~antd/lib/switch/style/index'; @import '~antd/lib/steps/style/index'; +@import '~antd/lib/layout/style/index'; @import 'inc/ant-variables'; // Remove bold in labels for Ant checkboxes and radio buttons diff --git a/client/app/components/dashboards/AddWidgetDialog.jsx b/client/app/components/dashboards/AddWidgetDialog.jsx index 765a577c7b..c58fcdaf69 100644 --- a/client/app/components/dashboards/AddWidgetDialog.jsx +++ b/client/app/components/dashboards/AddWidgetDialog.jsx @@ -1,10 +1,11 @@ -import { debounce, each, values, map, includes, first, identity } from 'lodash'; +import { debounce, each, map, includes, identity } from 'lodash'; import React from 'react'; import PropTypes from 'prop-types'; -import Select from 'antd/lib/select'; import Modal from 'antd/lib/modal'; import Steps from 'antd/lib/steps'; import Button from 'antd/lib/button'; +import Radio from 'antd/lib/radio'; +import Layout from 'antd/lib/layout'; import Icon from 'antd/lib/icon'; import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper'; import { BigMessage } from '@/components/BigMessage'; @@ -21,8 +22,6 @@ import { toastr } from '@/services/ng'; import { Widget } from '@/services/widget'; import { Query } from '@/services/query'; -const { Option, OptGroup } = Select; - class AddWidgetDialog extends React.Component { static propTypes = { dashboard: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types @@ -58,13 +57,13 @@ class AddWidgetDialog extends React.Component { id: 'query', title: 'Select Query', allowNext: () => this.state.selectedQuery, - }, { - id: 'visualization', - title: 'Select Visualization', }, { id: 'params', title: 'Review Parameters', active: () => this.state.parameterMappings.length > 0, + }, { + id: 'visualization', + title: 'Select Visualization', }]; } @@ -277,35 +276,31 @@ class AddWidgetDialog extends React.Component { } renderVisualizationInput() { - let visualizationGroups = {}; - if (this.state.selectedQuery) { - each(this.state.selectedQuery.visualizations, (vis) => { - visualizationGroups[vis.type] = visualizationGroups[vis.type] || []; - visualizationGroups[vis.type].push(vis); - }); - } - visualizationGroups = values(visualizationGroups); + const radioStyle = { + display: 'block', + height: '30px', + lineHeight: '30px', + }; + const { selectedQuery } = this.state; return ( - - -
- - VISUALIZATION HERE SOON - -
- + + + + this.selectVisualization(selectedQuery, e.target.value)} + defaultValue={this.state.selectedVis.id} + > + {selectedQuery.visualizations.map(({ id, name }) => ( + {name} + ))} + + + + - Visualization {this.state.selectedVis.name} placeholder - + + ); } @@ -352,16 +347,16 @@ class AddWidgetDialog extends React.Component { renderNextOrDoneButton(steps) { const { currStepIdx } = this.state; - const next = () => this.setState({ currStepIdx: currStepIdx + 1 }); // next if (currStepIdx < steps.length - 1) { + const { allowNext } = steps[currStepIdx]; return ( @@ -384,10 +379,10 @@ class AddWidgetDialog extends React.Component { render() { const { dialog } = this.props; const { currStepIdx } = this.state; - const currStep = this.steps[currStepIdx]; // filter by active() const steps = this.steps.filter(step => (step.active ? step.active() : true)); + const currStep = steps[currStepIdx]; return ( ( ))} - } /> + -
+
{this.renderStepContent(currStep)}