mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
[sql-lab] fix scrolling in left hand panel for table meta data (#2641)
* fix scrolling in left hand panel for table meta data * add height prop * this prop is not used
This commit is contained in:
parent
e6063f2ddf
commit
899caf9449
@ -194,7 +194,7 @@ class SqlEditor extends React.PureComponent {
|
|||||||
>
|
>
|
||||||
<Col md={3}>
|
<Col md={3}>
|
||||||
<SqlEditorLeftBar
|
<SqlEditorLeftBar
|
||||||
style={{ height: this.props.height }}
|
height={this.sqlEditorHeight()}
|
||||||
queryEditor={this.props.queryEditor}
|
queryEditor={this.props.queryEditor}
|
||||||
tables={this.props.tables}
|
tables={this.props.tables}
|
||||||
actions={this.props.actions}
|
actions={this.props.actions}
|
||||||
|
@ -10,6 +10,7 @@ const $ = window.$ = require('jquery');
|
|||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
queryEditor: React.PropTypes.object.isRequired,
|
queryEditor: React.PropTypes.object.isRequired,
|
||||||
|
height: React.PropTypes.number.isRequired,
|
||||||
tables: React.PropTypes.array,
|
tables: React.PropTypes.array,
|
||||||
actions: React.PropTypes.object,
|
actions: React.PropTypes.object,
|
||||||
};
|
};
|
||||||
@ -128,91 +129,95 @@ class SqlEditorLeftBar extends React.PureComponent {
|
|||||||
closePopover(ref) {
|
closePopover(ref) {
|
||||||
this.refs[ref].hide();
|
this.refs[ref].hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const shouldShowReset = window.location.search === '?reset=1';
|
const shouldShowReset = window.location.search === '?reset=1';
|
||||||
|
const tableMetaDataHeight = this.props.height - 130; // 130 is the height of the selects above
|
||||||
return (
|
return (
|
||||||
<div className="scrollbar-container">
|
<div className="clearfix sql-toolbar">
|
||||||
<div className="clearfix sql-toolbar scrollbar-content">
|
<div>
|
||||||
<div>
|
<AsyncSelect
|
||||||
<AsyncSelect
|
dataEndpoint={
|
||||||
dataEndpoint={
|
'/databaseasync/api/' +
|
||||||
'/databaseasync/api/' +
|
'read?_flt_0_expose_in_sqllab=1&' +
|
||||||
'read?_flt_0_expose_in_sqllab=1&' +
|
'_oc_DatabaseView=database_name&' +
|
||||||
'_oc_DatabaseView=database_name&' +
|
'_od_DatabaseView=asc'
|
||||||
'_od_DatabaseView=asc'
|
}
|
||||||
}
|
onChange={this.onChange.bind(this)}
|
||||||
onChange={this.onChange.bind(this)}
|
value={this.props.queryEditor.dbId}
|
||||||
value={this.props.queryEditor.dbId}
|
databaseId={this.props.queryEditor.dbId}
|
||||||
databaseId={this.props.queryEditor.dbId}
|
actions={this.props.actions}
|
||||||
actions={this.props.actions}
|
valueRenderer={o => (
|
||||||
valueRenderer={o => (
|
<div>
|
||||||
<div>
|
<span className="text-muted">Database:</span> {o.label}
|
||||||
<span className="text-muted">Database:</span> {o.label}
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
mutator={this.dbMutator.bind(this)}
|
||||||
mutator={this.dbMutator.bind(this)}
|
placeholder="Select a database"
|
||||||
placeholder="Select a database"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
<div className="m-t-5">
|
||||||
<div className="m-t-5">
|
<Select
|
||||||
|
name="select-schema"
|
||||||
|
placeholder={`Select a schema (${this.state.schemaOptions.length})`}
|
||||||
|
options={this.state.schemaOptions}
|
||||||
|
value={this.props.queryEditor.schema}
|
||||||
|
valueRenderer={o => (
|
||||||
|
<div>
|
||||||
|
<span className="text-muted">Schema:</span> {o.label}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
isLoading={this.state.schemaLoading}
|
||||||
|
autosize={false}
|
||||||
|
onChange={this.changeSchema.bind(this)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="m-t-5">
|
||||||
|
{this.props.queryEditor.schema &&
|
||||||
<Select
|
<Select
|
||||||
name="select-schema"
|
name="select-table"
|
||||||
placeholder={`Select a schema (${this.state.schemaOptions.length})`}
|
ref="selectTable"
|
||||||
options={this.state.schemaOptions}
|
isLoading={this.state.tableLoading}
|
||||||
value={this.props.queryEditor.schema}
|
value={this.state.tableName}
|
||||||
valueRenderer={o => (
|
placeholder={`Add a table (${this.state.tableOptions.length})`}
|
||||||
<div>
|
|
||||||
<span className="text-muted">Schema:</span> {o.label}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
isLoading={this.state.schemaLoading}
|
|
||||||
autosize={false}
|
autosize={false}
|
||||||
onChange={this.changeSchema.bind(this)}
|
onChange={this.changeTable.bind(this)}
|
||||||
|
filterOptions={this.state.filterOptions}
|
||||||
|
options={this.state.tableOptions}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
{!this.props.queryEditor.schema &&
|
||||||
|
<Select
|
||||||
|
async
|
||||||
|
name="async-select-table"
|
||||||
|
ref="selectTable"
|
||||||
|
value={this.state.tableName}
|
||||||
|
placeholder={'Type to search ...'}
|
||||||
|
autosize={false}
|
||||||
|
onChange={this.changeTable.bind(this)}
|
||||||
|
loadOptions={this.getTableNamesBySubStr.bind(this)}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
<div className="m-t-5">
|
|
||||||
{this.props.queryEditor.schema &&
|
|
||||||
<Select
|
|
||||||
name="select-table"
|
|
||||||
ref="selectTable"
|
|
||||||
isLoading={this.state.tableLoading}
|
|
||||||
value={this.state.tableName}
|
|
||||||
placeholder={`Add a table (${this.state.tableOptions.length})`}
|
|
||||||
autosize={false}
|
|
||||||
onChange={this.changeTable.bind(this)}
|
|
||||||
filterOptions={this.state.filterOptions}
|
|
||||||
options={this.state.tableOptions}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
{!this.props.queryEditor.schema &&
|
|
||||||
<Select
|
|
||||||
async
|
|
||||||
name="async-select-table"
|
|
||||||
ref="selectTable"
|
|
||||||
value={this.state.tableName}
|
|
||||||
placeholder={'Type to search ...'}
|
|
||||||
autosize={false}
|
|
||||||
onChange={this.changeTable.bind(this)}
|
|
||||||
loadOptions={this.getTableNamesBySubStr.bind(this)}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div className="m-t-5">
|
|
||||||
{this.props.tables.map(table => (
|
|
||||||
<TableElement
|
|
||||||
table={table}
|
|
||||||
key={table.id}
|
|
||||||
actions={this.props.actions}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
{shouldShowReset &&
|
|
||||||
<Button bsSize="small" bsStyle="danger" onClick={this.resetState.bind(this)}>
|
|
||||||
<i className="fa fa-bomb" /> Reset State
|
|
||||||
</Button>
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div className="m-t-5">
|
||||||
|
<div className="scrollbar-container">
|
||||||
|
<div className="scrollbar-content" style={{ height: tableMetaDataHeight }}>
|
||||||
|
{this.props.tables.map(table => (
|
||||||
|
<TableElement
|
||||||
|
table={table}
|
||||||
|
key={table.id}
|
||||||
|
actions={this.props.actions}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{shouldShowReset &&
|
||||||
|
<Button bsSize="small" bsStyle="danger" onClick={this.resetState.bind(this)}>
|
||||||
|
<i className="fa fa-bomb" /> Reset State
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user