pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 08:39:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

[sql-lab] fix scrolling in left hand panel for table meta data (#2641)

Browse Source 
* fix scrolling in left hand panel for table meta data

* add height prop

* this prop is not used
This commit is contained in:
Alanna Scott 2017-04-18 23:24:04 -07:00 committed by GitHub
parent e6063f2ddf
commit 899caf9449
2 changed files with 83 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
superset/assets/javascripts/SqlLab/components/SqlEditor.jsx
View File

@ -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}

159
superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
View File

@ -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>
); );
} }