More goodness

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

@@ -0,0 +1,40 @@
+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,
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+export default connect(null, mapDispatchToProps)(Alerts);

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

@@ -4,8 +4,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as Actions from '../actions';
 import QueryLink from './QueryLink';
+import shortid from 'shortid';
 
-// CSS
 import 'react-select/dist/react-select.css';
 
 const LeftPane = (props) => {
@@ -43,6 +43,12 @@ const LeftPane = (props) => {
           <Button onClick={props.actions.resetState.bind(this)}>
             Reset State
           </Button>
+          <Button onClick={props.actions.addAlert.bind(this, {
+            msg: 'This info alert is a demo alert',
+            bsStyle: 'info',
+          })}>
+            Add Alert
+          </Button>
         </div>
       </div>
     </div>

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

@@ -46,25 +46,12 @@ class SqlEditor extends React.Component {
       this.startQuery();
     }
   }
-  getTableOptions(input, callback) {
-    const url = '/tableasync/api/read?_oc_DatabaseAsync=database_name&_od_DatabaseAsync=asc';
-    $.get(url, function (data) {
-      const options = [];
-      for (let i = 0; i < data.pks.length; i++) {
-        options.push({ value: data.pks[i], label: data.result[i].table_name });
-      }
-      callback(null, {
-        options,
-        cache: false,
-      });
-    });
-  }
   startQuery() {
     const that = this;
     const query = {
       id: shortid.generate(),
       sqlEditorId: this.props.queryEditor.id,
-      sql: this.state.sql,
+      sql: this.props.queryEditor.sql,
       state: 'running',
       tab: this.props.queryEditor.title,
       dbId: this.props.queryEditor.dbId,
@@ -72,7 +59,7 @@ class SqlEditor extends React.Component {
     };
     const url = '/caravel/sql_json/';
     const data = {
-      sql: this.state.sql,
+      sql: this.props.queryEditor.sql,
       database_id: this.props.queryEditor.dbId,
       schema: this.props.queryEditor.schema,
       json: true,

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

@@ -29,19 +29,6 @@ class SqlEditorTopToolbar extends React.Component {
     this.fetchSchemas();
     this.fetchTables();
   }
-  getTableOptions(input, callback) {
-    const url = '/tableasync/api/read?_oc_DatabaseAsync=database_name&_od_DatabaseAsync=asc';
-    $.get(url, function (data) {
-      const options = [];
-      for (let i = 0; i < data.pks.length; i++) {
-        options.push({ value: data.pks[i], label: data.result[i].table_name });
-      }
-      callback(null, {
-        options,
-        cache: false,
-      });
-    });
-  }
   getSql(table) {
     let cols = '';
     table.columns.forEach(function (col, i) {
@@ -70,16 +57,15 @@ class SqlEditorTopToolbar extends React.Component {
     const actualDbId = dbId || this.props.queryEditor.dbId;
     if (actualDbId) {
       const actualSchema = schema || this.props.queryEditor.schema;
-      const that = this;
       this.setState({ tableLoading: true });
       this.setState({ tableOptions: [] });
       const url = `/caravel/tables/${actualDbId}/${actualSchema}`;
-      $.get(url, function (data) {
+      $.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];
-        that.setState({ tableOptions });
-        that.setState({ tableLoading: false });
+        this.setState({ tableOptions });
+        this.setState({ tableLoading: false });
       });
     }
   }
@@ -89,16 +75,15 @@ class SqlEditorTopToolbar extends React.Component {
     this.fetchTables(this.props.queryEditor.dbId, schema);
   }
   fetchSchemas(dbId) {
-    const that = this;
     const actualDbId = dbId || this.props.queryEditor.dbId;
     if (actualDbId) {
       this.setState({ schemaLoading: true });
       const url = `/databasetablesasync/api/read?_flt_0_id=${actualDbId}`;
-      $.get(url, function (data) {
+      $.get(url, (data) => {
         const schemas = data.result[0].all_schema_names;
         const schemaOptions = schemas.map((s) => ({ value: s, label: s }));
-        that.setState({ schemaOptions });
-        that.setState({ schemaLoading: false });
+        this.setState({ schemaOptions });
+        this.setState({ schemaLoading: false });
       });
     }
   }
@@ -115,12 +100,11 @@ class SqlEditorTopToolbar extends React.Component {
   }
   fetchDatabaseOptions() {
     this.setState({ databaseLoading: true });
-    const that = this;
     const url = '/databaseasync/api/read';
-    $.get(url, function (data) {
+    $.get(url, (data) => {
       const options = data.result.map((db) => ({ value: db.id, label: db.database_name }));
-      that.setState({ databaseOptions: options });
-      that.setState({ databaseLoading: false });
+      this.setState({ databaseOptions: options });
+      this.setState({ databaseLoading: false });
     });
   }
   closePopover(ref) {
@@ -128,20 +112,25 @@ class SqlEditorTopToolbar extends React.Component {
   }
   changeTable(tableOpt) {
     const tableName = tableOpt.value;
-    const that = this;
     const qe = this.props.queryEditor;
     const url = `/caravel/table/${qe.dbId}/${tableName}/${qe.schema}/`;
-    $.get(url, function (data) {
-      that.props.actions.addTable({
+    $.get(url, (data) => {
+      this.props.actions.addTable({
         id: shortid.generate(),
-        dbId: that.props.queryEditor.dbId,
-        queryEditorId: that.props.queryEditor.id,
+        dbId: this.props.queryEditor.dbId,
+        queryEditorId: this.props.queryEditor.id,
         name: data.name,
         schema: qe.schema,
         columns: data.columns,
         expanded: true,
         showPopup: false,
       });
+    })
+    .fail((err) => {
+      this.props.actions.addAlert({
+        msg: 'Error occurred while fetching metadata',
+        bsStyle: 'danger',
+      });
     });
   }
   render() {

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

@@ -15,13 +15,24 @@ class QueryEditors extends React.Component {
       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;
+      }
+    }
+  }
   newQueryEditor() {
     queryCount++;
-    const dbId = (this.props.workspaceDatabase) ? this.props.workspaceDatabase.id : null;
+    const activeQueryEditor = this.activeQueryEditor();
+    console.log(activeQueryEditor);
     const qe = {
       id: shortid.generate(),
       title: `Query ${queryCount}`,
-      dbId,
+      dbId: (activeQueryEditor) ? activeQueryEditor.dbId : null,
+      schema: (activeQueryEditor) ? activeQueryEditor.schema : null,
       autorun: false,
       sql: 'SELECT ...',
     };
@@ -49,7 +60,7 @@ class QueryEditors extends React.Component {
           <DropdownButton
             bsSize="small"
             id={'ddbtn-tab-' + i}
-            className="no-shadow"
+            className="no-shadow tab-caret"
             id="bg-vertical-dropdown-1"
           >
             <MenuItem eventKey="1" onClick={this.props.actions.removeQueryEditor.bind(this, qe)}>
@@ -92,7 +103,6 @@ QueryEditors.propTypes = {
   queries: React.PropTypes.array,
   queryEditors: React.PropTypes.array,
   tabHistory: React.PropTypes.array,
-  workspaceDatabase: React.PropTypes.object,
 };
 QueryEditors.defaultProps = {
   tabHistory: [],
@@ -103,7 +113,6 @@ function mapStateToProps(state) {
   return {
     queryEditors: state.queryEditors,
     queries: state.queries,
-    workspaceDatabase: state.workspaceDatabase,
     tabHistory: state.tabHistory,
   };
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Modal } from 'react-bootstrap';
+import { Alert, Button, Grid, Row, Col, Modal } from 'react-bootstrap';
 
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -7,65 +7,145 @@ import * as Actions from '../actions';
 
 import Select from 'react-select';
 import { Table } from 'reactable';
+import shortid from 'shortid';
+
+const $ = require('jquery');
 
 class VisualizeModal extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      chartType: null,
+      chartType: 'line',
+      datasourceName: shortid.generate(),
+      columns: {},
     };
   }
-  changeChartType(event) {
-    this.setState({ chartType: event.target.value });
+  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,
+    };
+    window.open('/caravel/sqllab_viz/?' + $.param(vizOptions));
+  }
+  changeDatasourceName(event) {
+    this.setState({ datasourceName: event.target.value });
+  }
+  changeCheckbox(attr, col, event) {
+    console.log([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: option.value });
+    columns = Object.assign({}, columns, { [col]: column });
+    this.setState({ columns });
   }
   render() {
+    console.log(this.state);
     if (!(this.props.query)) {
       return <div />;
     }
-    const cols = this.props.query.results.columns;
+    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 (mock)</Modal.Title>
+            <Modal.Title>
+              Visualize <span className="alert alert-danger">under construction</span>
+            </Modal.Title>
           </Modal.Header>
           <Modal.Body>
-            <Alert bsStyle="danger">Not functional - Work in progress!</Alert>
-            <div>
-              <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)}
-              />
-              <Table
-                className="table table-condensed"
-                columns={['column', 'is_dimension', 'is_date', 'agg_func']}
-                data={cols.map((col) => ({
-                  column: col,
-                  is_dimension: <input type="checkbox" className="form-control" />,
-                  is_date: <input type="checkbox" className="form-control" />,
-                  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)' },
-                      ]}
-                    />
-                  ),
-                }))}
-              />
+            <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>