mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
[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 VisualizeModal from './VisualizeModal';
|
||||||
import HighlightedSql from './HighlightedSql';
|
import HighlightedSql from './HighlightedSql';
|
||||||
|
|
||||||
|
const RESULTS_CONTROLS_HEIGHT = 36;
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
actions: React.PropTypes.object,
|
actions: React.PropTypes.object,
|
||||||
csv: React.PropTypes.bool,
|
csv: React.PropTypes.bool,
|
||||||
@ -52,36 +54,6 @@ class ResultSet extends React.PureComponent {
|
|||||||
this.fetchResults(nextProps.query);
|
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() {
|
getControls() {
|
||||||
if (this.props.search || this.props.visualize || this.props.csv) {
|
if (this.props.search || this.props.visualize || this.props.csv) {
|
||||||
let csvButton;
|
let csvButton;
|
||||||
@ -223,7 +195,10 @@ class ResultSet extends React.PureComponent {
|
|||||||
/>
|
/>
|
||||||
{this.getControls.bind(this)()}
|
{this.getControls.bind(this)()}
|
||||||
{sql}
|
{sql}
|
||||||
<div className="ResultSet" style={{ height: `${this.state.resultSetHeight}px` }}>
|
<div
|
||||||
|
className="ResultSet"
|
||||||
|
style={{ height: `${this.props.resultSetHeight - RESULTS_CONTROLS_HEIGHT}px` }}
|
||||||
|
>
|
||||||
<Table
|
<Table
|
||||||
data={data.map(function (row) {
|
data={data.map(function (row) {
|
||||||
const newRow = {};
|
const newRow = {};
|
||||||
|
@ -24,6 +24,36 @@ const defaultProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
class SouthPane extends React.PureComponent {
|
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) {
|
switchTab(id) {
|
||||||
this.props.actions.setActiveSouthPaneTab(id);
|
this.props.actions.setActiveSouthPaneTab(id);
|
||||||
}
|
}
|
||||||
@ -36,7 +66,13 @@ class SouthPane extends React.PureComponent {
|
|||||||
let results;
|
let results;
|
||||||
if (latestQuery) {
|
if (latestQuery) {
|
||||||
results = (
|
results = (
|
||||||
<ResultSet showControls search query={latestQuery} actions={props.actions} />
|
<ResultSet
|
||||||
|
showControls
|
||||||
|
search
|
||||||
|
query={latestQuery}
|
||||||
|
actions={props.actions}
|
||||||
|
resultSetHeight={this.state.innerTabHeight}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
results = <Alert bsStyle="info">Run a query to display results here</Alert>;
|
results = <Alert bsStyle="info">Run a query to display results here</Alert>;
|
||||||
@ -48,7 +84,14 @@ class SouthPane extends React.PureComponent {
|
|||||||
eventKey={query.id}
|
eventKey={query.id}
|
||||||
key={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>
|
</Tab>
|
||||||
));
|
));
|
||||||
|
|
||||||
@ -70,7 +113,9 @@ class SouthPane extends React.PureComponent {
|
|||||||
title="Query History"
|
title="Query History"
|
||||||
eventKey="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>
|
</Tab>
|
||||||
{dataPreviewTabs}
|
{dataPreviewTabs}
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
Loading…
Reference in New Issue
Block a user