diff --git a/caravel/assets/javascripts/SqlLab/common.js b/caravel/assets/javascripts/SqlLab/common.js index 4851d5dba6b61..6d0ab5f5979df 100644 --- a/caravel/assets/javascripts/SqlLab/common.js +++ b/caravel/assets/javascripts/SqlLab/common.js @@ -4,3 +4,5 @@ export const STATE_BSSTYLE_MAP = { running: 'warning', success: 'success', }; + +export const STATUS_OPTIONS = ['success', 'failed', 'running']; diff --git a/caravel/assets/javascripts/SqlLab/components/App.jsx b/caravel/assets/javascripts/SqlLab/components/App.jsx new file mode 100644 index 0000000000000..9cf62e4559647 --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/App.jsx @@ -0,0 +1,71 @@ +import * as Actions from '../actions'; +import React from 'react'; + +import TabbedSqlEditors from './TabbedSqlEditors'; +import QueryAutoRefresh from './QueryAutoRefresh'; +import QuerySearch from './QuerySearch'; +import Alerts from './Alerts'; + +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; + +class App extends React.Component { + constructor(props) { + super(props); + this.state = { + hash: window.location.hash, + }; + } + componentDidMount() { + window.addEventListener('hashchange', this.onHashChanged.bind(this)); + } + componentWillUnmount() { + window.removeEventListener('hashchange', this.onHashChanged.bind(this)); + } + onHashChanged() { + this.setState({ hash: window.location.hash }); + } + render() { + if (this.state.hash) { + return ( +
+
+
+ +
+
+
+ ); + } + return ( +
+
+ + +
+
+ +
+
+
+
+ ); + } +} + +App.propTypes = { + alerts: React.PropTypes.array, +}; + +function mapStateToProps(state) { + return { + alerts: state.alerts, + }; +} +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators(Actions, dispatch), + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(App); diff --git a/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx b/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx new file mode 100644 index 0000000000000..cac31609ee81a --- /dev/null +++ b/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx @@ -0,0 +1,51 @@ +const $ = window.$ = require('jquery'); +import React from 'react'; +import Select from 'react-select'; + +class DatabaseSelect extends React.Component { + constructor(props) { + super(props); + this.state = { + databaseLoading: false, + databaseOptions: [], + databaseId: null, + }; + } + componentWillMount() { + this.fetchDatabaseOptions(); + } + changeDb(db) { + const val = (db) ? db.value : null; + this.setState({ databaseId: val }); + this.props.onChange(db); + } + fetchDatabaseOptions() { + this.setState({ databaseLoading: true }); + const url = '/databaseasync/api/read?_flt_0_expose_in_sqllab=1'; + $.get(url, (data) => { + const options = data.result.map((db) => ({ value: db.id, label: db.database_name })); + this.setState({ databaseOptions: options, databaseLoading: false }); + }); + } + render() { + return ( +
+ -
+
+ +
+
+ +
+
+ +