SQL Lab - A multi-tab SQL editor (#514)

* Carapal react mockup

This is really just a mock up written in React to try different
components. It could become scaffolding to build a prototype, or not.

* Merging in Alanna's theme tweaks for SQL lab

* Tweak the display of the alert message in navbar

* Sketching the middleware refresh for Queries

* Adjustments

* Implement timer sync.

* CTAS

* Refactor the queries to be stored as a dict. (#994)

* Download csv endpoint. (#992)

* CSV download engdpoint.

* Use lower case booleans.

* Replcate loop with the object lookup by key.

* First changes for the sync

* Address comments

* Fix query deletions. Update only the queries from the store.

* Sync queries using tmp_id.

* simplify

* Fix the tests in the carapal. (#1023)

* Sync queries using tmp_id.

* Fix the unit tests

* Bux fixes. Pass 2.

* Tweakin' & linting

* Adding alpha label to the SQL LAb navbar entry

* Fixing the python unit tests

caravel/assets/javascripts/SqlLab/TODO.md

@@ -0,0 +1,19 @@
+
+# TODO
+* Figure out how to organize the left panel, integrate Search
+* collapse sql beyond 10 lines
+* Security per-database (dropdown)
+* Get a to work
+
+## Cosmetic
+* Result set font is too big
+* lmiit/timer/buttons wrap
+* table label is transparent
+* SqlEditor buttons
+* use react-bootstrap-prompt for query title input
+* Make tabs look great
+
+# PROJECT
+* Write Runbook
+* Confirm backups
+* merge chef branch

caravel/assets/javascripts/SqlLab/actions.js

@@ -0,0 +1,116 @@
+export const RESET_STATE = 'RESET_STATE';
+export const ADD_QUERY_EDITOR = 'ADD_QUERY_EDITOR';
+export const REMOVE_QUERY_EDITOR = 'REMOVE_QUERY_EDITOR';
+export const ADD_TABLE = 'ADD_TABLE';
+export const REMOVE_TABLE = 'REMOVE_TABLE';
+export const START_QUERY = 'START_QUERY';
+export const STOP_QUERY = 'STOP_QUERY';
+export const END_QUERY = 'END_QUERY';
+export const REMOVE_QUERY = 'REMOVE_QUERY';
+export const EXPAND_TABLE = 'EXPAND_TABLE';
+export const COLLAPSE_TABLE = 'COLLAPSE_TABLE';
+export const QUERY_SUCCESS = 'QUERY_SUCCESS';
+export const QUERY_FAILED = 'QUERY_FAILED';
+export const QUERY_EDITOR_SETDB = 'QUERY_EDITOR_SETDB';
+export const QUERY_EDITOR_SET_SCHEMA = 'QUERY_EDITOR_SET_SCHEMA';
+export const QUERY_EDITOR_SET_TITLE = 'QUERY_EDITOR_SET_TITLE';
+export const QUERY_EDITOR_SET_AUTORUN = 'QUERY_EDITOR_SET_AUTORUN';
+export const QUERY_EDITOR_SET_SQL = 'QUERY_EDITOR_SET_SQL';
+export const SET_WORKSPACE_DB = 'SET_WORKSPACE_DB';
+export const ADD_WORKSPACE_QUERY = 'ADD_WORKSPACE_QUERY';
+export const REMOVE_WORKSPACE_QUERY = 'REMOVE_WORKSPACE_QUERY';
+export const SET_ACTIVE_QUERY_EDITOR = 'SET_ACTIVE_QUERY_EDITOR';
+export const ADD_ALERT = 'ADD_ALERT';
+export const REMOVE_ALERT = 'REMOVE_ALERT';
+export const REFRESH_QUERIES = 'REFRESH_QUERIES';
+
+export function resetState() {
+  return { type: RESET_STATE };
+}
+
+export function addQueryEditor(queryEditor) {
+  return { type: ADD_QUERY_EDITOR, queryEditor };
+}
+
+export function addAlert(alert) {
+  return { type: ADD_ALERT, alert };
+}
+
+export function removeAlert(alert) {
+  return { type: REMOVE_ALERT, alert };
+}
+
+export function setActiveQueryEditor(queryEditor) {
+  return { type: SET_ACTIVE_QUERY_EDITOR, queryEditor };
+}
+
+export function removeQueryEditor(queryEditor) {
+  return { type: REMOVE_QUERY_EDITOR, queryEditor };
+}
+
+export function removeQuery(query) {
+  return { type: REMOVE_QUERY, query };
+}
+
+export function queryEditorSetDb(queryEditor, dbId) {
+  return { type: QUERY_EDITOR_SETDB, queryEditor, dbId };
+}
+
+export function queryEditorSetSchema(queryEditor, schema) {
+  return { type: QUERY_EDITOR_SET_SCHEMA, queryEditor, schema };
+}
+
+export function queryEditorSetAutorun(queryEditor, autorun) {
+  return { type: QUERY_EDITOR_SET_AUTORUN, queryEditor, autorun };
+}
+
+export function queryEditorSetTitle(queryEditor, title) {
+  return { type: QUERY_EDITOR_SET_TITLE, queryEditor, title };
+}
+
+export function queryEditorSetSql(queryEditor, sql) {
+  return { type: QUERY_EDITOR_SET_SQL, queryEditor, sql };
+}
+
+export function addTable(table) {
+  return { type: ADD_TABLE, table };
+}
+
+export function expandTable(table) {
+  return { type: EXPAND_TABLE, table };
+}
+
+export function collapseTable(table) {
+  return { type: COLLAPSE_TABLE, table };
+}
+
+export function removeTable(table) {
+  return { type: REMOVE_TABLE, table };
+}
+
+export function startQuery(query) {
+  return { type: START_QUERY, query };
+}
+
+export function stopQuery(query) {
+  return { type: STOP_QUERY, query };
+}
+
+export function querySuccess(query, results) {
+  return { type: QUERY_SUCCESS, query, results };
+}
+
+export function queryFailed(query, msg) {
+  return { type: QUERY_FAILED, query, msg };
+}
+
+export function addWorkspaceQuery(query) {
+  return { type: ADD_WORKSPACE_QUERY, query };
+}
+
+export function removeWorkspaceQuery(query) {
+  return { type: REMOVE_WORKSPACE_QUERY, query };
+}
+export function refreshQueries(alteredQueries) {
+  return { type: REFRESH_QUERIES, alteredQueries };
+}

caravel/assets/javascripts/SqlLab/common.js

@@ -0,0 +1,6 @@
+export const STATE_BSSTYLE_MAP = {
+  failed: 'danger',
+  pending: 'info',
+  running: 'warning',
+  success: 'success',
+};

caravel/assets/javascripts/SqlLab/components/Alerts.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Alert } from 'react-bootstrap';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+
+class Alerts extends React.Component {
+  removeAlert(alert) {
+    this.props.actions.removeAlert(alert);
+  }
+  render() {
+    const alerts = this.props.alerts.map((alert) =>
+      <Alert
+        bsStyle={alert.bsStyle}
+        style={{ width: '500px', textAlign: 'midddle', margin: '10px auto' }}
+      >
+        {alert.msg}
+        <i
+          className="fa fa-close pull-right"
+          onClick={this.removeAlert.bind(this, alert)}
+          style={{ cursor: 'pointer' }}
+        />
+      </Alert>
+    );
+    return (
+      <div>{alerts}</div>
+    );
+  }
+}
+
+Alerts.propTypes = {
+  alerts: React.PropTypes.array,
+  actions: React.PropTypes.object,
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+export default connect(null, mapDispatchToProps)(Alerts);

caravel/assets/javascripts/SqlLab/components/ButtonWithTooltip.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+const ButtonWithTooltip = (props) => {
+  let tooltip = (
+    <Tooltip id="tooltip">
+      {props.tooltip}
+    </Tooltip>
+  );
+  return (
+    <OverlayTrigger
+      overlay={tooltip}
+      delayShow={300}
+      placement={props.placement}
+      delayHide={150}
+    >
+      <Button
+        onClick={props.onClick}
+        bsStyle={props.bsStyle}
+        bsSize={props.bsSize}
+        disabled={props.disabled}
+        className={props.className}
+      >
+          {props.children}
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+ButtonWithTooltip.defaultProps = {
+  onClick: () => {},
+  disabled: false,
+  placement: 'top',
+  bsStyle: 'default',
+};
+
+ButtonWithTooltip.propTypes = {
+  bsSize: React.PropTypes.string,
+  bsStyle: React.PropTypes.string,
+  children: React.PropTypes.element,
+  className: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
+  onClick: React.PropTypes.func,
+  placement: React.PropTypes.string,
+  tooltip: React.PropTypes.string,
+};
+
+export default ButtonWithTooltip;

caravel/assets/javascripts/SqlLab/components/LeftPane.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Alert, Button } from 'react-bootstrap';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+import QueryLink from './QueryLink';
+
+import 'react-select/dist/react-select.css';
+
+const LeftPane = (props) => {
+  let queryElements;
+  if (props.workspaceQueries.length > 0) {
+    queryElements = props.workspaceQueries.map((q) => <QueryLink query={q} />);
+  } else {
+    queryElements = (
+      <Alert bsStyle="info">
+        Use the save button on the SQL editor to save a query
+        into this section for future reference.
+      </Alert>
+    );
+  }
+  return (
+    <div>
+      <div className="panel panel-default LeftPane">
+        <div className="panel-heading">
+          <div className="panel-title">
+            Saved Queries
+          </div>
+        </div>
+        <div className="panel-body">
+          {queryElements}
+        </div>
+      </div>
+      <br /><br />
+      <Button onClick={props.actions.resetState.bind(this)} bsStyle="danger">
+        Reset State
+      </Button>
+    </div>
+  );
+};
+
+LeftPane.propTypes = {
+  workspaceQueries: React.PropTypes.array,
+  actions: React.PropTypes.object,
+};
+
+LeftPane.defaultProps = {
+  workspaceQueries: [],
+};
+
+function mapStateToProps(state) {
+  return {
+    workspaceQueries: state.workspaceQueries,
+  };
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LeftPane);

caravel/assets/javascripts/SqlLab/components/Link.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+
+class Link extends React.Component {
+  render() {
+    let tooltip = (
+      <Tooltip id="tooltip">
+        {this.props.tooltip}
+      </Tooltip>
+    );
+    const link = (
+      <a
+        href={this.props.href}
+        onClick={this.props.onClick}
+        style={this.props.style}
+        className={'Link ' + this.props.className}
+      >
+          {this.props.children}
+      </a>
+    );
+    if (this.props.tooltip) {
+      return (
+        <OverlayTrigger
+          overlay={tooltip}
+          placement={this.props.placement}
+          delayShow={300}
+          delayHide={150}
+        >
+          {link}
+        </OverlayTrigger>
+      );
+    }
+    return link;
+  }
+}
+Link.propTypes = {
+  children: React.PropTypes.object,
+  className: React.PropTypes.string,
+  href: React.PropTypes.string,
+  onClick: React.PropTypes.func,
+  placement: React.PropTypes.string,
+  style: React.PropTypes.object,
+  tooltip: React.PropTypes.string,
+};
+Link.defaultProps = {
+  disabled: false,
+  href: '#',
+  tooltip: null,
+  placement: 'top',
+  onClick: () => {},
+};
+
+export default Link;

caravel/assets/javascripts/SqlLab/components/QueryAutoRefresh.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as Actions from '../actions';
+
+const $ = require('jquery');
+
+
+class QueryAutoRefresh extends React.Component {
+  componentWillMount() {
+    this.startTimer();
+  }
+  componentWillUnmount() {
+    this.stopTimer();
+  }
+  startTimer() {
+    if (!(this.timer)) {
+      this.timer = setInterval(this.stopwatch.bind(this), 5000);
+    }
+  }
+  stopTimer() {
+    clearInterval(this.timer);
+    this.timer = null;
+  }
+  stopwatch() {
+    const url = '/caravel/queries/0';
+    // No updates in case of failure.
+    $.getJSON(url, (data, status) => {
+      if (status === 'success') {
+        this.props.actions.refreshQueries(data);
+      }
+    });
+  }
+  render() {
+    return null;
+  }
+}
+QueryAutoRefresh.propTypes = {
+  actions: React.PropTypes.object,
+};
+QueryAutoRefresh.defaultProps = {
+  // queries: null,
+};
+
+function mapStateToProps() {
+  return {};
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(QueryAutoRefresh);

caravel/assets/javascripts/SqlLab/components/QueryHistory.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+
+import QueryTable from './QueryTable';
+import { Alert } from 'react-bootstrap';
+
+const QueryHistory = (props) => {
+  const activeQeId = props.tabHistory[props.tabHistory.length - 1];
+  const queriesArray = [];
+  for (const id in props.queries) {
+    if (props.queries[id].sqlEditorId === activeQeId) {
+      queriesArray.push(props.queries[id]);
+    }
+  }
+  if (queriesArray.length > 0) {
+    return (
+      <QueryTable
+        columns={[
+          'state', 'started', 'duration', 'progress',
+          'rows', 'sql', 'output', 'actions',
+        ]}
+        queries={queriesArray}
+      />
+    );
+  }
+  return (
+    <Alert bsStyle="info">
+      No query history yet...
+    </Alert>
+  );
+};
+
+QueryHistory.defaultProps = {
+  queries: {},
+};
+
+QueryHistory.propTypes = {
+  queries: React.PropTypes.object,
+  tabHistory: React.PropTypes.array,
+  actions: React.PropTypes.object,
+};
+
+function mapStateToProps(state) {
+  return {
+    queries: state.queries,
+    tabHistory: state.tabHistory,
+  };
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(QueryHistory);

caravel/assets/javascripts/SqlLab/components/QueryLink.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import Link from './Link';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+import shortid from 'shortid';
+
+// CSS
+import 'react-select/dist/react-select.css';
+
+class QueryLink extends React.Component {
+  popTab() {
+    const qe = {
+      id: shortid.generate(),
+      title: this.props.query.title,
+      dbId: this.props.query.dbId,
+      autorun: false,
+      sql: this.props.query.sql,
+    };
+    this.props.actions.addQueryEditor(qe);
+  }
+  render() {
+    return (
+      <div>
+        <div className="clearfix">
+          <div className="pull-left">
+            <a
+              href="#"
+              tooltip="Pop this query in a new tab"
+              onClick={this.popTab.bind(this)}
+            >
+              {this.props.query.title}
+            </a>
+          </div>
+          <div className="pull-right">
+            <Link
+              onClick={this.props.actions.removeWorkspaceQuery.bind(this, this.props.query)}
+              tooltip="Remove query from workspace"
+              href="#"
+            >
+              &times;
+            </Link>
+          </div>
+        </div>
+        <hr />
+      </div>
+    );
+  }
+}
+
+QueryLink.propTypes = {
+  query: React.PropTypes.object,
+  actions: React.PropTypes.object,
+};
+
+QueryLink.defaultProps = {
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+export default connect(null, mapDispatchToProps)(QueryLink);
+

caravel/assets/javascripts/SqlLab/components/QuerySearch.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import Select from 'react-select';
+import { Button } from 'react-bootstrap';
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+import QueryTable from './QueryTable';
+
+class QuerySearch extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      queryText: '',
+    };
+  }
+  changeQueryText(value) {
+    this.setState({ queryText: value });
+  }
+  render() {
+    const queries = this.props.queries;
+    return (
+      <div>
+        <div className="pane-cell pane-west m-t-5">
+          <div className="panel panel-default Workspace">
+            <div className="panel-heading">
+              <h6>
+                <i className="fa fa-search" /> Search Queries
+              </h6>
+            </div>
+            <div className="panel-body">
+              <input type="text" className="form-control" placeholder="Query Text" />
+              <Select
+                name="select-user"
+                placeholder="[User]"
+                options={['maxime_beauchemin', 'someone else']}
+                value={'maxime_beauchemin'}
+                className="m-t-10"
+                autosize={false}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="pane-cell">
+          <QueryTable
+            columns={['state', 'started', 'duration', 'rows', 'sql', 'actions']}
+            queries={queries}
+          />
+        </div>
+        <Button>Search!</Button>
+      </div>
+    );
+  }
+}
+QuerySearch.propTypes = {
+  queries: React.PropTypes.array,
+};
+QuerySearch.defaultProps = {
+  queries: [],
+};
+
+function mapStateToProps(state) {
+  return {
+    queries: state.queries,
+  };
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(QuerySearch);

caravel/assets/javascripts/SqlLab/components/QueryTable.jsx

@@ -0,0 +1,142 @@
+import React from 'react';
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+
+import moment from 'moment';
+import { Table } from 'reactable';
+import { ProgressBar } from 'react-bootstrap';
+
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { github } from 'react-syntax-highlighter/dist/styles';
+
+import Link from './Link';
+import VisualizeModal from './VisualizeModal';
+import { STATE_BSSTYLE_MAP } from '../common';
+import { fDuration } from '../../modules/dates';
+
+
+class QueryTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showVisualizeModal: false,
+      activeQuery: null,
+    };
+  }
+  hideVisualizeModal() {
+    this.setState({ showVisualizeModal: false });
+  }
+  showVisualizeModal(query) {
+    this.setState({ showVisualizeModal: true });
+    this.setState({ activeQuery: query });
+  }
+  restoreSql(query) {
+    this.props.actions.queryEditorSetSql({ id: query.sqlEditorId }, query.sql);
+  }
+  notImplemented() {
+    alert('Not implemented yet!');
+  }
+  render() {
+    const data = this.props.queries.map((query) => {
+      const q = Object.assign({}, query);
+      if (q.endDttm) {
+        q.duration = fDuration(q.startDttm, q.endDttm);
+      }
+      q.started = moment.utc(q.startDttm).format('HH:mm:ss');
+      const source = q.ctas ? q.executedSql : q.sql;
+      q.sql = (
+        <SyntaxHighlighter language="sql" style={github}>
+          {source || ''}
+        </SyntaxHighlighter>
+      );
+      q.output = q.tempTable;
+      q.progress = (
+        <ProgressBar
+          style={{ width: '75px' }}
+          striped
+          now={q.progress}
+          label={`${q.progress}%`}
+        />
+      );
+      let errorTooltip;
+      if (q.errorMessage) {
+        errorTooltip = (
+          <Link tooltip={q.errorMessage}>
+            <i className="fa fa-exclamation-circle text-danger" />
+          </Link>
+        );
+      }
+      q.state = (
+        <div>
+          <span className={'m-r-3 label label-' + STATE_BSSTYLE_MAP[q.state]}>
+            {q.state}
+          </span>
+          {errorTooltip}
+        </div>
+      );
+      q.actions = (
+        <div style={{ width: '75px' }}>
+          <Link
+            className="fa fa-line-chart m-r-3"
+            tooltip="Visualize the data out of this query"
+            onClick={this.showVisualizeModal.bind(this, query)}
+          />
+          <Link
+            className="fa fa-pencil m-r-3"
+            onClick={this.restoreSql.bind(this, query)}
+            tooltip="Overwrite text in editor with a query on this table"
+            placement="top"
+          />
+          <Link
+            className="fa fa-plus-circle m-r-3"
+            onClick={self.notImplemented}
+            tooltip="Run query in a new tab"
+            placement="top"
+          />
+          <Link
+            className="fa fa-trash m-r-3"
+            tooltip="Remove query from log"
+            onClick={this.props.actions.removeQuery.bind(this, query)}
+          />
+        </div>
+      );
+
+      return q;
+    }).reverse();
+    return (
+      <div>
+        <VisualizeModal
+          show={this.state.showVisualizeModal}
+          query={this.state.activeQuery}
+          onHide={this.hideVisualizeModal.bind(this)}
+        />
+        <Table
+          columns={this.props.columns}
+          className="table table-condensed"
+          data={data}
+        />
+      </div>
+    );
+  }
+}
+QueryTable.propTypes = {
+  columns: React.PropTypes.array,
+  actions: React.PropTypes.object,
+  queries: React.PropTypes.array,
+};
+QueryTable.defaultProps = {
+  columns: ['state', 'started', 'duration', 'progress', 'rows', 'sql', 'actions'],
+  queries: [],
+};
+
+function mapStateToProps() {
+  return {};
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+export default connect(mapStateToProps, mapDispatchToProps)(QueryTable);

caravel/assets/javascripts/SqlLab/components/ResultSet.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Alert, Button, ButtonGroup } from 'react-bootstrap';
+import { Table } from 'reactable';
+
+import VisualizeModal from './VisualizeModal';
+
+
+class ResultSet extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchText: '',
+      showModal: false,
+    };
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      this.state.searchText !== nextState.searchText ||
+      this.state.showModal !== nextState.showModal
+    );
+  }
+  changeSearch(event) {
+    this.setState({ searchText: event.target.value });
+  }
+  showModal() {
+    this.setState({ showModal: true });
+  }
+  hideModal() {
+    this.setState({ showModal: false });
+  }
+  render() {
+    const results = this.props.query.results;
+    let controls = <div className="noControls" />;
+    if (this.props.showControls) {
+      controls = (
+        <div className="ResultSetControls">
+          <div className="clearfix">
+            <div className="pull-left">
+              <ButtonGroup>
+                <Button
+                  bsSize="small"
+                  onClick={this.showModal.bind(this)}
+                >
+                  <i className="fa fa-line-chart m-l-1" /> Visualize
+                </Button>
+                <Button bsSize="small">
+                  <i className="fa fa-file-text-o" /> .CSV
+                </Button>
+              </ButtonGroup>
+            </div>
+            <div className="pull-right">
+              <input
+                type="text"
+                onChange={this.changeSearch.bind(this)}
+                className="form-control input-sm"
+                placeholder="Search Results"
+              />
+            </div>
+          </div>
+        </div>
+      );
+    }
+    if (results && results.data.length > 0) {
+      return (
+        <div>
+          <VisualizeModal
+            show={this.state.showModal}
+            query={this.props.query}
+            onHide={this.hideModal.bind(this)}
+          />
+          {controls}
+          <div className="ResultSet">
+            <Table
+              data={results.data}
+              columns={results.columns}
+              sortable
+              className="table table-condensed table-bordered"
+              filterBy={this.state.searchText}
+              filterable={results.columns}
+              hideFilterInput
+            />
+          </div>
+        </div>
+      );
+    }
+    return (<Alert bsStyle="warning">The query returned no data</Alert>);
+  }
+}
+ResultSet.propTypes = {
+  query: React.PropTypes.object,
+  showControls: React.PropTypes.boolean,
+  search: React.PropTypes.boolean,
+  searchText: React.PropTypes.string,
+};
+ResultSet.defaultProps = {
+  showControls: true,
+  search: true,
+  searchText: '',
+};
+
+export default ResultSet;

caravel/assets/javascripts/SqlLab/components/SouthPane.jsx

@@ -0,0 +1,46 @@
+import { Alert, Panel, Tab, Tabs } from 'react-bootstrap';
+import QueryHistory from './QueryHistory';
+import ResultSet from './ResultSet';
+import React from 'react';
+
+const SouthPane = function (props) {
+  let results = <div />;
+  if (props.latestQuery) {
+    if (props.latestQuery.state === 'running') {
+      results = (
+        <img className="loading" alt="Loading.." src="/static/assets/images/loading.gif" />
+      );
+    } else if (props.latestQuery.state === 'failed') {
+      results = <Alert bsStyle="danger">{props.latestQuery.msg}</Alert>;
+    } else if (props.latestQuery.state === 'success') {
+      results = <ResultSet showControls query={props.latestQuery} />;
+    }
+  } else {
+    results = <Alert bsStyle="info">Run a query to display results here</Alert>;
+  }
+  return (
+    <Tabs bsStyle="tabs">
+      <Tab title="Results" eventKey={1}>
+        <Panel>
+          <div style={{ overflow: 'auto' }}>
+            {results}
+          </div>
+        </Panel>
+      </Tab>
+      <Tab title="Query History" eventKey={2}>
+        <Panel>
+          <QueryHistory />
+        </Panel>
+      </Tab>
+    </Tabs>
+  );
+};
+
+SouthPane.propTypes = {
+  latestQuery: React.PropTypes.object,
+};
+
+SouthPane.defaultProps = {
+};
+
+export default SouthPane;

caravel/assets/javascripts/SqlLab/components/SqlEditor.jsx

@@ -0,0 +1,292 @@
+const $ = require('jquery');
+import { now } from '../../modules/dates';
+import React from 'react';
+import {
+  Button,
+  ButtonGroup,
+  FormGroup,
+  InputGroup,
+  Form,
+  FormControl,
+  DropdownButton,
+  Label,
+  MenuItem,
+  OverlayTrigger,
+  Tooltip,
+} from 'react-bootstrap';
+
+import AceEditor from 'react-ace';
+import 'brace/mode/sql';
+import 'brace/theme/github';
+import 'brace/ext/language_tools';
+
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as Actions from '../actions';
+
+import shortid from 'shortid';
+import ButtonWithTooltip from './ButtonWithTooltip';
+import SouthPane from './SouthPane';
+import Timer from './Timer';
+
+import SqlEditorTopToolbar from './SqlEditorTopToolbar';
+
+// CSS
+import 'react-select/dist/react-select.css';
+
+class SqlEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      autorun: props.queryEditor.autorun,
+      sql: props.queryEditor.sql,
+      ctas: '',
+    };
+  }
+  componentDidMount() {
+    this.onMount();
+  }
+  onMount() {
+    if (this.state.autorun) {
+      this.setState({ autorun: false });
+      this.props.actions.queryEditorSetAutorun(this.props.queryEditor, false);
+      this.startQuery();
+    }
+  }
+  runQuery() {
+    this.startQuery();
+  }
+  startQuery(runAsync = false, ctas = false) {
+    const that = this;
+    const query = {
+      dbId: this.props.queryEditor.dbId,
+      id: shortid.generate(),
+      progress: 0,
+      sql: this.props.queryEditor.sql,
+      sqlEditorId: this.props.queryEditor.id,
+      startDttm: now(),
+      state: 'running',
+      tab: this.props.queryEditor.title,
+    };
+    if (runAsync) {
+      query.state = 'pending';
+    }
+
+    // Execute the Query
+    that.props.actions.startQuery(query);
+
+    const sqlJsonUrl = '/caravel/sql_json/';
+    const sqlJsonRequest = {
+      async: runAsync,
+      client_id: query.id,
+      database_id: this.props.queryEditor.dbId,
+      json: true,
+      schema: this.props.queryEditor.schema,
+      select_as_cta: ctas,
+      sql: this.props.queryEditor.sql,
+      sql_editor_id: this.props.queryEditor.id,
+      tab: this.props.queryEditor.title,
+      tmp_table_name: this.state.ctas,
+    };
+    $.ajax({
+      type: 'POST',
+      dataType: 'json',
+      url: sqlJsonUrl,
+      data: sqlJsonRequest,
+      success(results) {
+        if (!runAsync) {
+          that.props.actions.querySuccess(query, results);
+        }
+      },
+      error(err) {
+        let msg;
+        try {
+          msg = err.responseJSON.error;
+        } catch (e) {
+          msg = (err.responseText) ? err.responseText : e;
+        }
+        if (typeof(msg) !== 'string') {
+          msg = JSON.stringify(msg);
+        }
+        that.props.actions.queryFailed(query, msg);
+      },
+    });
+  }
+  stopQuery() {
+    this.props.actions.stopQuery(this.props.latestQuery);
+  }
+  createTableAs() {
+    this.startQuery(true, true);
+  }
+  textChange(text) {
+    this.setState({ sql: text });
+    this.props.actions.queryEditorSetSql(this.props.queryEditor, text);
+  }
+  addWorkspaceQuery() {
+    this.props.actions.addWorkspaceQuery({
+      id: shortid.generate(),
+      sql: this.state.sql,
+      dbId: this.props.queryEditor.dbId,
+      schema: this.props.queryEditor.schema,
+      title: this.props.queryEditor.title,
+    });
+  }
+  ctasChange() {}
+  visualize() {}
+  ctasChanged(event) {
+    this.setState({ ctas: event.target.value });
+  }
+  render() {
+    let runButtons = (
+      <ButtonGroup bsSize="small" className="inline m-r-5 pull-left">
+        <Button
+          bsSize="small"
+          bsStyle="primary"
+          style={{ width: '100px' }}
+          onClick={this.runQuery.bind(this)}
+          disabled={!(this.props.queryEditor.dbId)}
+        >
+          <i className="fa fa-table" /> Run Query
+        </Button>
+      </ButtonGroup>
+    );
+    if (this.props.latestQuery && this.props.latestQuery.state === 'running') {
+      runButtons = (
+        <ButtonGroup bsSize="small" className="inline m-r-5 pull-left">
+          <Button
+            bsStyle="primary"
+            bsSize="small"
+            style={{ width: '100px' }}
+            onClick={this.stopQuery.bind(this)}
+          >
+            <a className="fa fa-stop" /> Stop
+          </Button>
+        </ButtonGroup>
+      );
+    }
+    const rightButtons = (
+      <ButtonGroup className="inlineblock">
+        <ButtonWithTooltip
+          tooltip="Save this query in your workspace"
+          placement="left"
+          bsSize="small"
+          onClick={this.addWorkspaceQuery.bind(this)}
+        >
+          <i className="fa fa-save" />&nbsp;
+        </ButtonWithTooltip>
+        <DropdownButton
+          id="ddbtn-export"
+          pullRight
+          bsSize="small"
+          title={<i className="fa fa-file-o" />}
+        >
+          <MenuItem
+            onClick={this.notImplemented}
+          >
+            <i className="fa fa-file-text-o" /> export to .csv
+          </MenuItem>
+          <MenuItem
+            onClick={this.notImplemented}
+          >
+            <i className="fa fa-file-code-o" /> export to .json
+          </MenuItem>
+        </DropdownButton>
+      </ButtonGroup>
+    );
+    let limitWarning = null;
+    const rowLimit = 1000;
+    if (this.props.latestQuery && this.props.latestQuery.rows === rowLimit) {
+      const tooltip = (
+        <Tooltip id="tooltip">
+          It appears that the number of rows in the query results displayed
+          was limited on the server side to the {rowLimit} limit.
+        </Tooltip>
+      );
+      limitWarning = (
+        <OverlayTrigger placement="left" overlay={tooltip}>
+          <Label bsStyle="warning" className="m-r-5">LIMIT</Label>
+        </OverlayTrigger>
+      );
+    }
+    const editorBottomBar = (
+      <div className="sql-toolbar clearfix">
+        <div className="pull-left">
+          <Form inline>
+            {runButtons}
+            <FormGroup>
+              <InputGroup>
+                <FormControl
+                  type="text"
+                  bsSize="small"
+                  className="input-sm"
+                  placeholder="new table name"
+                  onChange={this.ctasChanged.bind(this)}
+                />
+                <InputGroup.Button>
+                  <Button
+                    bsSize="small"
+                    disabled={this.state.ctas.length === 0}
+                    onClick={this.createTableAs.bind(this)}
+                  >
+                    <i className="fa fa-table" /> CTAS
+                  </Button>
+                </InputGroup.Button>
+              </InputGroup>
+            </FormGroup>
+          </Form>
+        </div>
+        <div className="pull-right">
+          {limitWarning}
+          <Timer query={this.props.latestQuery} />
+          {rightButtons}
+        </div>
+      </div>
+    );
+    return (
+      <div className="SqlEditor">
+        <div>
+          <div>
+            <SqlEditorTopToolbar queryEditor={this.props.queryEditor} />
+            <AceEditor
+              mode="sql"
+              name={this.props.queryEditor.id}
+              theme="github"
+              minLines={5}
+              maxLines={30}
+              onChange={this.textChange.bind(this)}
+              height="200px"
+              width="100%"
+              editorProps={{ $blockScrolling: true }}
+              enableBasicAutocompletion
+              value={this.props.queryEditor.sql}
+            />
+            {editorBottomBar}
+            <br />
+            <SouthPane latestQuery={this.props.latestQuery} sqlEditor={this} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+SqlEditor.propTypes = {
+  queryEditor: React.PropTypes.object,
+  actions: React.PropTypes.object,
+  latestQuery: React.PropTypes.object,
+};
+
+SqlEditor.defaultProps = {
+};
+
+function mapStateToProps() {
+  return {};
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SqlEditor);

caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx

@@ -0,0 +1,271 @@
+const $ = window.$ = require('jquery');
+import React from 'react';
+import { Label, OverlayTrigger, Popover } from 'react-bootstrap';
+
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as Actions from '../actions';
+import shortid from 'shortid';
+import Select from 'react-select';
+import Link from './Link';
+
+// CSS
+import 'react-select/dist/react-select.css';
+
+class SqlEditorTopToolbar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      databaseLoading: false,
+      databaseOptions: [],
+      schemaLoading: false,
+      schemaOptions: [],
+      tableLoading: false,
+      tableOptions: [],
+    };
+  }
+  componentWillMount() {
+    this.fetchDatabaseOptions();
+    this.fetchSchemas();
+    this.fetchTables();
+  }
+  getSql(table) {
+    let cols = '';
+    table.columns.forEach(function (col, i) {
+      cols += col.name;
+      if (i < table.columns.length - 1) {
+        cols += ', ';
+      }
+    });
+    return `SELECT ${cols}\nFROM ${table.name}`;
+  }
+  selectStar(table) {
+    this.props.actions.queryEditorSetSql(this.props.queryEditor, this.getSql(table));
+  }
+  popTab(table) {
+    const qe = {
+      id: shortid.generate(),
+      title: table.name,
+      dbId: table.dbId,
+      schema: table.schema,
+      autorun: true,
+      sql: this.getSql(table),
+    };
+    this.props.actions.addQueryEditor(qe);
+  }
+  fetchTables(dbId, schema) {
+    const actualDbId = dbId || this.props.queryEditor.dbId;
+    if (actualDbId) {
+      const actualSchema = schema || this.props.queryEditor.schema;
+      this.setState({ tableLoading: true });
+      this.setState({ tableOptions: [] });
+      const url = `/caravel/tables/${actualDbId}/${actualSchema}`;
+      $.get(url, (data) => {
+        let tableOptions = data.tables.map((s) => ({ value: s, label: s }));
+        const views = data.views.map((s) => ({ value: s, label: '[view] ' + s }));
+        tableOptions = [...tableOptions, ...views];
+        this.setState({ tableOptions });
+        this.setState({ tableLoading: false });
+      });
+    }
+  }
+  changeSchema(schemaOpt) {
+    const schema = (schemaOpt) ? schemaOpt.value : null;
+    this.props.actions.queryEditorSetSchema(this.props.queryEditor, schema);
+    this.fetchTables(this.props.queryEditor.dbId, schema);
+  }
+  fetchSchemas(dbId) {
+    const actualDbId = dbId || this.props.queryEditor.dbId;
+    if (actualDbId) {
+      this.setState({ schemaLoading: true });
+      const url = `/databasetablesasync/api/read?_flt_0_id=${actualDbId}`;
+      $.get(url, (data) => {
+        const schemas = data.result[0].all_schema_names;
+        const schemaOptions = schemas.map((s) => ({ value: s, label: s }));
+        this.setState({ schemaOptions });
+        this.setState({ schemaLoading: false });
+      });
+    }
+  }
+  changeDb(db) {
+    const val = (db) ? db.value : null;
+    this.setState({ schemaOptions: [] });
+    this.props.actions.queryEditorSetDb(this.props.queryEditor, val);
+    if (!(db)) {
+      this.setState({ tableOptions: [] });
+      return;
+    }
+    this.fetchTables(val, this.props.queryEditor.schema);
+    this.fetchSchemas(val);
+  }
+  fetchDatabaseOptions() {
+    this.setState({ databaseLoading: true });
+    const url = '/databaseasync/api/read';
+    $.get(url, (data) => {
+      const options = data.result.map((db) => ({ value: db.id, label: db.database_name }));
+      this.setState({ databaseOptions: options });
+      this.setState({ databaseLoading: false });
+    });
+  }
+  closePopover(ref) {
+    this.refs[ref].hide();
+  }
+  changeTable(tableOpt) {
+    const tableName = tableOpt.value;
+    const qe = this.props.queryEditor;
+    const url = `/caravel/table/${qe.dbId}/${tableName}/${qe.schema}/`;
+    $.get(url, (data) => {
+      this.props.actions.addTable({
+        id: shortid.generate(),
+        dbId: this.props.queryEditor.dbId,
+        queryEditorId: this.props.queryEditor.id,
+        name: data.name,
+        schema: qe.schema,
+        columns: data.columns,
+        expanded: true,
+        showPopup: true,
+      });
+    })
+    .fail(() => {
+      this.props.actions.addAlert({
+        msg: 'Error occurred while fetching metadata',
+        bsStyle: 'danger',
+      });
+    });
+  }
+  render() {
+    const tables = this.props.tables.filter((t) => (t.queryEditorId === this.props.queryEditor.id));
+    const tablesEls = tables.map((table) => {
+      let cols = [];
+      if (table.columns) {
+        cols = table.columns.map((col) => (
+          <div className="clearfix">
+            <div className="pull-left m-r-10">{col.name}</div>
+            <div className="pull-right text-muted"> {col.type}</div>
+          </div>
+        ));
+      }
+      const popoverId = 'tblPopover_' + table.name;
+      const popoverTop = (
+        <div className="clearfix">
+          <div className="pull-left">
+            <Link
+              className="fa fa-pencil"
+              onClick={this.selectStar.bind(this, table)}
+              tooltip="Overwrite text in editor with a query on this table"
+              placement="left"
+              href="#"
+            />
+            <Link
+              className="fa fa-plus-circle"
+              onClick={this.popTab.bind(this, table)}
+              tooltip="Run query in a new tab"
+              placement="left"
+              href="#"
+            />
+          </div>
+          <div className="pull-right">
+            <Link
+              className="fa fa-close"
+              onClick={this.closePopover.bind(this, popoverId)}
+              href="#"
+            />
+          </div>
+        </div>
+      );
+      const popover = (
+        <Popover
+          id={popoverId}
+          className="tablePopover"
+          title={popoverTop}
+        >
+          {cols}
+        </Popover>
+      );
+      return (
+        <Label className="m-r-5 table-label" style={{ fontSize: '100%' }}>
+          <OverlayTrigger
+            trigger="click"
+            placement="bottom"
+            overlay={popover}
+            ref={popoverId}
+          >
+            <span className="m-r-5" style={{ cursor: 'pointer' }}>
+              {table.name}
+            </span>
+          </OverlayTrigger>
+          <i
+            className="fa fa-close"
+            style={{ cursor: 'pointer' }}
+            onClick={this.props.actions.removeTable.bind(this, table)}
+          />
+        </Label>
+      );
+    });
+    return (
+      <div className="clearfix sql-toolbar">
+        <div className="pull-left m-r-5">
+          <Select
+            name="select-db"
+            placeholder="[Database]"
+            options={this.state.databaseOptions}
+            value={this.props.queryEditor.dbId}
+            isLoading={this.state.databaseLoading}
+            autosize={false}
+            onChange={this.changeDb.bind(this)}
+          />
+        </div>
+        <div className="pull-left m-r-5">
+          <Select
+            name="select-schema"
+            placeholder="[Schema]"
+            options={this.state.schemaOptions}
+            value={this.props.queryEditor.schema}
+            isLoading={this.state.schemaLoading}
+            autosize={false}
+            onChange={this.changeSchema.bind(this)}
+          />
+        </div>
+        <div className="pull-left m-r-5">
+          <Select
+            name="select-table"
+            ref="selectTable"
+            isLoading={this.state.tableLoading}
+            placeholder="Add a table"
+            autosize={false}
+            value={this.state.tableName}
+            onChange={this.changeTable.bind(this)}
+            options={this.state.tableOptions}
+          />
+        </div>
+        <div className="pull-left m-r-5">
+          {tablesEls}
+        </div>
+      </div>
+    );
+  }
+}
+
+SqlEditorTopToolbar.propTypes = {
+  queryEditor: React.PropTypes.object,
+  tables: React.PropTypes.array,
+  actions: React.PropTypes.object,
+};
+
+SqlEditorTopToolbar.defaultProps = {
+  tables: [],
+};
+
+function mapStateToProps(state) {
+  return {
+    tables: state.tables,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SqlEditorTopToolbar);

caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { DropdownButton, MenuItem, Tab, Tabs } from 'react-bootstrap';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+import SqlEditor from './SqlEditor';
+import shortid from 'shortid';
+
+let queryCount = 1;
+
+class QueryEditors extends React.Component {
+  renameTab(qe) {
+    const newTitle = prompt('Enter a new title for the tab');
+    if (newTitle) {
+      this.props.actions.queryEditorSetTitle(qe, newTitle);
+    }
+  }
+  activeQueryEditor() {
+    const qeid = this.props.tabHistory[this.props.tabHistory.length - 1];
+    for (let i = 0; i < this.props.queryEditors.length; i++) {
+      const qe = this.props.queryEditors[i];
+      if (qe.id === qeid) {
+        return qe;
+      }
+    }
+    return null;
+  }
+  newQueryEditor() {
+    queryCount++;
+    const activeQueryEditor = this.activeQueryEditor();
+    const qe = {
+      id: shortid.generate(),
+      title: `Untitled Query ${queryCount}`,
+      dbId: (activeQueryEditor) ? activeQueryEditor.dbId : null,
+      schema: (activeQueryEditor) ? activeQueryEditor.schema : null,
+      autorun: false,
+      sql: 'SELECT ...',
+    };
+    this.props.actions.addQueryEditor(qe);
+  }
+  handleSelect(key) {
+    if (key === 'add_tab') {
+      this.newQueryEditor();
+    } else {
+      this.props.actions.setActiveQueryEditor({ id: key });
+    }
+  }
+  render() {
+    const editors = this.props.queryEditors.map((qe, i) => {
+      let latestQuery = this.props.queries[qe.latestQueryId];
+      const state = (latestQuery) ? latestQuery.state : '';
+      const tabTitle = (
+        <div>
+          <div className={'circle ' + state} /> {qe.title} {' '}
+          <DropdownButton
+            bsSize="small"
+            id={'ddbtn-tab-' + i}
+          >
+            <MenuItem eventKey="1" onClick={this.props.actions.removeQueryEditor.bind(this, qe)}>
+              <i className="fa fa-close" /> close tab
+            </MenuItem>
+            <MenuItem eventKey="2" onClick={this.renameTab.bind(this, qe)}>
+              <i className="fa fa-i-cursor" /> rename tab
+            </MenuItem>
+          </DropdownButton>
+        </div>
+      );
+      return (
+        <Tab
+          key={qe.id}
+          title={tabTitle}
+          eventKey={qe.id}
+        >
+          <div className="panel panel-default">
+            <div className="panel-body">
+              <SqlEditor
+                queryEditor={qe}
+                latestQuery={latestQuery}
+              />
+            </div>
+          </div>
+        </Tab>);
+    });
+    return (
+      <Tabs
+        bsStyle="tabs"
+        activeKey={this.props.tabHistory[this.props.tabHistory.length - 1]}
+        onSelect={this.handleSelect.bind(this)}
+      >
+        {editors}
+        <Tab title={<div><i className="fa fa-plus-circle" />&nbsp;</div>} eventKey="add_tab" />
+      </Tabs>
+    );
+  }
+}
+QueryEditors.propTypes = {
+  actions: React.PropTypes.object,
+  queries: React.PropTypes.object,
+  queryEditors: React.PropTypes.array,
+  tabHistory: React.PropTypes.array,
+};
+QueryEditors.defaultProps = {
+  tabHistory: [],
+  queryEditors: [],
+};
+
+function mapStateToProps(state) {
+  return {
+    queryEditors: state.queryEditors,
+    queries: state.queries,
+    tabHistory: state.tabHistory,
+  };
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(QueryEditors);

caravel/assets/javascripts/SqlLab/components/TableMetadata.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+const TableMetadata = function (props) {
+  return (
+    <BootstrapTable
+      condensed
+      data={props.table.columns}
+    >
+      <TableHeaderColumn dataField="id" isKey hidden>
+        id
+      </TableHeaderColumn>
+      <TableHeaderColumn dataField="name">Name</TableHeaderColumn>
+      <TableHeaderColumn dataField="type">Type</TableHeaderColumn>
+    </BootstrapTable>
+  );
+};
+
+TableMetadata.propTypes = {
+  table: React.PropTypes.object,
+};
+
+export default TableMetadata;

caravel/assets/javascripts/SqlLab/components/TableWorkspaceElement.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { ButtonGroup } from 'react-bootstrap';
+import Link from './Link';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+import shortid from 'shortid';
+
+// CSS
+import 'react-select/dist/react-select.css';
+
+class TableWorkspaceElement extends React.Component {
+  selectStar() {
+    let cols = '';
+    this.props.table.columns.forEach((col, i) => {
+      cols += col.name;
+      if (i < this.props.table.columns.length - 1) {
+        cols += ', ';
+      }
+    });
+    const sql = `SELECT ${cols}\nFROM ${this.props.table.name}`;
+    const qe = {
+      id: shortid.generate(),
+      title: this.props.table.name,
+      dbId: this.props.table.dbId,
+      autorun: true,
+      sql,
+    };
+    this.props.actions.addQueryEditor(qe);
+  }
+  render() {
+    let metadata = null;
+    let buttonToggle;
+    if (!this.props.table.expanded) {
+      buttonToggle = (
+        <Link
+          href="#"
+          onClick={this.props.actions.expandTable.bind(this, this.props.table)}
+          placement="right"
+          tooltip="Collapse the table's structure information"
+        >
+          <i className="fa fa-minus" /> {this.props.table.name}
+        </Link>
+      );
+      metadata = this.props.table.columns.map((col) =>
+        <div className="clearfix">
+          <span className="pull-left">{col.name}</span>
+          <span className="pull-right">{col.type}</span>
+        </div>
+      );
+      metadata = (
+        <div style={{ 'margin-bottom': '5px' }}>{metadata}</div>
+      );
+    } else {
+      buttonToggle = (
+        <Link
+          href="#"
+          onClick={this.props.actions.collapseTable.bind(this, this.props.table)}
+          placement="right"
+          tooltip="Expand the table's structure information"
+        >
+          <i className="fa fa-plus" /> {this.props.table.name}
+        </Link>
+      );
+    }
+    return (
+      <div className="ws-el">
+        {buttonToggle}
+        <ButtonGroup className="ws-el-controls pull-right">
+          <Link
+            className="fa fa-play"
+            onClick={this.selectStar.bind(this)}
+            tooltip="Run query in a new tab"
+            href="#"
+          />
+          <Link
+            className="fa fa-trash"
+            onClick={this.props.actions.removeTable.bind(this, this.props.table)}
+            tooltip="Remove from workspace"
+            href="#"
+          />
+        </ButtonGroup>
+        {metadata}
+      </div>
+    );
+  }
+}
+TableWorkspaceElement.propTypes = {
+  table: React.PropTypes.object,
+  actions: React.PropTypes.object,
+};
+TableWorkspaceElement.defaultProps = {
+  table: null,
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+export default connect(null, mapDispatchToProps)(TableWorkspaceElement);
+

caravel/assets/javascripts/SqlLab/components/Timer.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { now, fDuration } from '../../modules/dates';
+
+import { STATE_BSSTYLE_MAP } from '../common.js';
+
+class Timer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      clockStr: '',
+    };
+  }
+  componentWillMount() {
+    this.startTimer();
+  }
+  componentWillUnmount() {
+    this.stopTimer();
+  }
+  startTimer() {
+    if (!(this.timer)) {
+      this.timer = setInterval(this.stopwatch.bind(this), 30);
+    }
+  }
+  stopTimer() {
+    clearInterval(this.timer);
+    this.timer = null;
+  }
+  stopwatch() {
+    if (this.props && this.props.query) {
+      const since = (this.props.query.endDttm) ? this.props.query.endDttm : now();
+      const clockStr = fDuration(this.props.query.startDttm, since);
+      this.setState({ clockStr });
+      if (this.props.query.state !== 'running') {
+        this.stopTimer();
+      }
+    }
+  }
+  render() {
+    if (this.props.query && this.props.query.state === 'running') {
+      this.startTimer();
+    }
+    let timerSpan = null;
+    if (this.props && this.props.query) {
+      const bsStyle = STATE_BSSTYLE_MAP[this.props.query.state];
+      timerSpan = (
+        <span className={'inlineBlock m-r-5 label label-' + bsStyle}>
+          {this.state.clockStr}
+        </span>
+      );
+    }
+    return timerSpan;
+  }
+}
+Timer.propTypes = {
+  query: React.PropTypes.object,
+};
+Timer.defaultProps = {
+  query: null,
+};
+
+export default Timer;

caravel/assets/javascripts/SqlLab/components/VisualizeModal.jsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { Button, Col, Modal } from 'react-bootstrap';
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import * as Actions from '../actions';
+
+import Select from 'react-select';
+import { Table } from 'reactable';
+import shortid from 'shortid';
+
+class VisualizeModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      chartType: 'line',
+      datasourceName: shortid.generate(),
+      columns: {},
+    };
+  }
+  changeChartType(option) {
+    this.setState({ chartType: (option) ? option.value : null });
+  }
+  mergedColumns() {
+    const columns = Object.assign({}, this.state.columns);
+    if (this.props.query && this.props.query.results.columns) {
+      this.props.query.results.columns.forEach((col) => {
+        if (columns[col] === undefined) {
+          columns[col] = {};
+        }
+      });
+    }
+    return columns;
+  }
+  visualize() {
+    const vizOptions = {
+      chartType: this.state.chartType,
+      datasourceName: this.state.datasourceName,
+      columns: this.state.columns,
+      sql: this.props.query.sql,
+      dbId: this.props.query.dbId,
+    };
+    window.open('/caravel/sqllab_viz/?data=' + JSON.stringify(vizOptions));
+  }
+  changeDatasourceName(event) {
+    this.setState({ datasourceName: event.target.value });
+  }
+  changeCheckbox(attr, col, event) {
+    let columns = this.mergedColumns();
+    const column = Object.assign({}, columns[col], { [attr]: event.target.checked });
+    columns = Object.assign({}, columns, { [col]: column });
+    this.setState({ columns });
+  }
+  changeAggFunction(col, option) {
+    let columns = this.mergedColumns();
+    const val = (option) ? option.value : null;
+    const column = Object.assign({}, columns[col], { agg: val });
+    columns = Object.assign({}, columns, { [col]: column });
+    this.setState({ columns });
+  }
+  render() {
+    if (!(this.props.query)) {
+      return <div />;
+    }
+    const tableData = this.props.query.results.columns.map((col) => ({
+      column: col,
+      is_dimension: (
+        <input
+          type="checkbox"
+          onChange={this.changeCheckbox.bind(this, 'is_dim', col)}
+          checked={(this.state.columns[col]) ? this.state.columns[col].is_dim : false}
+          className="form-control"
+        />
+      ),
+      is_date: (
+        <input
+          type="checkbox"
+          className="form-control"
+          onChange={this.changeCheckbox.bind(this, 'is_date', col)}
+          checked={(this.state.columns[col]) ? this.state.columns[col].is_date : false}
+        />
+      ),
+      agg_func: (
+        <Select
+          options={[
+            { value: 'sum', label: 'SUM(x)' },
+            { value: 'min', label: 'MIN(x)' },
+            { value: 'max', label: 'MAX(x)' },
+            { value: 'avg', label: 'AVG(x)' },
+            { value: 'count_distinct', label: 'COUNT(DISTINCT x)' },
+          ]}
+          onChange={this.changeAggFunction.bind(this, col)}
+          value={(this.state.columns[col]) ? this.state.columns[col].agg : null}
+        />
+      ),
+    }));
+    const modal = (
+      <div className="VisualizeModal">
+        <Modal show={this.props.show} onHide={this.props.onHide}>
+          <Modal.Header closeButton>
+            <Modal.Title>
+              Visualize <span className="alert alert-danger">under construction</span>
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <div className="row">
+              <Col md={6}>
+                Chart Type
+                <Select
+                  name="select-chart-type"
+                  placeholder="[Chart Type]"
+                  options={[
+                    { value: 'line', label: 'Time Series - Line Chart' },
+                    { value: 'bar', label: 'Time Series - Bar Chart' },
+                    { value: 'bar_dist', label: 'Distribution - Bar Chart' },
+                    { value: 'pie', label: 'Pie Chart' },
+                  ]}
+                  value={this.state.chartType}
+                  autosize={false}
+                  onChange={this.changeChartType.bind(this)}
+                />
+              </Col>
+              <Col md={6}>
+                Datasource Name
+                <input
+                  type="text"
+                  className="form-control"
+                  placeholder="datasource name"
+                  onChange={this.changeDatasourceName.bind(this)}
+                  value={this.state.datasourceName}
+                />
+              </Col>
+            </div>
+            <hr />
+            <Table
+              className="table table-condensed"
+              columns={['column', 'is_dimension', 'is_date', 'agg_func']}
+              data={tableData}
+            />
+            <Button
+              onClick={this.visualize.bind(this)}
+              bsStyle="primary"
+            >
+              Visualize
+            </Button>
+          </Modal.Body>
+        </Modal>
+      </div>
+    );
+    return modal;
+  }
+}
+VisualizeModal.propTypes = {
+  query: React.PropTypes.object,
+  show: React.PropTypes.boolean,
+  onHide: React.PropTypes.function,
+};
+VisualizeModal.defaultProps = {
+  show: false,
+};
+
+function mapStateToProps() {
+  return {};
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+export default connect(mapStateToProps, mapDispatchToProps)(VisualizeModal);

caravel/assets/javascripts/SqlLab/index.jsx

@@ -0,0 +1,74 @@
+const $ = window.$ = require('jquery');
+const jQuery = window.jQuery = $; // eslint-disable-line
+require('bootstrap');
+
+import React from 'react';
+import { render } from 'react-dom';
+import * as Actions from './actions';
+
+import LeftPane from './components/LeftPane';
+import TabbedSqlEditors from './components/TabbedSqlEditors';
+import QueryAutoRefresh from './components/QueryAutoRefresh';
+import Alerts from './components/Alerts';
+
+import { bindActionCreators, compose, createStore } from 'redux';
+import { connect, Provider } from 'react-redux';
+
+import { initialState, sqlLabReducer } from './reducers';
+import persistState from 'redux-localstorage';
+
+require('./main.css');
+
+let enhancer = compose(persistState());
+if (process.env.NODE_ENV === 'dev') {
+  enhancer = compose(
+    persistState(), window.devToolsExtension && window.devToolsExtension()
+  );
+}
+let store = createStore(sqlLabReducer, initialState, enhancer);
+
+// jquery hack to highlight the navbar menu
+$('a[href="/caravel/sqllab"]').parent().addClass('active');
+
+const App = function (props) {
+  return (
+    <div className="App SqlLab">
+      <div className="container-fluid">
+        <QueryAutoRefresh />
+        <Alerts alerts={props.alerts} />
+        <div className="row">
+          <div className="col-md-9">
+            <TabbedSqlEditors />
+          </div>
+          <div className="col-md-3">
+            <LeftPane />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+App.propTypes = {
+  alerts: React.PropTypes.array,
+};
+
+function mapStateToProps(state) {
+  return {
+    alerts: state.alerts,
+  };
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+const ReduxedApp = connect(mapStateToProps, mapDispatchToProps)(App);
+
+render(
+  <Provider store={store}>
+    <ReduxedApp />
+  </Provider>,
+  document.getElementById('app')
+);

caravel/assets/javascripts/SqlLab/main.css

@@ -0,0 +1,229 @@
+#app {
+    position: absolute;
+    top: 65;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+.inlineBlock {
+    display: inline-block;
+}
+.valignTop {
+    vertical-align: top;
+}
+.inline {
+    display: inline;
+}
+.nopadding {
+    padding: 0px;
+}
+.panel.nopadding .panel-body {
+    padding: 0px;
+}
+
+.loading {
+    width: 50px;
+    margin-top: 15px;
+}
+.pane-cell {
+    padding: 10px;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+}
+.SqlEditor .header {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+.Workspace .btn-sm {
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+    margin-top: 2px;
+    padding: 4px;
+}
+.Workspace hr {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+div.Workspace {
+    height: 100%;
+    margin: 0px;
+}
+.SqlEditor .clock {
+    background-color: orange;
+    padding: 5px;
+}
+
+.padded {
+    padding: 10px;
+}
+
+.p-t-10 {
+    padding-top: 10px;
+}
+.p-t-5 {
+    padding-top: 5px;
+}
+.m-r-5 {
+    margin-right: 5px;
+}
+.m-r-3 {
+    margin-right: 3px;
+}
+.m-l-1 {
+    margin-left: 1px;
+}
+.m-r-10 {
+    margin-right: 10px;
+}
+.m-b-10 {
+    margin-bottom: 10px;
+}
+.m-t-5 {
+    margin-top: 5px;
+}
+.m-t-10 {
+    margin-top: 10px;
+}
+.p-t-10 {
+    padding-top: 10px;
+}
+.sqllab-toolbar {
+    padding-top: 5px;
+    border-bottom: 1px solid #DDD;
+}
+.no-shadow {
+    box-shadow: none;
+    background-color: transparent;
+}
+.pane-west {
+    height: 100%;
+    overflow: auto;
+}
+.circle {
+    border-radius: 50%;
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    background-color: #ccc;
+}
+.Pane2 {
+    width: 0;
+}
+.running {
+    background-color: lime;
+    color: black;
+}
+.success {
+    background-color: green;
+}
+.failed {
+    background-color: red;
+}
+
+.handle {
+    cursor: move;
+}
+.window {
+    z-index: 1000;
+    position: absolute;
+    width: 300px;
+    opacity: 0.85;
+    border: 1px solid #AAA;
+    max-height: 600px;
+    box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 25px
+}
+
+.SqlLab pre {
+    padding: 0px !important;
+    margin: 0px;
+    border: none;
+    font-size: 11px;
+    line-height: 125%;
+    background-color: transparent !important;
+}
+
+.Resizer {
+    background: #000;
+    opacity: .2;
+    z-index: 1;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding;
+    background-clip: padding-box;
+}
+
+.Resizer:hover {
+    -webkit-transition: all 2s ease;
+    transition: all 2s ease;
+}
+
+.Resizer.horizontal {
+    height: 10px;
+    margin: -5px 0;
+    border-top: 5px solid rgba(255, 255, 255, 0);
+    border-bottom: 5px solid rgba(255, 255, 255, 0);
+    cursor: row-resize;
+    width: 100%;
+    padding: 1px;
+}
+
+.Resizer.horizontal:hover {
+    border-top: 5px solid rgba(0, 0, 0, 0.5);
+    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.vertical {
+    width: 9px;
+    margin: 0 -5px;
+    border-left: 5px solid rgba(255, 255, 255, 0);
+    border-right: 5px solid rgba(255, 255, 255, 0);
+    cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+    border-left: 5px solid rgba(0, 0, 0, 0.5);
+    border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+.Resizer.disabled {
+    cursor: not-allowed;
+}
+.Resizer.disabled:hover {
+    border-color: transparent;
+}
+
+.popover{
+    max-width:400px;
+}
+.Select-menu-outer {
+    z-index: 1000;
+}
+.table-label {
+    margin-top: 5px;
+    margin-right: 10px;
+    float: left;
+}
+div.tablePopover {
+    opacity: 0.7 !important;
+}
+div.tablePopover:hover {
+    opacity: 1 !important;
+}
+.ResultSetControls {
+    padding-bottom: 3px;
+    padding-top: 3px;
+}
+
+.ace_editor {
+  border: 1px solid #ccc;
+  margin: 10px 0;
+}
+
+.Select-menu-outer {
+    min-width: 100%;
+    width: inherit;
+}
+.ace_content {
+    background-color: #f4f4f4;
+}

caravel/assets/javascripts/SqlLab/reducers.js

@@ -0,0 +1,186 @@
+import shortid from 'shortid';
+import * as actions from './actions';
+import { now } from '../modules/dates';
+
+const defaultQueryEditor = {
+  id: shortid.generate(),
+  title: 'Untitled Query',
+  sql: 'SELECT *\nFROM\nWHERE',
+  latestQueryId: null,
+  autorun: false,
+  dbId: null,
+};
+
+// TODO(bkyryliuk): document the object schemas
+export const initialState = {
+  alerts: [],
+  queries: {},
+  queryEditors: [defaultQueryEditor],
+  tabHistory: [defaultQueryEditor.id],
+  tables: [],
+  workspaceQueries: [],
+  queriesLastUpdate: 0,
+};
+
+function addToObject(state, arrKey, obj) {
+  const newObject = Object.assign({}, state[arrKey]);
+  const copiedObject = Object.assign({}, obj);
+
+  if (!copiedObject.id) {
+    copiedObject.id = shortid.generate();
+  }
+  newObject[copiedObject.id] = copiedObject;
+  return Object.assign({}, state, { [arrKey]: newObject });
+}
+
+function alterInObject(state, arrKey, obj, alterations) {
+  const newObject = Object.assign({}, state[arrKey]);
+  newObject[obj.id] = (Object.assign({}, newObject[obj.id], alterations));
+  return Object.assign({}, state, { [arrKey]: newObject });
+}
+
+function alterInArr(state, arrKey, obj, alterations) {
+  // Finds an item in an array in the state and replaces it with a
+  // new object with an altered property
+  const idKey = 'id';
+  const newArr = [];
+  state[arrKey].forEach((arrItem) => {
+    if (obj[idKey] === arrItem[idKey]) {
+      newArr.push(Object.assign({}, arrItem, alterations));
+    } else {
+      newArr.push(arrItem);
+    }
+  });
+  return Object.assign({}, state, { [arrKey]: newArr });
+}
+
+function removeFromArr(state, arrKey, obj, idKey = 'id') {
+  const newArr = [];
+  state[arrKey].forEach((arrItem) => {
+    if (!(obj[idKey] === arrItem[idKey])) {
+      newArr.push(arrItem);
+    }
+  });
+  return Object.assign({}, state, { [arrKey]: newArr });
+}
+
+function addToArr(state, arrKey, obj) {
+  const newObj = Object.assign({}, obj);
+  if (!newObj.id) {
+    newObj.id = shortid.generate();
+  }
+  const newState = {};
+  newState[arrKey] = [...state[arrKey], newObj];
+  return Object.assign({}, state, newState);
+}
+
+export const sqlLabReducer = function (state, action) {
+  const actionHandlers = {
+    [actions.ADD_QUERY_EDITOR]() {
+      const tabHistory = state.tabHistory.slice();
+      tabHistory.push(action.queryEditor.id);
+      const newState = Object.assign({}, state, { tabHistory });
+      return addToArr(newState, 'queryEditors', action.queryEditor);
+    },
+    [actions.REMOVE_QUERY_EDITOR]() {
+      let newState = removeFromArr(state, 'queryEditors', action.queryEditor);
+      // List of remaining queryEditor ids
+      const qeIds = newState.queryEditors.map((qe) => qe.id);
+      let th = state.tabHistory.slice();
+      th = th.filter((id) => qeIds.includes(id));
+      newState = Object.assign({}, newState, { tabHistory: th });
+      return newState;
+    },
+    [actions.REMOVE_QUERY]() {
+      const newQueries = Object.assign({}, state.queries);
+      delete newQueries[action.query.id];
+      return Object.assign({}, state, { queries: newQueries });
+    },
+    [actions.RESET_STATE]() {
+      return Object.assign({}, initialState);
+    },
+    [actions.ADD_TABLE]() {
+      return addToArr(state, 'tables', action.table);
+    },
+    [actions.EXPAND_TABLE]() {
+      return alterInArr(state, 'tables', action.table, { expanded: true });
+    },
+    [actions.COLLAPSE_TABLE]() {
+      return alterInArr(state, 'tables', action.table, { expanded: false });
+    },
+    [actions.REMOVE_TABLE]() {
+      return removeFromArr(state, 'tables', action.table);
+    },
+    [actions.START_QUERY]() {
+      const newState = addToObject(state, 'queries', action.query);
+      const sqlEditor = { id: action.query.sqlEditorId };
+      return alterInArr(newState, 'queryEditors', sqlEditor, { latestQueryId: action.query.id });
+    },
+    [actions.STOP_QUERY]() {
+      return alterInObject(state, 'queries', action.query, { state: 'stopped' });
+    },
+    [actions.QUERY_SUCCESS]() {
+      const alts = {
+        state: 'success',
+        results: action.results,
+        rows: action.results.data.length,
+        progress: 100,
+        endDttm: now(),
+      };
+      return alterInObject(state, 'queries', action.query, alts);
+    },
+    [actions.QUERY_FAILED]() {
+      const alts = { state: 'failed', msg: action.msg, endDttm: now() };
+      return alterInObject(state, 'queries', action.query, alts);
+    },
+    [actions.SET_ACTIVE_QUERY_EDITOR]() {
+      const qeIds = state.queryEditors.map((qe) => qe.id);
+      if (qeIds.includes(action.queryEditor.id)) {
+        const tabHistory = state.tabHistory.slice();
+        tabHistory.push(action.queryEditor.id);
+        return Object.assign({}, state, { tabHistory });
+      }
+      return state;
+    },
+    [actions.QUERY_EDITOR_SETDB]() {
+      return alterInArr(state, 'queryEditors', action.queryEditor, { dbId: action.dbId });
+    },
+    [actions.QUERY_EDITOR_SET_SCHEMA]() {
+      return alterInArr(state, 'queryEditors', action.queryEditor, { schema: action.schema });
+    },
+    [actions.QUERY_EDITOR_SET_TITLE]() {
+      return alterInArr(state, 'queryEditors', action.queryEditor, { title: action.title });
+    },
+    [actions.QUERY_EDITOR_SET_SQL]() {
+      return alterInArr(state, 'queryEditors', action.queryEditor, { sql: action.sql });
+    },
+    [actions.QUERY_EDITOR_SET_AUTORUN]() {
+      return alterInArr(state, 'queryEditors', action.queryEditor, { autorun: action.autorun });
+    },
+    [actions.ADD_WORKSPACE_QUERY]() {
+      return addToArr(state, 'workspaceQueries', action.query);
+    },
+    [actions.REMOVE_WORKSPACE_QUERY]() {
+      return removeFromArr(state, 'workspaceQueries', action.query);
+    },
+    [actions.ADD_ALERT]() {
+      return addToArr(state, 'alerts', action.alert);
+    },
+    [actions.REMOVE_ALERT]() {
+      return removeFromArr(state, 'alerts', action.alert);
+    },
+    [actions.REFRESH_QUERIES]() {
+      const newQueries = Object.assign({}, state.queries);
+      // Fetch the updates to the queries present in the store.
+      for (const queryId in state.queries) {
+        newQueries[queryId] = Object.assign(newQueries[queryId], action.alteredQueries[queryId]);
+      }
+      const queriesLastUpdate = now();
+      return Object.assign({}, state, { queries: newQueries, queriesLastUpdate });
+    },
+  };
+  if (action.type in actionHandlers) {
+    return actionHandlers[action.type]();
+  }
+  return state;
+};