All files / javascripts/SqlLab/components SouthPane.jsx

34.29% Statements 12/35
0% Branches 0/6
0% Functions 0/4
35.29% Lines 12/34
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 1431x 1x 1x 1x 1x 1x 1x   1x           1x             1x                                                                                                                                                                                                                                         1x 1x      
import { Alert, Tab, Tabs } from 'react-bootstrap';
import QueryHistory from './QueryHistory';
import ResultSet from './ResultSet';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as Actions from '../actions';
import React from 'react';
 
import shortid from 'shortid';
 
/*
    editorQueries are queries executed by users passed from SqlEditor component
    dataPrebiewQueries are all queries executed for preview of table data (from SqlEditorLeft)
*/
const propTypes = {
  editorQueries: React.PropTypes.array.isRequired,
  dataPreviewQueries: React.PropTypes.array.isRequired,
  actions: React.PropTypes.object.isRequired,
  activeSouthPaneTab: React.PropTypes.string,
};
 
const defaultProps = {
  activeSouthPaneTab: 'Results',
};
 
class SouthPane extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      innerTabHeight: this.getInnerTabHeight(),
    };
  }
  getInnerTabHeight() {
    // hack to get height the tab container so it can be fixed and scroll in place
    // calculate inner tab height
 
    // document.getElementById('brace-editor').getBoundingClientRect().height;
    const sqlEditorHeight = 192;
 
    // document.getElementById('js-sql-toolbar').getBoundingClientRect().height;
    const sqlToolbar = 30;
 
    // document.getElementsByClassName('nav-tabs')[0].getBoundingClientRect().height * 2;
    const tabsHeight = 88;
 
    // document.getElementsByTagName('header')[0].getBoundingClientRect().height;
    const headerHeight = 59;
 
    const sum =
      sqlEditorHeight +
      sqlToolbar +
      tabsHeight +
      headerHeight;
 
    return window.innerHeight - sum - 95;
  }
  switchTab(id) {
    this.props.actions.setActiveSouthPaneTab(id);
  }
  render() {
    let latestQuery;
    const props = this.props;
    if (props.editorQueries.length > 0) {
      latestQuery = props.editorQueries[props.editorQueries.length - 1];
    }
    let results;
    if (latestQuery) {
      results = (
        <ResultSet
          showControls
          search
          query={latestQuery}
          actions={props.actions}
          resultSetHeight={this.state.innerTabHeight}
        />
      );
    } else {
      results = <Alert bsStyle="info">Run a query to display results here</Alert>;
    }
 
    const dataPreviewTabs = props.dataPreviewQueries.map((query) => (
      <Tab
        title={`Preview for ${query.tableName}`}
        eventKey={query.id}
        key={query.id}
      >
        <ResultSet
          query={query}
          visualize={false}
          csv={false}
          actions={props.actions}
          cache
          resultSetHeight={this.state.innerTabHeight}
        />
      </Tab>
    ));
 
    return (
      <div className="SouthPane">
        <Tabs
          bsStyle="tabs"
          id={shortid.generate()}
          activeKey={this.props.activeSouthPaneTab}
          onSelect={this.switchTab.bind(this)}
        >
          <Tab
            title="Results"
            eventKey="Results"
          >
            {results}
          </Tab>
          <Tab
            title="Query History"
            eventKey="History"
          >
            <div style={{ height: `${this.state.innerTabHeight}px`, overflow: 'scroll' }}>
              <QueryHistory queries={props.editorQueries} actions={props.actions} />
            </div>
          </Tab>
          {dataPreviewTabs}
        </Tabs>
      </div>
    );
  }
}
 
function mapStateToProps(state) {
  return {
    activeSouthPaneTab: state.activeSouthPaneTab,
  };
}
 
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch),
  };
}
 
SouthPane.propTypes = propTypes;
SouthPane.defaultProps = defaultProps;
 
export default connect(mapStateToProps, mapDispatchToProps)(SouthPane);