Skip to content

Commit

Permalink
fix(sqllab): table refresh API endpoint (#10076)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ktmud
ktmud committed Jun 17, 2020
1 parent 29e9f2c commit 5d4d50a
Showing 1 changed file with 58 additions and 42 deletions.
100 changes: 58 additions & 42 deletions superset-frontend/src/components/TableSelector.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@
*/
import React from 'react';
import PropTypes from 'prop-types';
import Select from 'src/components/Select';
import { Select, AsyncSelect } from 'src/components/Select';
import { ControlLabel, Label } from 'react-bootstrap';
import { t } from '@superset-ui/translation';
import { SupersetClient } from '@superset-ui/connection';

import AsyncSelect from './AsyncSelect';
import SupersetAsyncSelect from './AsyncSelect';
import RefreshLabel from './RefreshLabel';
import './TableSelector.less';

Expand Down Expand Up @@ -70,43 +70,45 @@ export default class TableSelector extends React.PureComponent {
schema: props.schema,
tableName: props.tableName,
};
this.changeSchema = this.changeSchema.bind(this);
this.onDatabaseChange = this.onDatabaseChange.bind(this);
this.onSchemaChange = this.onSchemaChange.bind(this);
this.changeTable = this.changeTable.bind(this);
this.dbMutator = this.dbMutator.bind(this);
this.getTableNamesBySubStr = this.getTableNamesBySubStr.bind(this);
this.onChange = this.onChange.bind(this);
this.onDatabaseChange = this.onDatabaseChange.bind(this);
}

componentDidMount() {
this.fetchSchemas(this.state.dbId);
this.fetchTables();
}
onDatabaseChange(db, force = false) {
const dbId = db ? db.id : null;
this.setState({ schemaOptions: [] });
this.props.onSchemaChange(null);
this.props.onDbChange(db);
this.fetchSchemas(dbId, force);
this.setState({ dbId, schema: null, tableOptions: [] }, this.onChange);
}

onChange() {
this.props.onChange({
dbId: this.state.dbId,
schema: this.state.schema,
tableName: this.state.tableName,
});
}
getTableNamesBySubStr(input) {
if (!this.props.dbId || !input) {

onDatabaseChange(db, selectChangeMeta) {
return this.changeDataBase(db);
}

onSchemaChange(schemaOpt, selectActionMeta) {
return this.changeSchema(schemaOpt);
}

getTableNamesBySubStr(substr = 'undefined') {
if (!this.props.dbId || !substr) {
const options = [];
return Promise.resolve({ options });
}
const encodedSchema = encodeURIComponent(this.props.schema);
const encodedSubstr = encodeURIComponent(substr);
return SupersetClient.get({
endpoint: encodeURI(
`/superset/tables/${this.props.dbId}/` +
`${encodeURIComponent(this.props.schema)}/${encodeURIComponent(
input,
)}`,
`/superset/tables/${this.props.dbId}/${encodedSchema}/${encodedSubstr}`,
),
}).then(({ json }) => {
const options = json.options.map(o => ({
Expand All @@ -119,6 +121,7 @@ export default class TableSelector extends React.PureComponent {
return { options };
});
}

dbMutator(data) {
this.props.getDbList(data.result);
if (data.result.length === 0) {
Expand All @@ -132,16 +135,15 @@ export default class TableSelector extends React.PureComponent {
label: `${row.backend} ${row.database_name}`,
}));
}
fetchTables(force, substr) {
const forceRefresh = force || false;

fetchTables(forceRefresh = false, substr = 'undefined') {
const { dbId, schema } = this.state;
const encodedSchema = encodeURIComponent(schema);
const encodedSubstr = encodeURIComponent(substr);
if (dbId && schema) {
this.setState(() => ({ tableLoading: true, tableOptions: [] }));
const endpoint = encodeURI(
`/superset/tables/${dbId}/` +
`${encodeURIComponent(schema)}/${encodeURIComponent(
substr,
)}/${forceRefresh}/`,
`/superset/tables/${dbId}/${encodedSchema}/${encodedSubstr}/${!!forceRefresh}/`,
);
return SupersetClient.get({ endpoint })
.then(({ json }) => {
Expand All @@ -166,13 +168,12 @@ export default class TableSelector extends React.PureComponent {
this.setState(() => ({ tableLoading: false, tableOptions: [] }));
return Promise.resolve();
}
fetchSchemas(dbId, force) {

fetchSchemas(dbId, forceRefresh = false) {
const actualDbId = dbId || this.props.dbId;
const forceRefresh = force || false;
if (actualDbId) {
this.setState({ schemaLoading: true });
const endpoint = `/superset/schemas/${actualDbId}/${forceRefresh}/`;

return SupersetClient.get({ endpoint })
.then(({ json }) => {
const schemaOptions = json.schemas.map(s => ({
Expand All @@ -188,9 +189,27 @@ export default class TableSelector extends React.PureComponent {
this.props.handleError(t('Error while fetching schema list'));
});
}

return Promise.resolve();
}

changeDataBase(db, force = false) {
const dbId = db ? db.id : null;
this.setState({ schemaOptions: [] });
this.props.onSchemaChange(null);
this.props.onDbChange(db);
this.fetchSchemas(dbId, force);
this.setState({ dbId, schema: null, tableOptions: [] }, this.onChange);
}

changeSchema(schemaOpt, force = false) {
const schema = schemaOpt ? schemaOpt.value : null;
this.props.onSchemaChange(schema);
this.setState({ schema }, () => {
this.fetchTables(force);
this.onChange();
});
}

changeTable(tableOpt) {
if (!tableOpt) {
this.setState({ tableName: '' });
Expand All @@ -203,14 +222,7 @@ export default class TableSelector extends React.PureComponent {
}
this.props.onTableChange(tableName, schemaName);
}
changeSchema(schemaOpt, force = false) {
const schema = schemaOpt ? schemaOpt.value : null;
this.props.onSchemaChange(schema);
this.setState({ schema }, () => {
this.fetchTables(force);
this.onChange();
});
}

renderDatabaseOption(db) {
return (
<span>
Expand All @@ -221,6 +233,7 @@ export default class TableSelector extends React.PureComponent {
</span>
);
}

renderTableOption(option) {
return (
<span className="TableLabel">
Expand All @@ -235,6 +248,7 @@ export default class TableSelector extends React.PureComponent {
</span>
);
}

renderSelectRow(select, refreshBtn) {
return (
<div className="section">
Expand All @@ -243,9 +257,10 @@ export default class TableSelector extends React.PureComponent {
</div>
);
}

renderDatabaseSelect() {
return this.renderSelectRow(
<AsyncSelect
<SupersetAsyncSelect
dataEndpoint={
'/api/v1/database/?q=' +
'(keys:!(none),' +
Expand All @@ -272,6 +287,7 @@ export default class TableSelector extends React.PureComponent {
/>,
);
}

renderSchema() {
return this.renderSelectRow(
<Select
Expand All @@ -286,14 +302,15 @@ export default class TableSelector extends React.PureComponent {
)}
isLoading={this.state.schemaLoading}
autosize={false}
onChange={this.changeSchema}
onChange={this.onSchemaChange}
/>,
<RefreshLabel
onClick={() => this.onDatabaseChange({ id: this.props.dbId }, true)}
tooltipContent={t('Force refresh schema list')}
/>,
);
}

renderTable() {
let tableSelectPlaceholder;
let tableSelectDisabled = false;
Expand All @@ -310,7 +327,6 @@ export default class TableSelector extends React.PureComponent {
const select = this.props.schema ? (
<Select
name="select-table"
ref="selectTable"
isLoading={this.state.tableLoading}
ignoreAccents={false}
placeholder={t('Select table or type table name')}
Expand All @@ -321,10 +337,8 @@ export default class TableSelector extends React.PureComponent {
optionRenderer={this.renderTableOption}
/>
) : (
<Select
async
<AsyncSelect
name="async-select-table"
ref="selectTable"
placeholder={tableSelectPlaceholder}
disabled={tableSelectDisabled}
autosize={false}
Expand All @@ -342,6 +356,7 @@ export default class TableSelector extends React.PureComponent {
/>,
);
}

renderSeeTableLabel() {
return (
<div className="section">
Expand All @@ -356,6 +371,7 @@ export default class TableSelector extends React.PureComponent {
</div>
);
}

render() {
return (
<div className="TableSelector">
Expand Down

0 comments on commit 5d4d50a

Please sign in to comment.