mirror of https://github.com/apache/superset.git
[sql-lab] make query history scrollable (#2499)
* make query history scrollable * not around results
This commit is contained in:
parent
02c5cac26f
commit
d93b1fc686
|
@ -6,6 +6,8 @@ import shortid from 'shortid';
|
|||
import VisualizeModal from './VisualizeModal';
|
||||
import HighlightedSql from './HighlightedSql';
|
||||
|
||||
const RESULTS_CONTROLS_HEIGHT = 36;
|
||||
|
||||
const propTypes = {
|
||||
actions: React.PropTypes.object,
|
||||
csv: React.PropTypes.bool,
|
||||
|
@ -52,36 +54,6 @@ class ResultSet extends React.PureComponent {
|
|||
this.fetchResults(nextProps.query);
|
||||
}
|
||||
}
|
||||
componentWillMount() {
|
||||
// hack to get height of result set table so it can be fixed and scroll in place
|
||||
if (this.state.resultSetHeight === '0') {
|
||||
// calculate result set table 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;
|
||||
|
||||
// this needs to be hardcoded since this element is in this component and has not mounted yet
|
||||
const resultsControlsHeight = 30;
|
||||
|
||||
const sum =
|
||||
sqlEditorHeight +
|
||||
sqlToolbar +
|
||||
tabsHeight +
|
||||
resultsControlsHeight +
|
||||
headerHeight;
|
||||
|
||||
this.setState({ resultSetHeight: window.innerHeight - sum - 95 });
|
||||
}
|
||||
}
|
||||
getControls() {
|
||||
if (this.props.search || this.props.visualize || this.props.csv) {
|
||||
let csvButton;
|
||||
|
@ -223,7 +195,10 @@ class ResultSet extends React.PureComponent {
|
|||
/>
|
||||
{this.getControls.bind(this)()}
|
||||
{sql}
|
||||
<div className="ResultSet" style={{ height: `${this.state.resultSetHeight}px` }}>
|
||||
<div
|
||||
className="ResultSet"
|
||||
style={{ height: `${this.props.resultSetHeight - RESULTS_CONTROLS_HEIGHT}px` }}
|
||||
>
|
||||
<Table
|
||||
data={data.map(function (row) {
|
||||
const newRow = {};
|
||||
|
|
|
@ -24,6 +24,36 @@ const defaultProps = {
|
|||
};
|
||||
|
||||
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);
|
||||
}
|
||||
|
@ -36,7 +66,13 @@ class SouthPane extends React.PureComponent {
|
|||
let results;
|
||||
if (latestQuery) {
|
||||
results = (
|
||||
<ResultSet showControls search query={latestQuery} actions={props.actions} />
|
||||
<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>;
|
||||
|
@ -48,7 +84,14 @@ class SouthPane extends React.PureComponent {
|
|||
eventKey={query.id}
|
||||
key={query.id}
|
||||
>
|
||||
<ResultSet query={query} visualize={false} csv={false} actions={props.actions} cache />
|
||||
<ResultSet
|
||||
query={query}
|
||||
visualize={false}
|
||||
csv={false}
|
||||
actions={props.actions}
|
||||
cache
|
||||
resultSetHeight={this.state.innerTabHeight}
|
||||
/>
|
||||
</Tab>
|
||||
));
|
||||
|
||||
|
@ -70,7 +113,9 @@ class SouthPane extends React.PureComponent {
|
|||
title="Query History"
|
||||
eventKey="History"
|
||||
>
|
||||
<QueryHistory queries={props.editorQueries} actions={props.actions} />
|
||||
<div style={{ height: `${this.state.innerTabHeight}px`, overflow: 'scroll' }}>
|
||||
<QueryHistory queries={props.editorQueries} actions={props.actions} />
|
||||
</div>
|
||||
</Tab>
|
||||
{dataPreviewTabs}
|
||||
</Tabs>
|
||||
|
|
Loading…
Reference in New Issue