all files / src/addSlice/ AddSliceContainer.jsx

90% Statements 27/30
75% Branches 3/4
62.5% Functions 5/8
89.29% Lines 25/28
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111                 288×                                                                                                                                                            
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Panel } from 'react-bootstrap';
import Select from 'react-virtualized-select';
import visTypes from '../explore/visTypes';
import { t } from '../locales';
 
const propTypes = {
  datasources: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired,
  })).isRequired,
};
 
const styleSelectWidth = { width: 300 };
 
export default class AddSliceContainer extends React.PureComponent {
  constructor(props) {
    super(props);
    const visTypeKeys = Object.keys(visTypes);
    this.vizTypeOptions = visTypeKeys.map(vt => ({ label: visTypes[vt].label, value: vt }));
    this.state = {
      visType: 'table',
    };
  }
 
  exploreUrl() {
    const formData = encodeURIComponent(
      JSON.stringify({
        viz_type: this.state.visType,
        datasource: this.state.datasourceValue,
      }));
    return `/superset/explore/?form_data=${formData}`;
  }
 
  gotoSlice() {
    window.location.href = this.exploreUrl();
  }
 
  changeDatasource(e) {
    this.setState({
      datasourceValue: e.value,
      datasourceId: e.value.split('__')[0],
      datasourceType: e.value.split('__')[1],
    });
  }
 
  changeVisType(e) {
    this.setState({ visType: e.value });
  }
 
  isBtnDisabled() {
    return !(this.state.datasourceId && this.state.visType);
  }
 
  render() {
    return (
      <div className="container">
        <Panel header={<h3>{t('Create a new chart')}</h3>}>
          <div>
            <p>{t('Choose a datasource')}</p>
            <div style={styleSelectWidth}>
              <Select
                clearable={false}
                style={styleSelectWidth}
                name="select-datasource"
                onChange={this.changeDatasource.bind(this)}
                options={this.props.datasources}
                placeholder={t('Choose a datasource')}
                value={this.state.datasourceValue}
                width={200}
              />
            </div>
            <p className="text-muted">
              {t(
                'If the datasource your are looking for is not ' +
                'available in the list, ' +
                'follow the instructions on the how to add it on the ')}
              <a href="http://superset.apache.org/tutorial.html">{t('Superset tutorial')}</a>
            </p>
          </div>
          <br />
          <div>
            <p>{t('Choose a visualization type')}</p>
            <Select
              clearable={false}
              name="select-vis-type"
              style={styleSelectWidth}
              onChange={this.changeVisType.bind(this)}
              options={this.vizTypeOptions}
              placeholder={t('Choose a visualization type')}
              value={this.state.visType}
            />
          </div>
          <br />
          <Button
            bsStyle="primary"
            disabled={this.isBtnDisabled()}
            onClick={this.gotoSlice.bind(this)}
          >
            {t('Create new chart')}
          </Button>
          <br /><br />
        </Panel>
      </div>
    );
  }
}
 
AddSliceContainer.propTypes = propTypes;