More improvements to SQL Lab (#1104)

* Handling timeouts

* Fixing timer on non-utc server

* Allowing async with results

* [bugfix] database is not selected

* Making sure the session is up and running

* Cleaning up query results and query objects

* Picking a groupby and metric field on visualize flow

* Showing local time in query history

* Using pull-left pull-right instead of grid layout for table metdata

Long column name were looking weird and icons were wrapping oddly

* Linting

* Eliminating east buttons under the sql editor

* Sort database dropdown by name

* Linting

* Allowing non-SELECT statements to run

* Adding a db config

* Making sqla checkout check cross-db

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

@@ -9,9 +9,7 @@ import {
   InputGroup,
   Form,
   FormControl,
-  DropdownButton,
   Label,
-  MenuItem,
   OverlayTrigger,
   Row,
   Tooltip,
@@ -27,7 +25,6 @@ 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';
 
@@ -52,8 +49,8 @@ class SqlEditor extends React.Component {
       this.startQuery();
     }
   }
-  runQuery() {
-    this.startQuery();
+  runQuery(runAsync = false) {
+    this.startQuery(runAsync);
   }
   startQuery(runAsync = false, ctas = false) {
     const that = this;
@@ -76,10 +73,10 @@ class SqlEditor extends React.Component {
 
     const sqlJsonUrl = '/caravel/sql_json/';
     const sqlJsonRequest = {
-      async: runAsync,
       client_id: query.id,
       database_id: this.props.queryEditor.dbId,
       json: true,
+      runAsync,
       schema: this.props.queryEditor.schema,
       select_as_cta: ctas,
       sql: this.props.queryEditor.sql,
@@ -149,17 +146,36 @@ class SqlEditor extends React.Component {
   }
 
   render() {
-    let runButtons = (
-      <ButtonGroup bsSize="small" className="inline m-r-5 pull-left">
+    let runButtons = [];
+    if (this.props.database && this.props.database.allow_run_sync) {
+      runButtons.push(
         <Button
           bsSize="small"
           bsStyle="primary"
           style={{ width: '100px' }}
-          onClick={this.runQuery.bind(this)}
+          onClick={this.runQuery.bind(this, false)}
           disabled={!(this.props.queryEditor.dbId)}
         >
           <i className="fa fa-table" /> Run Query
         </Button>
+      );
+    }
+    if (this.props.database && this.props.database.allow_run_async) {
+      runButtons.push(
+        <Button
+          bsSize="small"
+          bsStyle="primary"
+          style={{ width: '100px' }}
+          onClick={this.runQuery.bind(this, true)}
+          disabled={!(this.props.queryEditor.dbId)}
+        >
+          <i className="fa fa-table" /> Run Async
+        </Button>
+      );
+    }
+    runButtons = (
+      <ButtonGroup bsSize="small" className="inline m-r-5 pull-left">
+        {runButtons}
       </ButtonGroup>
     );
     if (this.props.latestQuery && this.props.latestQuery.state === 'running') {
@@ -176,35 +192,6 @@ class SqlEditor extends React.Component {
         </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) {
@@ -256,7 +243,6 @@ class SqlEditor extends React.Component {
         <div className="pull-right">
           {limitWarning}
           <Timer query={this.props.latestQuery} />
-          {rightButtons}
         </div>
       </div>
     );