All files / javascripts/SqlLab/components SouthPane.jsx

0% Statements 0/36
0% Branches 0/6
0% Functions 0/4
0% Lines 0/35
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                                                                                                                                                                                                                                                                                               
import React from 'react';
import PropTypes from 'prop-types';
import shortid from 'shortid';
import { Alert, Tab, Tabs } from 'react-bootstrap';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
 
import * as Actions from '../actions';
import QueryHistory from './QueryHistory';
import ResultSet from './ResultSet';
 
/*
    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: PropTypes.array.isRequired,
  dataPreviewQueries: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired,
  activeSouthPaneTab: 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}
          height={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
          height={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);