All files / javascripts/explorev2/components ControlPanelsContainer.jsx

80% Statements 36/45
54.55% Branches 12/22
71.43% Functions 5/7
80% Lines 36/45
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 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151  1x 1x 1x 1x 1x 1x 1x 1x 1x 1x   1x                       3x   1x 1x 1x     1x 1x 1x                         17x 17x 17x       17x 5x   17x     1x     1x   1x     17x 17x         1x 1x                         6x           12x     17x                           2x                                         1x                                        
/* eslint camelcase: 0 */
import React, { PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import * as actions from '../actions/exploreActions';
import { connect } from 'react-redux';
import { Panel, Alert } from 'react-bootstrap';
import visTypes, { sectionsToRender, commonControlPanelSections } from '../stores/visTypes';
import ControlPanelSection from './ControlPanelSection';
import FieldSetRow from './FieldSetRow';
import FieldSet from './FieldSet';
import Filters from './Filters';
 
const propTypes = {
  datasource_type: PropTypes.string.isRequired,
  actions: PropTypes.object.isRequired,
  fields: PropTypes.object.isRequired,
  isDatasourceMetaLoading: PropTypes.bool.isRequired,
  form_data: PropTypes.object.isRequired,
  y_axis_zero: PropTypes.any,
  alert: PropTypes.string,
  exploreState: PropTypes.object.isRequired,
};
 
class ControlPanelsContainer extends React.Component {
  constructor(props) {
    super(props);
    this.fieldOverrides = this.fieldOverrides.bind(this);
    this.getFieldData = this.getFieldData.bind(this);
    this.removeAlert = this.removeAlert.bind(this);
  }
  componentWillMount() {
    const datasource_id = this.props.form_data.datasource;
    const datasource_type = this.props.datasource_type;
    Iif (datasource_id) {
      this.props.actions.fetchDatasourceMetadata(datasource_id, datasource_type);
    }
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.form_data.datasource !== this.props.form_data.datasource) {
      if (nextProps.form_data.datasource) {
        this.props.actions.fetchDatasourceMetadata(
          nextProps.form_data.datasource, nextProps.datasource_type);
      }
    }
  }
  getFieldData(fs) {
    const fieldOverrides = this.fieldOverrides();
    let fieldData = this.props.fields[fs] || {};
    Iif (fieldOverrides.hasOwnProperty(fs)) {
      const overrideData = fieldOverrides[fs];
      fieldData = Object.assign({}, fieldData, overrideData);
    }
    if (fieldData.mapStateToProps) {
      Object.assign(fieldData, fieldData.mapStateToProps(this.props.exploreState));
    }
    return fieldData;
  }
  sectionsToRender() {
    return sectionsToRender(this.props.form_data.viz_type, this.props.datasource_type);
  }
  filterSectionsToRender() {
    const filterSections = this.props.datasource_type === 'table' ?
      [commonControlPanelSections.filters[0]] : commonControlPanelSections.filters;
    return filterSections;
  }
  fieldOverrides() {
    const viz = visTypes[this.props.form_data.viz_type];
    return viz.fieldOverrides || {};
  }
  removeAlert() {
    this.props.actions.removeControlPanelAlert();
  }
  render() {
    return (
      <div className="scrollbar-container">
        <Panel className="scrollbar-content">
          {this.props.alert &&
            <Alert bsStyle="warning">
              {this.props.alert}
              <i
                className="fa fa-close pull-right"
                onClick={this.removeAlert}
                style={{ cursor: 'pointer' }}
              />
            </Alert>
          }
          {!this.props.isDatasourceMetaLoading && this.sectionsToRender().map((section) => (
            <ControlPanelSection
              key={section.label}
              label={section.label}
              tooltip={section.description}
            >
              {section.fieldSetRows.map((fieldSets, i) => (
                <FieldSetRow
                  key={`fieldsetrow-${i}`}
                  fields={fieldSets.map(fieldName => (
                    <FieldSet
                      name={fieldName}
                      key={`field-${fieldName}`}
                      value={this.props.form_data[fieldName]}
                      validationErrors={this.props.fields[fieldName].validationErrors}
                      actions={this.props.actions}
                      {...this.getFieldData(fieldName)}
                    />
                  ))}
                />
              ))}
            </ControlPanelSection>
          ))}
          {this.filterSectionsToRender().map((section) => (
            <ControlPanelSection
              key={section.label}
              label={section.label}
              tooltip={section.description}
            >
              <Filters
                filterColumnOpts={[]}
                filters={this.props.form_data.filters}
                actions={this.props.actions}
                prefix={section.prefix}
                datasource_id={this.props.form_data.datasource}
              />
            </ControlPanelSection>
          ))}
        </Panel>
      </div>
    );
  }
}
 
ControlPanelsContainer.propTypes = propTypes;
 
function mapStateToProps(state) {
  return {
    alert: state.controlPanelAlert,
    isDatasourceMetaLoading: state.isDatasourceMetaLoading,
    fields: state.fields,
    exploreState: state,
  };
}
 
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch),
  };
}
 
export { ControlPanelsContainer };
 
export default connect(mapStateToProps, mapDispatchToProps)(ControlPanelsContainer);