mirror of
https://github.com/apache/superset.git
synced 2026-04-20 16:44:46 +00:00
[clarity/consistency] rename /explorev2/ -> /explore/ (#2802)
* rename /explorev2/ -> /explore/ * add redirect for existing explorev2 urls * fix long line * remove extra line * fix missed ref in spec
This commit is contained in:
Alanna Scott
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Checkbox } from 'react-bootstrap';
|
||||
|
||||
const propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
value: PropTypes.bool,
|
||||
label: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
value: false,
|
||||
onChange: () => {},
|
||||
};
|
||||
|
||||
export default class CheckboxControl extends React.Component {
|
||||
onToggle() {
|
||||
this.props.onChange(!this.props.value);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Checkbox
|
||||
checked={this.props.value}
|
||||
onChange={this.onToggle.bind(this)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CheckboxControl.propTypes = propTypes;
|
||||
CheckboxControl.defaultProps = defaultProps;
|
||||
@@ -0,0 +1,182 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Select from 'react-select';
|
||||
import { Button, Row, Col } from 'react-bootstrap';
|
||||
import SelectControl from './SelectControl';
|
||||
|
||||
const $ = window.$ = require('jquery');
|
||||
|
||||
const operatorsArr = [
|
||||
{ val: 'in', type: 'array', useSelect: true, multi: true },
|
||||
{ val: 'not in', type: 'array', useSelect: true, multi: true },
|
||||
{ val: '==', type: 'string', useSelect: true, multi: false, havingOnly: true },
|
||||
{ val: '!=', type: 'string', useSelect: true, multi: false, havingOnly: true },
|
||||
{ val: '>=', type: 'string', havingOnly: true },
|
||||
{ val: '<=', type: 'string', havingOnly: true },
|
||||
{ val: '>', type: 'string', havingOnly: true },
|
||||
{ val: '<', type: 'string', havingOnly: true },
|
||||
{ val: 'regex', type: 'string', datasourceTypes: ['druid'] },
|
||||
{ val: 'LIKE', type: 'string', datasourceTypes: ['table'] },
|
||||
];
|
||||
const operators = {};
|
||||
operatorsArr.forEach((op) => {
|
||||
operators[op.val] = op;
|
||||
});
|
||||
|
||||
const propTypes = {
|
||||
changeFilter: PropTypes.func,
|
||||
removeFilter: PropTypes.func,
|
||||
filter: PropTypes.object.isRequired,
|
||||
datasource: PropTypes.object,
|
||||
having: PropTypes.bool,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
changeFilter: () => {},
|
||||
removeFilter: () => {},
|
||||
datasource: null,
|
||||
having: false,
|
||||
};
|
||||
|
||||
export default class Filter extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
valuesLoading: false,
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
this.fetchFilterValues(this.props.filter.col);
|
||||
}
|
||||
fetchFilterValues(col) {
|
||||
const datasource = this.props.datasource;
|
||||
if (col && this.props.datasource && this.props.datasource.filter_select && !this.props.having) {
|
||||
this.setState({ valuesLoading: true });
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: `/superset/filter/${datasource.type}/${datasource.id}/${col}/`,
|
||||
success: (data) => {
|
||||
this.setState({ valuesLoading: false, valueChoices: data });
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
switchFilterValue(prevOp, nextOp) {
|
||||
if (operators[prevOp].type !== operators[nextOp].type) {
|
||||
const val = this.props.filter.value;
|
||||
let newVal;
|
||||
// switch from array to string
|
||||
if (operators[nextOp].type === 'string' && val && val.length > 0) {
|
||||
newVal = val[0];
|
||||
} else if (operators[nextOp].type === 'string' && val) {
|
||||
newVal = [val];
|
||||
}
|
||||
this.props.changeFilter('val', newVal);
|
||||
}
|
||||
}
|
||||
changeText(event) {
|
||||
this.props.changeFilter('val', event.target.value);
|
||||
}
|
||||
changeSelect(value) {
|
||||
this.props.changeFilter('val', value);
|
||||
}
|
||||
changeColumn(event) {
|
||||
this.props.changeFilter('col', event.value);
|
||||
this.fetchFilterValues(event.value);
|
||||
}
|
||||
changeOp(event) {
|
||||
this.switchFilterValue(this.props.filter.op, event.value);
|
||||
this.props.changeFilter('op', event.value);
|
||||
}
|
||||
removeFilter(filter) {
|
||||
this.props.removeFilter(filter);
|
||||
}
|
||||
renderFilterFormControl(filter) {
|
||||
const operator = operators[filter.op];
|
||||
if (operator.useSelect && !this.props.having) {
|
||||
return (
|
||||
<SelectControl
|
||||
multi={operator.multi}
|
||||
freeForm
|
||||
name="filter-value"
|
||||
value={filter.val}
|
||||
isLoading={this.state.valuesLoading}
|
||||
choices={this.state.valueChoices}
|
||||
onChange={this.changeSelect.bind(this)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
onChange={this.changeText.bind(this)}
|
||||
value={filter.val}
|
||||
className="form-control input-sm"
|
||||
placeholder="Filter value"
|
||||
/>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const datasource = this.props.datasource;
|
||||
const filter = this.props.filter;
|
||||
const opsChoices = operatorsArr
|
||||
.filter((o) => {
|
||||
if (this.props.having) {
|
||||
return !!o.havingOnly;
|
||||
}
|
||||
return (!o.datasourceTypes || o.datasourceTypes.indexOf(datasource.type) >= 0);
|
||||
})
|
||||
.map(o => ({ value: o.val, label: o.val }));
|
||||
let colChoices;
|
||||
if (datasource) {
|
||||
if (this.props.having) {
|
||||
colChoices = datasource.metrics_combo.map(c => ({ value: c[0], label: c[1] }));
|
||||
} else {
|
||||
colChoices = datasource.filterable_cols.map(c => ({ value: c[0], label: c[1] }));
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<Row className="space-1">
|
||||
<Col md={12}>
|
||||
<Select
|
||||
id="select-col"
|
||||
placeholder={this.props.having ? 'Select metric' : 'Select column'}
|
||||
clearable={false}
|
||||
options={colChoices}
|
||||
value={filter.col}
|
||||
onChange={this.changeColumn.bind(this)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="space-1">
|
||||
<Col md={3}>
|
||||
<Select
|
||||
id="select-op"
|
||||
placeholder="Select operator"
|
||||
options={opsChoices}
|
||||
clearable={false}
|
||||
value={filter.op}
|
||||
onChange={this.changeOp.bind(this)}
|
||||
/>
|
||||
</Col>
|
||||
<Col md={7}>
|
||||
{this.renderFilterFormControl(filter)}
|
||||
</Col>
|
||||
<Col md={2}>
|
||||
<Button
|
||||
id="remove-button"
|
||||
bsSize="small"
|
||||
onClick={this.removeFilter.bind(this)}
|
||||
>
|
||||
<i className="fa fa-minus" />
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Filter.propTypes = propTypes;
|
||||
Filter.defaultProps = defaultProps;
|
||||
@@ -0,0 +1,79 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Row, Col } from 'react-bootstrap';
|
||||
import Filter from './Filter';
|
||||
|
||||
const propTypes = {
|
||||
name: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
value: PropTypes.array,
|
||||
datasource: PropTypes.object,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
onChange: () => {},
|
||||
value: [],
|
||||
};
|
||||
|
||||
export default class FilterControl extends React.Component {
|
||||
addFilter() {
|
||||
const newFilters = Object.assign([], this.props.value);
|
||||
const col = this.props.datasource && this.props.datasource.filterable_cols.length > 0 ?
|
||||
this.props.datasource.filterable_cols[0][0] :
|
||||
null;
|
||||
newFilters.push({
|
||||
col,
|
||||
op: 'in',
|
||||
val: this.props.datasource.filter_select ? [] : '',
|
||||
});
|
||||
this.props.onChange(newFilters);
|
||||
}
|
||||
changeFilter(index, control, value) {
|
||||
const newFilters = Object.assign([], this.props.value);
|
||||
const modifiedFilter = Object.assign({}, newFilters[index]);
|
||||
if (typeof control === 'string') {
|
||||
modifiedFilter[control] = value;
|
||||
} else {
|
||||
control.forEach((c, i) => {
|
||||
modifiedFilter[c] = value[i];
|
||||
});
|
||||
}
|
||||
newFilters.splice(index, 1, modifiedFilter);
|
||||
this.props.onChange(newFilters);
|
||||
}
|
||||
removeFilter(index) {
|
||||
this.props.onChange(this.props.value.filter((f, i) => i !== index));
|
||||
}
|
||||
render() {
|
||||
const filters = this.props.value.map((filter, i) => (
|
||||
<div key={i}>
|
||||
<Filter
|
||||
having={this.props.name === 'having_filters'}
|
||||
filter={filter}
|
||||
datasource={this.props.datasource}
|
||||
removeFilter={this.removeFilter.bind(this, i)}
|
||||
changeFilter={this.changeFilter.bind(this, i)}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
return (
|
||||
<div>
|
||||
{filters}
|
||||
<Row className="space-2">
|
||||
<Col md={2}>
|
||||
<Button
|
||||
id="add-button"
|
||||
bsSize="sm"
|
||||
onClick={this.addFilter.bind(this)}
|
||||
>
|
||||
<i className="fa fa-plus" /> Add Filter
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
FilterControl.propTypes = propTypes;
|
||||
FilterControl.defaultProps = defaultProps;
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormControl } from 'react-bootstrap';
|
||||
|
||||
const propTypes = {
|
||||
onChange: PropTypes.func,
|
||||
value: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
]),
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
onChange: () => {},
|
||||
};
|
||||
|
||||
export default function HiddenControl(props) {
|
||||
// This wouldn't be necessary but might as well
|
||||
return <FormControl type="hidden" value={props.value} />;
|
||||
}
|
||||
|
||||
HiddenControl.propTypes = propTypes;
|
||||
HiddenControl.defaultProps = defaultProps;
|
||||
@@ -0,0 +1,125 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Select, { Creatable } from 'react-select';
|
||||
|
||||
const propTypes = {
|
||||
choices: PropTypes.array,
|
||||
clearable: PropTypes.bool,
|
||||
description: PropTypes.string,
|
||||
freeForm: PropTypes.bool,
|
||||
isLoading: PropTypes.bool,
|
||||
label: PropTypes.string,
|
||||
multi: PropTypes.bool,
|
||||
name: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func,
|
||||
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
choices: [],
|
||||
clearable: true,
|
||||
description: null,
|
||||
freeForm: false,
|
||||
isLoading: false,
|
||||
label: null,
|
||||
multi: false,
|
||||
onChange: () => {},
|
||||
};
|
||||
|
||||
export default class SelectControl extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { options: this.getOptions(props) };
|
||||
this.onChange = this.onChange.bind(this);
|
||||
this.renderOption = this.renderOption.bind(this);
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.choices !== this.props.choices) {
|
||||
const options = this.getOptions(nextProps);
|
||||
this.setState({ options });
|
||||
}
|
||||
}
|
||||
onChange(opt) {
|
||||
let optionValue = opt ? opt.value : null;
|
||||
// if multi, return options values as an array
|
||||
if (this.props.multi) {
|
||||
optionValue = opt ? opt.map(o => o.value) : null;
|
||||
}
|
||||
this.props.onChange(optionValue);
|
||||
}
|
||||
getOptions(props) {
|
||||
// Accepts different formats of input
|
||||
const options = props.choices.map((c) => {
|
||||
let option;
|
||||
if (Array.isArray(c)) {
|
||||
const label = c.length > 1 ? c[1] : c[0];
|
||||
option = {
|
||||
value: c[0],
|
||||
label,
|
||||
};
|
||||
if (c[2]) option.imgSrc = c[2];
|
||||
} else if (Object.is(c)) {
|
||||
option = c;
|
||||
} else {
|
||||
option = {
|
||||
value: c,
|
||||
label: c,
|
||||
};
|
||||
}
|
||||
return option;
|
||||
});
|
||||
if (props.freeForm) {
|
||||
// For FreeFormSelect, insert value into options if not exist
|
||||
const values = options.map(c => c.value);
|
||||
if (props.value) {
|
||||
let valuesToAdd = props.value;
|
||||
if (!Array.isArray(valuesToAdd)) {
|
||||
valuesToAdd = [valuesToAdd];
|
||||
}
|
||||
valuesToAdd.forEach((v) => {
|
||||
if (values.indexOf(v) < 0) {
|
||||
options.push({ value: v, label: v });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return options;
|
||||
}
|
||||
renderOption(opt) {
|
||||
if (opt.imgSrc) {
|
||||
return (
|
||||
<div>
|
||||
<img className="viz-thumb-option" src={opt.imgSrc} alt={opt.value} />
|
||||
<span>{opt.label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return opt.label;
|
||||
}
|
||||
render() {
|
||||
// Tab, comma or Enter will trigger a new option created for FreeFormSelect
|
||||
const selectProps = {
|
||||
multi: this.props.multi,
|
||||
name: `select-${this.props.name}`,
|
||||
placeholder: `Select (${this.state.options.length})`,
|
||||
options: this.state.options,
|
||||
value: this.props.value,
|
||||
autosize: false,
|
||||
clearable: this.props.clearable,
|
||||
isLoading: this.props.isLoading,
|
||||
onChange: this.onChange,
|
||||
optionRenderer: this.renderOption,
|
||||
};
|
||||
// Tab, comma or Enter will trigger a new option created for FreeFormSelect
|
||||
const selectWrap = this.props.freeForm ?
|
||||
(<Creatable {...selectProps} />) : (<Select {...selectProps} />);
|
||||
return (
|
||||
<div>
|
||||
{selectWrap}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SelectControl.propTypes = propTypes;
|
||||
SelectControl.defaultProps = defaultProps;
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormGroup, FormControl } from 'react-bootstrap';
|
||||
|
||||
const propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
label: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
value: PropTypes.string,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
label: null,
|
||||
description: null,
|
||||
onChange: () => {},
|
||||
value: '',
|
||||
};
|
||||
|
||||
export default class TextAreaControl extends React.Component {
|
||||
onChange(event) {
|
||||
this.props.onChange(event.target.value);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<FormGroup controlId="formControlsTextarea">
|
||||
<FormControl
|
||||
componentClass="textarea"
|
||||
placeholder="textarea"
|
||||
onChange={this.onChange.bind(this)}
|
||||
value={this.props.value}
|
||||
/>
|
||||
</FormGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TextAreaControl.propTypes = propTypes;
|
||||
TextAreaControl.defaultProps = defaultProps;
|
||||
@@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormGroup, FormControl } from 'react-bootstrap';
|
||||
import * as v from '../../validators';
|
||||
|
||||
const propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
label: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
onChange: PropTypes.func,
|
||||
value: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
]),
|
||||
isFloat: PropTypes.bool,
|
||||
isInt: PropTypes.bool,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
label: null,
|
||||
description: null,
|
||||
onChange: () => {},
|
||||
value: '',
|
||||
isInt: false,
|
||||
isFloat: false,
|
||||
};
|
||||
|
||||
export default class TextControl extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const value = props.value ? props.value.toString() : '';
|
||||
this.state = { value };
|
||||
this.onChange = this.onChange.bind(this);
|
||||
}
|
||||
onChange(event) {
|
||||
let value = event.target.value || '';
|
||||
this.setState({ value });
|
||||
|
||||
// Validation & casting
|
||||
const errors = [];
|
||||
if (this.props.isFloat) {
|
||||
const error = v.numeric(value);
|
||||
if (error) {
|
||||
errors.push(error);
|
||||
} else {
|
||||
value = parseFloat(value);
|
||||
}
|
||||
}
|
||||
if (this.props.isInt) {
|
||||
const error = v.integer(value);
|
||||
if (error) {
|
||||
errors.push(error);
|
||||
} else {
|
||||
value = parseInt(value, 10);
|
||||
}
|
||||
}
|
||||
this.props.onChange(value, errors);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<FormGroup controlId="formInlineName" bsSize="small">
|
||||
<FormControl
|
||||
type="text"
|
||||
placeholder=""
|
||||
onChange={this.onChange}
|
||||
value={this.state.value}
|
||||
/>
|
||||
</FormGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TextControl.propTypes = propTypes;
|
||||
TextControl.defaultProps = defaultProps;
|
||||
Reference in New Issue
Block a user