forked from apache/superset
-
Notifications
You must be signed in to change notification settings - Fork 5
/
SouthPane.jsx
115 lines (106 loc) · 2.97 KB
/
SouthPane.jsx
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
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';
import { t } from '../../locales';
/*
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,
height: PropTypes.number,
};
const defaultProps = {
activeSouthPaneTab: 'Results',
};
class SouthPane extends React.PureComponent {
switchTab(id) {
this.props.actions.setActiveSouthPaneTab(id);
}
render() {
const innerTabHeight = this.props.height - 55;
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={innerTabHeight}
/>
);
} else {
results = <Alert bsStyle="info">{t('Run a query to display results here')}</Alert>;
}
const dataPreviewTabs = props.dataPreviewQueries.map(query => (
<Tab
title={t('Preview for %s', query.tableName)}
eventKey={query.id}
key={query.id}
>
<ResultSet
query={query}
visualize={false}
csv={false}
actions={props.actions}
cache
height={innerTabHeight}
/>
</Tab>
));
return (
<div className="SouthPane">
<Tabs
bsStyle="tabs"
id={shortid.generate()}
activeKey={this.props.activeSouthPaneTab}
onSelect={this.switchTab.bind(this)}
>
<Tab
title={t('Results')}
eventKey="Results"
>
{results}
</Tab>
<Tab
title={t('Query History')}
eventKey="History"
>
<div style={{ height: `${innerTabHeight}px`, overflow: 'auto' }}>
<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);